HTML, CSS, and the responsive way

Now that we have seen a general overview about the tools to ease our life in MVVM/MV client-side development, we take a look at two tools that will help us on the interface with HTML and CSS.

As the goal of the book is not to be the absolute guide for interface design, we introduce here a simple library build with only HTML and CSS as its name makes clear, Pure CSS.

Pure CSS

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/.

Note

Pure is ridiculously tiny. The entire set of modules adds up to 4.5 KB when minified and zipped. Crafted with mobile devices in mind, it is important to us to keep our file sizes small, and every line of CSS was carefully considered (source: 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.

Note

All the tools mentioned in this chapter are open source and maintained by the community development, except the Visual Studio and WebStorm IDEs.

You should choose tools that are useful and productive for your development environment.