Twitter Bootstrap and LESS talks

Twitter Bootstrap is great. I’ve given a couple of talks on this subject and am scheduled to give a couple more. Feel free to grab the presentation and the code for the talks.

I hope to carve out some time in the near future to create a proper blog post about this topic. Do yourself a favor and grab ‘Twitter Bootstrap with LESS source’ from NuGet and start using it in your projects. It is really beneficial.

Quick run down to get going with the source code. If you grab Twitter Bootstrap with LESS source from NuGet it puts the .less files under /Content/less/*.less. Then in your aspx/php/html/whatever page add a stylesheet reference to the bootstrap.less file.

The bootstrap.less does an import of all the other .less files that make up bootstrap. (There is also responsive.less which imports all .less files needed to make your site responsive. Responsiveness in this context refers to rendering your HTML elements differently based on resolution. So if you are using a tablet your site can look differently than when it is on a phone versus a large monitor with a high resolution. This is done via CSS media queries.

Twitter Bootstrap (with LESS) comes with the less.js file. This is fine if you want to bring down the less file and have it generate CSS on the fly on the client. Another way is to ‘compile’ the less files into css content at development time. Another way is to add the dotless .net assembly to have any .less GET requests processed from that assembly by changing the web.config and adding a handler for the .less extension. This is the method the demo code uses.

LESS is fantastic. I highly recommend you look at it and use it instead of CSS. There are other languages like LESS (SASS and Stylus) but LESS is what Twitter Bootstrap uses and is the most syntactically like CSS.

Another note about dotless: If you are using IIS or IIS Express you want to remove the httpHandler section from the system.web section. For IIS/IIS Express it only needs (allows) it in the system.webServer section.

While this just scratches the surface of the talk it should be good enough to get going with these great technologies. So have fun!

-Chad

2 thoughts on “Twitter Bootstrap and LESS talks

  • Posted on 2012-06-15 at 3:46 pm

    Where/how does bootstrap.less pull in the other LESS files? Not seeing it in the code, and having trouble making variable changes make a difference.

    Reply
  • Posted on 2012-06-17 at 9:32 pm

    JJ,

    Check out my /Content/less/site/site.less and the /Content/less/bootstrap.less files.

    They both have @import statements which actually import in the other less files. Hope this helps.

    Reply

Tell me what you think!