jquery-ui-sass-rails

This gem packages the jQuery UI 1.10.3 stylesheets in Sass format (SCSS syntax) for the Rails 3.1+ asset pipeline.

It complements the jquery-ui-rails gem, which already packages all the plain jQuery UI assets (javascript, css, images), by additionally providing the jQuery UI stylesheets in Sass format allowing much easier customization through Sass variables. It overwrites the plain CSS stylesheets from jquery-ui-rails and leaves everything else untouched.

Both jquery-ui and jquery-ui-rails have been updated multiple times since the last release of this gem. I'm currently not using jquery-ui-sass-rails in any of my apps, so the chances for new upgrades are very slim. If you would like to take over maintenance of the gem, let's talk.

Put this in your Gemfile and run bundle install:

gem 'jquery-ui-sass-rails'

You should not include jquery-ui-rails in your Gemfile in addition, because jquery-ui-sass-rails already specifies that as an dependency in the correct version.

Unlike recommended in jquery-ui-rails for stylesheets you should always use Sass's @import over of Sprocket's = require, just as the official sass-rails gem recommends it.

So the way you import the stylesheets would be something like this:

// app/assets/stylesheets/application.css.sass

@import jquery.ui.core // you always want that stylesheet
@import jquery.ui.theme // import this when you want to build on jQuery UI's themeing
@import jquery.ui.datepicker // import all the modules you need

If you want to include the full jQuery UI CSS, you can do:

// app/assets/stylesheets/application.css.sass

@import jquery.ui.all

The big advantage that the jQuery UI stylesheets have been converted to Sass in this gem is that you now have a super easy way to customize the jQuery UI themes using simple Sass variables. You simply need to specify your own values before you import the jquery.ui.theme stylesheet:

// app/assets/stylesheets/application.css.sass

$bgColorContent: purple // set custom value for jQueryUI variable

@import jquery.ui.core
@import jquery.ui.theme // your custom variables will be used here
@import jquery.ui.datepicker

For a list of all jQuery UI variables check out: https://github.com/jhilden/jquery-ui-sass-rails/blob/master/app/assets/stylesheets/themes/_jquery.ui.base.css.scss

jquery-ui-sass-rails comes with variable sets for all the themes in the jQuery UI Themeroller, you use them by importing the respective partial before the jquery.ui.theme:

// app/assets/stylesheets/application.css.sass

@import themes/jquery.ui.smoothness // variables for 'smothness' theme

@import jquery.ui.core
@import jquery.ui.theme
@import jquery.ui.datepicker

For the JavaScript part you should refer to the jquery-ui-rails documentation and do something like this:

//= require jquery.ui.all

or this:

//= require jquery.ui.datepicker

As long as I don't break any important APIs I will try I try to stick to the versioning of jquery-ui-rails with an additional digit. E.g. jquery-ui-sass-rails version 4.0.2.x goes along with jquery-ui-rails version 4.0.2.

This gem is only a complement to the jquery-ui-rails gem and wouldn't be possible without it's author Jo Liss and the other contributors.

Since this is only a gem repackaging the jQuery UI library, the biggest thanks obviously goes out to the jQueryUI team.