Responsive CSS Frameworks (Grids)

We have recently updated our responsive frameworks, currently ranging from 940px to 1200px. and with that we wanted to elaborate on what these frameworks are.

If you have nothing to do with web development and are not a front-end developer, web designer or template developer you won't really know how a website is built.

The majority of websites and website templates use some form of grid, it doesn't have to be specifically a responsive CSS framework, a normal layout is built using a structure: header, main content, sidebar, footer - there we have it, a simple framework.

A little understanding goes a long way when you are modifying a work that you didn't build yourself. There are a variety of grids or frameworks on the net, at the moment one of the most talked about is called Bootstrap.

We chose to create our own, simply because (in our opinion) they are much easier to use than those that are already on the net. Take a look at Bootstrap, yes, if you know what you are doing, have lots of time to study the files and are prepared to modify a lot of predefined elements, then its a great product.

We have used it as well as other grids, but to date find it easier and faster using our own simple but easy to use CSS frameworks. The big boys use classes like "grid1, span1, push1, pull1" making you wonder "what the hell do I do".

What do these classes mean you may ask, well, they say, "width : padding : margin". Our opinion: "grid1" doesn't tell us anything, in most cases "grid1" or "span1" can only be used for the smallest of elements, why, because it is the smallest grid element.

So why bother using a CSS framework, the answer is simple, a framework be it responsive or not helps you build a site faster and cheaper, so long as you can understand the framework that is being used.

Here the key word is "Prototyping", basically it means creating a layout on the fly (mock-up) ready for testing and modifying for further instances or real life use. Similar to our free basic templates, they are all basic layouts, tested and can be used, but are not an end product.

Take a look at our responsive CSS frameworks and you will see that the demos are laid out using the individual classes to emphasise what can be achieved and how easy it is to achieve such layouts.

Tools for Responsive Frameworks

What is a Responsive CSS Framework

Responsive CSS frameworks are the advancement to fixed width frameworks or commonly known as Grids. There are two main structures that can be used in a responsive framework, either fixed width or fluid.

What is meant with a fixed width responsive CSS framework: the CSS controlling the individual elements specified in the media queries is set-up so that they have a fixed pixel size.

Whereas a fluid CSS framework has measurements that are set using Percent or EM's, although EM's are rarely used.

Example (Smartphone 320px Viewport):

Fixed width responsive framework:

@media (max-width:320px) {#wrapper:320px;}

Fluid responsive framework:

@media (max-width:320px) {#wrapper:100%;}

In both examples the design would but-up against the sides of the viewport, which in most cases is not wanted, so the size has to be modified, in a fluid framework that's a simple matter, we use 95%.

A fluid framework depends on how the programmer / front-end developer has created the CSS media queries, whether it should, as the name says, always be fluid - one size to the next or simply react at certain sizes / breakpoints.

Example: 320px, 480px, 768px, 1024px etc.

Our tendency was to create a fully fluid solution (240px up to 1024px depending on the framework in use) simply because the size of the end product shouldn't matter. The layout should be presentable in as many devices as possible as well as portrait or landscape format.