To make a grid layout, sometimes the maths is made complicated by peculiarities in the browser, so it's better to design against a reference background grid. For 11px, you can use this PNG:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAA
BlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAA9JREFUeNpjZFDAh/4/BAAZpgMs
3WYVsQAAAABJRU5ErkJggg==
This is good for line-heights of 22px, which works well with 14px Helvetica, as used by Github in their documents for example. Set it using the background property.
The CSS WG are working on a grid specification. Apparently there might even be some semblance of it in IE10 and Chrome 27. It would be nice to apply grid-nudging on top of traditional layouts; a kind of snap-to-grid feature.
Example grid layout problem: set a block of 16px font amongst a 14px/22px section. What line height do you use? If you use 22px, it's too squished. 25px is almost proportionate, but then it will take eight lines with rounding to get back on par with the grid, or else you'll have to use JavaScripted adaptive padding. 33px is far too spacy. So essentially you can't use modularly larger font-sizes with proper grid spacing. (Arguably it works for <h4>, but you don't normally extend an <h4> over more than two lines.)
Also, #grid looks interesting.
The default list bullets are pug-fugly. You can set your own using list-style-image, like Wikipedia does. Just don't use SVG, otherwise you will end up with all kinds of weird and wonderful bugs. If you do use SVG anyway, and you want to use data: URIs, make sure to %HH encode them.
Any PNGs used in CSS such as the grid layout box or the list-style-image bullet replacement should be as tiny as possible. We compress PNGs using pngwolf, then run them through base64.
Wikipedia uses #aaa and #ccc for borders. It uses #f6f6f6 and I think #f9f9f9 for box backgrounds. Bootstrap sets main font colour to #333 by default. We use #666 for headers.
Note: This page uses colourbox.coffee.