Bootswatches converted to SCSS ready to use in Rails asset pipeline.
Looking for contributors
If you’d like to try your hand at maintaining this project, I’m happy to give you commit access.
bootswatch-rails
This gem is meant to be used with
bootstrap-sass. It gives
you complete scss versions of bootswatches for use in
your Rails asset pipeline, just like bootstrap-sass gives you scss version of
bootstrap itself.
Installation
Add this line to your application’s Gemfile, in assets group:
gem 'bootswatch-rails'
And then execute:
$ bundle
Usage
When using bootstrap-sass, it’s recommended to avoid sprockets in your
stylesheets. In order to do that you simply rename your application.css file
to application.css.scss, remove all sprockets comments, and instead use sass
@import commands. These commands are smart enough to fully support asset
pipeline load paths, thanks to sass-rails gem.
Here’s approximately how your application.css.scss file should look like,
considering that you’re using
bootstrap-sass.
// Example using 'Cerulean' bootswatch
//Import bootstrap-sprockets
@import "bootstrap-sprockets";
// Import cerulean variables
@import "bootswatch/cerulean/variables";
// Then bootstrap itself
@import "bootstrap";
// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }
// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";
// Whatever application styles you have go last
@import "base";
Overriding bootswatch variables
Since version 3.1 it’s possible to override variables.
// First set or import your overrides
$textColor: #000;
// Then load variables
@import "bootswatch/journal/variables";
// Then the rest as shown above...
Bootswatches
Included bootswatches
- Amelia
- Cerulean
- Cosmo
- Cyborg
- Darkly
- Flatly
- Journal
- Lumen
- Paper
- Readable
- Sandstone
- Simplex
- Slate
- Spacelab
- Superhero
- United
- Yeti
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Added some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
Please see CONTRIBUTING for more detail. (Dont change the scss files by hand, use the converter and rearranger first, and make your changes in those if possible)
Note about converter
I am trying to automate this project as much as possible, so I wrote a script
that does most of the work converting less to scss. If you want to contribute a
fix that’s easily automatable and you know ruby, please add a processor to the
converter.
Credits
Big thanks to these guys.