Learning a new technology is like putting on new clothes; at some point, we will outgrow those clothes, or they no longer present the appeal that attracted us to them at the time of purchase.
It's at times like this we need to progress onto something more advanced or with additional functionality, otherwise our development will come to a standstill! Thankfully, there are literally dozens of options available online that we can explore—one might be forgiven for thinking that there are too many and where does one start?
A great starting point is a responsive framework such as Bootstrap or Unsemantic; these have been made to improve the usability and help speed up the process of development. These frameworks were introduced with the aim of providing a grid or foundation for rapid prototyping of the various mobile functionalities, layouts which allow the designers and developers to better make use of their development time.
This is just one part of what is available to help you along, let's briefly cover a few ideas that might serve as somewhere to start:
- Bootstrap is downloadable from http://getbootstrap.com/, this veteran grid system was first created by Facebook, before becoming a standalone product in its own right.
- If you want to explore something that is more than just a framework, then Responsive Grid System might be an option; it's available from http://www.responsivegridsystem.com/, with a SASS version available for those who use that CSS preprocessor.
- Instead of simply downloading a framework, how about generating one online? For this, try Responsify.it (http://responsify.it) and Gridpak.com (http://gridpak.com) as possible contenders.
- We used a minimal Grid system earlier in the form of Gridfy, there are others available, if this one is not to your liking. As an example, try Gridly, which can be downloaded from http://ionicabizau.github.io/gridly/example/.
- It's worth noting that not every Grid system is available as a standalone—some form part of a component library. A good example is Formstone; its grid system is available from https://formstone.it/components/grid/. For those of you who use the Less CSS preprocessor, this grid comes with a version that can be used with this tool.
- Staying with the theme of component libraries, why not have a look at Metro UI? This library, available from http://metroui.org.ua/grid.html, even has backing from Microsoft; it does require jQuery though!
- Some of you might have heard of the 960.gs grid system, which was available a few years ago - it has been replaced by Unsemantic, which is available from http://unsemantic.com/.
- We covered the use of flexbox as a technology for creating grid-based layouts; as a start point, why not have a look at the PureCSS library? This is available at http://purecss.io; it's a good example of using flexbox to produce clean layouts without too much fuss.
As developers, this is one area of responsive design where we are spoilt for choice; the great thing about open source software is that if a framework we choose isn't right, then we can always try another! To help us make the decision, there are a few questions we can ask ourselves:
- Do you need a version that works with a CSS preprocessor? Although preprocessed CSS is a superset of standard CSS, there are grid systems available that are specifically built from a preprocessing technology such as SASS or PostCSS. This is easier than trying to convert finished CSS into something that can be compiled by our processor.
- How complex is your site? Is it a single page calling card affair, or something substantially more complex? There is clearly no point in burdening a simple site with a complex grid arrangement; equally if we're building a complex site, then our chosen grid system must be up to par.
- Is browser support an issue? If we can forgo support for some of the older browsers (and particularly below IE8), then choosing a CSS-only option is preferable to one dependent on using jQuery. The same principle applies if we already have to use more than just the occasional external resource. There is no need to add in a plugin if using CSS is sufficient.
- Does your site need to make use of UI components which need to be styled using a themed library? If so, check the library; it may already have a grid system built in that we can use.
The key here is that we shouldn't simply choose the first available option to us, but carefully consider what is available and pick something that satisfies our requirements where possible. Any styling can of course be overridden—the trick here is to choose the right one, so that overriding is minimal or not required for our site.