A small collection of Sass mixins, helpers, and functions for common styling on elements. Many if not most I probably wouldn’t use, but a few here, like clearfix, a pseudo triangle, and centering with transforms I rely on all the time for my day job. Worth a look.
Designer/developer/speaker Harry Roberts of CSS Wizardry isn’t generally a big extend fan:
Let me start by saying that I would generally advise never to use @extend at all. It is something of a Fool’s Gold: a feature with a lot of promise and twice as many caveats.
Compared to Harry I’m a Sass newbie, but I always found the extend call, much like nesting, mildly discomforting. This post helped me understand exactly.
Another great find that I heard from a speaker at Sass Summit. It’s a really ingenious methodology to write a running style guide for your work in your source Sass or CSS directory. Basically by writing souped up comments direct in your CSS with a mixture of HTML and Markdown, you can run a ruby process and autogenerate a great looking style guide to the destination of your choice.
For Gulp fans, there’s a simple plugin as well as an alternative to the Ruby gem.
A node.js based library tool to collect CSS statistics on any web site. It’s also easy to install via npm locally to run against any stylesheet you have. There’s even grunt and gulp integration; I can see this hooking into some sort of regression testing for my work in the long run to get a wider picture of how the code is evolving.
I’ll let Google developer Andy Osmani’s description speak for itself:
A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
Nice!
Nice auto documentation tool I learned about during a talk at Sass Summit. As the introduction says, SassDoc is to Sass what JSDoc is to JavaScript. Basically, write some smart comments around your Sass functions and mixins, and with a simple call (fully Grunt and Gulp friendly) you can generate a nice looking, fully styled HTML documentation set.
Designer Jay Freestone’s argument behind this very simple set of Sass mixins to generate a grid set:
Because you’re using Libsass, which (at the time of writing) rules out the two well established SASS based grid systems, Susy and Neat. Brockmann is designed to be super lightweight and incredibly easy to understand. It’s not a comprehensive system. It’s a set of transparent and reusable mixins that let you built out a pre-conceived grid quickly.
One of those Sublime Text packages that I should have installed a long time ago but never did. The package underlines or fills a CSS color with the actual represented color; no more reloading a web page unnecessarily or whipping out Photoshop to insert a hex value.
Guil Hernandez at Treehouse talks about some pretty awesome visual tricks you can pull with CSS on the latest modern browsers (usual candidates: Chrome, Safari). I’ve used the background blend mode as a simple trick to desaturate a CMS image to black and white.
I enjoyed reading this A List Apart post from Susan Roberton. Unlike a lot other CSS optimization articles, there’s a formalization to Susan’s breakdown of an “audit” that I appreciate. An audit isn’t about making direct code changes, it’s working through the entire CSS base and delivering an document that summarizes changes to make. I find most teams skip even informal auditing, instead preferring to just hack away on a CSS snippet they don’t like. In the process they miss larger, more important architectural changes.