LESS Bootstrap Boilerplate

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

LESS Bootstrap Boilerplate

Impressed & Inspired by a lot of scaffolding templates, I have collated one with some custom settings.

Table of Contents

Setup

  • Install Node from here
  • Open a command window and run npm -v to validate the install
  • Install git from here. [Needed to fetch packages using Bower]
  • Verify the same by right clicking on any folder and you should be able to see the git commands (git bash, git ui, etc..)
  • Install Bower npm install bower -g the flag -g is for the package to available globally
  • Verify the same by running bower -v
  • Create a new folder and name it boilerplate
  • Right click inside the folder and open gitbash
  • Then execute git clone [email protected]:arvindr21/tddBootstrapBoilerPlate.git
  • Once the clone is completed, you will have the base files that we need to work on top of.
  • Using gitbash, navigate inside boilerplate/tddBootstrapBoilerPlate folder and executenpm install && bower install
  • Wait for a couple of mins, and Bam!! all the files needed to run the app are downloaded for you. Neat right?

Development & Build

Now lets see what all can be done with this setup

  • Open boilerplate/tddBootstrapBoilerPlate/app folder and launch index.html. You will find a sample bootstrap template loaded. Resize your browser, play around.
  • Lets Make a couple of changes to the file. Open index.html in your favorite text editor and look for the h1 tag with text “Bootstrap starter template” and change it to “Hello World!!” and p tag content after that to “This template is awesome!! “
  • Save and close the file.
  • Refresh the browser and you should see the new changes reflecting.

Lets Build the app and make it production ready (yes! production ready)

  • Now back to gitbash. Navigate to the root folder – boilerplate/tddBootstrapBoilerPlate and rungrunt build
  • This will run for around 30 secs to 1 min depending on the machine and will create a folder called distshort for Distribution. Ignore any errors for now.
  • Now using file explorer go to boilerplate/tddBootstrapBoilerPlate/dist and launch index.html.

But.. but.. It looks the same as my dev? whats the difference you ask?

  • Right click on the dist/index.html page in your browser and “View Source”. — What!! yes, your html is minified!
  • And so are your js/css files. They are bundled and minified
  • JS
    • modernizr.js
    • vendor.js
    • plugins.js
    • main.js
  • CSS
    • main.js
  • With jshint’s code quality testing, dependency management, autoprefixing & file hashing (for browser caching)!
  • You can compare your app/index.html with dist/index.html and also their respective js and css.

What all can Grunt do?

Grunt is a very powerful task runner that will do what you say (& do mind your tone.. Grunt is pretty serious).

Handling LESS changes

  • Lets say that we are trying to build a custom theme for our application. So lets leverage the power of LESS by defining variables, mixins etc.
  • Now for fun, lets change the background of the page. We will naviagate toboilerplate\tddBootstrapBoilerPlate\bower_components\bootstrap\less
  • Find a file called variables.less and open it in your favourite editor.
  • Search for @body-bg and update the value from #fff to #eee a tinge of gray.
  • Now wat? Now, we build all the bootstrap less files to build the bootstrap.css again.
  • Okay, back to gitbash and to the root folder [from now on the root folder isboilerplate\tddBootstrapBoilerPlate] and run grunt less. Wait a few seconds and command prompts back. No errors cool! our css file is built.
  • Awesome lets head back app/index.html and launch it. Wow! the background is no more white! yay!
  • Now, to build after every single change is kind of boring.. so lets ask grunt to do that. Oh!! can I do that?? Yes! ofcourse you can!
  • Now back to gitbash and run grunt watch. You see a message “Running ‘watch’ task” [The boilerplate has already been configured to watch for changes. You can check Gruntfile.js in the root folder for a whole bunch of configs]
  • Lets go back to variables.less and lets change the top banner color from Black to say CadetBlue (#5F9EA0)?
  • Search for @navbar-inverse-bg and replace the value from #222 to #5F9EA0, save the file and hurry back to the bash.
  • You can see a message File "bower_components\bootstrap\less\variables.less" changed. and grunt will invoke the less task to rebuild our files.
  • Back to app/index.html and refresh. Bam!! our header is changed! You can play around to get a hang of both grunt and less. Once done press ctrl + c to stop the watch.

Running test cases

In a Test Driven Development environment, executing test cases manually again and again is a painful & boring. So lets see how we can leverage Grunt for this.

Our mantra here

TDDsource

Write a Test Case --> Watch it Fail --> Fix it --> Watch it pass --> Refactor the code

I have written another blog post here that explains how to “TDD” using this framework.

  • Back to gitbash, lets run grunt jasmine. Jasmine is our unit testing framework.
  • You will see a few lines roll by and you will see a green tick and says hello. This is a sample test case, that comes out of box with this framework. Neat right?

Lets make some changes and see what all can we do with Grunt + TDD + Jasmine

  • Back to gitbash run grunt watch, let grunt watch for our changes and run test cases.
  • Using file explorer navigate to boilerplate\tddBootstrapBoilerPlate\test\spec and openTest-spec.js in your favorite editor.
  • For a quick intro, we will replace expect(helloWorld()).toEqual("Hello world!"); toexpect(helloWorld()).toEqual("Hello Jasmine & Grunt!"); save and file and run back to gitbash
  • You will see that grunt has detected changes to our file, and since it is a spec file and not a less file, it ran jasmine to validate our changes. But! our test case failed.
  • Jasmine says Expected 'Hello world!' to equal 'Hello Jasmine & Grunt!'. (1)
  • So how do we fix it? Lets navigate to boilerplate\tddBootstrapBoilerPlate\app\scripts and openmain.js. Ahh! here is our source which we are testing.
  • Lets change the return statement from return 'Hello world!'; to return 'Hello Jasmine & Grunt!';and save our file.
  • Grunt will detect the changes and will run all the test cases again and check. Since we have an integration with Karma as well, a couple of browsers will open and all the code will be tested. You can scroll through the bash to see your test pass.
  • And also you will notice a new folder in your root directory named as coverage. This is the output ofjasmine-istanbul. This will provide a detail info on how much of your source code is tested. You can open boilerplate\tddBootstrapBoilerPlate\coverage\html and launch index.html file and check. For now it should be 100%.

Cool right? A framework with practically everything {Integrated & working together} !

Customizing Grunt for your needs

Now we are ready to open up the Gruntfile.js

  • To get started, come to the very end of the file, you will see a few grunt.registerTask(). This is where we config all our tasks like build, test, less etc... You can configure your own ones too and name them whatever you want! Yes whatever!!
  • Lets add a new custom task
  • After the default task, add the following piece of codegrunt.registerTask('fixVendor', ['autoprefixer']); Now back to gitbash, and rungrunt fixVendor.
  • So what does this task do?It parses CSS and adds vendor-prefixed CSS properties using the Can I Use database. Now no more hassle of writting the same background-image 5 times one for each browser! Sweet huh?

In this way, you can customize your own tasks to increase your laziness! Well, not exactly but you can focus better on the actual business logic! And emphasise on TDD!

What does this package have?

Troubleshooting

With such a complex framework, a lot of things can go wrong! There are a few issues I have encountered and fixed myself. They are listed below

  • npm install && bower install won’t run! Some error about github and proxy & firewall
    • For this, you need to append the following to your git config
      Open gitbash then git config --global url.https://.insteadOf git://. Now you can try runningnpm install && bower install
  • A certain node package is not found even after npm install && bower install I ran into this on Win7. Even though my node_modules had that package, grunt couldn’t find it. Lets say that grunt complainsjasmine is missing, So here is what I do
    • Open gitbash and run npm install jasmine -g notice the -g, it means install globally.

Thanks for reading! Do Suggest changes and add-ons.

@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page