Fixing Blueprint CSS 0.7.1

Blueprint CSS

Note: Updated Tuesday 24 March 2009 @ 10:00

Blueprint CSS is a CSS framework. The latest version is v.0.8 but a lot of people are still using version 0.7.1, even though there are a number of irregularities in it.

So, this evening I’ve been sifting through the Blueprint CSS version 0.7.1 code and making a few corrections. The bulk of irregularities can be found in the source code (within the /blueprint/src/ folder) and not in the release code (/blueprint/screen.css) but these source files can be very useful so should really be fixed. There is also one error in the ie.css file in both the source and release code.

There may well be other edits, corrections or enhancements that could be made, but these are the obvious ones that I’ve spotted. Note that all line numbers refer to the original, unedited code’s line numbers, i.e. the code in version 0.7.1.

Copy everything

Rather than making changes to the original code, I created a copy of the Blueprint CSS 0.7.1 folder and imaginatively called it Blueprint CSS 0.7.2.

Edit #1: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .pull-6 to .pull-24 are missing from grid.css.

The solution: Replace the following lines of code:

145
146
147
148
149
150
151
152
153
154
155
.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
 
.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-5 {
  float:left;
  position:relative;
}

with this code:

145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-3 {margin-left:-120px;}
.pull-4 {margin-left:-160px;}
.pull-5 {margin-left:-200px;}
.pull-6 {margin-left:-240px;}
.pull-7 {margin-left:-280px;}
.pull-8 {margin-left:-320px;}
.pull-9 {margin-left:-360px;}
.pull-10 {margin-left:-400px;}
.pull-11 {margin-left:-440px;}
.pull-12 {margin-left:-480px;}
.pull-13 {margin-left:-520px;}
.pull-14 {margin-left:-560px;}
.pull-15 {margin-left:-600px;}
.pull-16 {margin-left:-640px;}
.pull-17 {margin-left:-680px;}
.pull-18 {margin-left:-720px;}
.pull-19 {margin-left:-760px;}
.pull-20 {margin-left:-800px;}
.pull-21 {margin-left:-840px;}
.pull-22 {margin-left:-880px;}
.pull-23 {margin-left:-920px;}
.pull-24 {margin-left:-960px;}
 
.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-6,
.pull-7, .pull-8, .pull-9,
.pull-10, .pull-11, .pull-12,
.pull-13, .pull-14, .pull-15,
.pull-16, .pull-17, .pull-18,
.pull-19, .pull-20, .pull-21,
.pull-22, .pull-23, .pull-24 {
  float:left;
  position:relative;
 }

Edit #2: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .push-6 to .push-24 are missing from grid.css.

The solution: Replace the following lines of code:

157
158
159
160
161
162
163
164
165
166
167
.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
 
.push-0, .push-1, .push-2,
.push-3, .push-4, .push-5 {
  float: right;
	position:relative;
}

with this code:

157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 {margin:0 -240px 1.5em 240px;}
.push-7 {margin:0 -280px 1.5em 280px;}
.push-8 {margin:0 -320px 1.5em 320px;}
.push-9 {margin:0 -360px 1.5em 360px;}
.push-10 {margin:0 -400px 1.5em 400px;}
.push-11 {margin:0 -440px 1.5em 440px;}
.push-12 {margin:0 -480px 1.5em 480px;}
.push-13 {margin:0 -520px 1.5em 520px;}
.push-14 {margin:0 -560px 1.5em 560px;}
.push-15 {margin:0 -600px 1.5em 600px;}
.push-16 {margin:0 -640px 1.5em 640px;}
.push-17 {margin:0 -680px 1.5em 680px;}
.push-18 {margin:0 -720px 1.5em 720px;}
.push-19 {margin:0 -760px 1.5em 760px;}
.push-20 {margin:0 -800px 1.5em 800px;}
.push-21 {margin:0 -840px 1.5em 840px;}
.push-22 {margin:0 -880px 1.5em 880px;}
.push-23 {margin:0 -920px 1.5em 920px;}
.push-24 {margin:0 -960px 1.5em 960px;}
 
.push-1, .push-2, .push-3,
.push-4, .push-5, .push-6,
.push-7, .push-8, .push-9,
.push-10, .push-11, .push-12,
.push-13, .push-14, .push-15,
.push-16, .push-17, .push-18,
.push-19, .push-20, .push-21,
.push-22, .push-23, .push-24 {
  float:right;
  position:relative;
}

Edit #3: /blueprint/src/typography.css

The problem: the .left class has been omitted, which can cause unexpected results.

The solution: Replace the following lines of code:

40
p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

40
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

Edit #4: /blueprint/screen.css

The problem: As above, the .left class has been omitted, which can cause unexpected results. Do exactly the same in the release code, i.e.

The solution: Replace the following lines of code:

34
p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

34
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

Edit #5: /blueprint/src/typography.css

The problem: the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line. (Thanks to Steve Yorkstone for spotting this one.)

The solution: Replace the following lines of code:

26
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }

with this code:

26
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em;}

Edit #6: /blueprint/screen.css

The problem: As above, the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line.

The solution: Replace the following lines of code:

29
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}

with this code:

29
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}

Edit #7: /blueprint/src/ie.css

The problem: Legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column.

The solution: Replace the following lines of code:

15
* html .column { overflow-x: hidden; }

with this code:

15
16
17
18
19
20
21
22
23
24
25
26
27
28
* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

Edit #8: /blueprint/ie.css

The problem: As above, legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column. Do exactly the same with the release code, i.e.:

The solution: Replace the following lines of code:

16
* html .column { overflow-x: hidden; }

with this code:

16
17
18
19
20
21
22
23
24
25
26
27
28
29
* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

Changelog

The last thing I do is update the changelog file to record the edits made, and change the version number in screen.css to 0.7.2 so that I know that this is my updated version.

I hope that helps someone.

Updates to version 0.8

I’ll blog later about things I’ve spotted need fixing in version 0.8.

WeBuilder 2008 vs Dreamweaver CS4

Adobe Dreamweaver CS4 and WeBuilder 2008

I have two website editors of choice:

For years I heard that Dreamweaver was the Web editor of choice for the serious Web developer. At the time I wasn’t a serious Web developer, I was a lowly curate and couldn’t afford a copy (I made do with trial versions) so I had to find another solution.

From 1st Page 2000 to WeBuilder

For about five years I used Evrsoft 1st Page 2000. For a free text editor it did everything that I wanted and more — it was certainly a good step up from Notepad — but as the Web developed I grew increasingly frustrated by its lack of support for the latest standards (XHTML anyone? CSS 2.0, etc.). The application was really feeling dated.

But I hung on in the hope that a new, promised version would be the solution I was needing. Month turned to year, nothing appeared and I faithfully struggled on. “Better the Web editor you know …” and all that.

The day that I installed the first public beta on their new version, First Page 2006, was the day that I finally gave up on Evrsoft and moved to WeBuilder. I haven’t looked back.

WeBuilder

That’s when I discovered Blumentals WeBuilder 2005 (version 6.3). Not only was it similar in layout to 1st Page 2000 it far surpassed it in terms of both Web standards and application features.

I’ve now used WeBuilder (which I presume is pronounced “web builder”, although in the office we called it “we builder”) ever since, upgrading through versions 7 (2006), 8 (2007) and now 9 (2008). And it just gets better and better with each new release. There is a very active community forum and its developers really do listen to requests for new features. I’ve had one of my requests included (to do with how the file explorer displays files), and I put my voice to calls for Subversion integration, which appeared a version or two ago.

Matching and missing HTML tag highlighting

One of my favourite features in WeBuilder is the code highlighting:

Code highlighting in WeBuilder 2008

As you can see from the screenshot above, if you click within a tag it highlights the tag in green and shows the corresponding end tag. It also highlights broken tags – you can see immediately that there’s a problem with the anchor tag (<a>).

It’s a really impressive feature that makes navigating code very easy, particularly when you have quite a few nested DIV tags.

Meanwhile in Dreamweaver

Looking at the same code in Dreamweaver CS4, when I click on the list-item tag (<li>) nothing happens within the code window; there is no code highlighting.

Dreamweaver screenshot of code

Instead, the corresponding list-item tag in the code navigator bar at the bottom of the window subtly highlights. Clicking on that tiny navigation item then highlights the code in the code window but it’s nowhere near as intuitive, doesn’t give as much immediate feedback to the coder and involves having to move the mouse to the bottom of the code window which is fiddly.

File associations

Another area where I think WeBuilder outshines the mighty Dreamweaver is in the area of file associations.

When I first installed both applications they each asked me which file types I’d like to associate with that program, e.g. .css, .js, .php, .xml, etc. I made my selection and the application negotiated a deal with Windows, so that I could simply double-click a CSS file, for example, and as if by magic the Web-developer-application-of-choice appeared.

But what if you change your mind? What if you now want to associate PHP files with WeBuilder instead of Dreamweaver, so that when you double-click a CSS file it opens in WeBuilder rather than Adobe’s offering?

In WeBuilder …

In WeBuilder it’s quite simple. Go to Options > Preferences, click on Files then select Associations:

File associations dialog in WeBuilder 2008

In Dreamweaver CS4 …

In Dreamweaver … I’ve still to find out how to do it. I’ve read through two Dreamweaver CS4 books, searched Google down to about results page 10 and I don’t think you can. I think you have to do it manually via Windows Explorer: Tools > Folder Options > click on the File Types tab.

I can’t understand why. Unless, of course, Adobe reason: why would anyone want to use anything other than Dreamweaver?!

Question: does anyone know how to do this from within Dreamweaver, or how to get DW to run the initial file association dialog again?

Project management

Where I think Dreamweaver CS4 completely outshines WeBuilder is in the area of project management. In WeBuilder you can define projects, which is a really useful feature, but it doesn’t manage them to the same extent that Dreamweaver does.

Dreamweaver scans your site code and builds a cache. It knows what’s linked to what, so if you rename a file, for example, it will offer to update links to that file throughout your site. And if you site has 600+ pages, as one of mine does, you’ll realise what a time-saver that is. For that feature alone it’s worth the money!

I remember back in the days of 1st Page 2000 spending two weeks going through a site simply correctly links to files that I’d moved because I’d not planned the site in full before coding.

Extensions

The other advantage that Dreamweaver has over WeBuilder is its support for community-created extensions, which add extra functionality to the application.

Want to add microformats, Google maps, PayPal or Skype buttons, YouTube videos — just download and install the extension.

WebAssist

WebAssist create a number of amazingly good extensions. Some are free, the best ones cost, but are very reasonable considering what they do and the time and potential frustration that they avert.

I thoroughly recommend Eric Meyer’s CSS Sculptor extension and the related CSS Menu Writer extension, and I like the look of the new Jeffrey Zeldman’s Web Standards Advisor extension.

Conclusion

So, is Dreamweaver better than WeBuilder? In some ways, yes … but there are some features in WeBuilder that I struggle without now (particularly, especially the code highlighting). I can see me using a combination of them both for a few years to come.

That all said … I do fancy checking out WestCiv Style Master assuming that it supports CSS 2.1. I suppose it’s too much to expect it to handle elements of CSS 3, given that the latest version was released in 2006.

Smarter web design article in .net magazine

Smarter and faster web design

The current edition of .net magazine (October 2008, issue 181) has an interesting feature article entitled “Smarter and faster web design”.

Magazine writer Craig Grannell promises “you don’t need to work harder, or for longer hours, to get better results. You just need to work smarter!” A sucker for productivity tips here’s my take on what he has to say:

1. Get away from the computer

This is one my favourites, and one that I use all the time. Well, not all the time, otherwise you’d never find me at my desk!

Lateral‘s Simon Crab offers this thought:

“… today’s web designers have a subconscious belief that the computer will provide an answer as long as they sit in front of it for long enough”

Instead of sitting staring at your design software of choice (Photoshop, Paint Shop Pro Photo, Publisher, Illustrator, Visio, etc.) he suggests going out and get a different perspective on the world. Go to exhibitions, browse magazines at the newsagent, walk around and look around you.

I can’t remember where I first learned this, but it’s been really helpful advice. Get inspiration from other non-Web environments. I’m forever ripping out pages from magazines, scanning them or simply gluing them into a scrapbook. I’ve found inspiration in books, magazines, TV, architecture, fashion, nature … step away from the computer!

2. Explain the idea to a non-techie

I don’t know how many times Jane has patiently sat and listened to me wittering on about some design idea, and then pondered carefully as I finish with the killer question “Does that make sense?”

Crab notes:

“A foolproof test is verbally explaining an idea to a non-designer. If you can’t succinctly explain a concept and get across how it will look and feel, it’s probably not a great idea.”

3. Paper and a pen

This was a tip that struck a chord with me: use simpler tools. Don’t rely on massive, expensive software applications. Get back to basics.

I have a home-made pad of A5 paper next to me on my desks, both at work and at home. Any scrap A4 paper that would otherwise go into the recycling box gets ripped in two and bound together with a foldback clip.

The next bit of advice is from usability guru Jakob Nielsen:

The most important tools for a smart designer are a pen and plenty of paper. This is all you need to do user testing — no fancy lab required. Just sit next to a customer as they attempt to use your website.

Mock things up on paper first. Show it around. Get the big things right first, before you waste time writing code that might never be used.

And for those who say “I can’t draw” advice from GapingVoid:

They’re only crayons. You didn’t fear them in kindergarten, why fear them now?

4. Simpler software

37signals founder Jason Fried:

[Our software products] do a few things really well and get out of people’s way. And when products do a few things really well, they’re more pleasant to work with, and easier to learn and understand.

Find software that does this for you. A few of my favourites:

I use these applications again and again for specific tasks because they’re quick, simple to use and reliable. I’ve got other, bigger applications that will do these tasks but these do it for me quickly.

5. Getting Things Done

Interesting advice from Khoi Vinh from NYTimes.com about GTD:

Unless you really feel GTD is perfect for you, don’t bother. It’s over-rated and just about the (admittedly satisfying) pleasure of organising a system for getting things done, rather than actually getting things done.

I can see that, but I would also say: don’t reject it simply because it doesn’t work for other people. Give it a go, and adopt the things that do work for you, such as a zero-inbox policy.

I was impressed with Andy Budd’s approach to email. He answers emails that take under five minutes, deletes the junk and then files the rest in folders with titles such as:

  • Action
  • Hold
  • Respond
  • Waiting

I’ve been inspired to try something similar.

6. Reuse code

Re-use tried and tested modules of code, for example:

  • Frameworks for CSS, PHP, JavaScript
  • Base it on the default WordPress code (clean, valid and well-structured code)
  • Create your own library of code (many code editors allow you to store these as snippets)

I loved Edward Barrow’s reason for using prebuilt libraries:

He likens using a prebuilt library to “getting an expert programmer to work on your project for free”.

Whenever I do something new I now ask myself whether this is something that I’m likely to need again. If it is I’ll store it as a snippet in WeBuilder 2008, my main code editor.

I categorize everything and have folders and subfolders in my code library arranged like this (I’ve expanded the HTML folder):

  • Apache
  • CSS
  • htaccess
  • HTML
    • !DOCTYPE
    • Basic Tags
    • Elements
    • Forms
    • IE Conditionals
    • Meta
  • JavaScript
  • jQuery
  • Lorum Ipsum
  • Microformats
  • PHP

I’ve got all sorts of goodies in here, that I don’t have to go searching for because I know they are there at my fingertips.

7. Source control

Before I discovered Subversion I used to create my own version control system. But I ended up with umpteen files and folders along the lines of:

[backup-070620]
[backup-070621]
index2.html
index3-test.html

It got ugly, and if I made a mistake or needed to roll back to a previous version I couldn’t very easily do it. I then discovered FileHamster but I couldn’t quite get the hang of it. I found it a little too intrusive.

I was then introduced to Subversion, and discovering that you don’t need to incorporate it into Apache server I installed the Subversion server onto my PC at home and it’s been great! I use the TortoiseSVN client.

Quoting once again from the article in .net:

“In fact, the simplest and smartest investment you can make for any project is to use some sort of version control system,” says Aral Balkan, web developer and conference organiser.

What are your tips?

What are the tools, tips that you find most useful, that make you most productive?

A very creative year so far …

Right Twin - week 19
Right twin at 19 weeks

In many ways 2008 has been a very odd year for me, for many reasons. Of course it opened with the IVF procedures that led to Jane discovering that she was pregnant, that led to us discovering that she was pregnant with twins.

During the last six months we’ve been filled with delight, trepidation, excitement, nervousness, wonder, a whole spectrum of emotions. And here we are now at week 27.

For those who don’t know, a full-term pregnancy is generally regarded to be 40 weeks. Twins, we’re told, generally make an appearance early, round about weeks 35-37. So we could have another 10 weeks; we could have more, we could have less. We’ll continue to trust God, and wait in quiet expectation.

I was born to reflect and not shine

It’s been a funny year where I’ve blogged a whole lot less, but gone out and done a whole lot more — but then didn’t come back here and share it with you all … sorry about that, but I guess I’ve needed that time to reflect. I’ve felt myself go deeper within myself — go into my ‘cave’, Jane might say — and reflect on where I am, who I am, and what it means to be expecting children: two, at once!

I’m not entirely sure where I am, or what to expect, it’s all a very new experience for me. But one thing I can say with certainty is that I’m really looking forward to meeting the boys now, and I’ll certainly give it my best shot.

I learned a lot of good things from my own dad, hopefully I can pass some of that love and laughter on to my own boys, and make up some weird nonsense of my own to hand on to them!

I just really wish that Dad was still here to meet them too when they arrive. (Again, for those who don’t know: my Dad had a triple brain haemorrhage in 1983, was really quite ill for about 15 years and died shortly after New Year in 1998. Ten years ago: another contribution to the oddness of 2008.)

New design

But 2008 also opened with another creative process: the redesign of the University of St Andrews website, which was launched to the public (having been in what I guess we could call ‘closed beta’ if we wanted to go all Web 2.0 with y’all) last night.

Here’s a screenshot of the external homepage:

Screenshot of University of St Andrews website
Screenshot of the new design for the University of St Andrews website.

“But… didn’t you just launch a new design last year?! Why do you need another new design?” Quite a few folk have asked us that over the course of the last few months, and it’s a good question to ask.

When we did the first relaunch of the University site it was more than just a new visual design, it was a completely new website: new design, new architecture, new way to update and manage the content, new … everything.

We designed and built the site according to the excellent wireframes that had been developed in collaboration with us by Dynamic Diagrams, an information architecture company from the States. They were great, we learned a lot from them, and for me that was one of the most exciting parts of the project.

Listening

But like any design, the then-new design was a “best bet”, it was the closest that we got to what we perceived we would need from the site. So we built it, launched it and let it settle in for six months while all the time listening for where the design wasn’t working properly, where we needed more flexibility, and crucially: what the users were asking for.

We got a little more explicit by inviting both staff and students to feedback sessions over lunch, where we bribed them with food to tell us what they really thought of the site, what they liked about the site, what they felt could be done better, and what was missing.

I went into those sessions expecting to feel very defensive, but came out of all three sessions feeling quite buoyed and encouraged. It felt good to listen to our ‘customers’, and from the feedback from those sessions mixed in with our own collation of ideas from helpdesk calls, as well as our own thoughts and observations we set about redesigning the site. And this time we didn’t touch the structure (much), we looked instead solely at the visual design and its functionality.

New design

We wanted something that was:

  • Clean, fresh and contemporary
  • Not too far from what we already had
  • Easy to maintain, and extend
  • Compatible with the most number of browsers (old and new)

The site itself is built on the Blueprint CSS framework, with a number of tweaks, which helped us address most of these requirements.

What was particularly impressive about Blueprint was how it allowed us to ‘sketch’ designs in code faster than we were able to do it with a graphic design package. And nothing looks more like a web page than a web page!

So for the last seven months or so I’ve been diligently working on the code, often times taking it home to work on in the evenings and at the weekend. I’ve working on it some nights past 01:00, and some mornings before 05:00.

It really has been a labour of love, but then … I believe in the University of St Andrews, and I love my job. St Andrews is where I did my undergraduate degree, I feel an incredible loyalty to the place and sincerely want to do the best for the University.

Launch

So at five pm last night we scheduled the new site to launch … and ran away!

At home we waited with baited breath while the new design for the University of St Andrews website was published to the public web server, and then breathed a sigh of relief that we’d got most of the planning right.

There were a couple of sections (sport, music, UTREC) that we’d overlooked and had published out with the wrong design, but on the whole it went without a hitch.

… until there was a serious power outage in St Andrews during the afternoon today and all our systems (including the web server) went down! You can’t have everything … like a new design and the ability to look at it!

And relax!

CSS Sculptor v.1.1 and CSS Menu Writer v.1.0

Eric Meyer's CSS Sculptor

Eric Meyer’s CSS Sculptor

Last year, some readers may remember, I blogged about Eric Meyer’s CSS Sculptor from WebAssist.

What it does

Eric Meyer’s CSS Sculptor is a commercial extension (US $99.99) for Adobe Dreamweaver 8 and CS3 that enables you to quickly and efficiently build a cross-browser compatible website layout with the minimum of fuss. And because the code has been written, checked and approved by Eric Meyer (a champion of Web standards and a guru of CSS) you can be assured that the code it produces is of the highest quality.

Using a simple control-driven interface CSS Sculptor allows you to choose a preset layout (there are 44 from which to choose) and then customize almost every aspect of it: header, footer, width, margins, padding, colours, typography, ID names … everything!

Everything that is apart from a navigation DIV. This was the one thing that I thought let version 1.0 down.

Version 1.1

WebAssist have now addressed that issue with Eric Meyer’s CSS Sculptor version 1.1. As you can see from the screenshot below the layout components panel now includes a “Top navigation” option.

Layout components now includes Top navigation option.

The reason that they included this was to welcome the latest product to their Dreamweaver extension arsenal: CSS Menu Writer.

CSS Menu Writer

CSS Menu Writer

A couple of weeks ago I had the privilege of being given an exclusive and personal online demo by WebAssist’s Training Manager Mark Fletcher (he’s the guy who does all the online demos on their website).

I’ve been meaning to blog about it since then but never quite found the time what with work being so busy, Jane feeling so sick and then heading off on holiday for a week. But here I am, better late than never, and the intervening gap hasn’t dampened my enthusiasm for this extension.

What it does

While a lot of CSS is quite easy to pick up creating styled horizontal, and even vertical, navigation isn’t the easiest task to complete quickly. This is where CSS Menu Writer comes in.

CSS Menu Writer takes the hassle out of creating both horizontal and vertical navigation. It uses a similar interface to the CSS Sculptor and integrates nicely with its sibbling extension.

CSS Menu Writer interface

Example

With just a few clicks I was able to create this simple menu:

Example menu

All I did here was specify the names for the menu items, the general style (Horizontal Accent) and I chose the same design that I used in CSS Sculptor for creating the page wrapper (Nautica).

It literally took only 2 minutes.

When I clicked the FINISH button the code was automatically generated and I had a ready-to-use 100% CSS horizontal menu. It couldn’t be any simpler!

Existing site structure?

One great feature if you already have the file structure created, or are adding a new menu created with CSS Menu Writer to an existing site, is the “Get from file system” option.

With a few clicks you can create the menu by pointing and clicking on the pages or folders that you want to include. CSS Menu Writer will then populate the menu with the files that it finds: great for creating submenus.

Advanced options

For those needing to get their hands dirtier CSS Menu Writer also allows customization of almost every part of the menu: width, margins, padding, typography, link formatting (link, visited, hover and active), backgrounds and borders.

It even goes as far as styling sub-navigation differently to the primary navigation. It really is very flexible indeed, and fiendishly simple to use. (Obviously a solid understanding in CSS is a benefit when you start to delve deeper into advanced customization.

For particularly funky designs WebAssist even provide a number of Solution Recipes on their website to show you what’s possible. These include:

  • Using CSS Menu Writer with DataAssit (create dynamic database-driven menus)
  • Using CSS Menu Writer with a CSS Sculptor layout
  • Customizing CSS Menu Writer menus
  • Customizing CSS Menu Writer submenu items
  • Using the CSS Sliding Doors technique with CSS Menu Writer

Editing existing CSS Menu Writer navigation

Once you’ve clicked FINISH and created your CSS Menu Writer menu you’re not stuck with it: you can always return to CSS Menu Writer and tweak your settings, add new menu items, change its styling, etc.

To do this you click on the Scripts “Invisible Elements” icon and in the Properties pane click the Edit button alongside the CSS Menu Writer icon.

Click Script icon then click Edit button

(If you can’t see the Script icon go to Edit > Preferences. Click on the Invisible Elements category and select to Show Scripts.)

Possible improvements

As well as horizontal (top) navigation with drop-down menu options CSS Menu Writer also allows you to create left-hand navigation. There are four styles for both horizontal and vertical, each with fly-out submenu items.

While this is impressive it would be nice to see other types of navigation, particularly for the vertical styles, such as designing left-hand collapsible/concertina style navigation. I would find that particularly useful. Perhaps that could be included in a future version.

Another thing that might be useful to have in a future update is the ability to define a class for a selected page. For example, if you’re on the News page (or a child of the News page) it might be nice to show that on the navigation by applying a class to that list item.

This is something that a lot of content management systems will manage for you, but if you’re using CSS Menu Builder to write the basic code it would be useful to also have those class selectors written for you.

Conclusion

By the end of Mark Fletcher’s demonstration I was sold. There’s obviously been a lot of thought put into making this extension as easy to use as possible for people new to Web design, but with enough tweaking capacity for the hardcore coder.

But you just can’t get past the fact that within a couple of clicks and only a couple of minutes you have cross-browser compatible, fully-CSS navigation working in your website. It’s certainly to be recommended, and at US $99.99 it’s certainly worth it for the time and hassle that it saves.

BRAT CSS

For some reason this appeals to me, but I’m not sure we’d get away with using it on the University website: Big Red Angry Text.

It’s a CSS declaration that you add to your global CSS file that spots any non-compliant HTML tags (such as <font>, <p align=”left”>, or <center>) and shows them up for the evil that they are!

As the author said: “Simple, effective and in your face.”