Project #3 – Fluid CSS TextMate Bundle

2008-08-12 update:I’ve renamed the repository on GitHub to be fluid-css.tmbundle to conform to the naming suggested by Allan on the TextMate Blog.

So my last project ended up being a much bigger deal/effort/undertaking than I expected. I’m just now starting to get back in the swing of small releases. Still shooting for 10 projects this year though!

Not counting the super secret project, this is my 3rd release and it’s a huge departure from my normal stuff.

Fluid CSS TextMate Bundle

This will appeal to maybe 10 people in the world, but for them it could be a huge time-saver (it already is for me.)

Fluid (elastic, em-based, etc) layouts are ones that specify all sizes in relative units (usually ems – a typographic term). Here’s a great introduction to making one of these layouts: The Incredible Em & Elastic Layouts with CSS. The advantage to having everything set in a relative unit is that it allows the site to scale (like “Full page zoom” on IE7 and Firefox 3). It’s also a great way to know exactly what’s going on with your layout.

Since you’re working in relative units, you always need to be aware of your current font-size, and use that to calculate the size you’re setting.

In the past, that meant a lot of asking google (did you know it’s a calculator?) or spotlight (did you know it’s a calculator?)

Well, NO MORE!

Here’s a video showing you what it does:

How to use my textmate bundle for em-based designs from kastner on Vimeo.

Grab it on GitHub.

Or – get the tarball

6 thoughts on “Project #3 – Fluid CSS TextMate Bundle”

  1. Oh, snap that looks really useful! We’ve been trying to use ems more and more. Seems like it’s not worth the effort to calculate all that stuff though. This will definitely make it easier. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>