Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Five Essential Front-End Tools That Should be Used with Modern MVC Projects

, 25 Jun 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
VS 2012 web templates come preloaded with standard front-end libraries. This post is meant to complete the list with other essential and productive libraries that should be used in modern public-facing MVC and webform projects.

Microsoft is doing a good job in shipping standard front-end libraries with Visual Studio 2012 “ASP.NET MVC 4 Web Application” and “ASP.NET Web Forms Application” templates, they are raising the bar for the .NET web developers.

The VS template is a good starting base, however, I have been adding the libraries of this post to every new web project, they act as a completion to the ones shipped with VS and I wanted to share them with you.

1 – CSS Normalizer

Browser Reset

One common problem we used to face is the fact that every browser has different default settings. If you don’t explicitly style an element (a tag), it may not look the same cross-browsers.

The image above shows the following code with and without resetting:

<abbr title="Title text">abbr</abbr> has an underline in FF.

Today, the de facto CSS resetting tool is Normalize.css, it does much more than my demo above to target cross-browsers differences. Quoting the authors: Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

N.B. Normalize is meant to replace what was called as “CSS Reset” so, never call it “Reset” or you will be accused of being uncool!

Website: http://necolas.github.io/normalize.css/

Nuget: PM> Install-Package normalize.css

CDN: http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css

2 – HTML5 on legacy IE Browsers

It is a shame that IE versions prior to IE9 will not recognise HTML5 new elements such as <nav>. However, fear not, html5shiv to the rescue. You can use it in the document <head> like this:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

If you are using Modernizr then it does contain the html5shiv and you do not need to reference it separately, unless you have downloaded a custom version of Modernizr. Modernizr that comes with VS 2012 web templates already has html5shiv.

Website: https://code.google.com/p/html5shiv/

Nuget: PM> Install-Package html5shiv

CDN: http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js

3 – CSS Generators

LESS and SASS

CSS has to maintain backward compatibility, it cannot break the web. CSS is verbose and not DRY.

LESS and SASS are two popular CSS generators, they use more modern language that will render plain old CSS when compiled.

The web is divided on which is better LESS, SASS or not using a generator at all. I am personally with the LESS generator as it is straight forward to learn and covers the gaps of CSS, such as the lack of variables, rather than replacing it with completely new syntax. Here is a very simple example that would give you a flavour of LESS:

// LESS
@baseColor: #4D926F;
#header {
  color: @baseColor;
  background-color: lighten(@baseColor, 20%);
}
h2 {
  color: @baseColor;
  background-color: darken(@baseColor, 20%);
}

This will compile to the following CSS:

/* Compiled CSS */
#header {
  color: #4d926f;
  background-color: #86bfa2;
}
h2 {
  color: #4d926f;
  background-color: #2a4f3c;
}

I use this wonderful Visual Studio 2012 plugin to compile LESS to CSS the moment I hit Save : Web Essentials 2012. You can use it to compile SASS as well, but I never tried it for SASS.

Websites: http://lesscss.org/ & http://sass-lang.com/. The websites contain good tutorials that will get you up to speed.

Online LESS Compiler (for learning purpose): http://winless.org/online-less-compiler.

4 – Icon Fonts

Font Awesome

A new trend in the web has started recently which is using font for icons (well, I am saying started, however, Webdings came in 1997). The icons are vector graphics which means they will scale well at any size and on any platform (in theory), such as the mobile platform. They are quite useful for menus, bottoms, forms and whenever you want to break the text silence with a small icon. They speed up your site and your design process.

There are plenty of font icons, just Google it, my favourite is Font Awesome, here is an example of using it:

Font Awesome Sample

Website: http://fortawesome.github.io/Font-Awesome/

Nuget: PM> Install-Package FontAwesome

5 – CSS Frameworks

CSS Frameworks

If you’ve reached so far, then congratulations, here is the ultimate library that will save you time and will make you deliver faster.

A CSS Framework is meant to get you up to speed with the basic stuff that you do every time you start a new website. Things like normalizing CSS (check point 1 of this post), setting padding and margins, forms design, making your site responsive (reacts well when resized to mobile and slate devices), animation, cool buttons, modal dialogs, font icons (check point 4 of this post), they rely on CSS generators (check point 3), modern alerts, and more!

There are hundreds of CSS frameworks some of them are generic and some of them focus on certain areas (such as being more responsive or have special features for the mobile), the top competing two are Twitter Bootstrap and Zurb Foundation. A complete comparison between the two is beyond the scope of this post (Google “Bootstrap vs Foundation” and enjoy), here are some quick points:

  • Twitter Bootstrap is more popular due to the brand and the amount of plugins.
  • Zurb Foundation has better layout grid, however, at the time of this writing, Bootstrap is preparing for a new grid in release 3 which is currently in beta.
  • Bootstrap uses LESS (review point 3).
  • Foundation uses SASS.
  • Both use CSS3 and jQuery.
  • While you can’t compare them like-to-like, using one of them will cancel the need to use jQuery UI (I am talking about jQuery UI and not jQuery).

You could even find free and commercial templates based on these two framework that will definitely save you more time, especially if the project is a low-budget and/or for intranet use. This is a popular Bootstrap templates site {wrap}bootstrap.

There is much more to say about CSS frameworks, but the point here is to get you interested versus being a tutorial or a reference.

Websites: http://twitter.github.io/bootstrap/ & http://foundation.zurb.com/

Nuget: PM> Install-Package Twitter.Bootstrap.Less & PM> Install-Package Foundation4.MVC4

Conclusion

DRY and don’t reinvent the wheel are the points I wanted to make by this post. I hope I did highlight at least one library you didn’t know about and I hope that will make your day, please feel free to mention more libraries that you think are missing, in comments.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Adam Tibi
Architect
United Kingdom United Kingdom
Passionate about refining software practices, promoting self-motivated teams and orchestrating agile projects that hit the deadline.
Lives in London, UK and works as a .NET architect consultant in the City.
 
Need a pro service to help your organisation? Contact me via my website www.AdamTibi.net.
Follow on   Twitter

Comments and Discussions

 
GeneralBootstrap vs. Foundation Pinmembershane_dark21-Sep-14 9:15 
GeneralMy vote of 5 PinprofessionalRenju Vinod14-Jul-13 19:47 
GeneralMy vote of 5 PinprofessionalMihai MOGA13-Jul-13 20:54 
GeneralMy vote of 5 PinmemberTeaTime10-Jul-13 10:59 
GeneralMy vote of 5 Pinmembertvprasad1-Jul-13 7:55 
GeneralMy vote of 5 Pinmemberdennisigah1-Jul-13 6:02 
GeneralMy Vote of 5 PinmemberUKJim30-Jun-13 23:36 
GeneralMy vote of 5 PinprofessionalPrasad Khandekar25-Jun-13 23:33 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun25-Jun-13 1:02 
GeneralMy vote of 5 PinmemberWesMcGJr24-Jun-13 4:39 
GeneralMy vote of 5 PinmemberYingbiao18-Jun-13 13:56 
Thanks for sharing this. This is great.
GeneralMy vote of 5 Pinprofessionalsaguptamca18-Jun-13 0:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 25 Jun 2013
Article Copyright 2013 by Adam Tibi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid