“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.
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.
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 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
- - Added a new stylesheet alternate/baseline.reverse-table.css
- - Added the table sizes to baseline.grid.css
- - Remove most of the table styles from baseline.type.css
- - Changed CAPTION style and removed TR background from baseline.base.css
- Version 0.1.2
- - Change to baseline.type.css to remove the margin when nesting several UL or OL
- Version 0.1.1
- - Minor change to baseline.form.css to fix a bug in Opera browser
- Version 0.1
- - First release
Baseline on twitter
Baseline is free, it is a way to give back to the web community and promote better typography. However, it is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Reset.css and base.css are inspired by the work of Eric Meyer and David Hellsing. For the full copyright notice, see the download zip files.
Baseline is a side project, as such it might see slow development but feel free to contact me for info, comments or bug request but don’t ask me to fix it for IE6, it will never happen.Twitter