You may or may not have noticed, but there is a new section here. It consists of sites that I have saved to my Ma.gnolia account. Every day, I find things on the web that I want to share with people, but I haven’t wanted to clutter up my blog to do so. The solution is Ma.gnolia. There’s a feed and everything. I hope you find it useful/interesting.
So here’s some good news. The guys over at CSS Off recruited five judges to help out, including yours truly.
I’m really excited for the chance to help out with this project. We have a good group of people who are all active in CSS Off as well as the blogging community, so it’ll be fun to put all of our heads together and read some code!
Ok so we’re all probably huge nerds as well…but I’ve never been one to deny that about myself(:
Anyway, like I said before, the next contest starts at 12:01 am CST (1:01 am EST) on September 15. That basically means twelve (one) in the morning on this Friday night. I’ll see you all there!
So I’ve been thinking for a while about what I’d like to blog about, now that I’m at least comfortable (if not perfectly happy) with the presentation of dtott.com. What I decided on is starting an ongoing series of in-depth CSS tips. This will (obviously) be the first one.
A CSS reset is a set of CSS declarations designed to strip away all possible default formatting before adding any of your own. Every browser out there has default formatting for every HTML element. The body element in almost every browser has padding, margins, a set font size and color, and a set background color. Headings have margins, padding, different font sizes, and different font weights. Turn of CSS on your browser while viewing a site, and you’ll see the default CSS that the browser uses. What the reset does, then, is strip all of that away. Headings, paragraphs, fieldsets, and everything else, set to one font, one size, one weight, and no extra paddings and margins.
Well, there’s a few reasons. First, by resetting the CSS, you remove the temptation to rely on browser defaults that may or may not be the same cross-browser. H1s, at least to the naked eye, are pretty consistent across the field. What about fieldsets or dls?
Second, removing that temptation will make you a better CSS coder. By having to explicitly set each attribute on each element you want to use, it forces you to learn what you might normally gloss over.
Third, it will make your code meaner and cleaner. You won’t have to set the margin and padding every time you use a ul unless the design calls for it. No more wasting lines and time undoing what the browser does for you.
Go out there and get a reset! If you are a control-freak-ninja-CSS-master, you could write your own, but there’s no need for this. Eric Meyer has already done it for us: The Eric Meyer CSS Reset. Is this the only one? No. The Yahoo! User Interface Library has a reset, and I’m sure there are more out there. Eric’s is the best. I could go into why, but it’s already been done here and here (including the comments). Just go, get the code, and put it above your stylesheets.
I concur. Do you concur?
The CSS Off guys announced today that the next contest will begin on September 15. Wooo!
I’m not sure if anyone noticed, but Google Reader now has a search bar. Those of you who use it should be jumping up and down for joy. Those of you who chose another reader because for some unknown reason Google didn’t include a search with their RSS aggregator can finally come back home.
Well, I made it almost a month since the last design change. However, this redesign is a little more extensive.
First, I went to an all-Helvetica font scheme. My typography was all over the place on the last view versions, and I feel much more comfortable with choosing one font and sticking to it. Second, but related, I moved the title and navigation to their own bar under the opening graphic, and moved the quotes under the section heads to the right of the section heads.
The next thing I needed to change was the vertical spacing. I chose 1.5 ems as my baseline height, and went with it. Everything now lies on a 1.5 em baseline grid. You can imagine (or maybe you know from experience) that this seems like it could be a pain. It is. What was my secret weapon? Rob Goodlotte’s Syncotype. What it does is place a horizontal grid over the page you’re viewing, at any size you’d like. 1em converts to 16px, so I was able to line everything up to a 24px horizontal grid. It’s awesome.
The biggest change, which might not be all that visible at first, is that the entire site (except for a couple borders) is now in ems. The entire structure, the images, and of course the fonts, now resize with the text. The effect is that when you increase font size in your browser, the entire web site zooms. Try it out (cmd/apple + to increase size, cmd/apple - to lower size).
Seems like an easy concept; just divide all of your pixel values by 16, like I mentioned before, and you’re set, right? Well, at first, yes. For the overall structure, that’s all I had to do. The problems arise when you change the font size of an element. Whenever you change the font size of an element, like a paragraph or a heading, the rest of the attributes of that element are measured against the new font size, instead of the body font size. To get the margin or padding that you want, you have to divide the margin you’d like by the new font size, and that number is your new margin. Ideal margin / new font size = New margin.
I had my calculator program running the entire time.
Inspiration and guidance for this redesign came from Wilson Miner’s Setting Type On The Web (on A List Apart) and Richard Rutter’s Compose to a Vertical Rhythm (on 24Ways).
It’s been a fun (and trying) experiment. Hopefully this version will last longer than a month before I’m fed up with it!