Google recently published one of the best single tutorial resources I’ve seen that cover how to write both CSS and JS based animations on the web. It’s far more than just syntax; it’s recommendations on what timing and easing functions are the most appropriate in different situations. And with Google being Google, there’s some performance related pointers as well.
The consistently excellent Jonathan Snook gave a talk at the recent Beyond Tellerrand conference about how to organize your CSS in a scalable, modular system. I’ve been a fan of Snook for years due to his work on SMACSS, a CSS organization system I’ve loosely adapted on my work projects. A highly recommended watch for those responsible for CSS on larger code bases.
CSS Wizardy’s Harry Roberts writes one of the best single guides to keeping specificity low and complex CSS projects from getting out of control. I use to be more neutral on IDs, but at this point, I’m fully onboard with Roberts: they don’t serve any purpose a class can’t already deliver on.
CSS Tricks‘ Chris Coyier wrote a nice little post going over some of his favorite Sass mixins. Sass is wonderful and I’d recommend it to anyone, but even for vanilla CSS users, do read his ‘centerer’ code snippet as well. Fairly brilliant way to basically center anything regardless of the outer container size, all with a simple transform property.
Developer Razvan Onofrei:
Setting a vertical rhythm shouldn’t be very hard. There are many tools out there that can even generate the CSS for setting your vertical rhythm on the scale you choose.
The baseline is the imaginary line upon which a line of text rests.
There is one problem with most of these tools: they bring the baseline concept into discussion without really tackling the problem.In typography, the baseline is the imaginary line upon which a line of text rests. And it has to be aligned with the grid we use for establishing our vertical rhythm. That’s it.
But here comes the tricky part. We all know how line-height works and that the text will always be vertically aligned to its middle, NOT to the baseline.
Really enjoyed reading through the wonky breakdown between cap height, line-height and overall alignment on the web. I expect to play around with his alignment gist at some point.
Designer Elliot Jay Stocks talks about typographic rules on the web:
To summarize: we can hyphenate pretty well, but justification still has a way to go, so I’m afraid to say that we’re not going to be using them together the way we do in print any time soon.
All in one JS powered web app to rapidly generate fast cross-browser animations, written by web developer Joel Besada. It just came out today, but my first impressions are very positive. Instead of downloading a clunky, bloated Mac app for doing CSS3 animations, this feels a lot fresher and more lightweight. I was able to put together a fairly complex CSS3 animation quickly though I haven’t inspected the exported CSS in detail yet.
The Flickr web developer team breaks down the usability and performance considerations behind their new signed out homepage. There’s a lot of solid content including emphasis on 3d transforms to keep CSS animations fast and throttling JavaScript-based scroll events.
For beginners, CSS selectors and selector specificity can be tricky to properly understand without significant trial and error. Fortunately Luke Pacholski created this smart little game to help you learn properly. Clever.
The next time I teach any introductory course on HTML/CSS I need to pass this list of “commonly frustrating HTML and CSS quandaries” by designer (and creator of Bootstrap) Mark Otto along to the class.