Timesaving CSS Tools for ASP.Net Developers

Are you a developer?

Are you a lazy developer?

Do you hate doing web design?

If you answered yes to that last question you have come to the right blog post. I am going to show you three simple to use libraries to make working with CSS much less painful giving you time to get back to the good stuff – pointlessly refactoring your code!

1. Blueprint CSS

First cab off the rank is the Blueprint CSS Framework. Blueprint combines a solid reset file,  good looking default typography and an easy to use grid system.

The purpose of the reset file is fairly straightforward – removing some browser inconsistencies.

The typography defaults are great as a sane starting point for padding, sizes, line height and all the other stuff designers write novels on but us developers have really no idea about. The values are also set in em so they should scale to the user’s font size appropriately.

Last but not least is Blueprint’s grid system. This I am not totally sold on but at the very least its useful for getting together a quick prototype. Essentially the system uses classes such as ‘container’, ‘span-10’ and ‘last’ to quickly and easily bust out complex layouts.

Here is a basic example with a header, content, footer and sidebars.

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        Main content
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
</div>

2. Bundler

When building a public facing website its usually a good idea to combine and minify your CSS(and javascript) files into a single file. This of course is a huge pain in the ass. It is possible to use something like the Yahoo YUI Compressor and an MSBuild task to automate this but then you run into problems for things like debugging your CSS.

Enter Bundler. Bundler essentially reduces combining and minifying of CSS and javascript into on tiny bit of code -

<%= Bundle.Css()
        .AddCss("~/css/reset.css")
        .AddCss("~/css/site.css")
        .RenderCss("~/css/combined.css") %>

Bundler combines and minifies reset.css and site.css into one file – combined.css. It also takes care of ensuring old files aren’t cached and will not combine your files if the website is running in debug mode. Using bundler you have the freedom to split your CSS up into manageable pieces without sacrificing load times.

3. LESS CSS (using Bundler)

Last on the list is LESS CSS.

In its own words - “LESS extends CSS with: variables, mixins, operations and nested rules”.

In my words LESS allows you to write CSS more like you would normally write code allowing you to keep your CSS files DRY (don’t repeat yourself… dammit I just repeated myself). It achieves this by using this variables, mixins which are kind of like functions and a few other nifty features.

For the two readers who have gotten this far and clicked through the link will notice LESS CSS is targeted at ruby and not at .Net. However our good friend from step 2 – Bundler (or dotlesscss) will automatically parse CSS files ending with .less using the LESS CSS language.

Variables behave exactly as you would expect them to and are awesome for making sure you don’t keep repeating yourself with things like colours.

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

The other feature I really love is mixins. Mixins behave in a way like functions that take parameters as input and return a set of CSS properties based off those parameters. CSS 3 rounded corners are a good example of this.

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

LESS has a number of other cool features you can check out on the documentation.