baseline

a designer framework by stephanecurzi.me

What is Baseline

Baseline is a framework built around the idea of a “real” baseline grid.

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

“Real” baseline grid on the web

When I first started to design Baseline, I wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attributes — like type leading — kept me from implementing a true grid based approach. I then decided to another look at the basic grid used in print: the baseline grid.

Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout.

How to use Baseline

Baseline can be used in many different ways. Use the reset.css and base.css file as a starting point, include the type.css for typographic control or include all files to have a complete foundation to start your web project.

Download

The .zip file includes the full set of CSS files both for development and deployment, a Photoshop base document and a full set of HTML templates and examples.

Import the styles

You can import either the complete set of CSS files in your page (baseline.reset.css, baseline.base.css, baseline.form.css, baseline.grid.css, baseline.type.css) for development and to learn about the framework or use the compressed version (baseline.compress.css) for a faster download.

Layout

If you start building your website without any specific CLASS or ID, you will benefit from all the styles included in the framework. When you’re ready, look at the grid example to learn the basic classes necessary for a page layout using Baseline.

Going from 0.2 to 0.5

I’ve jumped the version from 0.2 to 0.5 because Baseline is getting closer to be feature complete than what I had anticipated. I could justify the jump by saying that I rewrote the tables for version 0.3, rewrote the forms for version 0.4 and added the iPhone in the 0.5 but I did a lot of those changes to make the iPhone version work correctly so I just decided to jump a few numbers.

Known problems and limitations

Here’s a couple of know problem and limitations of Baseline

Baseline need a recent browser, Safari 3, Google Chrome, Firefox 3, Opera 9 and Internet Explorer 8 all work correctly with some minor differences. Some CSS3 and HTML5 code will not work on older browser.

Some fonts might not align perfectly on the baseline, but that won’t prevent baseline from bringing a harmonious feel to a page.

Browsers have different ways to specify the baseline of headers that prevents the absolute accuracy of baseline, Safari and Chrome line up perfectly but Firefox and Opera are a couple of pixels off.

Baseline is built with pixels, it’s almost impossible to create a regular baseline using ems due to browser unit rounding-up bugs that cause ems-based baselines to shift slightly in unpredictable ways.

Baseline comes in two different versions, one based on relative positionning, and one based on padding. The relative-positioning version is easier to work with but doesn’t support the more advanced CSS3 columns. If you choose the padding-based version, you will need a “wrapper” div with an ID of #page to correctly line up the baseline on the page elements.

IE6 is a beast and doesn’t really support CSS2.1 correctly. In my judgment, it would require too much work to make sure that Baseline behaves and looks the same on IE6 as on other browsers. Most things will work, but your mileage will vary.

Version history

Version 0.5.1

- Fix a bug introduced in version 0.5 in baseline.grid.css

Version 0.5

- Added new iphone/baseline.iphone.css

- Re-wrote baseline.form.css to remove most style

- Move the forms control width from baseline.form.css to baseline.grid.css

- Re-wrote baseline.table.css to change the method to align tables on the baseline

- Added input to baseline.reset.css

- Added a .clear class to baseline.grid.css

- Added a margin fix on .full in baseline.grid.css

- Remove the padding-bottom from div in baseline.grid.css

- Added a margin fix for ie in alternate/baseline.ie.css

- Comment the form control font size from baseline.type.css

- Move the table border collapse declaration from the alternate/baseline.ie.css to baseline.table.css

- Deprecated alternate/baseline.form.padding.css

- Deprecated alternate/baseline.type.padding.css

Version 0.2

- Added a new stylesheet baseline.table.css

- Added a new stylesheet alternate/baseline.ie.css for IE specific hack