This is cool. Also check it out running as a desktop app by using the Open Web App API.
A small anecdote on some CSS usage which tripped me up a few days ago; it’s easy to get carried away and set all your color/background-color properties using the fancy-pants new RGBA. But only do so if you really need to specify the opacity value.
i.e. if you’re setting something like this:
color: rgba(213, 265,17, 1);, set it as plain old RGB:
color: rgb(213, 265,17);. The latter will render fine in IE, as far back as I was able to test (IE 7, I think), whereas the former only works in newer browsers (IE9+, Firefox, Webkit, Opera).
The “doh!” moment for me came when testing a stylesheet a few days ago. The layout worked fine, but for a moment I couldn’t think why none of the colours were displaying in IE8, until then I remembered I was using RGBA for everything. So off I went to create override classes for IE8, using Modernizr‘s
.oldies class. I was about 3/4′s the way through the stylesheet when I realised 99% of the colours I was overriding had no opacity set (i.e. opacity value of 1), and so I could just specify them as RGB. Cue much slapping of the forehead! Lesson learned, and needless bytes saved.
SMACSS (pronounced “smacks”) is more style guide than rigid framework. There’s no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!