Responsive off-canvas navigation

I made a responsive off-canvas navigation that’s easy to implement and doesn’t require much in the way of additional markup. The bulk of the display styles are separated in the SCSS, so you don’t have to worry about stripping out a bunch of display styles that you almost certainly don’t want.

One of these days I might get around to making some fancier options for it, but this gets the job done for now.

You can fork it on GitHub or see it in action on CodePen.  Enjoy!

The Yule Blog

This time of year, for the past three years, my good friend Beth and I have producing a fun little web site called The Yule Blog.

Yule Blog 2012 ScreenshotIt started out as a Twitter account to post interesting facts about Christmas, and snowballed (ugh, puns) into this. I missed writing, but since writing consistently is hard, we decided that if we could focus on one subject and limit ourselves to just part of the year, we could end up with a better result. I also wanted something that I could use as an outlet to try out new CSS techniques, since I often get distracted coming when trying to come up with demos without any context. So far, It’s been a great success.

We recently launched this year’s edition. Following in last year’s tradition, it features a new design. It’s a little less ambitious than in the past, but the idea this time around is to iterate on it next year, rather than scrapping the whole thing.

Due to some unforeseen circumstances, we’re probably going to keep the content a little lighter this year, but there will still be a lot of cool stuff. Check it out and let me know what you think!

Question block in pure CSS

I used a little bit of SASS on this one. I’m trying to think of how a mixin could simplify this, but it seems like it’ll be a lot of manual labor no matter what I do.

I’m not sure what’s up, but something weird is going on with CodePen’s iframe. The animation isn’t working right. It works fine locally and over at CodePen. Oh well.

Mario in CSS

No images were harmed in the making of this pixel guy.

I know everybody and his brother has already done something like this, but I just wanted to try it for fun since it’s not a super practical thing.

Another link color mixin

You know, I just checked, and Compass does include something like this. Oh well. Compass splits the difference between this mixin and the one I posted the other day. Compass is built for reusability within any project, and not be changed—just used. This one is built to be used within my project as the mixin, not outside variables, define my default colors.

If I want to reuse it, I’ll have to make some adjustments to it—namely I’ll have to define different colors. That’s obviously not ideal for a mixin library, where you need to be all things to all people, but it makes perfect sense here. Not all mixins need to be reused outside of your project.

iOS Style Toggle Mixin

This could probably use a little more work, but it’s heading in the right direction.

Link color mixin

I needed a mixin for links, so I made this.

I want to be able to have linked headings look just like normal headings, without inheriting the color for standard links. For example, for standard links, I’ll include this: a {include links;}.

Since I don’t want my headings to stand out as links, I’ll do this for them: h1 a {@include links($link: #222, $visited: #222);}

To break this down a bit further, I define some variables for the project. Then, I create the mixin, which can take optional arguments for the various link state colors, and a transition. If I don’t define a value when I include the mixin, it will just inherit the defaults that I set in the variables. If I do, it will override.

I use Bourbon to power the transition mixin, but I think Compass‘s mixin will work just as well.

The world needed another grid system…so here it is

Introducing the 1140px Responsive SASS Grid! Take a look at the grid columns and a few example layouts. Both pages include a column and breakpoint overlay that will help you get an idea of how it functions.

I know what you’re thinking … “great, yet another grid system.”

Yeah, well you’re probably right. Here’s the thing: I don’t think there’s any one perfect CSS grid system, so it’s important to choose the one that works best for your project. There are many out there that I like, particularly the 1140px CSS Grid System.

The problem with this and most other grid systems is that it’s hard to get less semantic than classnames like “onecol”, “twocol”, “threecol”, etc. Enter SASS.

SASS makes it easy to avoid the ugly classnames usually associated with CSS grid systems. With SASS’s powerful variables and mixins, we can get the goodness of the grid without without all the mess.


This project arose from a need I had while redesigning The Yule Blog. I used the 2011 edition of that site as a learning experience to teach myself more about SASS. While the site was always responsive, my approach needed some work, especially considering that there were 25 or so feature articles, each with a customized layout.

To prepare for the 2011 edition of The Yule Blog, I need to do some housekeeping. This grid system is already helping me to update the numerous templates and future-proof them by using semantic classes instead of classes tied to a grid system.


It’s easy to use. I want something powerful but not confusing. I don’t want to have to think about it too much when I actually use it. It requires SASS 3.2, so that it can take advantage of the new mixin features.

Basic Markup

Keep in mind that your class names will vary because you will create them using @include in the SASS. These examples use nonsemantic class names.

    <div class="container">
      <div class="row">
        <div class="col-4">
          <p>Column 1</p>
        <div class="col-8 last">
          <p>Column 2</p>

Push classes

You can offset columns to the right. Look at examples.html to see this in action.

    <div class="container">
      <div class="row">
        <div class="col-4 push-4">
          <p>Column 1</p>
        <div class="col-4 last">
          <p>Column 2</p>

Creating semantic classes

This example uses includes the container, row, column and push mixins…

    .mcs {
      @include container;
      .mcs-content {
        @include row;
        article {
          @include column(4);
          @include push(4);

Markup for this example…

    <div class="mcs">
      <div class="mcs-content">


Include breakpoints

Include breakpoint mixins to add a responsive element as the page width shrinks. This example uses the same markup as above.

    .mcs {
      @include container;
      .mcs-content {
        @include row;
        article {
          @include column(4);
          @include push(4);
          @include breakpoint(desktop-small) {
            @include column(6);
            @include push(3);
          @include breakpoint(phone-landscape) {
            @include column(6);
            @include push(3);
          @include breakpoint(phone-portrait) {
            @include column(8);
            @include push(2);


This grid is based in large part on the original 1140px CSS Grid System by Andy Taylor. I’ve extended a series of mixins created by Ryan Schmukler and added push classes by Liam Cooke. I hope that my work can tie all these great things together.


Please feel free to fork the project on GitHub and submit a pull request with any improvements. There’s definitely still work to be done.

A bookmarklet to see if a site is down

Smart people head to Down for Everyone or Just Me when they can’t reach a website. But who has time for all that typing? Certainly not me. That’s why I took 45 seconds and created a bookmarklet to make this easier.

Most people have no idea what a bookmarklet is. The mere idea of editing a bookmark’s address doesn’t even seem to register with them. Me, I’m not like most people. You should be more like me. Here’s how.

Step One

Create a new bookmark. It doesn’t matter what site you’re on. Do it here for all I care.

Save that bookmark to your Bookmarks Toolbar.

Step Two

Edit the bookmark. You’ll want to change both the name and the address. Here’s the code you’ll need:

javascript:(function() {str=location.hostname; down=''; location.href=(down + str);})()

Make it look like the picture:

Step Three

There’s no step three.

Whenever a site seems unreachable, just click the item in your Bookmarks Toolbar and you’ll be whisked away to Down for Everyone or Just Me.

Have fun.

Tips for getting started with SASS

I’m still only ankle-deep in the world of SASS, but I already can’t imagine building a site without it. Getting it up and running is pretty straightforward, and nesting selectors likely makes perfect sense to you because you’ve probably been wondering for years why CSS doesn’t already do this.

Nesting selectors is great and all, but over the last few years, a new shortcoming in CSS has popped up. Namely, keeping up with vendor prefixes. Most of the cool CSS3 features would be inaccessible to designers if we avoided vendor prefixes, and so, we do use them. We use lots of them. Browser support for new features is evolving rapidly, and it’s hard to keep up. SASS can help.

I’ve already discovered a few basic tricks that can help you get up and running with SASS very quickly.

Getting Started

You’ve got SASS installed, right? It spits out neatly formatted CSS. But you don’t want neatly formatted CSS. You want to compress the hell out of it and get that page to load .001 seconds faster. They tell you how to do this in the SASS documentation, but they do it in the most roundabout way possible. Here’s all there is to it.

sass --watch --style compressed style.scss:style.css

That was easy.

Mixin’ it up

Nested selectors rule, but they just scratch the surface. To wrangle those vendor prefixes, you need mixins.

Here’s your first mixin:

@mixin box-shadow ($box-shadow) {
    -webkit-box-shadow: $box-shadow;
       -moz-box-shadow: $box-shadow;
        -ms-box-shadow: $box-shadow;
         -o-box-shadow: $box-shadow;
            box-shadow: $box-shadow;

To use it, just call up the mixin with the @include statement and give it some standard values for that property.

div {
    @include box-shadow(1px 1px 5px #000);

This is what you’ll get after SASS detects the change:

div {
    -webkit-box-shadow: 1px 1px 5px #000;
       -moz-box-shadow: 1px 1px 5px #000;
        -ms-box-shadow: 1px 1px 5px #000;
         -o-box-shadow: 1px 1px 5px #000;
            box-shadow: 1px 1px 5px #000;

Simple, right? Just substitute virtually any other vendor-prefixed CSS3 properties that share the same syntax and this technique will work just fine.

So where won’t it work? Gradients. Ugh, I know, right? Safari 5.1, which only came out with the release of Lion, is the first version to bring its gradient syntax into sync with the W3C proposal and every other browser vendor’s current implementation.

Off the top of my head, it seems safe to say that older versions of Chrome probably won’t support it, but Chrome updates automatically, so it’s much less of a concern. Keep an eye on your visitor logs for Safari 534.50 or later and sooner or later it’ll be safe to drop the older Webkit gradient syntax.

You might be thinking this might also not work with Firefox’s stupid border-radius syntax. Well, stop. Use the border-radius shorthand instead. Unfortunately, older versions of Safari won’t recognize the shorthand, but remember, we’re talking about rounded corners here, which degrade incredibly gracefully. You don’t care if old versions of Internet Explorer get rounded corners, do you? Occasionally you have to leave Safari behind too. Just use the shorthand and move on.

Back to this mixin technique. It works fine when you have one value, but what if you want to specify more than one box-shadow? There’s two ways to handle that, and for my money, one is better than the other.

Here’s the less good way:

@mixin box-shadow ($box-shadow-1, $box-shadow-2) {
    -webkit-box-shadow: $box-shadow-1, $box-shadow-2;
       -moz-box-shadow: $box-shadow-1, $box-shadow-2;
        -ms-box-shadow: $box-shadow-1, $box-shadow-2;
         -o-box-shadow: $box-shadow-1, $box-shadow-2;
            box-shadow: $box-shadow-1, $box-shadow-2;

Separate the two shadow values with a comma, just like you’d do with normally.

div {
    @include box-shadow(1px 1px 5px #000, 1px 1px 1px #000);

Here’s the way I prefer to handle this.

Just keep the original mixin you set up earlier. Then, set up a variable that contains both box shadows:

$realistic-drop: 1px 1px 5px #000, 1px 1px 1px #000;

Just call it like this:

div {
    @include box-shadow($realistic-drop);

You can make the variable as complicated as you want. Add 100 drop shadows and you still just need to call one variable.

Take advantage of Modernizr

Have I mentioned that I love Modernizr? Only constantly. But where do you stick all those Modernizr classes in your stylesheet? Should you use them inline or make a separate section of your stylesheet and keep them all together? With SASS, there’s a good case to be made for keeping them together because SASS’s nested selector syntax will help you keep track of those Modernizr selectors.

Here’s an example:

.no-rgba {
    div {background: #fff;}
    p {color: #333;}

This becomes:

.no-rgba div {
    background: #fff;
.no-rgba p {
    color: #333;

Depending on how much you take advantage of Modernizr, this can come in really handy. RGBA is pretty basic, but once you start getting into things like 3D transforms, where you probably have to rewrite large parts of your layout to gracefully degrade, you’ll be glad you’ve got SASS to help keep your selectors in check.

That is not all

This isn’t supposed to be the definitive guide to SASS. It’s really just a few things to help you build up speed a little faster. If you’re looking to take it to the next level, check out the Compass Framework or Bourbon.

As usual, there’s a Gist on GitHub. Hit me on Twitter or comment at GitHub if you want to shower me with praise or anything else.