UIkit 2.0 – Simplified and with a new markdown editor

To take UIkit to the next level, we have been quite busy during the last two months. We completely overhauled the entire UIkit repository, simplified LESS variables, added a new component and squashed some bugs. An addition are the new add-ons which complement UIkit by offering extra functionality like a Markdown editor, datepicker, timepicker and more. Make sure to take a closer look at our Markdown editor which lets you write your markup with a realtime preview. The editor also supports syntax highlighting, an extendable toolbar and a full-screen mode.

New Add-ons

The new UIkit add-ons are stand-alone from UIkit and will be compiled separately. They can easily be included by adding their CSS and JavaScript files to the header of your UIkit project. All add-ons are stylable through UIkit themes and already come in different styles.

Besides the Markdown editor mentioned above, you now have the possibility of embedding a nifty datepicker in a form. Create a form password with a toggler to hide and show passwords. With the sortable add-on you can easily create lists that can be sorted by dragging and dropping. The sticky add-on makes elements remain at the top of the viewport, like a sticky navbar. And last but not least, the timepicker add-on to create a form input that simplifies time entries.

You will find detailed information on how to use these add-ons in the UIkit docs. If you are developing your own add-ons or have some ideas for improving the existing ones, send us a pull request. We appreciate any contribution!

New Components and icons

But that's not all! We added a new component - the toggle. It enables you to hide, switch or change the appearance of different contents through a button. It is also worth mentioning that we added the possibility of creating form icons. We also updated Font Awesome to 4.0.3 which brings you new icons. Please keep in mind that Font Awesome 4 also introduced new naming conventions. That is why a lot of icon class names have changed.

Simplified variables and themes

A major milestone are the refactored and simplified LESS variables of UIkit, which have been renamed and sorted into their appropriate component files. You no longer have to sift through a bunch of files to find a certain variable. Additionally created selectors are now stored in so called miscellaneous hooks, so their CSS will no longer be at the bottom of the compiled CSS file, but right next to their component. We also replaced CSS comments with LESS silent comments to establish more clarity in the compiled CSS.

Refactored file structure

We have split the theme folder structure into a default and a custom folder. The default folder stores all included UIkit themes. The stand-alone custom folder is the right place for developing your themes, because they will not be overwritten when updating to newer UIkit releases. Initially your custom themes will not be loaded within the Customizer. First you need to run the task grunt indexthemes on your UIkit folder. Now the newly created themes will be available automatically in the Customizer and test files. The custom folder is set to git ignore, which prevents your custom files from being pushed into the UIkit repository. Take a look at the documentation.

Bugs squashed

We fixed a couple of bugs, removed unnecessary hover events on touch devices and added better touch events support for Windows 8 Phones.

Showcase coming soon

Have you already built a website with UIkit? We are preparing a showcase on getuikit.com and would love to show the best sites using UIkit. Just tweet us a link to your site.

If you like UIkit 2.0 please write and tweet about it and give us some feedback.