Home » ClientCore: Pages in browsers » Web page layout

Reusing an existing layout

See more about:
Table of Contents
  1. Where are we?
  2. This lesson’s goals
  3. Reduce, reuse, recycle
  4. Where to get layouts?
  5. Summary
  6. What now?

Where are we?

You know how to create layouts. But it’s better not to.

This lesson’s goals

By the end of this lesson, you should:

  • Know that it’s better to reuse an existing layout than create a new one from scratch.
  • Know two good sources for free designs.

Reduce, reuse, recycle

Layout can get complex. When you try laying out your own pages for real, you quickly find that CSS does things you don’t expect.

For example, the vertical margins between two elements will be collapsed, unless you are floating an element, and then the margin of the inner margin gets applied to the outer one, if it is larger, unless there’s padding as well, in which case it doesn’t, unless there’s a full moon, except if Frau Balckenfeld takes the number 17 bus in Berlin to visit her sister.

OK, I made up the last two things, but the others are true. The point is, it will drive you crazy trying to get a layout right. You’ll end up pulling out your own fur in frustration.

Over the years, I’ve found a good solution: give up. I no longer try to create layouts for real sites from scratch. Instead, I use a layout that someone else has created. There are many experts in CSS layout, who make their living doing just that. Some make their layouts freely available.

When I create a new site, I copy a layout, and adapt it to my needs. Of course, I only use layouts that the author has said I can use.

Where to get layouts?

Here are two good sources for layouts. The first one is DynamicDrive. Here are some of their layouts:

DynamicDrive layouts

Figure 1. DynamicDrive layouts

The layouts are bare-bones. They don’t have graphics, or anything else, just regions laid out in various ways. Choose the one you want, download it, and customize it.

Bare-bones layouts are good when you need to use specific branding. For example, if you’re making a site for your local high school, you already have a logo and maybe some colors that you have to use.

When you don’t have such constraints, consider using a complete design that includes graphics. A good source is Open Source Web Design. Here are some of their offerings:

OSWD designs

Figure 2. OSWD designs

One of the OSWD designs might look familiar. Hmmm… Where have I seen that before?

Before I start using a layout or design, I open it up and look at the CSS. I want to see CSS that is simple, and that I can understand. Then I’ll be able to change it to do what I want. The design I adapted for CoreDogs – from nodethirtythree design – met those criteria.

I highly recommend that you use an existing layout or design. It will save you much anguish.

By the way, you can copy any of the layouts in CoreDogs for your own projects.

Exercise: Modify an OSWD design

Here is the Transparentia design from OSWD.

Original layout

Figure 1. Original layout

Download the design, and change it to switch the nav and content regions:

New layout

Figure 2. New layout

Hint: You can do it with just two small changes to the CSS.

You can see my solution.

Upload your solution to your server. Put your URL below.

(Log in to enter your solution to this exercise.)

Summary

  • It’s better to reuse an existing layout than create a new one from scratch.

What now?

On to some exercises!


Lessons

User login


Dogs