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.

How?

It's dead easy to do; this is how you do it for a button, other clickable stacks are the same....

1. Add the element you want to be the link to the page, say a button.
2. Click the "advanced" button at the bottom of settings.
3. Add uk-scroll="offset: 150" to the attribute, changing the offset value to whatever pixel offset you want (in this example it's 150px).
4. In the link settings add#divID in this example the div ID is "newry".
5. Add the div ID to the advanced settings in the element you are scrolling to.

That's it.

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.

A typical scenario...

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...

uk-toggle="target: #offcanvas"

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.

Please Note

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...

Before <span uk-icon="icon: uikit; ratio: 1.0"></span> after.

Looks like this...

Before after.

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>

Example example.

If you would like the icon to appear as a button use this...

<a href="" class="uk-icon-button" uk-icon="uikit"></a>

Example Example.

And finally...

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.

1. Add an input field to your form and select "Hidden" in the Type dropdown.
2. Give the input the name "subject".
3. Tick "Custom Value" and add your pre-defined subject line.
4. Tick "Required"

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.