jQuery UI stylesheets packed as Sass files for the Rails 3.1+ asset pipeline
CSS HTML Ruby JavaScript
Pull request Compare This branch is 50 commits ahead, 83 commits behind jquery-ui-rails:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
app/assets removing unnecessary css.scss for deprecation warnings Aug 16, 2015
jquery-ui @ 0477890
jquery-ui-themes added compiled jquery-ui theme files version 1.10.2 Apr 22, 2013
testapp updated testapp to latest rails version and tried to reproduce #5 Sep 17, 2013
.gitignore change rubygems source in Gemfile (for security) Feb 28, 2013
.gitmodules Add jquery-ui submodule Feb 18, 2012
Gemfile added debugger and remove some files from packaged gem Apr 17, 2013
History.md bumped version to Jun 3, 2013
README.md new maintainer wanted Feb 19, 2015
Rakefile make sure that @import statements have the correct format + adjustmen… May 9, 2013
jquery-ui-sass-rails.gemspec make the dependency on a little less strict with the version number Sep 17, 2013



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.

New maintainer wanted

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.

Sass Stylesheets

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.

Bitdeli Badge