tomdot – web design and inspiration

In search of a flexible cross-browser reset stylesheet (part 2)

At the end of my previous post about cross-browser reset stylesheets I had narrowed things down to Tripoli or Blueprint. After a little more testing and research it seems as if Blueprint is the way to go (for me at least).

As is the way of things with the web, I seem to have eventually ended up almost back were I started. Blueprint is a popular framework, so maybe I should have considered it more from the start, but it's image is more that of a layout framework, whereas the aims of Tripoli seemed more modest.

However it turns out that, contrary to expectations and appearances, Tripoli is much more complex and heavyweight, mostly due to it's attempts to be totally compatible with IE5. It's also not as easy to break down into components. Whereas I really like the elegant compartmentalised design of Blueprint.

Why it won

While Blueprint is mostly marketed as a grid based layout, it's structure is basically broken down into:

  • Reset
  • Typography
  • Grid

The grid is interesting. There are some issues with semantics, but it's a nice tool. However what I'm mostly interested in is the Reset and the Typography stylesheets. By separating them out they allow you to apply the level of styling that you need. The basic reset does a good job of leveling out all the browsers, and the typography adds an additional layer of default styling that follows good typographic principles.

While they don't claim perfect support in anything below IE6, the testing I've done seems to show that it works in a pretty standard way across almost all browsers from ie5,5 onwards.

Using the reset allows me to be pretty confident that I'm working from a good foundation, and being able to (optionally) layer the Typography on top is a nice advantage. The possibility of then including the Grid is an additional bonus. It simplifies a lot of the headaches that CSS designers are used to, but without adding the additional headaches of adding too much complex code.

Note: I did also find a more minimal version of Blueprint called Boilerplate, which seemed promising. However it's not as actively maintained as Blueprint, and I think the advantages of an active community probably outweigh any small semantic or size advantages. Worth a look though.


Weekly Web Design Roundup (7 April 2010)

Thursdays are for working on the company website, but that's OK because it's raining outside and I went to see the stunning cherry blossom in the sun yesterday. Some of these links came up in my search for an elegant CSS Reset/Typography Reset, and the rest are related to the same topic.

Posted from Diigo.


In search of a flexible cross-browser reset stylesheet

I've spent the afternoon in a long-winded search for a cross browser css framework grid reset stylesheet. It turned out to be an epic search, worthy of many tales, but it seems like I'm finally getting somewhere.

When I started my journey I was looking into css grid frameworks as a way to simplify development. And I came across a few interesting ones: 960 grid system (which i've already been using in illustrator for design, but not used the css yet), fluid 960 grids, YUI grids, The 1kb CSS Grid, Blueprint and a few others.

Then I started reading the comments (never a good idea if you don't want to end up with second thoughts) and started wondering if fixed grids which (necessarily) use non-semantic mark-up were what I really needed. I read a few articles on both sides of the debate, and both seemed to have valid points. But as I read I realised that I didn't especially want an all-encompassing grid, though I can see a few situations where one would come in handy.

What I wanted was simply an advanced CSS reset. I've been using a basic CSS reset based on Eric Myer's well known reset - which resets all the browser styles to simple defaults.  But what I really wanted was one that would standardise the font size and line height across all most browsers. This would leave me free to do designs and layouts without worrying so much about what it'd look like in other browsers.

Some of these frameworks include resets and fonts components, that appeared to do what I wanted. But none seemed an exact fit. YUI fonts for example uses pixels, which limits font resizing in some browsers.

An interesting post by Matt Snider lead me to a "CSS Standard for Rendering" called Tripoli, which I hadn't previously encountered. It seems rather promising in it's goals though. I'm just a little worried about it requiring a "content" class to work. Alternatively Blueprint's Typography css seems to be flexible and also produce consistent results across all the browsers I tested. So right now it seems to be down to those two - a little testing and experimentation is clearly needed.

Update: Part 2 of this series is now online - and we have a winner!

Other useful resources:


Weekly Web Design Roundup (1 March 2010)

Monday nights are for recovering from a week of work and catching up on recent webby world developments and articles. I think much of my days off will be for working on my nameplate site, and for some PHP and Ajax web app development. I have a nice idea for a site, I just don't know when I'll have time to work on it!

Posted from Diigo.


Sunday Web Design Roundup (10 Jan 2010)

Fridays are for extremely delayed sunday roundups due to the new year holiday. A reasonably random collection of posts to read up on while listening to your favourite music.

  • Automatically make XML sitemaps for Google and other search engines

  • "Here is a categorized list of online programming books available for free download. The books cover all major programming languages: Ada, Assembly, Basic, C, C#, C++, CGI, JavaScript, Perl, Delphi, Pascal, Haskell, Java, Lisp, PHP, Prolog, Python, Ruby, as well as some other languages, game programming, and software engineering."

Posted from Diigo. The rest of my favorite links are here.


Beautiful and Useful web site designs

There are lots of beautiful web site designs out there, but here are a few that I actually use often. Not only beautiful layouts, style and graphics, but also useful and usable designs.

Web designer wall blog

Web designer wall blog

A well known favourite among web designers, the Web Designer Wall always has a beautiful and intricate design. Plus  useful design and css tips.

Vimeo video sharing

Vimeo video sharing

Vimeo is a more friendly place than youtube, and it definitely has a much nicer design. The current layout has a really nice paralax scrolling effect.

Helipad online notepad

Helipad online notepad

Helipad is a simple online notepad, great for making quick notes at work, or on an iphone, to check later. But that doesn't mean it has to look bad.

Good Old Games

Good Old Games

I guess you could accuse GOG of looking a little too web2.0, but it's a nice clean design, but a nice site to use, which is important for keeping customers and building a community. Plus they are really nice, and have cheap games!

Deadline todo manager

Deadline todo manager

From the makers of Helipad, Deadline is a very simple To-do application, and it has a simple design to go with it. But it's a great design, one that puts the emphasis on what it actually does, but still has a bit of nice interactive eye-candy in the mouseover effects.

Colorlovers pallette site

Colourlovers pallette site

Colourlovers (with a u!) is a nice site for making colour schemes and patterns, and getting inspiration. Plus it has a nice design itself. They could do with integrating a couple of the separate beta apps though!

Aviary Graphics Tools

Aviary Graphics Tools

I used Picnik and it's firefox plugin to make the thumbnails for this post. But Aviary is fast catching up with Picnik as my favorite online editor. It's already much more powerful, plus they have a lot of other useful apps for vector illustration and making colour palettes. If I had a Aviary plugin installed I might have used that. And it has a beautiful design too.

24 ways - web design tips

24 ways - web design tips

24 Ways is a very cool web design advent calendar, full of useful tips and tricks. Plus it has a nice, simple, unique design that uses lots of RBGA alpha transparency to make an interesting layout without using images.


Sunday Web Design Roundup (06 Dec 09)

Sunday is for roundups of things I've been looking at this week. Mostly catching up on HTML5 and CSS3.

Posted from Diigo. The rest of my favorite links are here.


Quick Friday Roundup 12/04/2009

Posted from Diigo. The rest of my favorite links are here.