UIKit for Sass

uikit-rails is easy to drop into Rails with the asset pipeline.

In your Gemfile you need to add the uikit-rails gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default.

gem 'uikit-rails'
gem 'sass-rails', '>= 3.2'

bundle install and restart your server to make the files available through the pipeline.

Import UIKit styles in app/assets/stylesheets/application.scss:

@import "uikit-mixins";
// <--- add here file with your mixins
@import "uikit-variables";
@import "uikit";
@import "uikit-components";

Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

Require UIKit Javascripts in app/assets/javascripts/application.js:

//= require jquery
//= require uikit
//= require uikit-components

Import UIKit into a Sass file (for example, application.scss) to get all of UIKit's styles, mixins and variables!

@import "uikit";

The full list of uikit variables can be found here. You can override these by simply redefining the variable before the @import directive, e.g.:

$button-primary-color: #FF4200;
$light-orange: #ff8c00;
$nav-navbar-color: $light-orange;

@import "uikit";

Bug reports and pull requests are welcome on GitHub at https://github.com/teamairship/uikit-rails.

The gem is available as open source under the terms of the MIT License.