Skip to content
A theme for spreecommerce using twitter's bootstrap
Ruby JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Rakefile Initial project layout. Vendored sass port of bootstrap. Started on i… Feb 13, 2012


Spree_bootstrap_theme is based on twitter's bootstrap project ported to sass using the bootstrap-sass gem.

Link to bootstrap homepage:

Alpha Quality!!!!

This project is being built against spree version 1.0 and greater

Spree uses Skeleton as a lightweight css framework. With the different naming conventions in skeleton and spree with regards to bootstrap. This project uses sass mixins as a bridge. When that doesn't completely work some deface overrides are used add/remove div's & css classes to follow bootstrap naming conventions.

Some quick notes on the differences in the css markup conventions:

| spree/skeleton | bootstrap |

| :-----------------------: | :-----------------------: |

| grid=960/16 | grid=940/12 |

| button=.button | button=.btn |

| flash=.flash | flash=.alert |

The current version uses bootstrap 2.0 with the fluid layout. This changes the grid into a percentage instead of pixels.


gem 'spree_bootstrap_theme', :git => 'git://' NOTE: It's important that you add this line at the bottom of the Gemfile, or at least AFTER any other extension/engine/gem that you'd like to theme (i.e. Spree)

Make sure you remove any includes in your stylesheets to the spree core stylesheets.

Add this line to a scss stylesheet in your rails app: @import 'store/spree_bootstrap_theme'

From the bootstrap-sass page. The theme vendors bootstrap in the same way as the gem bootstrap-sass:

Notes from Bootstrap for SASS

Need to configure a variable or two? Simple define the value of the variable you want to change before importing Bootstrap. SASS will be awesome and respect your existing definition rather than overwriting it with the Bootstrap defaults. A list of customisable variables can be found in the Bootstrap documentation.

$primaryButtonBackground: #f00;
@import "bootstrap";


You can include the Bootstrap javascripts through two methods. In this case, Sproket's //= require directives are useful and will not cause feline death.

We have a helper that includes all available javascripts:

// Loads all Bootstrap javascripts
//= require bootstrap

You can also load individual modules, provided you sort out any related dependencies.

//= require bootstrap-scrollspy
//= require bootstrap-modal
//= require bootstrap-dropdown



Create a generator that includes a stylesheet w/ the include and some of the twitter variables to override.

Need to finish styling:




fix bootstrip navbar

Copyright (c) 2012 Drew Purdy, released under the New BSD License

Something went wrong with that request. Please try again.