Analyze your CSS in a whole new way with CSS Dig #


CSS Dig gives you a new way to analyze your CSS (using Google Chrome).

Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. CSS Dig is a Chrome Extension that looks for stylesheets and style blocks on the webpage it’s run against and groups declarations together for easy inspection. For example, you can see how many colors are used and how often. This can help you consolidate your styles and help with refactors.

The homepage is helpful to get started, but the code is on GitHub.

Simple guide to Mobile-First Responsive Design #

Who doesn’t want their web projects to be useable on all devices? If you’ve been looking for a simple primer on the fundamentals of responsive web design, Adam Kaplan’s project, nicely dubbed Grid, is a great resource to visually see what “Responsive” means and how it works.

We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.

Check out Grid’s homepage, or the source on GitHub.

Autoprefixer wants you to forget about vendor prefixes #

CSS preprocessors have been around for awhile, but Andrey Sitnik’s Autoprefixer takes the opposite approach: it parses your CSS after you write it and adds any necessary vendor prefixes using data from Can I Use.

As the browser landscape changes, your outputted CSS changes to fit. Without you having to do a thing. Andrey says:

The best tool is a tool you can’t see and one that does the work for you

I have to agree with him on that.

A nice collection of CSS-based loading indicators #

SpinKit from GitHub’s Tobias Ahlin uses CSS animations to create smooth and easily customizable animations, but look out if you need to support older browsers:

The goal is not to offer a solution that works in every browser—if you’re supporting browsers that haven’t implemented the CSS animation property (e.g. IE9 and below), you’ll want to detect support for the animation property, and implement a fallback

The demo features 8 different styles for you to pick from. #6 is pretty rad if you can find a good use case for it. Check ‘em out!

Namespace support is being added to Sass #

Namespace support has been long-requested by those writing CSS the Sass way. The feature is still in development and should hit a Sass version near you soon enough, but it looks to be a very simple and consistent way of dealing with the vast number of use cases for namespaces.

For a deeper take on the history, read this issue and this comment which summarizes the solution and some of the rejected alternative solutions.

Here’s an example use case shared by Chris Eppstein:

@function current-module() {
  @return nth(&, 1);

mymodule {
  @at-root {
    .#{current-module()}-header { ... }
    .#{current-module()}-footer { ... }
    .#{current-module()}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... }
      form       {
        button.#{current-module()}-button { ... } }

And this would generate CSS like:

.mymodule-header { ... }
.mymodule-footer { ... }
.mymodule-body a { ... }
.mymodule-body span { ... }
.mymodule-body p { ... }
.mymodule-body form button.mymodule-button { ... }

Check out this Gist and this comment to learn more.

CSS Zen Garden turns 10 and the source is now open on GitHub #

If you started a project like CSS Zen Garden today, it would be natural to put the source code on GitHub and ask for contributions via pull request. However, CSS Zen Garden just turned 10, so its life spans beyond that of Git and GitHub for that matter.

So, needless to say, it’s a big deal for Dave Shea to move the codebase to GitHub and follow suit with what we now think is a norm, which is open projects and social coding.

CSS Zen Garden is 10 years old

If you’d like to add a modern CSS Zen Garden design to the mix, fork, branch and submit a pull request! If you’re new to Git and GitHub, and you’re not sure what to do – either learn git (do this!) or use the traditional submission form at

Sadly my submission from WAY BACK IN THE DAY was never added as an official design, but can be seen (un-styled) here. I still have the CSS for that so maybe one day I can work it out with Dave to update the CSS src URL for my submission.

Check out the source and fork it on GitHub. Or head to to see the original design and learn more.

shame.css — a best practice for handling CSS hacks #

Harry Roberts (aka CSS Wizardry) isn’t advocating writing “hacky” CSS, he’s advocating a best practice for handling them.

From his post on the subject:

The idea of shame.css is that you have a totally new stylesheet reserved just for your hacky code. The code you have to write to get the release out on time, but the code that makes you ashamed.

As Harry mentioned in his article, putting your CSS hacks and quick-fixes in their own file called shame.css you do a few things:

  1. You make them stick out like a sore thumb
  2. You keep your ‘main’ codebase clean
  3. You make developers aware that their hacks are made very visible
  4. You make them easier to isolate and fix.
  5. $ git blame shame.css

I don’t know about you, but Harry had me at git blame.

csscss parses your CSS and shows your duplicated declarations #

Yesterday, a neat little gem called csscss celebrated a 1.0 release!

csscss will parse any CSS or Sass file you give it and let you know which rulesets have duplicated declarations.

It’s super easy to use:

$ gem install csscss
$ csscss path/to/styles.css path/to/other-styles.css

{.contact .content .primary} and {article, #comments} share 5 rules
{.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules
{.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules
{article.blurb:hover} and {article:hover} share 3 rules

Cool! This really helps when you’re trying to get a handle on refactoring. Maybe it’s just me, but I find remembering all of my CSS rules very complicated. There’s a reason I’m more of a back-end developer…

For those who write their CSS in Sass, csscss can also parse Sass files, as well. Just point it at one and it’ll go to town!

Check out the homepage or the source on GitHub for more details.

There’s one other neat part about this gem, but it’s not for users of the gem — it’s for developers. csscss contains, as you’d expect, a full CSS parser written in parselet. I’m sure that others could do need static analysis stuff with CSS if they had a parser that was pre-built for them, as well.

Meet grunticon: a mystical CSS icon solution #

grunticon — yet another cool project by Filament Group — is a Grunt.js task that takes a folder of SVG files and turns them into SVG data urls, PNG data urls, and plain old PNG files to be referenced via CSS.

It also generates a snippet of JavaScript and CSS to asynchronously load the proper icon CSS depending on the browser’s capabilities. This provides some pretty big wins. It:

  1. makes it easy to manage icons and background images for all devices
  2. uses resolution independent SVG icons when supported
  3. obviates the need for CSS sprites

Getting started with grunticon is pretty easy. All you need is PhantomJS, Grunt.js (of course), and npm. Then you:

npm install grunt-grunticon

There are some required configuration settings as well, so be sure to check out the Getting Started and Documentation sections of the project’s README. helps select the right easing for an animation #

If you need help with selecting the right easing for an animation, could be the help you’re looking for. It includes an explanation about easing, helpful animated graphs to visually demonstrate each easing as well as “how to” code for jQuery, Sass and CSS.

Since it’s open source, the tool has been forked and translated to European, Slavic and Asian languages.

Fork it and localize it to your language, or check out to select the right easing for your next animation.

Flat UI user interface kit from Designmodo #

If you haven’t heard, flat design is pretty trendy right now.

Last September, LayerVault shared their thoughts (and some would say coined the term too) on The Flat Design Era. Since then, many sites and designers have taken to this new trend — including the folks at Designmodo.

A month ago they released Flat UI, a free and open source user interface kit. If you were paying close attention, you’d know that LayerVault slapped them with a DMCA take-down notice issued to GitHub saying “I am the exclusive rights holder for the artwork contained within Flat UI, Free Web User Interface Kit; These exclusive rights are being violated by material available upon your site at the following URL” — but that take-down has since been lifted and the air is clear. In the end LayerVault was simply saying that a few of the icons were way too close to their original flat UI designs and had to defend themselves. It happens.

You should check out Flat UI — even if just to get some ideas on creating your own UI kit.

ZURB Foundation turns 4.0 #

We originally covered Foundation back at 2.0. That was before Foundation 3.0 where they re-wrote the styles in Sass (SCSS) and Compass rather than pure CSS.

Now, ZURB is at it again with Foundation 4.0 and this is what’s new.

Mobile first.

We’ve retooled Foundation from the ground up to be Mobile First. This is no hack job; we didn’t just flip some media queries and call it a day. We went through the framework and rethought how grids should work, how components should work in a mobile-first paradigm, so we could be sure the solution we deliver in Foundation 4 is smart and sturdy.


We’ve built Sass mixins and extensions for almost every component of Foundation. Now you can write whatever markup is most semantic, most representative of what your content really is. Then, simply attach Foundation components to it in your Sass.

New (and Speedier) Javascript.

With Foundation 4, we wanted to make sure that not only were our Orbit, Reveal, Joyride, Clearing and Magellan plugins the best they could possibly be, but also that we were setting Foundation up for even greater plugins in the future. So, we rewrote them all.

We’re also using Zepto.js, a jQuery API compatible library. This dramatically reduces how much your users will need to load (especially on mobile devices) and provides the added benefit of using CSS for animations, taking advantage of hardware acceleration where possible.

HTML Templates.

We’ve created some common layouts for you to start from so you can cook your site faster.

Check out the source on GitHub and the docs to get started.

Custom user styles that simplify the UI and focus on the content of popular websites #

While recording The Industry Radio Show one of our listeners linked out to these custom user styles from Connor Sears, a Product Designer at Pinterest.

user styles for twitter

If you caught our original post on Stylebot a while back, custom user styles like the ones Connor shared become easier to use and far more useful. With 60% of our traffic coming from Google Chrome, I assume that a majority of our readers can appreciate news like this.

Share your custom user styles with us on Twitter, or sign in to stylebot to share them with the community.

Also, check out the source for Connor’s simple user styles site on GitHub.

hint.css makes pure CSS tooltips too easy #

From the hint.css homepage:

hint.css is written as a pure CSS tooltip library which you can use to create cool tooltips for your site. It does not rely on JavaScript, but instead uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. hint.css uses BEM naming convention particularly for the modifiers.

The usage is simple. Download one of the 2 library versions to your project and include the CSS file in the <head> of your page.

  1. Full:
  2. Minified:

Then, the tooltip text is passed using the data-hint attribute on the element.

For example:

Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover me.</span>

If you’re wanting to contribute, hint.css is developed using Sass. The Sass source files can be found in the src directory of the project on GitHub.

Check out the homepage for more details and demos in action.