Tripoli CSS Rendering Foundation

David Hellsing has created a new CSS Rendering Foundation (if that confuses you, think framework) with cross-browser compatibility.

The CSS files basically include a global reset, generic styles, and a print stylesheet. There is also an IE stylesheet for specific IE bugs. The CSS files looks pretty good.

All of the typography is based on The Elements of Typographic Style:

Vertical rhythm, line-heights, margins and font sizes have been carefully selected to follow classic typographic guidelines from books like “The Elements of Typographic Style“. All measurements are set in em’s, so it’s very easy to do elastic and dynamic layouts while still keeping typographical proportions. Rules like font-size and font-family are set globally so you can easily override them with new values that suits your project without ruining the natural flow.

Even cooler, Tripoli also introduces the idea of using “plugs” to extend the generic base code:

One of the ideas behind Tripoli is to allow external plugs to extend the generic base. To demonstrate this, I have created a negative plug that changes all colors to prepare for a negative layout. Other plugs could be sidebars, menus, rounded boxes, code formatting and other helpful widgets.

The Tripoli site includes several examples of how it works. My particular favorite is the example where he takes a page from a W3C spec and completely restyles it (links to the changed styles at the top of the document):

Blueprint CSS 0.4 Released

Okay okay, So this isn’t exactly news. But it is news to me. Apparently I completely missed the realease (on 8/11) of a new version of Blueprint. Its got some nice new features including:

  • Font sizing now uses ems
  • A compressed version of the CSS is included
  • IE bug fixes
  • Incremental leading

You can read the release notes here and download the new version from the Google Code site:

These are all quite welcome changes. One of the first things that I noticed about Blueprint was that the CSS files were quite bulky. Much of that bulkiness was because the author was striving to make everything easy to understand. That said, not having a compressed version was a noticeable absence. The second thing I noticed was that all of the font sizes were in pixels. I didn’t really think on this too hard, because using pixel font sizes simplifies the grid dramatically. Looks like both of these issues have now been patched up.

I’ve been working with Blueprint since it was released and I have to say that I’ve been quite impressed overall. My first thought when I read about it was, “Oh great, another framework I have to learn.” But after taking a quick look at Blueprint, I realized that it is actually very straightforward and easy to use. It took very little effort to adjust my coding to it. Also, it made using a grid a lot easier because all of the grunt work (and math) was already done.

That said, the site that I actually designed using Blueprint bears very little resemblance to the original Blueprint grid. I ended up modifying quite a bit of the grid.css file to fit with my design better. I also overwrote most of the type styles from typography.css. I spent a good amount of time yesterday forcing sIFR to render my headers without messing up the grid. Now I’m wondering if it’s worth it on this site to try and mix in the new release of Blueprint. Perhaps I’m missed the point of using a framework? Oh well, at least getting started on the site was easy.

Blueprint Grid CSS Generator

Here is a very nice little addition for Blueprint CSS. It allows you to customize the default grid used in Blueprint. Once you’ve specified the new grid, a new grid.css is produced. Even better, you get a compressed version as well!

Via Vitamin News.



appointive
appointive
appointive
appointive