Custom classes, hints, tips and tricks to get the most out of your UIkit Projects.
UIkit3 has a convenient Scroll stack, into which you can drop many other stacks (buttons, headings, etc.) that it will turn into a link that when clicked will scroll smoothly to the element on the page linked to.
The Scroll stack has an offset setting, which is really handy if you don't want to scroll directly to the element, but a point slightly above it.
A typical use for the offset is when using the scroll stack on a page with a sticky menu: When clicked instead of the element you are scrolling to disappearing behind the sticky menu, you can tell the stack to "offset" it, so it the scroll stops before the element goers behind the menu.
This is all great, and in most instances, works well. But, there are times when you don't want to, or can't use the scroll stack, for example, if you are using the Button Group stack, so instead, you can apply both the scroll AND offset directly to the button, or anything you want to turn into a clickable link.
It's dead easy to do; this is how you do it for a button, other clickable stacks are the same....
uk-scroll="offset: 150"to the attribute, changing the offset value to whatever pixel offset you want (in this example it's 150px).
#divIDin this example the div ID is "newry".
In certain circumstances, particularly on single page "scrolling" websites, clicking a button added to the Off-Canvas stack with scrolling integration turned on fails to close the Off-Canvas menu.
You've built a single page website and are using the menu to scroll users up and down the page. On mobile you've added the Off-Canvas stack, to it you've added the Nav stack, and into it, you are adding buttons for the links via "empty" child stacks.
In the button stack, you've clicked "Scroll" integration, so the page scrolls smoothly up and down on clicks.
The problem is that while it all works as expected, upon clicking a button link, the Off-Canvas stack doesn't close.
If you've recently seen this behaviour, you're not alone. And no, you're not going mad either, it used to work.
Thankfully Lucas the UIkit3 RW developer has put a fix in place: The advanced setting options for buttons now contain a custom attribute option. The fix is to add the following...
Make sure to add it to the Custom Attributes setting, NOt custom CSS, and only add it if the Off-Canvas stack isn't closing.
To the best of my knowledge this issue, the Off-Canvas not closing on click is new. On a previous version (not sure which) things worked as expected. So, if you use this technique on a project you've recently updated, check it's working as expected. If not, use the trick above.
Sometimes you want to put an icon inline with a heading or body of text. You can do this using a myriad of native UIkit3 stacks if you wish, but a much simpler way is to simply insert the icon using some code.
<span uk-icon="icon: uikit; ratio: 1.0"></span>
Adding this code snippet to any text stack; heading, text, markdown, etc. will "pull in" the specified icon and make it inline-in with the text surrounding it.
In this example, the icon is the UIkit one, as used on this site a lot, and it's set to a ratio size of 1. This means its size is 1x that of the base font size. If you wanted the icon to be double the size of the base font, you'd set a ratio size of 2, and so on.
So, for instance...
<span uk-icon="icon: uikit; ratio: 1.0"></span> after.
Looks like this...
You can change the colour and size of the icon by adding to the code appropriately.
If you want the icon to be a link use this code instead...
<a href="" class="uk-icon-link" uk-icon="uikit"></a>
If you would like the icon to appear as a button use this...
<a href="" class="uk-icon-button" uk-icon="uikit"></a>
If you simply want an icon at the start of a block of text, the Text stack has this feature baked right in to the settings.
Check out the image below for the settings and see an example below the image.
When you add a field to a form with the name "subject", Forms cleverly converts the content of this field to the subject line of the email. This is a great feature and gives the person completing the form full control, but there are times when you want to use a pre-defined subject line, perhaps to enact a rule when the email lands in your inbox, here we will show you how to achieve this.
That's it. So long as you don't add another input and call it "subject", the message you put in the custom value box will automatically appear as the email subject line.
The best way to contact us is via email. Use the form provided or if you prefer, send an email direct to ObscureMyEmail
For support, please click the link at the top of the page.
UIkitter is a service offered by Caffeine Injection. A web design and management company based in Ireland.
Try the UIkitter support forum at RW4All.
We've avoided legal jargon and covering every minute detail down to the nth degree. Instead, we've focused on what we consider to be the essential stuff and answering some of the real world questions you might have.
We respect your right to privacy and will always do our absolute best to ensure we conform to not just the laws at the time, but also our moral obligation to you. That's why we will never knowingly allow anyone to use any data about you that we hold unless legally required to do so, and we will always keep it secure and (where possible) will remove all trace of it at your request.
Emails are typically kept until our inbox is full and we have a clear out and delete or archive all the old ones. We never use addresses obtained from emails for anything other than responding to the emails you send us. We don't harvest these emails for other purposes. Once we clear out our inbox and delete old emails from you, your details are gone.
Our newsletter signup process is distinct from other areas of consent when it comes to your data and uses a double opt-in/2 step verification confirmation that complies with all the latest regulations (GDPR, etc.). It includes a clear indication from you that you wish to be added to our newsletter list. There is no ambiguity in our signup process; you can't sign up by mistake, nor can anyone signup with your email address due to the double opt-in/2 step verification. We record the location, time and place that you signed up. Removing yourself from our newsletter list is easy: click the unsubscribe link in the newsletters we send or use the Unsubscribe feature on our website.
We don't share our newsletter lists with anyone else, other than the service we employ to send out our newsletters.
In most circumstances, we will respond within 30 days.
If we suspect any abuses of this requirement (multiple requests in a short space of time etc.), we reserve the right to refuse.
For most requests to be processed, we will need you to provide proof as to who you are and that you have a lawful right to access the data.
We value your privacy. No identifiable data is stored or passed to third parties. By continuing you agree to this statement.