As you may know, several months ago, I created an Adobe Photoshop template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework. Today I'm also adding an Illustrator template to my Resources section and I have updated the Photoshop template to include horizontal guides.
Both templates are simply documents with guides based on the 24 units provided by Blueprint. The background image of the grid is also provided with a layer to show unit numbers if you like, and the Illustrator document shows a fake comp to demonstrate positioning on the grid.
You may download the templates here:
I welcome your feedback.
I've been noticing the compressed CSS that Drupal is creating for modules and wondered how easy it would be to compress the CSS my theme files use as well. Pretty simple process in BBEdit:
1) Go to Markup > Utilities > Optimize to strip out extra spaces and wrap to one line.
2) Use Find (Command-F), check the Grep checkbox, and in the Find field, enter the following regular expression to find all occurrences of comments and leave the replace field empty:
/\* .*? \*/
3) Click Replace All.
Done. If you want reformat, select Markup > CSS > Format. Be aware that all your comments will be gone though, so you might want to create a backup for reading.
With IE7 for Windows officially out, we have to now deal with new browser issues, like the IE box model being fixed. The biggest issue for me has been how to handle changes in box clearing using the easy clearing method. Roger Johansson at 456 Berea Street blogged about the issue, and CSS-D maven Ingo Chao provided a link to the solution which involves adding display:inline-block and then display:block:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */Time to patch some CSS.
Someone asked me how I display different header images on urlgreyhot depending on what section (corresponding to the global nav tabs) you are viewing. My solution might not be exactly simple or the best way to go, but it works. Here are the steps:
1) I use the path_auto module to create URLs depending on either node type or vocabulary. So in my pathaoto settings I have weblog entry urls created as "weblog/[title]" and everywhere else the URL is either created manually or built based on the category (taxonomy term) so the services section urls are "services/[page title]".
2) In the PHP-Template theme, I do a regular expression check to see what the path is and assign a variable depending on what section we're in, e.g.
$dapath = $_SERVER["REQUEST_URI"];
if (eregi("/personal/services*.*",$dapath)) {
$sect = "services";
}3) I put that variable in the body tag:
<body id="<?php echo $sect; ?>">
4) I place an empty div in the page, which will be the placeholder for header image:
<div id="section-header"></div>
5) I put a rule in my style sheet to display the appropriate image depending on what section is being displayed:
#services #section-header {
height: 131px;
background: #fff url(bg-sect-about-me.jpg) top right no-repeat;
}This is also how I display a selected tab in the global navigation. The idea there would be to make each link in the nav have an ID, so you can then apply a CSS rule for #services #services-menuitem, for instance. It's a serviceable method. Do you do something similar in a perhaps more elegant way? How do you do it?
I'm not sure if I've blogged this before, but I've been using this method for using CSS files in Windows Mobile IE. My method:
1) Create the link for the handheld style sheet using media="handheld".
<link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" />
2) Hide your default big-browser stylesheet using media="Screen" (with the capital S). This hack hides to Windows Mobile IE for some reason.
<link rel="stylesheet" type="text/css" media="Screen" href="css/master.css" />
This method works for me. Good handhelds and phones will recognize media="handheld", but not sure all do. I'm always looking for other suggestions to get decent and readable results in handhelds, but only test in PPC and my Motorola phone. I have not used phone emulators in a while, but I assume they're still out there.
Suprglu is super cool. You enter your account names for web services you use (e.g. flickr, del.icio.us, digg, etc.) and RSS feeds for your blogs and Suprglu displays it all in one place. Nice and simple, and you get to modify the style sheet as much as you like. My Suprglu.
[via swissmiss]
The previous grid article dealt with how to come up with a CSS strategy when you're working with another visual designer's comps. Now I'd like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be coverted into a theme template.
Creating the design grid
I recently redesigned this site because I wanted a layout that provided larger areas for my content. I needed a system that provided me the flexibility to get creative with the layout, but I also wanted to be sure not to lose control of the order and balance of page elements. While the spare layout of my previous design worked well, the new design would be a little more information dense.
For the new layout I used a grid with a simple division of thirds at a fixed width of 801 px. To get to this width, I played around with different sizes that could be centered within a 1024px x 768px browser window with ample white space on the sides. I targetted my maximum width around 800px.
I started by dividing up 800px into thirds and had an approximate width of 267px per third to play with. I borrowed the idea from the MIG design of using a 3 pixel border to separate each division. This odd-sized gutter makes room for 1px vertical border lines with 1px of padding at each side if I need it. I kept sub-dividing the thirds and after a bit of tweaking came up with the grid below. Each little pink box is 1/12 the width of the page (64px wide). 4 of these side to side make up a third of the width, which I would use for normal column of text. 2 or 3 of these side to side would be nice for a narrow column.
Screen shot of the grid (shrunken to fit)
So now I have a grid that could easily be divided into the thirds I needed to make a multi-column layout. This gives me a very simple grid to work with and I don't think I'd need to have smaller grid divisions for blog themes. Next step is to start looking at layout sketches I had in mind and think about how to turn them into XHTML & CSS. The visual design I'm basing this demo on is an old theme I once used on my blog, with a little modification of the graphics and color palette. You can see a screenshot of the old theme (it's the one in the upper left hand corner).
Turning boxes into content areas
To get started, I think about the page elements I want to use. I want the page to have these parts:
- header
- logo
- graphic element
- body
- weblog content
- blog entry
- entry metadata
- comments
- blog entry
- local navigation
- advertisements
- weblog content
- footer
I have some hierarchy of elements established in this list. You probably won't need to jot down a list of elements like this to do a weblog layout, but it helps to show where we're going.
Using the list as a starting point, I start to think about where I want these elements to go on the grid. You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.
Wireframe of content areas
Above, I took each of the page elements and blocked them out. We're going to take the wireframe and create the visual design elements for the page and design the layout of the content blocks.
Visual design comprehensive sketch over grid
As I'm doing this design, I realize that I don't actually need 3 grid blocks for the ads, so I use 2 instead. The layout is looking good to me so far, so now I start thinking about how to turn the blocks into CSS.
Turning content areas into CSS elements
Working with grids makes it easier to visualize a strategy for the CSS layout. I start by thinking of the hierarchy of divs that will make up my page wrapper and all of the child divs nested within it. I'll label those in the wireframe to show what I'm thinking.
As you can see, I'm going to enclose the entire page in div#wrapper. The rest is a bit like a sandwich. On the top, I put the #logo and #graphic in div#header. On the bottom, I have div#footer with my copyright info. And sandwiched in the middle is div#main which encloses the 3 column layout of #localnav, #content and #ads.
Next I go about measuring each content block and recording it's dimensions. I'm mainly looking for widths here except for the header, where I actually want the height as well. Heights will, of course, stretch vertically in the div#main. I measure the #header out to be 801px wide by 131px high. In the screenshot below, I show how I get the dimensions of #logo using the Info panel in Photoshop. I do this to each content area, getting fixed widths for all the areas.
Creating the style sheet for the layout
Constructing a shell
When I'm done gathering my measurements, I can start to construct the stylesheet. I start by creating a barebones shell that will look a bit like our wireframe. First I record the main divisions in my CSS file.
#wrapper {}
#header {}
#header #logo {}
#header #graphic {}
#main {}
#main #navigation {}
#main #content {}
#main #ads {}
#footer {}Then I put in all the dimensions and positioning. To test my sanity and the precision of my measurements, I put the grid into the div#wrapper as a background image. The core CSS for the layout is below.
* {
padding:0;
margin:0;
font-family: Helvetica, Arial, Sans-serif;
}
body {
background: #fff;
text-align: center;
}
#wrapper {
text-align: left;
margin: 20px auto;
width: 801px;
height: 801px;
background: transparent
url(grid-unit-boxes-801px.png) 0 0 repeat-y;
}
#header {
margin-bottom: 3px;
}
#header #logo {
float: left;
margin-right: 3px;
width: 198px;
height: 198px;
background: #ccc;
}
#header #graphic {
float: left;
width: 600px;
height: 198px;
background: #ccc;
}
#main {
margin-bottom: 3px;
}
#main #navigation {
float: left;
margin-right: 3px;
width: 198px;
background: #ccc;
}
#main #content {
float: left;
margin-right: 3px;
width: 466px;
background: #ccc;
}
#main #ads {
float: left;
width: 131px;
background: #ccc;
}
#footer {
background: #ccc;
}
/* PIE easyclearing */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */Next I start putting the widths (and heights for the #header) I recorded into the style sheet, creating a shell for the site. To make the boxes lay out precisely, I use left floats for columns and the Position Is Everything easy clearing method. If you view a demo of the CSS shell 
you'll see that the boxes line up precisely against the background grid. Things are looking pretty good. Now we have to add the graphic elements from the comp.
Completing the wrapper
We're almost done now with the wrapper. To finish off the wrapper we have to cut up the background graphics and tweak the the widths just a little so that our border backgrounds fit around the grid. Take a look at the wrapper with header graphics and borders in place .
Final touches
It's looking nearly finished now. All that's left is to do the style elements for the HTML inside the major divs. I put in all of the HTML for the template areas. I create the site logo and drop that into div#logo. I add some padding to the columns inside div#main. Finally, I add color and sizes to the fonts. Now you can view the final HTML template .
Conclusion
Grids are very useful for doing even simple blog themes. They give you a solid system you can rely on to lay out your template and evolve it as needs require.
I showed you how I approach layout and site development for a weblog template and gave you an HTML prototype you can convert into a theme. You are free to use the template in this example, I'm releasing it under GPL. I hope this article helps Drupal developers in some way by giving them a process for approaching their theme designs. Have fun theming!
See also: Cutting and sewing grid-based design: Part 1, working with other people's comps
What kind of grid article is this?
Good question. After I blogged that I wanted to write this entry a few weeks ago, I started wondering if it was worth it since more appropriate people (visual designers) have written about grid-based web design already. Few people, however, seem to have talked about their actual process of getting a comp, cutting up its graphics and using it to produce actual CSS. As you may know, this blog is all about exposing my processes. So I thought there might be some value in writing about it.
As a site developer I often have to produce web graphics from other people's design comps, a process that involves slicing up layered Photoshop files. When I'm lucky, what guides me is a visual designer's grid system. A few years ago I would then take these grids and turn them into tables. The technique and math of doing CSS layout today is bit more complex than doing HTML tables, but it's also simpler in terms of separating presentation from content.
In this article I'm going to discuss the steps I take when measuring and cutting a comp layed over a grid and turning that data into CSS. The point is to demonstrate the steps to site developers who are new to grids. If you are already doing grid-based site development, this is not for you. I'm writing a second part to this article that provides more step-by-step instruction to using grids to design a site theme and producing the XHTML/CSS to match the visual design.
First a disclaimer. This entry is not meant to instruct you with regard to the design of grid systems. If you need an introduction to designing with grids, the literature below should give you what you need.
- Articles
- "Five simple steps to designing grid systems", Mark Boulton — discusses the practice of designing grid systems and ultimately applying them to web layouts.
- "The Funniest Grid You Ever Saw", Khoi Vinh — discusses the use of a grid system in the Onion.com redesign.
- "Thinking Outside the Grid", Molly Holzschlag — offers a differing opinion about the restrictiveness of grids in web layouts.
- Books
Sketch, measure, cut and sew: An example deconstructing a design grid
Here's a quick example to show you what grids do for you and how to use them as a site developer. You'll forgive the headings, but a friend has gotten me into watching Project Runway lately. The analogy to me is obvious. When we design, we strategize, architect and then produce. Not very unlike making a dress, no?
Sketch
On a project I completed in summer 2005, a visual designer gave me a few comprehensive sketches for the fixed-width layouts he wanted to use on their site. The comps showed a unique layout per section. A simple grid system was used to lay out the pages.
Grid system applied to home page
In dress-making, this would be the part where someone sketches designs and drapes fabric or paper over a dress form or mannequin to prototype the design concept. In our case, the grid is the mannequin and the comp is the pattern. I was surprised by how easy my job of planning the multiple layouts was because of this simple grid. The next step would be to identify where those divs would go and how to size them.
Measure
I worked with the designer to come up with usable widths for his grid based on browser resolutions we would expect from prospective users. He ended up providing me a final version of the grid that maxes out at 767px wide. This gave him enough room to be usable for browsers at 800 x 600 pixel resolution. He finally delivered a document to me that looked like the figure below (scaled down to fit this this blog entry). This was to be the grid system used in all of the layouts for a client web site. If you're playing the sewing game along with me, again this is the paper for our dress pattern.
Grid system
You'll notice that this simple grid specifies widths for columns and heights for rows. The designer gave me a set of comprehensive sketches that were drawn to grid. I was a little apprehensive at first, of the preciseness of the comps, thinking that positioning fixed-sized boxes might be tricky in some places. But the layouts are not that complicated really. Only a few key boxes needed to be precisely positioned at vertically locations. The main content areas would of course stretch vertically as needed. The trickiest part was dealing with font size increase in the narrow navigation links (system text) of the header. The logo was not a problem because I was using image replacement for that. In the end, I was excited by the challenge and set out strategizing how I'd architect everything and started measuring.
Cut
Home page: Identification of style elements and measurements for divs
Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer's comp and record measurements for my style sheet.
I don't usually do all the documentation of things like above, but if I was working with a large team, e.g. handing off pieces to another site developer, these documents would be very useful. What would be even more useful is a method to automate some of this process of wireframing and CSS element measurement without using something like Dreamweaver.
Sew
One of the requirements of this site was that the owners have the flexibility of using a unique layout in each section (each link in the global nav). Using a method I gleaned from Doug Bowman, I tell the content management system (CMS) to change the id applied to the body tag depending on what section the page is in. This targets a set of layout rules specific to the section it's in. To provide an example, the "Principals" section uses this <body id="principals"> while the "Contact" section uses this <body id="contact">. Each section uses the same grid but their layouts differ from one another.
The result would be that we produce different layouts for each layout type (section in this case). So we could modify the position of the page title area for example like so:
#principals #title {
position: absolute;
left: 0px;
top: 97px;
width: 189px;
height: 189px;
background: #000;
}
#contact #title {
position: absolute;
top: 96px;
left: 96px;
width: 96px;
height: 96px;
background: #E50530;
}
I'm using the same markup in both XHTML files, but because the Principals section uses the <body id="principals"> tag, it gets that first set of rules for positioning the #title above. The #contact section gets that second set of rules.
Now to show how we sewed up the final product. The grid is ghosted over screenshots of the two layouts I mentioned above. You'll notice how the page titles are positioned differently, following the CSS rules above. I was very satisfied at how precisely I could get the final pages to look like the sketches using CSS.
"Principals" page design layered over grid
"Contacts" page design layout layered over grid
Pretty simple process, but wow, that was a long example. I won't go into the details of that site's CSS, but the next part of this article will talk a little about the redesign of my site, getting from those comps to markup and CSS and how you can use the same process to plan and implement your site theme/skin files.
See also: Grid-based design: Part 2, Designing blog theme templates.