Bootstrap 3 : Install and use it in Rails 4 (Win) bootstrap 3, rails 4, less, nodejs, uglify

• Bootstrap 3 (vs Zurb Foundation ?)
• Installing NodeJS, Less compiler and Uglify compressor
• Start a new Rails app
• Compiling files
• Firsts impressions
• Customize via semantic css
• Optional : Uglify

Bootstrap 3 (vs Zurb Foundation ?)

Ok, I’m not a big fan of Less, but i want to try the new Bootstrap 3 :) Users have just to wait that 1) bootstrap is released, 2) bootstrap-sass gem is up to date.

I have to take a more deep look at Zurb Foundation which come with nice sass, but the purpose here is to test a work-in-progress :)

Installing NodeJS, Less compiler and Uglify compressor

So for testing, we must compile less files, which is done with nodeJS. Install it (in c:/dev/ as usual for me), and check the library less with the integrated package manager npm : be carefull : npm install in the actual directory so, you can choose to use g option to install it in the global directory (set as $USERPROFILE/appdate/roaming/npm/npm_modules by default … :( ) or go to your already installed npm library (for me : c:/dev/nodejs/node_modules/npm) and make some alias after in your bash shell).

Nota : you can check some GUI Less compiler for windows if you want.

cd c:/dev/nodejs/node_modules/npm
npm install less
npm install uglify-js

Ok let make an alias for this deep directory in ~/.profile or ~/.bash_profile and test it :

alias lessc='C:/Dev/nodejs/node_modules/npm/node_modules/less/bin/lessc'
alias uglifyjs='c:/Dev/nodejs/node_modules/npm/node_modules/uglify-js/bin/uglifyjs'
alias 
lessc --version
>>lessc 1.3.3 (LESS Compiler) [JavaScript]
lessc --help

• Nota 1 : another solution exist, look at https://github.com/duncansmart/less.js-windows
• Nota 2 : Check some Sublime Package for syntax highlighting and auto compile less file to css.

Start a new Rails app

Classical rails new app_name

Compiling files

The final output are : CSS files, JS files and images files. JS files are not minified for the moment (just testing them), nor the CSS too.

• First, copy all the Javascript from bootstrap/js to app/assets/javascripts.

• Idem, copy the fonts directory to app/assets/

• Third compile the Less files from your boostrap git repository to your rails app :

  cd /app/assets/stylesheets
  lessc /bootstrap/less/bootstrap.less bootstrap.css # put the full path from your source bootstrap git directory.
  

And that’s done !

Firsts impressions

• Don’t forget to adjust @font-face for the fonts directory in bootsrap.css
• Every things work for the moment. Have to build a real site with others components …

Great Work Bootstrap Team !!

Nota : Don’t forget to regularly use a git pull for get the last bootstrap update !

Customize via semantic css

Don’t overload your html with bootstrap class take a look :http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html !

For now, the solution is to create a temporary file witch will declare custom setting before importing the main bootstrap less file. (It’s easiest with sass …)

• create a custom directory in your assets
• create a main less file in this directory : main-custom.less with the full directory path to your bootsrap git file ie for me :

        /* custom less setting mixins before */
        @import "c:/www/github/bootstrap/less/bootstrap/less"; 
        

• compile lessc main-custom.less ../stylesheets/bootstrap.css

Optional : Uglify

Ok it’s somewhere dirty html code with plenty of javascript been call … Let make just one big file and compress them : (nota : for testing/debugging purpose it’s not the time)

        cd /app/assets/javascripts
        cat bootstrap*.js > bootstrap.js
        uglify bootstrap.js -c -m > bootstrap.min.js
    

And change the application.js for not requiring the entire tree.