Bootstrap 3.2.0 SCSS integration

[![MEAN.JS Logo](http://meanjs.org/img/logo-small.png)](http://meanjs.org/)

## How to Test BootStrap (or any other SCSS based code)

http://angular-ui.github.io/bootstrap/  *is copied* into a new mean.js module called *bootstraptest *(accessible when signed in) 

This is the bootstrap demo page.

You can monitor easily the css changes you'll operate doing

1 - Changes some scss variabels like $btn-primary-background: in your editor
2 - LIvereload
3 - See the CSS changes appear live on bootstrap official demo page.


## Ruby Gem  http://en.wikipedia.org/wiki/RubyGems
You can install it  on linux  : 
 - sudo apt-get install rubygems
 - sudo yum install rubygems
*manual*
    wget http://production.cf.rubygems.org/rubygems/rubygems-(Version).tgz
    tar xvf rubygems-1.5.0.tgz
    cd rubygems-1.5.0
    sudo ruby setup.rb

Then install compass : 

    gem install compass

Grunt is updated with the compass-watch task from the latest package  **grunt-contrib-compass**

## BootStrap 3.2.0 SCSS sources

**sass/bootstrap/stylesheets** => All SCSS source files
    
## compass & scss

Compass is a processor that watches changes into .scss http://sass-lang.com/  files. 

    .forms{
      input:active {
        //make the input color lighter when not focused
        color : lighten($inputColo, 20%r);
      }
    }

**file://sass/boostrap/stylesheets/bootsrap/_variables.scss**
    
This file contains around 300 variable definitions for all the bootstrap framework.

for example, button styles are defined here : 

    $btn-font-weight:                normal !default;
    $btn-default-color:              #333 !default;
    $btn-default-bg:                 #fff !default;
    $btn-default-border:             #ccc !default;
    $btn-primary-color:              #fff !default;
    $btn-primary-bg:                 $brand-primary !default;
    $btn-primary-border:             darken($btn-primary-bg, 5%) !default;

## watch & livereload
When you modify one of the .scss file with your editor, this triggers the compass css authoring tool that compile the scss into css, and then **livereload** the browser. Compass is fast.
    
**/public/lib/bootstrap/dist/sasstocss/bootstrap.css** The compiled css file location.

## Grunt && Production Files

 **cssmin** && **minify** for any changes made to a .scss file.


:+1:  **/public/lib/bootstrap/dist/sasstocss :**  All bootstrap production files.
:+1:  **public/dist/application.min.css :** The production ready unique file.



     

## Config

You can change compass options in grunt.

     compass: {
            dist: {
                options: {
                    sassDir: 'sass/bootstrap/stylesheets',
                    cssDir: 'public/lib/bootstrap/dist/sasstocss',
                    //CSS output mode. Can be: `nested`, `expanded`, `compact`, `compressed`.
                    outputStyle: 'compressed',
                    watch: false
                }
            }
        },

## License

[BSD license](http://opensource.org/licenses/bsd-license.php)

@todo Implement a config list showing different sources.
@todo import the pre-generated css into bootstrap/dist/sasstocss
@todo Implement this mobile scss framework that screenshots some resolutions