Usually programmers like myself seldom find the times to do research about coding areas not related to the projects they do. So, in my case, being involved mainly in back-end development I find it hard to keep up to date with front end frameworks and technologies.

However, besides my job, I’m also involved in other personal projects (like this blog and others), so recently I wanted to know what’s available for easily developing HTML5 front ends. Here’s a list of what I found.

HTML5 boilerplate

The web’s most popular front-end template

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

What can you do with HTML5 boilerplate?
Well, HTML5 boilerplate is the minimum ground down scaffolding-like framework that you can use as a starting point for HTML5 web development. It provides a package that contains JavaScript, CSS and even various web server configurations that can get you started with your web projects as they take care of all (most) of the common problems encountered when doing front end web development. Problems like cross browser uniformity, IE support, etc.

Bootstrap

Bootstrap is a front end framework developed at Twitter and I consider this one of the most useful and most easy to use free modern front end framework available. It’s currently at version 3 which is a mobile first framework, meaning that it’s by default responsive.

What can you do with Bootstrap?

After inserting in your code the CSS and the JavaScript that comes with Bootstrap you can create your front end simply by assigning CSS classes your elements. Bootstrap has all the main UI components needed for a modern interface like: a layout grid system with up to 12 columns, out of the box menus, button styling, forms styling, drop downs, dialogs, sliders etc. It also does a layout reset so that the design will look similar on all browsers, has a sleek default typography for easy reading and provides a wide range of glyphicons. Glyphicons are actually icons made into a font – which mean faster loading, nice scaling, configurable color. Bootstrap has a default look and feel, but it can be customized.

LESS

LESS is a front end framework that allows you to write configurable CSS style sheets. It’s the perfect tool in case you need to have a front end that supports themes. You can use LESS by loading and interpreting the LESS style sheet at runtime or you can use the compiler to produce a standard CSS file.

What can you do with LESS?

The basic idea of LESS is that you can have variables inside your CSS for let’s say the color of the fonts. Whenever you need to change the color of the fonts, you won’t have to change in 20 places, but only change that variable. Besides that, LESS also offers a wide range of other uses like mixins and functions. Mixins are pieces of CSS that appear repeatedly in your style sheet (e.g. for example a certain type of border). To avoid writing the same CSS properties over and over again they can be grouped under a mixin. Mixins can also have parameters.

LESS functions are also a very handy tool as they will allow you to work with math formulas (e.g. for calculating sizes) and even manipulate colors (e.g. getting a lighter or darker color from a color code).

jQuery Mobile

jQuery Mobile is an HTML5 front end framework mainly for mobile devices. It allows quickly setting up an interface which will all on all main mobile devices, but also on non mobile devices.

What can you do with jQuery Mobile?

With jQuery Mobile you can very rapidly setup an interface for your applications and the interface will work on all mobile devices. The look and feel of the application will be the same across all devices and it will be similar to iOS apps. The library includes features for touch slide navigation, form styling with big fonts, big buttons, etc. as everything is meant to be displayed on touch devices. The configuration of UI elements is easily done through indicating CSS classes on HTML elements and through the use of data-* attributes. NOTE: one thing I would like to point out here is that even though I have not extensively used this framework, the few examples I’ve made for myself seem to be relatively slow in response.

Handlebars

Handlebars is a JavaScript template framework which allows the creation of HTML templates which can later be rendered via JavaScript. It’s based on {moustache} templating, meaning that the placeholders for the dynamic data will be written between {}.

What can you do with Handlebars?

With Handlebars you can achieve model-view decoupling, meaning that you can store and manage your view templates separately and then use them to render your model data. It’s extremely easy to use as it only requires including one JavaScript file and then you have to create your view templates, load them and attach the data you want rendered in the templates. The templates are simple HTML fragments with {moustache} placeholders and the model data is JSON. Handlebars has a few features out of the box (e.g. list iteration), but also allows extension functions so you can write your own placeholder handlers.

Hope you find this list useful and don’t hesitate to drop questions or suggestions in the comments area. I know that there are tons of other HTML5 front end frameworks out there, but I think this would be a good start for anyone looking for a starting point.