Some Cool Front End Design Frameworks

Friday, 14 March 2014

Some people love web design and some people just don't.

Trying to make sure that this div and that div are correctly aligned, while taking up 33.3% of the screen width, can take a while if you're not a CSS guru and have never worked with it before.

Then once you've been through the pain of making your site look decent, you check your design in FireFox and things aren't as good as what they looked like in chrome...

Developer punching through laptop screen

If you don't want to spend too much time on designing your site you can use a design framework to help you get started quickly.
You can think of a framework as a collection of Lego blocks which have been pieced together, and can be built upon, to act as a support or guide to building something useful. So you could say a Front End Framework is a collection of blocks put together to help with designing websites. In Web Design these blocks will usually be CSS stylesheets and Java script files, which when used will help give any site a decent look and feel , straight out of the box.

Using a design framework has its benefits, including:

  • Saves Time - You can quickly get a site up and running as most frameworks will have predefined styles included, so you will not have to spend much time working on a design
  • Good for learning - If you aren't good with CSS or don't know much, using a design framework can serve as learning tool. If you dig into the components of the framework, you should learn some things..
  • Handles cross browser & device compatibility through Responsive Design - Responsive design is an approach that suggests that sites should respond to the user's needs and device capabilities. This is achieved through the use of things like CSS Media queries, which apply different styles depending on the browser window size, and relative sizing and positioning rather than fixed. Most frameworks available today are resopnsive.

There are many different kinds of frameworks available, some may just provide a grid system for positioning elements on a page, while others go as far as providing a style for buttons and list elements.

Here are some cool ones I have played with:

  • Twitter Bootstrap Logo Bootstrap is probably the most popular framework available. Built by @mdo and @fat at Twitter, bootstrap provides enough for you to put a site together very easily. Bootstrap includes a stylesheet that provides styles for all important HTML elements and Jquery plugins to provide additional UI components such as modal popups and Javascript alerts.


  • Zurb Foundation Logo
    Foundation is another front end framework that is widely used. Foundation has a fully responsive grid layout that adjusts automatically even with a different screen orientation. Foundation includes styles for the regular HTML elements and includes JavaScript components to provide additional features, such as modal popups.


  • Chocolate Chip UI Logo
    Chocolate Chip UI is a mobile design framework, made to give mobile web apps a native look and feel. Chocolate has three stylesheets which give a native look for the desired platform, one for Android, one for iOS7 and one for Windows phone. Chocolate Chip UI uses Javascript to provide typical mobile UI features, such as slide out menus.


  • Ratchet Logo
    Ratchet is another mobile design framework. Go ratchet includes two different styles, one for Android, and one for iOS. Each styleshee will give a web app the look of a native mobile application. Ratchet uses push.js to handle transitions between pages in your app and includes other javascript features to get your app looking more like a native mobile app