compass-bootstrap

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 1.3.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
$basefont:          13px;
$baseline:          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/compass_bootstrap';

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