Bootstrap 3 : Install and use it in Rails 4 (Win) bootstrap 3, rails 4, less, nodejs, 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

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.

And that’s done !

Firsts impressions

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 …)

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

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.


comments powered by Disqus