"me" in Weblog

(ux + ui + product) * (design + hacking)

Some Sass tools on Github

7 April 2010 · sass · github · project · css · me

On a whim, and after an off-hand suggestion from Stef, I decided to pop some of my most-used Sass mixins - the ones that I include in every new project - up on Github. There’s nothing too ground-breaking here: a straight port of Eric Meyer’s reset.css, and a few CSS3 expanders.

The CSS3 expanders are probably the most interesting. I was getting irritated with having to type and retype certain of the new rules over and over again with the now ubiquitous -moz and -webkit prefixes. So I bundled them into mixins. Mixins are Sass’ way of adding very simple scripting to your stylesheets. Let me give you an example.

This Sass snippet:

div
  width: 500px
  height: 300px
  +box-shadow(#000, 0px, 3px, 5px)

Gets rendered as:

div {
  width: 500px;
  height: 300px;
  box-shadow: #000 0px 3px 5px
  -webkit-box-shadow: #000 0px 3px 5px
}

Dead simple. I’ve wrapped up border-radius, box-shadow, gradient and box-sizing. Interested? Grab the files from Github.

You Might Not Know is a place to share those little tips you’ve picked along this road called Life. These tips can be able absolutely anything. If you think they’re useful then someone else will too. Or that’s what we think, anyway.

David and myself have been busy working on the prototype for a while now and after much procrastinating we’ve finally decided it’s safe to tell people about it.

I’m rather proud of how simple it is at the moment - mostly thanks to some cunning ideas from David. Adding a tip takes moments and I’m finding it rather compulsive. We’d like to be to Knol what Tumblr is to Wordpress.

We have a hundred things on the todo list but at this point we’d just love to see a few people playing with You Might Not Know. Let me know what you think!

Page 1 of 1

Getting around