Monday, January 21st, 2008

Full Page Zoom Is For Sissies

Category: CSS

Ryan Tomayko has a post titled Full Page Zoom Is For Sissies that delves into the fun of trying to build a website using purely em and relative sizing:

About a year ago, I spent the better part of a day making this site’s layout entirely em based and set on a vertical baseline grid… No, I mean, everything is em based: font-sizes, borders, margins, padding, widths, everything. Each individual value in the stylesheet that specifies a vertical measurement was manually calculated based on the relative value of an em on the specific element.

This has two notable effects:

  1. Your site can be scaled to any font-size on the client while retaining exact proportions in every way and while staying on the vertical grid. (Go ahead. Try it if you don’t believe me. Just hammer on Command+- a few times.)

  2. Your CSS becomes completely unmaintainable.

Ryan then claims that the effort isn’t needed, as full page zoom has been in some browsers for awhile, and is coming to others soon too.

Of course, you can use tools like the Tripoli CSS baseline reset:

Tripoli is the result of years of coding real-world CSS projects. When dealing with multiple projects, you find yourself repeating CSS rules again and again. Tripoli adds the CSS base you need to skip the typographic basics and get on with design customization while relying on a solid, cross-browser backend.

Dealing with CSS layouts can be a pain. Most of the frustration comes from inheritance and margin issues. To make things easier, Tripoli resets all browser defaults for layout and then re-builds them again for content typography.

Tripoli consists of two main documents; one reset and one generic. The reset file resets all browser styles to prepare your document for the layout process without disturbing CSS rules. The generic file does two things: first it sets some general typographic rules like text decoration and font variants. Then it adds more specific rules inside a content class. The content class contains all margins, paddings, lists, tables, link colors etc. So whenever you have content in your document – simply add the class name content and you’re done.

In addition to the two main files, Tripoli also includes a print css for readable printing and an Internet Explorer specific file to correct IE’s rendering issues.

Posted by Dion Almaer at 12:24 am

4 rating from 24 votes


Comments feed TrackBack URI

It would have been more impressive if they page had anything beyond just layout. It’s mostly just plain text. How hard can it be to do em based layout with plain text!

Comment by pkenoyer — January 21, 2008

I would like to see buttons with rounded corners a la ext2 made with background images and using only CSS that’s em-based.

Comment by Adrian — January 21, 2008

Maybe it’s just my lack of knowledge about CSS etc. but seems unbelievably fluid.

Comment by brianpeiris — January 21, 2008 actually scales (width etc.) to font size changes quite nicely. Personally, I like to use font-size:76% on html/body to normalize font size, and then use EMs from there.

Comment by Schill — January 22, 2008

Leave a comment

You must be logged in to post a comment.