In the latest article we have been dealing with responsive web design and its examples. We’ve had a few interesting pages and some really great websites. Since responsive web design becomes more and more popular among designers and developers they are experiencing a constant overflow of useful tools and resources that will make their lives easier. A
As you know, responsive web design is a very useful phenomenon not only because it is trendy right now, but especially because it is extremely user oriented. It helps the user to surf the web on every single device without constant necessity to zoom in or out a website to fit the content to the owned device. It also makes the developer or designer work so much easier. That is why, we have decided to include more resources that will make you life easier with responsive web design. Today we are presenting responsive web design frameworks.
Responsive Grid System
As the author says on his page this system is not a framework or a boilerplate. It is simply an easy way to create a responsive site. What are the features? Let’s have a look:
You can have any number of columns
It uses percentages to scale columns so they can be fit into any width
It easy, it plugs to existing HTML, and CSS
You may make the grid suit your content
This System comes under Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/) and you may also see examples of markup and examples of sites that are using the responsive grid system.
This frameworks, as the authors claim, is still under development and version 2.0 is soon to be released. However, the information is dated back to Nov. 28th 2012, so maybe I couldn’t find the newest version. Nevermind.
Titan Framework uses 960.gs classes so you can easily switch your site to responsive web design, by replacing the 960.gs CSS files with the Framework. There are also two tutorials included for less experienced users of CSS frameworks.
The structure of the framework is as on the website.
- reset.css – Reset stylesheet that reduces browser inconsistencies.
- text.css – Stylesheet for basic font size, headings and spacing.
- 16.css – This stylesheet contains the styles for the 16 column grid.
- 12.css – This stylesheet contains the styles for the 12 column grid.
Probably the most advanced front-end responsive framework. Let’s start with he new features in Foundation 3. It is developed with Sass, which is a really powerful CSS processor. Furthermore , foundation is equipped with lot’s of elements, new options that enable you to prototype quickly and easily. As authors claim it is ‘the most advanced front-end framework in the world’.
- flexible and efficient layout with 12 column flexible grid
- dozens of styles
- multiple button sizes and styles, tabs, custom form elements, modal dialogs, image sliders and many more
- prototype elements are ‘production ready-code, and easy to style up’
- supports any kind of device, any resolution and any screen size.
It the tab ‘Add-ons’ you may find HTML template, Icon Fonts, Off-Canvas Layouts, Responsive Tables and many more. And in the Foundation 3 Documentation you will find tons of info on what you get with Foundation and what you may need to start your project.
Developed by Twitter Bootstrap uses LESS CSS and is managed by GitHub. It is made for well, I think everyone, because it behaves well on desktop browsers as well on tablets smarpthones via responsive CSS. What it features? It is really much to enumerate but I will present the most important features.
- 12 column responsive grid
- endless components: Dropdowns, buttons, button groups, button dropdowns, thumbnails, typography, media objects progress bars, alerts and many more,
- download customization to take only the most important
It is a front-end template used by many known companies and people. Among those are Google, Microsoft, NASA and Nike. Also president Barack Obama’s site uses HTML 5 Boilerplate. These are only a couple of examples but let’s get to the bottom of the matter. What does HTML 5 Boilerplate has?
- optimized Google Analytics snippet,
- mobile friendly HTML template,
- documentation with dozens of tricks and tips
- libraries jQuery and Modernizr
- Normilize.css v1 – that constitutes an alternative for CSS resets
- base styles
- media queries
- Apache settings – to provide best site performance