Line25

Design & Build a Grid Based Web Design with CSS

Read the full post

I’m currently working on a new WordPress theme called ♥grid, which lives up to its name with a clear grid based design. Follow this step by step walkthrough of the design and build process, right from the initial Photoshop concept, through to writing the HTML structure, styling up with CSS then adding clever functionality with the jQuery library.

View the LoveGrid demo

The ♥grid concept is pretty minimal in its design, using a limited colour palette of light grey, dark grey and a highlighting colour of red. The background of the design makes use of a subtle texture for a tactile feel, but the main feature is the strict grid based layout. The design makes use of a 24px baseline and 6 column grid, which becomes a design feature itself as it remains visible as part of the design.

View the demo

The design concept

The design of ♥grid started in Photoshop. I always begin my website designs with a fairly large canvas of around a 1680px wide, this helps me gauge how the site will look on a typical widescreen monitor.

The background of the canvas is filled with a light grey tone, then given a touch of texture using the Photoshop Noise filter at just 3%.

A new 24x24px document is created, in which the repeating pattern for the baseline grid is created. Just a single 1px line across the lower edge of the canvas is all it takes. This pattern is then defined as a pattern.

The pattern is then filled across a new layer and set to Multiply to render the white area transparent. The vertical grid lines are drawn manually, then duplicated and moved by hand. The cursor keys nudge the lines by 1px, or by 10px while the Shift key is held. Gutters are measured at 21px, and the column widths are 139px.

All the vertical lines are grouped together once six columns are created, then aligned centrally on the document. The basic grid is now ready to be decorated with the actual page elements.

The logo comes first in the top left corner. A selection is made within the first column and filled with red.

The ♥grid logo is then placed inside the logo container, and aligned on the baseline grid.

Navigation elements are then placed on the same baseline, and aligned to the right of each of the five remaining columns. Being links they’re given a red colouring.

Being a theme for a blog the content is made up of sample blog posts. The first post is laid out and spread across columns two to six. Georgia is used for the post titles as a stark contrast against the Helvetica body text. The body text itself is edited so the line height matches the height of the baseline grid.

The first column is reserved for some meta information about the post, such as post date and category. These are laid out in a lighter grey to give less prominence, but at a larger type size. The 24px line height is maintained to keep the consistent leading across the design.

Read more buttons are styled up with a red background and serif Georgia text to give the links extra prominence.

The design begins to take shape as two sample blog posts show the white space and structure across the layout.

The lower portion of the design switches to a darker grey, giving a contrasting footer area. A large selection is filled with a dark grey and given the same noise treatment as the background.

The footer area features a range of lists, these lists begin with two short lists of Categories and Social links. Headers are set in Helvetica, while the links are treated with Georgia at double the line-height.

Links in the lower portion of the design are set in white to give contrast against the dark grey background. The first two lists fit within a single columns, while the second two span across two columns.

Now the design concept is complete, the individual images can be exported ready for the building stage. This starts with the repeating background graphics, taking into account the gridlines so they are recreated when the graphic repeats.

Being a lightweight design, the number of image files is pretty low. Two versions of the background are exported, one with, and one without the grid. This will be developed as a feature at a later stage where the user can toggle the grid lines on and off.

Creating the HTML structure

The next stage of the build is to write out the HTML structure. This begins with a typical webpage layout with Doctype, head and body.

The top portion of the design is contained in a <div> with an ID of upper, this will be a hook for the baseline grid pattern in the CSS stage. The logo and navigation list are written out as <h1> and <ul> elements.

A <div> with an ID of main contains the main content, and each post is separated with individual <div> elements. Inside each post the content is split into two <div> elements, so the post content and post details can be floated side by side. Despite the details coming first in the design, they are written second in the HTML to keep a logical order of information, these can be positioned correctly by floating them with CSS. Post titles are laid out as <h2> headings, following on from the <h1> used in the header. <p> elements with a class of btn are used to represent the read more buttons.

In the lower portion of the design, each panel is laid out in its own <div>, with <h3> elements identifying the lists of anchor links.

After the four list panels, the three credits are laid out in a <ul>. Information is given in the anchors, but the actual logos will be displayed using CSS. Finally a back to top link is placed in a <p> element. This back to top link targets the #header, but will later be enhanced with jQuery so the page scrolls automatically, but it’s important to maintain the functionality using a plain old same-page anchor for those without Javascript enabled.

Styling the design with CSS

With the HTML strucutre in place, the design can now be styled with CSS to match the original Photoshop concept. The CSS starts with a reset to remove any browser defaults, then begins styling up the page body. A global font style of Helvetica is set, followed by a line-height of 24px to match the baseline grid. The baseline grid itself is added as a background-image to the body, whereas the vertical gridlines are set as background images on the #upper div.

The <h1> is given specific dimensions and a red background to match the design. The”Show/Hide Grid” button in the header is styled accordingly with the small icon as a background image, but is set to visibility:hidden;. Being a function that relies on Javascript, this button will be made visible again using jQuery so users that don’t have Javascript enabled won’t see it. Navigation <li> elements in the header are floated side by side and given specific widths and margins to match the size of the grid columns and gutters.

Fonts are styled up in the #main section, with headers being set in Georgia, body text set in grey Helvetica and buttons set with a red background. Each elements also has a 24px bottom margin to bump the following content down an extra line on the baseline grid.

Each post <div> has 48px of bottom padding, this equates to two baselines as well as the 24px margin on the paragraph elements, leaving three lines between each post. The content and details divs are floated side by side, and their contents styled appropriately in accordance to the Photoshop concept.

The #lower and #footer sections of the design are given new background images to generate the darker footer styling. Font styling for the footer is then reset, making headings a subtle grey colour and links in a more legible white against the dark background.

The four links panels are all floated side by side and given left margin to space them according to the grid gutter. The footer already has padding to take into consideration the first gutter, so the margin on the first div is removed with the :first-child pseudo selector. Panels one and two are set at the width of one column, while panels three and four span across two columns so are given a greater width, as measured from the Photoshop document. The list of links in each panel is styled to match the concept, with type set in Georgia at a doubled line-height.

The credits list items are floated and given the appropriate margin, as well as the sprite background image. Each individual <li> is then given specific background-position settings to display the correct logo. Finally the back to top link is floated over to the right, given the smaller font size and treated with a background image to render the small arrow. A small 3px margin helps tweak the text into place on the grid, ensuring the link is aligned by the text baseline, not the bottom of the icon.

Enhancing with jQuery

The design and webpage is now nearing completion, with the HTML and CSS page matching the Photoshop concept exactly. Next up is the extra Javascript functionality. Three Javascript files are reference in the HTML head, the jQuery library, the jQuery Cookie plugin and my own scripts.js file, which will include all the handwritten code to activate everything.

The first function to be added is the auto-scrolling back to top link. This code states that when the #back-top anchor is clicked, animate the body and html to the position zero. return false; is in place to stop the original anchor from working, so the effect relies only on Javascript.

Next, the “Show/Hide Grid” button functionality is created. First, the button needs making visible after the CSS was set to visibility:hidden; earlier. Then the toggle() function gives commands for when the button is turned on and off, these include adding or removing the class nogrid to the body and changing the text of the anchor.

In order for the effect to work, extra CSS styling needs to be added to actually change how the page looks when the page body has the nogrid class. This is where those alternative background images come into play.

The effect works great, when the user clicks the “Show/Hide Grid” button, the grid is toggled on and off, but once the page is refreshed, or a new page is visited the grid comes back. In order to save the setting the jQuery Cookie plugin needs setting. $.cookie("grid", "hidden"); creates a new cookie named grid with the value of hidden when the button is clicked. A couple of lines of jQuery then check if the cookie is present, and if so the addClass() and .html() functions are repeated. Now whenever the user visits the effect will be in the same state as they left it.

View the LoveGrid demo

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.mpadesign.hu/ Marcipa

    Thanks for sharing .

    It was really helpfull.

    M

  • http://www.dynamicwp.net Eko Setiawan

    Very useful for me, thanks…

  • http://stellacyan.com/ stellacyan

    nice work, Chris! Thank you!

  • http://www.digitalstyle.com.au Nico

    i really loved this tutorial, it is the first one i have seen which really teaches the javascript in-conjunction with the html/css instead of alone which made it more understandable

  • http://fbrushes.com/ Joefrey Mahusay

    Great tutorial Chris! Thanks for sharing ;)

    5 Star!

  • d.

    I'm curious, why the odd, uneven width for vertical column and gutter (139/21)? Wouldn't you prefer 140 px and 20 px for easier calculation of other elements?

    • http://twitter.com/chrisspooner Chris Spooner

      The answer isn't as glamorous as you might expect, I just didn't take into consideration the 1px width of the gridlines in Photoshop, so I had to accommodate it in the CSS.

      • Bruno Belotti

        Even great web-designers, sometimes, forget things…. That's absolutely a relief… I have hope! :)
        Thanks a lof for sharing, great tutorial (and really nice design, BTW)!

  • Dayanand

    This step wise decleartion is very effective to the learner as wel as designer. Marking of the CSS is more easy to understand the use and effect of css in the web page

    <a href=http://www.e-profitbooster.com> Web Designing Company </a>

  • http://www.them.pro Beijing Design

    Very clear steps! It looks amazing.

  • Flick

    One of my favourite WordPress theme tutorials. There's nothing like clear steps which help encourage newbies like myself to create their own theme.

    Just out of interest, does this mean we'll actually see a theme in the Directory (or on WLTC) called Grid? :)

  • prathap

    Nice one chris, if you provide a PSD file for download it could be great for learning.

    Thanks
    K.Prathap

  • http://sideradesign.com paul

    nice, I thought 24px would be too much for the line height, but it looks good.

  • http://blog.angechierchia.com Ange Chierchia

    I've read very quickly your tutorial, but it's a great one! Love the design and the intelligent use of a grid to give a vertical rhythm to your texts. Like paul said, a 24px line height seems weird to me, but it's awesome combined with your grid.

    Nice job!

  • http://www.leegustin.com Lee Gustin

    Awesome job Chris. Not only on the design, but the code/javascript too. Very easy to follow along and learn a thing or two!

    Thanks

  • http://www.youresorandom.com youresorandom.com

    nice simple, theme

    IE7 shows some small errors

  • http://jerang.net jerang

    Am curious, looks like this page has some encoding issues in firefox 3..5. Have you looked into it. Alolot of the text is jambled up!

  • http://www.fenotype.nl Lourens

    Very nice tut mate, thanks a lot!

  • http://www.arthitst.com munkkron77

    so cool.:)

  • http://www.nealite.fr tymc

    congratulations. working with grid is a big challenge.

    i worked a few month ago on a similar template for my company.

    HTML + CSS allows to work with vertical grids. But for horizontal grid, i mean the baseline : it's an another deal… mainly because you can not declare image or video elements outside of the horizontal flow.

    Try to add image in your blog's post. It'll break the flow; your design is down.

    If you find a solution to declare pictures outside the flow, please tell me!

  • http://www.elliscreative.com.au Dan Ellis

    Thanks Chris, you are a champion! Being a designer that is trying to part the murky waters of web design this has been really helpful.

  • http://www.winworld.com Jase Clamp

    Excellent overview! I've got this one bookmarked now :)

  • http://www.jgdesignz.com Jose Gonzalez

    This is very helpful… Thanks Chris!!!!!

  • http://oliverjfarrell.co.uk Oliver Farrell

    Nice tutorial and design!

    Thanks Chris!

  • http://laira.pathseek.info/pers Laira

    Such a wonderful tutorial and it discloses the clear steps so it is very useful so really Thanks for sharing with us

  • http://enrique-ramirez.com Enrique Ramírez

    Nice tutorial.

    It has one flaw, though. Have you tried with 2 lines on the h2s? It'll break the vertical rhythm. It's not an easy issue o solve, either. :P

    This looks quite similar to my re-design (which am about to launch soon). That was odd! :P

  • http://juicemedia.com.au vaughan

    Thanks Chris this is a great tutorial and is clearly the next step in web typography. What would you do if you had a more complicated design though? I've been using a baseline grid of 5px in my design and as such every line height I do is a multiple of 5. This way I can have a 11px font with a line height of 15px next to a 12px or 14px font with a line height of 20px and everything lines up.

  • Dave

    Chris, thanks for this great tutorial. It was extremely easy to follow and I learned a lot quickly by looking through it.

  • http://www.dreammediadesign.co.uk jayson

    Staightforward and easy to follow. thanks.

  • Zod

    Hi Chris, you did a great job with this tutorial but I found some problems. :(

    On your demo* we can see that the list items are not perfectly vertically aligned on the grid. :/

    *http://line25.com/wp-content/uploads/2010/love-grid/demo/index.html

    • Zod

      What I wrote is not clear enough and I'm also sorry for my bad english level ; so what I meant is on the footer part of the demo website the listed items found under each <h3> titles are not fitting to the baseline. :(
      This is the only one imperfection I found.

      I would love if you may correct this, please Chris. :)

  • http://bsidegraphics.co.cc BSide Graphics

    Really nice !
    Lovable minimal style!

  • http://www.webdesignerideas.com Adie

    Great theme and the process is really well explained.

    Would work great for a minimal personal blog.

  • http://www.fritschlecommunications.com kyle

    great little tutorial. well done

  • http://geeseoff.com Geese Control

    Very awesome article. Good to know

  • Zod

    Do you guys have no alignment problem with the baseline on the footer part for listed items ? :o

  • http://www.thepixery.com Pixery

    Also noticed some small issues with IE7 but overall pretty great. Check us out as well for more inspiration.

  • http://www.emergestudios.co.uk Jonny

    Nice! Cant go wrong with a grid! :)