Simplicity is the ultimate sophistication. - Leonardo da Vinci

Twitter Bootstrap in Visual Studio 2010 with Chirpy and Dotless

For my latest side project, I decided to play around with ASP.NET MVC 4 and Twitter Bootstrap. Bootstrap is a  front-end toolkit open sourced by Twitter engineers, and comes chock-full of goodies like a responsive grid framework, LESS, jQuery plugins and CSS3 styling.

I’ve heard a lot about CSS compilers like Sass and LESS, but thought I would start with LESS first simply because I didn’t have to learn any new syntax. When using LESS in Visual Studio you essentially have three options for compiling:

  • Client-side (JavaScript) – Include the LESS.js script in your site and link directly to your .less files. The script will compile your LESS into CSS at runtime. Unfortunately, this means any errors will cause your CSS files to vomit on your live site.
  • Server-side (dotless) – Install via NuGet or GitHub. Compiles dynamically via ASP.NET HttpHandler or compiler .EXE. The compiler will convert your .less files into .css files.
  • Server-side (Chirpy) – Install via Codeplex (NuGet packages are out of date). This VS add-in not only compiles LESS files it also minimizes JS, CSS, LESS files. You name your LESS files with a .chirp.less extension and Chirpy will compile them in realtime. You can also use a .less.css extension so you can retain Intellisense for CSS.

Installing Twitter Bootstrap
I installed two NuGet packages, the Bootstrap, from Twitter package for the base files and then the Bootstrap, from Twitter Less Source package since I wanted to use LESS. It created /less and /images subfolders under the standard /Content folder in MVC, and loaded the appropriate files from Bootstrap. It added bootstrap.js and less.min.js to the /Scripts folder.

Installing Chirpy
Chirpy’s minify capabilities seemed like a good deal in addition to the LESS compilation so I installed the NuGet package. According to the Chirpy documentation and this blog post  from John Hoff (The Brain Donor) on using Chirpy, I set up file groups to “mash” the files together into single .css files which I could then reference from my site. I created a file called

mash.less.chirp.config

and put it in the /Content folder. Here’s what the file contained:

<root>
  <FileGroup Name="style.css">
    <File Path="less/bootstrap.less" />
    <File Path="less/responsive.less" />
  </FileGroup>
</root>

Bootstrap.less and response.less import and load all of the individual .less files included in Bootstrap, so they were the only ones I needed to include.

I also created a file to mash together my JavaScript files. I named the file

mash.js.chirp.config

and put it in the /Scripts folder. Here is what it contained:

<root>
  <FileGroup Name="site.js">
    <File Path="AjaxLogin.js" />
    <File Path="bootstrap.min.js" Minify="false" />
    <File Path="jquery-1.6.2-vsdoc.js" />
    <File Path="jquery-ui-1.8.11.min.js" Minify="false"/>
    <File Path="jquery.validate.min.js" Minify="false"/>
    <File Path="knockout-2.0.0.js" />
    <File Path="less.min.js" Minify="false"/>
  </FileGroup>
</root>

I then saved, and nothing happened. No magical .css or .js file appeared underneath my special chirp.config files. No errors. Even after I rebuilt the solution, it was eerily Chirpy silent. Something was wrong. So, since Chirpy was technically an Add-In, I went to the Add-Ins menu in Visual Studio and Chirpy was not there! I then poked around on the interwebs and realized the NuGet packages were NOT up to date. So I went ahead and downloaded the .vsi file from Codeplex and installed Chirpy the old-fashioned way.

Almost immediately, my compiled .css file appeared, along with a whole host of CSS errors from the Bootstrap LESS files. I turned to Google, and it led me to lo and behold, another post from John Huff about Twitter Bootstrap woes with Chirpy. Apparently the Chirpy compiler does not like the Bootstrap LESS. His recommended solution was to use the dotless library to compile the LESS files and then use Chirpy to mash and minimize the files.

Installing dotless
So I installed dotless via NuGet. Following the instructions in Huff’s blog post, I added two calls to the dotless .EXE compiler in my MVC project’s Pre-build events (Project -> Properties -> Build Events tab):

"$(SolutionDir)packages\dotless.1.3.0.0\tool\dotless.compiler.exe" 
       "$(ProjectDir)Content\less\bootstrap.less" 
       "$(ProjectDir)Content\css\bootstrap.css"

"$(SolutionDir)packages\dotless.1.3.0.0\tool\dotless.compiler.exe" 
       "$(ProjectDir)Content\less\responsive.less" 
       "$(ProjectDir)Content\css\responsive.css"

I included quotations around both the .exe and the source and target file paths because my solution and project directories both contain spaces in the path folder names. I created a /css subfolder in my /Content directory to hold the generated .css files. After doing an initial build, I navigated to the /css folder, saw the two new files (with shiny CSS culled from all those Bootstrap LESS files), and added them to my VS project.

Updating Chirpy
I then updated my mash.less.chirp.config file to mash together the newly compiled .css files instead:

<root>
  <FileGroup Name="style.css">
    <File Path="css/bootstrap.css" />
    <File Path="css/responsive.css" />
  </FileGroup>
</root>

And voila, my style.min.css file appeared within a few seconds after saving and building the project, and it included the minified CSS from both .css files! I then updated my site template to use “style.min.css” as my stylesheet.

Sure, it would have been nice to only have to use Chirpy, but since I really wanted to use Bootstrap for this project, and for some reason Bootstrap and Chirpy just don’t get along at the moment, this is a perfectly fine workaround for the time being.

Comments

  1. Jake says:

    Thanks for the article!

    A quicker (and lazier) workaround is to just combine Bootstrap’s LESS files into one LESS file. This allows Chirpy to do it’s magic without issue.

  2. Tomas says:

    I don’t get it to work 100 %. The problem is the second time of file generation. The css files bootstrap.css and responsive.css will be generated but not the site.min.css, so I don’t get the changes.

  3. Ann says:

    @Jake, I will have to try that. Not sure if it will fix the CSS errors I was getting, but worth a shot!

    @Tomas, does your chirp.config file point to the new bootstrap.css and responsive.css files? Is Chirpy generating any other files (js or other less files elsewhere in your project)?

  4. Paul Knopf says:

    You could also use Combres to build the Twitter Bootstrap less files. Combres will not only build it, it will also compress and cache. The default dotless filter that comes with Combres doesn’t work with Twitter Bootstrap, but I wrote a filter that uses dotless in a way that allows it to work. You can find the project on NuGet called “Adept.Combres”.

    The blog post about it is here.
    http://pknopf.com/

    If you visit the project on GitHub, you can see a sample site of using Combres with Twitter Bootstrap less files.

    Thanks!

  5. Paul Knopf says:

    You could also use Combres to build the Twitter Bootstrap less files. Combres will not only build it, it will also compress and cache. The default dotless filter that comes with Combres doesn’t work with Twitter Bootstrap, but I wrote a filter that uses dotless in a way that allows it to work. You can find the project on NuGet called “Adept.Combres”.

    The blog post about it is here.
    http://pknopf.com/blog/using-less-correctly-with-combres

    If you visit the project on GitHub, you can see a sample site of using Combres with Twitter Bootstrap less files.

    Thanks!

  6. Mr. S says:

    The newer versions of dotLess provide minification, as well. It’s great because I can directly reference my .less files from my markup (instead of css), and the dotLess handler will serve a minified, cached version. You can enable it from your web.config via:

  7. Mr. S says:

    Looks like my markup was stripped, <dotless minifyCss=”false” cache=”true” />

  8. Andy says:

    I’m getting an error from DotLess when I build the project: “exited with code 1″.
    I’m using VS 2012, did you try with it?

  9. NickB says:

    Doesn’t asp.net 4.5 have support for combining all your JS and CSS into one file natively ?

    http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx

  10. lesscss says:

    very helpfull thanx tutorial.

  11. Tom says:

    There’s a similar tutorial on building Bootstrap when you publish a project here: http://www.flyingtophat.co.uk/blog/29/visual-studio-customising-bootstrap-at-build-time

  12. How Efficient Are Mole Removal Lotions

  13. Marilou says:

    a Bruce Lee workout includes stretching, bending, running, dipping,
    kicking, jumping, traditional muscle building exercises, weight lifting,
    rope skipping, medicine ball handling, etc. Anyone who dares
    to make a closer inspection will find the underlying difference.
    Now, the average healthy amount people are supposed to lose is 2 pounds per
    week.

  14. Tommie says:

    Both drugs have also been denied FDA approval the
    first time around and are awaiting news on their second attempt.
    Authorities inside the area will need to have an intensive understanding of laboratory and labeling techniques, infection security precautions, appropriate blood attract approaches to the elderly and for infants and
    even more. Do not be tempted to lose weight as quickly as you
    can, because a crash diet will have you eating less
    than a thousand calories a day slowing down your metabolism.

  15. Harley says:

    You don’t have to hit the gym for two and three hours each day to lose weight, but it does help to squeeze in 30 minutes of physical activity each day. Withdrawal from levothyroxine can be done but it takes 6 weeks of withdrawal for the remaining thyroid tissue to be completely starved. That way, the actual process will end up being much less frustrating and, for the majority of people, enjoyable.

  16. Hey there would you mind letting me know which webhost you’re using?

    I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most.

    Can you suggest a good internet hosting provider at a fair price?
    Many thanks, I appreciate it!

  17. Instead of taking a cart for 18 holes, walk the first 9 holes and then get a cart.

    Just a space and time together to see what unfolded.
    The forts that most of the parents choose are also
    equipped with the optional Built-in Picnic
    Table for visiting and snacks, tea, coffee, shakes, etc.

  18. great issues altogether, you simply gained a new reader.
    What could you suggest in regards to your publish
    that you just made some days in the past? Any positive?

  19. Pretty! This was a really wonderful post. Thanks for providing this information.

  20. Andrew says:

    Some cards require a month to month fee and some cards are good for a year with a one-time
    payment. What this really means is that every pet should have a veterinary oral evaluation and
    dental cleaning every year ‘” before problems are seen. Patients can easily access Ninth East Dental’s blog via the practice’s website.

Trackbacks

  1. Anant Leaves says:

    Twitter Bootstrap in Visual Studio 2010 with Chirpy and Dotless…

    Thank you for submitting this cool story – Trackback from Anant Leaves…

Speak Your Mind

*