Twitter Bootstrap- Compass Plugin
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.: http://twitter.github.com/bootstrap/
- This plugin is consistent with 2.0 version of Bootstrap
This plugin adds the Bootstrap to Compass.
Install on Rails 3.0
gem install compass-bootstrap
Install on Rails 3.1
Add compass and compass-bootstrap to the assets group in you Gemfile
gem 'compass'
gem 'compass-bootstrap'
Adding the Bootstrap plugin to an existing Rails 3.0 project
Add the following to your compass.rb
# Require any additional compass plugins here.
require 'compass-bootstrap'
Run the following on your project's directory
compass install compass-bootstrap/compass-bootstrap
this will add the following files to your stylesheets dir:
create sass/compass_bootstrap.scss
create sass/_reset.scss
create sass/_variables.scss
create sass/_mixins.scss
create sass/_scaffolding.scss
create sass/_type.scss
create sass/_tables.scss
create sass/_forms.scss
create sass/_patterns.scss
create javascripts/bootstrap-alerts.js
create javascripts/bootstrap-dropdown.js
create javascripts/bootstrap-modal.js
create javascripts/bootstrap-popover.js
create javascripts/bootstrap-scrollspy.js
create javascripts/bootstrap-tabs.js
create javascripts/bootstrap-twipsy.js
create stylesheets/compass_bootstrap.css
Now you can add the bootstrap style to your .scss/.sass files:
@import 'compass_bootstrap';
this will make available all the classes and styles from bootstrap
If you only want to add some bootstrap styles to your files, add:
@import 'preboot.scss';
And now you can use the mixins on your own classes:
Changing the theme color:
Open _preboot.sccs and you will see the entire list of colors, you can change those in order to apply your own color scheme
// VARIABLES
// ---------
// / Links
$linkColor: #0069d6;
$linkColorHover: darken($linkColor, 10);
// Grays
$black: #000;
$grayDark: lighten($black, 25%);
$gray: lighten($black, 50%);
$grayLight: lighten($black, 75%);
$grayLighter: lighten($black, 90%);
$white: #fff;
// Accent Colors
$blue: #049CDB;
$blueDark: #0064CD;
$green: #46a546;
$red: #9d261d;
$yellow: #ffc40d;
$orange: #f89406;
$pink: #c3325f;
$purple: #7a43b6;
// Baseline grid
$baseFontSize: 13px;
$baseLineHeight: 18px;
// Griditude
$gridColumns: 16;
$gridColumnWidth: 40px;
$gridGutterWidth: 20px;
$extraSpace: ($gridGutterWidth * 2); // For our grid calculations
$siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
// Color Scheme
$baseColor: $blue; // Set a base color
$complement: spin($baseColor, 180); // Determine a complementary color
$split1: spin($baseColor, 158); // Split complements
$split2: spin($baseColor, -158);
$triad1: spin($baseColor, 135); // Triads colors
$triad2: spin($baseColor, -135);
$tetra1: spin($baseColor, 90); // Tetra colors
$tetra2: spin($baseColor, -90);
$analog1: spin($baseColor, 22); // Analogs colors
$analog2: spin($baseColor, -22);
Adding the Bootstrap plugin to an existing Rails 3.1 project
Open config/application.rb and add the following line after config.assets.enabled = true
config.sass.load_paths << Compass::Frameworks['compass-bootstrap'].stylesheets_directory
After adding this line rename application.css from app/assets/stylesheets to end with scss extension.
Open application.css.scss and remove the require_tree . directive, in order to have access to bootstrap mixins we need to import all our scss files with @import sass command like:
@import 'compass-bootstrap/base';
If we have more scss files in our project import them as well to access mixis.
Bootstrap javascripts
Version 1.3.0 includes javascript files, they are not necessary but if we want to use them, we can rely on Rails 3.1 asset pipeline. Just require them in the javascript manifest - ex: in the app/assets/javascript/application.js - like this:
//= require bootstrap-alerts
TODO
- make the documentation file for mixins and a example site
- port more classes to mixins