HTML, CSS, and the responsive way

This tool provides us with a complete user interface with several components for forms, tables, menus, buttons, and everything else we need to build robust interfaces. The main point here, is the ability to build the interface components without JavaScript behaviors and can be downloaded for free from http://purecss.io/.

The important point here is that despite being directed to complete and responsive design, we can use it in a modular way and not have to depend on your responsive grid system, which although very useful in applications is not necessary for our examples.

With this in mind, we chose another responsive grid system called Responsive boilerplate; it is very simple to use with only three main classes and twelve columns. It can also be downloaded for free from http://www.responsiveboilerplate.com.

Responsive boilerplate is a lightweight (1.5 KB) cross-browser grid system, elegant and minimalist, made with only three main classes and 12 columns. It is built with mobile first in mind, fits any screen size, and is prepacked with some extra CSS helpers for mobile devices.

It also has a series of snippets for the Sublime Text editor, which can be downloaded from https://github.com/newaeonweb/ResponsiveBoilerplateSnippets.

It can also be simply installed via Package Control on Sublime Text. The package is very complete and makes our development process very fast, as we can see in the following screenshot:

Also, we can install both Pure CSS and Responsive Boilerplate with Bower. It's very simple; just type the following commands in terminal:

bower install responsiveboilerplate
bower install purecss

We will cover this in practice in the upcoming chapters.

There is also a series of templates to develop SPAs provided by the community behind the Microsoft for IDE Visual Studio 2012, which can be downloaded for free from http://www.asp.net/single-page-application/overview/templates.