HTML/CSS special Unicode symbols

I have seen so many tweets of late with people getting their heads frazzled with nth-child and nth-of-type. So I decided to knock this together so people can play around and test their nth's out!

This round-up focuses on how others are building CSS/UI style guides and some best practices. Specifically not grouping in pattern libraries in here (besides MailChimp, which is surface-level patterns) to demonstrate the many uses of these documents.
Anna Debenham has an excellent round-up of what makes up a front-end style guide in her post on 24 ways and her book — here are some more examples to explore.

technique for equidistant elements

modular css in sass

Generate a base64 encoded Data URI straight from the Finder.
An Automator workflow which adds an item to the ‘Services’ contextual menu. It generates the Data URI for a file and copies it to the pasteboard.

We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now!

This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it.

Ever since attending last year’s Build Conference I’ve been using what I’ll call “The Modular Scale Method,” which is a technique I’ve found invaluable for building my designs from the content out.
We’ll talk about this method more in-depth in just a little while as we look briefly at a simple Cookbook application. But given that the modular scale concerns itself with typography—the most granular level of our content.

*”Best practices” is a loaded term when it comes to creating mobile web experiences. It’s a unique context with it’s own challenges and opportunities. While there’s no silver bullet, this site will help you ask the right questions and help solve problems so you can start creating future-friendly web experiences.

In an ideal world, every camera, screen, and printer would display color in the same way. Unfortunately, thats not how it works in practice.

Works best in Chrome
Found here http://stackoverflow.com/questions/11194209/convert-image-from-clipboard-to-base64-encoded-data-with-javascript

If we want to keep our world brilliant we have to change how and what we eat. Find out how and why you can help

The perceived speed of your website relies heavily on the browser being able to paint to your user's screen. For this they must construct a "render tree" which consists of the DOM and the often forgotten CSSOM.
The critical path which the browser takes to gather this information is the only thing standing between your server and the user's screen. Using new research and real world examples, Patrick Hamann will cover a range of techniques – from the controversial to bleeding edge – the Guardian is using to make their CSS load as fast as possible, and ultimately keeping it off the critical path.

See http://stackoverflow.com/questions/11194209/convert-image-from-clipboard-to-base64-encoded-data-with-javascript

A Sublime Text plug-in that automatically folds base64-encoded data URIs in your CSS files.

CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries.

So here we're collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them.