Warp 7.2 – Improved customizations and UIkit 2.0

Steffan
December 12, 2013
Warp

After UIkit 2.0, we are excited to announce the release of Warp 7.2. First, we would like to thank you all for your feedback! We took a lot of your suggestions into consideration, which helped us to come up with what we consider a major step forward in the development of our framework. In this update we improved and simplified the customization workflow. This makes working with Warp much more intuitive and user-friendly. The newest UIkit version 2.0 is of course included, and you will also find an updated theme documentation to assist you with your projects.

What's new?

Essentially the override cascade is more similar to the one you are used to from Warp 6. You can work directly in your styles to customize layouts, CSS and JavaScript. The /custom folder has been removed. You now use the styles/STYLE-NAME folder to do customizations and overrides.

We also released a new version of UIkit, the front-end framework on which Warp is based. We simplified the UIKit themes and variables, so it is now easier to work with. UIkit now offers new add-ons which you can easily include in your projects. Read more about the UIkit 2.0 release.

All Warp 7 based themes are updated for the Warp 7.2 release.

So, what do I have to keep in mind when updating?

If you have already added or changed files in the /custom folder, you can easily move these to your styles. But before updating, please make sure to have a backup of your customizations.

After the update you can move your customizations to your /styles/STYLE-NAME folder. But keep in mind: your style will only be shown in the Customizer, if there is a style.less file in the styles folder. Here are three possibilites on how to use the style folder for customizations.

Folder/File	Description
`styles/STYLE-NAME/css/theme.css` `styles/STYLE-NAME/style.less`	This is the default file structure. When you save changes in the Customizer, the `style.less` file will be compiled into CSS the `theme.css` file and override any customizations you may have done in that file.
`styles/STYLE-NAME/css/theme.css` `styles/STYLE-NAME/css/custom.css` `styles/STYLE-NAME/style.less`	You can use the Customizer and also add your own CSS by creating a `custom.css` file. That way your CSS won't be overridden when you save changes in the Customizer.
`styles/STYLE-NAME/css/theme.css`	If you are not planning to use the Customizer at all, just duplicate an existing style or create your own one. You can then delete the `style.less` file of your new style and write customizations directly in the the `theme.css` file. Your style will NOT show up in the customizer and NOT overwritten when compiling LESS.

Learn more about it in the Customization tutorial.

How do I add custom LESS?

The approach to adding your own LESS is a bit different. You won't do this in the /styles folder. Detailed instructions on this can be found in our revised LESS Customization tutorial.

Font Awesome revised

Font Awesome, the open source icon font used by both Warp and UIkit, has recently been updated to Font Awesome 4.0. This update is now included in our new UIkit versions. This means that icon class names have been revised to provide a more consistent naming convention and there are even more icons available. For more information, take a look at the UIkit documentation on the Icon component.