CSS grid frameworks for rapid prototyping

We started seeing references to CSS grid frameworks and wanted to find out what they were all about.  A lot of high end web sites are using these frameworks.  Basically they are preset CSS files that can be added to your web pages that allow your page to use a variety of predefined div sizes with predefined gutters.  There are templates that go with them that make easy-to-use overlays for Photoshop, Fireworks, and other graphics programs.  You build your graphics files so to the element widths match the overlay.

web site mockup
Typical web page mockup (1 block for header, 1 nav block, main content and poster image, then more mixed full length separators & text blocks…)

When you slice and code them, you use a simple naming convention and your grid is born.  They are great for putting out blocks of information, they appeal to your design eye, and you can knock them out very quickly.  The resulting layouts look very professional.  When you have a client that is easy to please and that likes clean layouts, this can be a freezer to oven to table solution for you :)  Links below…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>