A responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes.

Introducing The Grid

Download the Fixed Version or Fluid Version

Grid 12

Grid 1

Grid 11

Grid 2

Grid 10

Grid 3

Grid 9

Grid 4

Grid 8

Grid 5

Grid 7

Grid 6

Grid 6

Screen Sizes

MQFramework is designed for five different screen resolutions. But with that comes the challenge of displaying the information you require.

The Grid

MQFramework is built and designed around a 12 column grid. For each of the supported screen sizes MQFramework has adopted a different width of container to house the grid. As for mobile versions, the twelve columns become one stacking up vertically.

<

Push

Grid 3 with a "push_1"

Grid 3 with a "push_2"

Grid 3 with a "push_3"

Grid 3 with a "push_4"

Grid 3 with a "push_5"

Grid 3 with a "push_6"

Usage

Getting to grips with MQFramework is easy, if you understand how a grid system works.

Customization

MQFramework is very easy to customize. We have included a seperate stylesheet for your styles and settings. This stylesheet should be the only one you should have to modify at great detail to get your design working.

Typography

Included is a basic typography stylesheet for your needs, but don't fret, you can use your favourite @font-face fonts and change all the styles to suit your project.

Prefix

Grid 3 with a "prefix_1" class

Grid 3 with a "prefix_2" class

Grid 3 with a "prefix_3" class

Grid 3 with a "prefix_4" class

Grid 3 with a "prefix_5" class

Grid 3 with a "prefix_6" class

© 2011 · HTML5 · CSS3