Borrowing layout ideas from CSS frameworks

If you are interested in web design it is likely that you have come across CSS frameworks such as 960 and Blueprint. Put very simply, CSS frameworks establish baseline CSS styles and a grid-based approach to defining DIVs and other structural elements of a web page.

For full-time developers, who are often building sites from scratch over and over again, having an existing framework to work with is a clear benefit for speedy site development. But this comes at a price – frameworks are complex and daunting for the CSS novice.

However, the great feature of frameworks is their approach to the structural layout of a page and typography, and these are concepts that we can easily borrow for our own purposes without having to implement a full framework system.

A framework that is not a Framework

So, listed below some framework ideas that I use when designing a new layout. I’m not claiming that these are hard and fast rules, to be followed slavishly no matter what. Rather, I have found with experience that these work well in most contexts and, if nothing else, they give me a solid starting point for implementing some standard “rules” that I can apply when designing a new site and bring consistency when creating my CSS.

• Page width: 960px. I’ve borrowed this idea 100% from the 960 Grid System. The advantages of using a page width of 960px is (a) the page should always be fully visable when viewed on a screen with a resolution of 1024px and (b) the number 960 is divisible by lots of other numbers, so it is easy to choose column widths that will suit a wide variety of possible layouts.
• Main columns: Think of the columns as being derived from an invisible grid which is 960px wide. For example, if I want a 3 column layout with a left-hand column the same width as the other 2 columns, I simply divide my page width of 960px as follows:

  Left-hand column = 480px
  Middle column = 240px
  Right-hand column = 240px

  The same approach can be taken if more columns are needed. Of course, I haven’t yet allowed for any margin between the columns – which will have to be taken into account – but hopefully you can see the idea here.

• Padding and margins: Generally speaking, I choose a “base” padding or margin setting of 12px. I then derive all margins and paddings from this base setting. For example, a wide margin or padding would be 24px (being 2 x 12px). Smaller margins or paddings will also be logically derived from the divisors of the base setting ie 8px, 6px, 4px or 2px.
• Font-size: 12px with a sans-serif font such as Verdana, Arial or Helvetica. Readability is the key here, so remember that different font-faces with the same font-size may render differently in the browser. NB: Observant readers will have noticed that for this site I use 11px as the base font size. If I haven’t already said so, design rules are meant to broken. Ok!
• Line-height: For normal text this will be 1.5 times the font-size, ie 18px for a 12px font and 15px for a 10px font.
• Heading sizes: h1 will generally be 2 x normal text. h2 will generally be 1.5 times normal text and h3 will be either 1.3 or 1.25 times normal text size. Line-height will also be adjusted accordingly for the different font-sizes and so using a line-height of 1.5em rather than expressing it in pixels, means that the relationship between font-size and line-height is maintained. Again, these are starting points, but I find they generally give a visually pleasing hierachy to the different heading tags. As mentioned before, different fonts render differently on the screen, so readability and overall look and feel are the design watchwords, and don’t be afraid to adapt these rules if necessary.
• Fixed height block elements: By this I mean DIVs, images etc that will have a fixed height. For these, the height including border, padding and margins, will always be a multiple of the line-height. This idea and the reasons for adopting it are explored further in a previous article Typography and images.
• Image sizes: In terms of width, images should conform to the Main Column rule mentioned above, and allowance made for any margin or padding between images and text. In terms of the image height, I always make this a multiple of the chosen line-height so that text wraps cleanly around images.

That’s enough “rules” for one article! Nevertheless, I find these to be really useful starting points when thinking about an initial page layout, and are easy enough to remember that they have become second nature for me when designing.

Putting the Grid system into practice

In future articles I shall try to develop these ideas further and give some practical examples of how to implement elements of a CSS Grid system.

Related articles:

• Typography and images
• Image sizes using a Grid Coming Soon!