How I Approach Responsive Breakpoints

I wanted to quickly outline how I approach actually coding a responsive design, specifically how I handle breakpoints. You may want to also check out my post on how I visually approach/think about implementing a responsive design.

First off, know that I uass Sass (scss syntax) for my CSS, and this approach relies heavily on that fact.

On to breakpoints: I am not alone in naming my breakpoints. This is by no means "my idea." It's just an easy way to remember your breakpoints instead of having to remember the # value, and it it makes it easy to tweak them everywhere all at once.

Here's how I set up my breakpoints:

// breakpoints can really be anything
$mario-width: 1200px;
$luigi-width: 960px;
$peach-width: 760px;
$toad-width:  540px;

@mixin breakpoint($point) {
    @if($point == super-mario) {
        @media (min-width: $mario-width) { @content; }
    }
    // I often style "mario" as the default, so it's 
    // likely I may not actually use this breakpoint
    @if $point == mario {
        @media (max-width: $mario-width) { @content; }
    }
    @if $point == luigi {
        @media (max-width: $luigi-width) { @content; }
    }
    @if $point == peach {
        @media (max-width: $peach-width) { @content; }
    }
    @if $point == toad {
        @media (max-width: $toad-width) { @content; }
    }
}

Note that I don't always dev for "960px" by default, so that browsers that don't have media-query support, they'll see the styles optmized for a viewport for 960px.

To see this technique in action, let's pretend we have a heading that we want to keep to 2 lines, so we have to adjust the font size as the viewpoint scales:

.heading {
    h1 {
        // default for 960px screens and
        // browsers without media-query support
        font-size: 36px;

        // make it bigger on big screens
        @include breakpoint(super-mario) {
            font-size: 48px;
        }

        // screens smaller than 960px (large tablets in portrait)
        @include breakpoint(luigi) {
            font-size: 30px;
        }

        // screens smaller than 760px (small tablets, 
        // large phones in landscape)
        @include breakpoint(peach) {
            font-size: 25px;
        }

        // screens smaller than 540px (mostly phones)
        @include breakpoint(toad) {
            font-size: 20px;
        }
    }
}

Sometimes you may find yourself wanting a one-off breakpoint for a very specific use-case when you need a breakpoint in between your named breakpoints.

For that, I create a little mixin that allows you to create a breakpoint at any place you want. Be careful not to get carried away with this; it can be a bit more difficult to manage. It's really for rare, very specific cases:

@mixin break($width) {
    @media (max-width: ($width * 1px)) { @content; }
}

// usage:
@include break(400) {
	font-size: 18px;
}

That's my general approach to actually coding up a responsive design and how I handle breakpoints.