Coda 2 coming May 24th – it’s about time! Coda is one of the reasons I keep coming back to the Mac platform. It’s one of those apps that is a joy to use. Espresso overtook it for a while, but this new version looks like a very worthy upgrade – check out the Coda Tour video.
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.
Looks good; a bit like PHPDoc or other similar comments-to-documentation parsers, but for CSS.
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?!
Replicating a stack of paper is a common design found on the web; it’s an easy way to make a design a little less harsh and digital by giving it an “analog” look. For a quick example, take a look at the “Chapters” WooThemes WordPress theme.
In the past I would have used a couple of wrapper
divs in HTML, and some
background-image CSS to get a vertically expandable (but probably fixed-width without a lot more work) content box. However, with the improvements in CSS3, along with rapidly improving browser support, I wondered if it would be possible to make a similar – and more flexible – effect without images. Continue reading