CSS 101: There's always another way

Posted on August 30, 2007. 13 comments.

So your CSS layout breaks in a certain browser (cough IE cough).

Before applying any nasty hack to fix the issue, try to use another CSS technique to achieve your desired look.

For instance, if paddings make the layout break, try margins. If floats makes you pull your hair out, see if you can’t create the same result using absolute positioning. Or just change the way the divs float.

The point is that CSS gives you a lot of options on how to achieve your desired layout. And way too often, people spend a lot of time creating an ugly work-around before trying out every option.

There’s always another way, find it before resorting to hacks.

Blueprint 0.5: The Experiment

Posted on August 28, 2007. 39 comments.

Today marks the release of Blueprint, version 0.5. This is a special release, as it is above all an experiment, trying out a few different techniques as we approach version 1.0.

The Grid

The grid in this release is upped from 14 to 24 columns. Now, before you all go haywire, consider the following:

12 is quite certainly the best number of columns for a grid, mathematically speaking. It is dividable by both three and four, giving you lots of options on how you’d like to set up your layout.

However, after trying out the 12 column scheme on a few sites, I believe it is too constricting. That is, the column count is too low. It was already too low when we were using 14, if you ask me, so 12 doesn’t seem completely right.

That’s why I’ve gone for 24. Being 2 * 12, you get all the flexibility, with the added possibility of creating truly complex grid systems. And, if 12 is your preference, all you have to do is to double your desired span counts.

But hey, Blueprint is about flexibility, not constraints. That’s why Matz from kematzy.com is the latest addition to the growing BP development team. He has created a wonderfully flexible BP grid generator, which lets you input your desired number of columns, margin between columns, and even your preferred total width, and outputs a nicely formatted and customized grid.css.

So please, if 24 is not your bag, check out Matz’s generator.

Also, the first class is no longer needed. :)

PX vs EM

Blueprint 0.4 introduced the use of em units for all vertical spacing, including line-heights and font sizes. However, in retrospect, this does not work as well as it should. While giving IE users the ability to resize text properly, the vertical flow and baseline was disrupted in nearly every browser except Firefox.

I do believe the baseline is quite important, giving each page a great look and feel, so we’re going back to pixels in this release. Resizing might not work as well, but the baseline now looks perfect in nearly every browser. I think this is a fair trade.

To accommodate those not happy with this, BP 0.4 will remain as a download on the Google Code site, so that you may easily make your own changes to stick with em’s.

We do hope to return to using em’s one day, but that won’t happen until we can make them work correctly with the baseline. If anyone wants to tackle this issue, please feel free to do so. :)

Fonts for the typographically literate

Version 0.5 also sports a new set of default fonts. We figure that if you’ve gone so far as buy your own great fonts, you should also get to use them when you browse the web. Here’s the fonts that now gets set in typography.css:

h1,h2,h3,
h4,h5,h6  { font-family: Constantia, "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif; }
body      { font-family: Frutiger, Univers, "Helvetica Neue", "Lucida Grande", Calibri, Helvetica, Verdana, sans-serif; } 
pre       { font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; } 
code      { font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Monaco, Courier, monospace; }

This is also highly experimental, and the font choices are likely to change in future releases.

Coming in 0.6

A few things didn’t make it into this release. Most noticeably is the forms.css file. Created by Kim Joar Bekkelund, this file aims to give you some great looking default forms, with support for fieldsets, buttons and more. Expect it to ship with BP 0.6.

Another quite important feature that probably will be added to 0.6, is the use of an ie.css stylesheet, loaded with conditional comments, so that IE hacks stays in one place, and doesn’t clutter up our beautiful core files.

Get yer Blueprint, half price!

So that’s that. Another release, another milestone on the way to Blueprint 1.0.

As always, a tutorial, example files, the credits, and the download itself, are all on the Google Code site. So go ahead, and grab your own copy. :)

CSS 101: Group by layout

Posted on August 26, 2007. 22 comments.

Many developers group their CSS stylesheet rules by element, with every text element in one segment of the CSS file, then headings, then lists and so forth.

However, since you almost always look for rules that applies to a special part of your page when editing your CSS, grouping your rules by layout is a much better idea.

For instance, at the top of your CSS file, put general rules for body, p, ul and such. Then, group the rest of your rules by layout element, like #header, #sidebar, #footer and so forth.

h1,h2,h3,
h4,h5,h6  { font-family: Helvetica, Arial, sans-serif; } 
a         { font-weight: bold; text-decoration: none; }
body      { margin:18px 0; }

/* -------------------------------------- */

#header         { position: relative; margin-bottom:5px; }
#header #links  { border-bottom:1px solid #ddd; }
#header h1      { font:bold 5em Helvetica, Arial, sans-serif; }
#header ul      { list-style-type:none; margin: 0 0 35px 0; }

/* -------------------------------------- */

#promo            { border-top:2px solid #ddd; }
#promo .column    { border-color:#ccc; }
#promo .column p  { padding:10px; margin:0; }

I think you’ll find that this makes for much more enjoyable CSS development.

Note: Blueprint 0.5 will hopefully be released tomorrow.

Blueprint 0.4 released

Posted on August 11, 2007. 30 comments.

(If you don’t know what Blueprint is, read this first.)

Pencils down, let’s ship this thing, and bring print design on the web one step closer, as the first release of Blueprint is quickly closing in on 15 000 downloads.

Please read that back to me. The first point-release of a framework, built on a technology that behaves differently in most browsers, with known, gaping holes, has been downloaded almost 15 000 times. If there ever was a time for a new release, this would be it.

Version 0.3 also produced this statement from Khoi Vinh, online design director for The New York Times, and chief catalyst for bringing grid-based designs to the web:

“Is there a way I can turn Blueprint into traffic for Subtraction.com?

Enter version 0.4

Here’s most of the changes at a glance. Scroll down for explanations and clarifications.

• All font sizes and vertical margins are now elastic, through the use of em units. Resizing works great in every tested browser.
• Comes with a new, compressed version of BP, which reduces the size of the core files by 60 percent.
• Support for incremental leading, contributed by Mark Boulton.
• Adds perfected CSS buttons, by Kevin Hale of Particletree fame.
• Fixes all known IE bugs.
• Loads of minor fixes and additions.

I’d say this qualifies as a good, nay, make that a great release. Remember that BP now has taken on a life of its own, and that many of these changes have been contributed by people all over the globe. Be sure to check out BP’s contributors section.

Also, if you have a great fix or addition, post it to the new Blueprint Google Group.

About the changes

Now for a few, hopefully clarifying notes on some of the changes.

Elastic font sizes also means elastic line-heights, and as you may know, calculation of em’s in browsers are inconsistent at best. Because of this, I’ve taken the idealistic approach.

The line-heights (and by extension, the baseline) are set to values that should make them look quite perfect. In Firefox, for instance, they do. In Safari or Opera however, the baseline is a bit off.

This is a problem, but I am working on it, and I’m not even sure you’ll notice it at the default font size. :)

Contributed by print designer extraordinaire Mark Boulton, Incremental leading is a pretty exciting new feature. As most of the ideas in Blueprint, this one comes from the world of print design.

Say you have a sidebar, with smaller type than your main column. Having the same line-height in this column as in your main column might be a bad idea, as this implies a relationship between the content in each column that might not be there.

Enter incremental leading: This sets the ratio between the lines of the two columns to be 4:5, meaning that for 4 lines of text in the main column, you get 5 lines of text in the sidebar. Follow the link above to learn more about this technique.

The new compressed version is an absolute must for high-volume sites. It strips the core files of the framework down to 40% of their original size, mostly through removing comments and whitespace. Check out screen.css for information on how to use it.

And that’s that

I think this is a release one with great confidence can use on a live site, especially now that the glaring IE bugs are fixed. There might, however, be undiscovered bugs, so be on the lookout for a possible 0.4.5 release.

I’d just like to take this moment to thank all the people who have commented on, written about, contributed to, or mailed me about Blueprint. Your enthusiasm, ideas for features, bug fixes, and willingness to overlook obvious flaws in the first release has been nothing short of amazing. So thanks!

If you’d like to contribute or comment on BP, please send me an e-mail: olav at bjorkoy dot com.

Still here? Head on over to the Blueprint site to read about this new release, or just grab yourself a copy.

Credits

As always, please remember that BP is based on work by the following people:

• Jeff Croft
• Nathan Borror
• Christian Metts
• Eric Meyer

The new BP logo was created by Ludwig Wendzich.

Blueprint: 54548, 6118, 1558, 1217

Posted on August 06, 2007. 20 comments.

I’m tempted to ask you all if you can explain to me what just happened? I had no idea that this inconsequential experiment of a project could generate the following:

• Visitors to the Blueprint site: 54 548
• Downloads so far: 6 118
• Del.icio.us bookmarks: 1 558
• Number of diggs: 1 217
• Average Digg comment opinion: Furiously offended
• Support requests curve: Exponential
• Giddiness level: Crimson red

So what does this tell us?

Blueprint is an unknown, untested and unused framework from an unknown guy launched from a highly irregular blog. This should make it quite clear that the craving for a proper designers framework almost couldn’t be greater.

As Blueprint is just a light breeze of a project, this gap in the market is a vacuum waiting to be filled. This sucks, as most vacuums do, so if anyone reading this is considering releasing their own framework or toolbox, please do so.

Just imagine what a project like BP on a greater scale can accomplish, if an experiment like this, with absolutely no merits or pre-launch hype, can gain this kind of traction.

Our new home

As a result of this unexpected surge in traffic, I’ve moved the entire project to Google Code.

This is not just because they’ll host the BP download for free (my available gigabytes from MediaTemple were quickly disappearing though), but also because Google Code is a great place for almost any project.

With a wiki, issue tracking and SVN hosting, this new arrangement should make future development of BP a great experience for all of us.

(It’ll also be interesting to see if I can actually get someone to contribute their ideas and patches to this project. Does anyone want to create a logo? ;)

Feature requests

I’ve jotted down some of the most popular feature requests, which, with time, will hopefully make their way into BP:

• Relative font sizing everywhere
• Multiple versions with different grid customizations
• Liquid layout version
• Compressed versions of the files to reduce load times

About the credits

It’s important to me that people remember that this framework was not written from scratch. The whole idea and code structure, for the entire project, including the entire way of setting up the grid, is based on something I consider to be great, nay, amazing work by the following people:

• Jeff Croft
• Nathan Borror
• Christian Metts

Also, the entire reset.css file was created by Eric Meyer, so make sure your praises are directed at the right people. :)

Please check out the rest of the credits at the new BP site.

Stay tuned

I have close to no control over what this project is spiraling into, so please excuse me if your mail or comments go unheard.

What I can promise you, is that blog posts and updates about BP will be frequent, in an effort to stagger the avalanche of support mails currently consuming my spare time.

(Also, the award for the coolest language to write about BP in goes to Dimox, with this entry)

Launch: Blueprint, a CSS framework

Posted on August 03, 2007. 68 comments.

After reading an article by Jeff Croft on frameworks for designers, I started looking at the existing CSS frameworks, trying to find one that was right for me.

Never again was I to repeat the tedious task of creating a grid from scratch, defining default typography, or battling with inconsistent default browser CSS.

The only viable option I found was the Yahoo UI Library, but with its dozens of files, weighing in at a hefty 11mb (archived), YUI is just way too bloated for what I want from a designers framework.

(YUI is still a great framework though, and there’s lots to learn from going through its impressive code.)

Presenting Blueprint

Not happy with what I had found, I began writing my own CSS framework, and, after a while, figured that this was something others might find useful as well. So today, I’m releasing Blueprint: a light-weight, easy to use framework for CSS development.

(And when I say light-weight, I mean it. It’s almost too small to be called a framework.)

Here’s some of the features Blueprint brings to the table (not <table>, mind you):

• An easily customizable grid
• Some default typography
• A typographic baseline
• CSS reset for default browser styles
• A stylesheet for printing
• No bloat of any kind

The framework has only five CSS files, making it a light, refreshing breeze compared to the tornado that is YUI. All you have to do is include two CSS files (screen.css and print.css) in the of each HTML file, and you’re ready to go.

Blueprint is still in early development, so you shouldn’t use it any projects of importance just yet. I, however, am using it in all my new projects, fixing bugs as they appear. In other words, new versions should be released quite often.

Get your, got mine

If you’re still interested, head over to the Blueprint site to see an example, read the quick tutorial, or just grab yourself a copy. Oh, and please make sure to check out the “credits” section.

If anyone would like to contribute suggestions, bug reports, or even better, bug fixes, I’d love to hear from you: olav at bjorkoy dot com.

Battle comment spam with an extra form field

Posted on August 01, 2007. 34 comments.

I was introduced to an ingenious solution to the problem that is comment spam.

All you have to do is add an extra input field to your comment form. The field should have a name that you won’t use or save, but at the same time, have a name that it’s certain that a spambot will fill in. Example:

<input type="text" name="lastname" id="lastname" />

I don’t store any users last name with a comment, so that should do just fine. Now comes the really clever part. Add a CSS rule to your stylesheet which hides this field from regular users, while still leaving it in the html for every spambot to see:

input#lastname { display:none; }

Lastly, change the part of your site that adds a comment to your database so that a comment is not added if the field “lastname” is filled in.

And there you go: nearly perfect comment spam protection. No need for bayesian filters, API-keys or (gasp) captchas. I can’t understand why this approach isn’t common, so what have I overlooked? :)

Update: I just got spammed again, but I’m not sure what happened. The spam comments was actually left on an entry where the comments are closed. Alas, I must dig deeper to unravel this mystery.

I still think the technique outlined in this post will work, and there’s been some interesting additions made in the comments.