Theming with UIkit

Learn more about the best practices for creating your own UIkit theme

Theming with UIkit

Today we'll show you how easily you can add your own styling to UIkit. First off, some fundamental HMTL and CSS knowledge and the basics of LESS are required.

The Basics

Let's talk about how theming in UIkit works. Each UIkit component is defined by a LESS file. LESS can not be interpreted by browsers and has to be compiled into browser friendly CSS. For that reason we use the Node.js based task runner Grunt. Once activated, it watches the directory you are working on and compiles all LESS files into one single CSS file, whenever you save a change. Learn more about this here.

On our website you can customize UIkit and download the compiled and minified CSS. For an uncompiled version of UIkit, including all source files, clone the GitHub repository. Once downloaded, you can style your theme by using variables and hooks to add your own styling to a selector. If you don't know how to clone, fork and send pull requests, take a look at the GitHub help.

By Franziska | | Posted in UIkit | 19 comments

UIkit released

A lightweight and modular front-end framework for developing fast and powerful web interfaces.

UIkit Released

Today we are happy and proud to present our new family member: say hello to UIkit! After months of developing and testing we are ready to introduce this lightweight and modular front-end framework. UIkit powers the Warp 7 framework and all our new themes starting with Nano3. Check out the features..

  • Modular and extendable components
  • Consistent and conflict-free naming conventions
  • Responsive and mobile-first
  • Developed in LESS
  • Extendable with themes
  • 2 themes to get you started
  • Real-time customizer
  • Responsive, fluid and nestable grid
  • Off-canvas navigations
  • Navs, dropdowns, modals, buttons and much much more
  • Supports RTL out of the box
  • Comprehensive documentation
  • And much more...

And the best thing about it? UIkit is completely MIT licensed, meaning that you can use it free for all your personal or commercial projects, without any restrictions. It's hosted on GitHub and open for everyone to contribute.

UIkit Website

By Sascha | | Posted in UIkit | 33 comments

Warp 7.1 Released

Now tweaked and improved!

Warp 7.1 Released

Two weeks ago we released our Warp 7 framework and we are really happy with it! It was a huge release for us bringing new technology into our framework like support for LESS and much more. Since the release we gathered all your feedback from bugs, improvements to feature suggestions. Taking all into account, we revised parts of the framework and did a lot of optimizations. Let's have a closer look at it...

By Sascha | | Posted in Warp | 25 comments

Nano3 Theme

Support for LESS and based on Warp 7

Nano3 Theme

After our big announcement last week, we are very excited to present Nano3, the first theme based on our Warp 7 framework. It is the third generation of popular Nano theme and, like its predecessors, serves as a brilliant blueprint for your custom built themes.

Nano3 is lightweight and streamlined to demonstrate what our new framework can do and to introduce you to the new features it brings with it, which we are happy to say are quite a lot!

  • Full support for LESS
  • Customizer with color picker and Google fonts support
  • New administration area with all theme options in one place
  • UIkit, our new front-end framework
  • Beautiful off-canvas navigation for mobile devices
  • Full Bootstrap support for Joomla 3.1
  • And much more...


Modifying our theme has never been so easy! Thanks to our new customizer, you will no longer need to write any code or require CSS knowledge at all to adjust colors, fonts, spacing and so on. You can simply pick colors or enter your own values. All this works through our very own front-end framework called UIkit, specially developed for Warp. Right now we are preparing the UIkit website and you can expect the official release within the next weeks.

New theme administration

One of the more obvious changes in Warp 7 is the theme administration overhaul. Everything is now in one place. Module class suffixes are no longer required. Widget styles, icons and badges can simply be selected and you can show or hide widgets on different devices with just one click. Plus, it looks awesome ;-)

What's to come

Of course, we will also release a new and improved version of our GPL licensed Master Theme. Which will be available later this summer. So, stay tuned.

In the meantime, we hope you are as excited as we are about Warp 7 and we are anxious to hear your feedback.

Joomla Demo WordPress Demo

By Sascha | | Posted in Themes, Warp | 111 comments

Warp 7 - Engage!

After 6 months of hard work we are thrilled to announce Warp7, the latest generation of our theme framework.


First of all a big THANK YOU to the community! We received around 137 posts with suggestions for Warp 7. This helped us a lot and many of them were taken into account.

Two years after we released the first version of Warp 6 in May 2011, its successor is waiting in the wings. Like with all major releases, we did a complete framework overhaul, not only adding features but rather changing the way of building themes. So here is a short Warp 7 feature round-up...

By Sascha | | Posted in Warp | 71 comments

Glass Theme

June 2013 YOOtheme club theme

Glass Theme

Take a look at our June 2013 theme release, Glass! This versatile and polished theme presents your business in the right light. It comes with a wide variety of styles from bright fresh to dark elegant colors as well as elaborate background patterns and animations.

Glass theme offers you a broad range of options for customizations, enabling you to create your very unique website experience. Its clean and modern boxed layout fits perfectly for any corporate or business site. Use our special bonus styles for the Widgetkit Slideshow and Gallery to present your products or staff to visitors and make your business shine.

Glass Theme comes with 8 styles, 8 colors, 13 font types and 5 module styles, can be combined with 4 badges and 6 icons to create a unique and professional look for your website. You can use this theme with Joomla or WordPress and it is based on the Warp6 theme framework, which uses modern web technologies like HTML5, CSS3 and features a fully responsive layout to make it look great on desktops, tablets and phones.

  • Available for Joomla and WordPress
  • 8 style variations available
  • Choose from 8 colors and 13 fonts
  • 5 module style combinable with 4 badges and 6 icons
  • Custom Widgetkit style for the Slideshow and Gallery widget
  • All Warp framework features are available

Joomla Demo WordPress Demo

By Keven | | Posted in Themes | 35 comments

Venture Theme

May 2013 YOOtheme club theme

Venture Theme

Let's get down to business with our new May theme release, Venture. Its rich yet clean and functional style is perfectly suited for your corporate website. Check out the cool navigations and buttons and try to resist the temptation to touch them.

You can combine a variety of different styles, backgrounds and colors to create your very unique website experience. And that's not all! Venture comes with an optional separator background image for your module positions, smooth CSS animations and a beautiful bonus style for the Widgetkit Slideshow tabs.

All in all Venture offers you 4 styles and 4 background textures, 8 colors, 12 fonts and 6 module styles which can be combined with 4 badges and 6 icons. It is based on our Warp6 theme framework, which utilizes latest web technologies like HTML5, CSS3 and of course a responsive layout and can be used with Joomla or WordPress.

  • Available for Joomla and WordPress
  • Responsive theme, optimized for touch devices
  • 4 style variations and 4 background textures available
  • Choose from 8 colors and 12 fonts
  • 6 module styles combinable with 4 badges and 6 icons
  • Custom Widgetkit style for the Slideshow widget
  • All Warp framework features are available

Joomla Demo WordPress Demo

By Danny | | Posted in Themes | 62 comments

YOOtheme hack days

We are working on some new stuff...

YOOtheme hack days

What do you do, if you want to clear your head and do some profound work? You pack your computers, Xbox and some warm socks and travel to a remote island in the Baltic Sea for a couple of hack days. Well, at least that's what we did last month. In the midst of snowy nothingness we put up our gear and got shoulder-deep in working on some pretty great stuff for you.

So you may be wondering what we got up our sleeves this year? Here we go... Its been two years since we released the Warp 6 framework and we are happy to announce that Warp 7 is already in the making and scheduled to be released this summer. We are putting a lot of effort into it to make it the next state of the art theme framework. We are planning a new major Widgetkit 2 release as well as new ZOO releases later this year. All built on the latest web technologies including some great improvements. We are also working on some new projects, which we are really excited about. So stay tuned!

We will have more news and details soon, so keep checking back!

By Sascha | | 36 comments

Solar Theme

April 2013 YOOtheme club theme

Solar Theme

This April we have a little easter egg for you in store, our new release Solar! This beautiful and innovative theme comes with an original way of arranging blog articles. We implemented Grid-a-Licious, which enables you to arrange your posts in a completely fluid layout. Featured images are placed on top of the title and benefit from the whole article width.

Enhance your website with an eye-catching header effect. Just set the header fixed to hide it with a cool scroll effect. The main menu is attached to the top of the site. Each section can be set separately to a width of up to 100%, so that your site can benefit from the whole screen resolution. All these features as well as the bonus styles we provide for the Widgetkit slideshow and Spotlight will help you to create a beautiful and unique website.

All in all Solar comes with 9 color variations, 5 textures, 9 fonts and 3 module styles, which can be combined with 4 badges and 6 icons. Like all our Warp6 framework based themes it is available for Joomla and WordPress and uses modern web technologies like HTML5, CSS3 and features a fully responsive layout to make it look great on desktops, tablets and phones.

  • Available for Joomla and WordPress
  • Responsive theme, optimized for touch devices
  • 8 style variations and 5 textures available
  • Choose from 9 colors and 9 fonts
  • 3 module styles combinable with 4 badges and 6 icons
  • Custom widgetkit styles for slideshow and spotlight
  • All Warp framework features are available

Joomla Demo WordPress Demo

By Sergej | | Posted in Themes | 37 comments

Vertical menu enhanced

We updated the Showroom and Pace theme


Up until now, all YOOtheme templates came with a horizontal dropdown menu. Showroom was the first theme to make use of a vertical navigation. This type of navigation has a completely different usability, but also brought new challenges for us.

The main problem when activating a submenu is that the dropdown disappears, whenever you move your mouse directly into the dropdown by leaving the red area in the following example. Usually this issue is solved by adding a delay when activating the dropdown. We decided to use another approach.

By Pawel | | Posted in Themes | 17 comments