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.
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?
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?
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 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.
What can you do with Handlebars?
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.