Earlier this week, we had a chance to speak with Stéphane Curzi, developer of the recently released Baseline, a CSS framework built around the idea of a real baseline grid for the web.
Refresh Events: Hi Stéphane, thanks for sitting down with us, and congratulations on the launch of Baseline! Tell us a bit more about it.
Stéphane Curzi: Baseline has had a long gestation, almost a year since I first started to think about it. At first all I wanted was a quick way to build a website prototype; a reset and base typography with a simple column was all I needed. I did the first version of Baseline that was called Boxes at the time and did some production work with it. About the same time I got a renewed interested in typography on the web, more people were taking an interest in typography on the web so I thought that I could adapt my framework with some typography goodness. The more I read, the more I realized that I needed to go back to what designers used to work with. Having studied graphic design almost 20 years ago, I needed a little refresh so I re-read about classic grid designer like: Josef Müller-Brokmann, Massimo Vignel and anything I could get my hands on.
Baseline came out of this research, a way to bridge the gap between what I use to do in print work and what I’ve done on the web.
RE: Tell us about your background. How did you get started as a designer?
SC: I’ve studied Graphic Design at the Université du Québec à Montréal (UQAM) at the end of the 1980’s. At the time, Illustrator just came out and Photoshop didn’t even exist yet. I did print work for most of the 90’s doing Annual Reports, Brochures, Logos, etc. By the mid 1990’s I was doing multimedia work as well as print work when someone told me about a new thing called the Internet and a browser called Mosaic, so at the end of 1994 I got myself a modem and a copy of the then-renamed Netscape 0.9 and built my first website.
Since 1998, I’ve been doing web work almost exclusively as an Art Director at different design firms or freelancing. In 2001, I became interested in CSS and switched all my web development to full CSS. At the time, most people I knew didn’t believe it could be done. In the last couple of years, I’ve been trying to infuse traditional print practice in the web while trying to get well formed and the cleanest possible code; BaselineCSS is one example of this goal.
RE: With all the different CSS frameworks out there, such as YUI and Blueprint, how is Baseline different?
SC: As opposed to most frameworks, Baseline is more about typography than it is about the grid. I wanted to create something that would render a web page the same way as someone would do a printed book and works with the same type measure I used when I was still doing print work. That meant using 12pt or 1 picas which translates to 12px. So Baseline is trying to set the type to approach a print “look”, and have larger columns to have optimal reading line length.
Right now, Baseline is not as extensive as other frameworks but it has a smaller footprint. Baseline is not about putting class in your code, it’s about using the appropriate HTML in your page, and keeping your code lean and clean. But I do owe a lot to the other frameworks because they did a great job and I was inspired by all of them. The first one that got me thinking about typography was Tripoli (http://devkick.com/lab/tripoli/).
RE: What’s your favorite aspect of this framework?
SC: I would say that it’s the correct alignment of the title and body text without any classes or ID’s, just plain HTML. Look at every article on setting type on a baseline grid and nobody aligns to a true baseline, they center the type between the line-height which means the titles won’t align correctly. Baseline is a first attempt to align every bit of type on the page to a regular baseline. Unfortunately, most browsers hardcode the baseline in H1 to H6 differently and I haven’t found a definitive answer.
At first I was using negative margin combined with padding then I saw something about using relative positioning and everything started to work (except CSS3 columns). Unfortunately, I can’t recall where I first read about the relative positioning trick so I could give him credit.
RE: What’s in store for future version of Baseline? Will there be greater support for CSS3?
SC: There is still a lot I wish to do with Baseline. In a couple of weeks, I hope to have implemented some small fixes for Firefox and change the way forms get their size so it’s easier to use other grid frameworks like 960.gs in conjunction with Baseline. Right now, I’m in the middle of learning all I can about HTML5 and CSS3 for another project, but I will add what I can to what is already present in Baseline. I have to balance the use of CSS3, I don’t want to render Baseline so bad in Explorer that nobody will use it. The things that will get there first is the HTML5 support as I already started to design using it and hope many more people will as well.
In the pipeline is a print style; it’s funny to think that I didn’t arrive there first, but I had set a deadline to get the framework in public and I didn’t have the time to really work on that part. Also, I will do an iPhone style sometime in a near future. For a longer future, I might try to fix the titles baseline so it would work on all browsers but I don’t think it can be done right now. I will also have another try at using em instead of pixels.
I have so many ideas for baseline but I’m only one person working on it, so it might take a little longer. Depending on my next projects, some parts might arrive faster than others.
RE: What advice do you have for people who are interested in creating their own frameworks?
SC: First, I would tell them to look at what’s already out there and see if something fits with what they want, maybe they just need to modify the available code, there are a lot of really good frameworks out there. Then, if they have an idea that they can’t seem to find elsewhere, they should start to build their own framework.
- Learn as much as you can from other frameworks
- Think long and hard about what you want and need in your framework
- Start with a good Reset
- Keep it as modular as possible, it will be easier to update part of your framework in the future (you can always compress afterward)
- Do use the conventions you’re already using, you want to be able to use your own framework without relearning a new way to work
- Think about the cascade and try to optimize every line
- Don’t try to be everything to everybody, you can’t please everyone
- Be prepared for a lot of work
RE: Thank you so much for your time. We’re looking forward to the next version of Baseline.
SC: And thank you for the opportunity!
Possibly Related Posts:
If you enjoyed this post, please leave a comment or subscribe to our RSS feed to have future articles delivered to your feed reader.
