Monday, December 23, 2013


Right now I'm working on a project for a big Dutch bank.They need some web application and I'm only setting things up right now, since not all requirements are final.

The technology stack is not that interesting, but quite modern: 3-tier app, MVC 4, Ninject, AngularJS, WebAPI and some WCF services. I'm affraid we won't be able to use NoSQL although this would be a GREAT moment to start using it (especially while we're prototyping the thing and we're not sure yet about the data model).

For styling I've been giving the bank-style-guide and a bunch of icons. The application has, as expected, tables, tabs, collapseables and validation messages. I suggested to use Twitter Bootstrap as CSS framework, but others were a bit reluctant at first. Having convinced them, we're now going ahead and creating a theme for bootstrap, based on the bank-style-guide. 

OK, so I placed all the app-specific icons in one sprite + css, the style-guide icons in another and I've started to customize the new Twitter Bootstap v3 to match the bank-style-guide. I'm no CSS guru, but I think it has been the right approach.

What I would like to in my styles is do something like:

@bankBrandSpecificOrange = #something;
@bankBrandSpecificBlue = #someOtherColor;

And then do stuff like:

.panel > .panel-heading {
     color: @bankBrankSpecificOrange;

Well you get it: use variables in my CSS.

There are already a bunch of solutions for this: languages that compile to CSS. Two of the most famous ones probably are LESS and SASS.

There are little differences between the both. What I read is that LESS is compiled by less.js, i.e. a JavaScript file. The Sass compiler needs Ruby, so we need to get that first.

That means Sass is pre-compiled whereas Less can be compiled on page load. However, Web Essentials has an option to compile your less to .css, thus it can be pre-compiled too.

Finally, in terms of what the languages support, they're very close. Check out this nice comparison:

For now, I'll stick with LESS because of the Visual Studio support given by Web Essentials.

No comments:

Post a Comment