Using Breakpoint 1.0 in a Responsive Web Design Project

Responsive Web Design
Mason Wendell

A little while ago (hours ago, actually) my friend Sam and I released 1.0 of our Sass project Breakpoint. (Announcement here.) Breakpoint makes writing media queries really simple. I want to show you a little about how we use it day-to-day on responsive projects here at Zivtech.

What’s wrong with just writing out media queries the old-fashioned way?

It’s fine if you only have a few media queries. But as we work we don’t just limit ourselves to a few queries and we certainly don’t limit ourselves to specific device sizes. So the problem we run into is that we need a way to keep track of all these queries and why we use them. We might set a query for the point at which our whole design reaches a certain width, but we’re just as likely to need a query when a header or a specific illustration reaches its full size. Without a system in place, our queries become cluttered and start looking like gibberish.

Since we design sites from a mobile-first perspective it makes sense that the query feature we use most often is the min-width feature. We use this one a lot, but it’s not the only query we use. And no solution is worthwhile unless it handles the edge-cases as well as it handles the mainstream cases.

Breakpoint makes a few assumptions.

  1. Most queries test the min-width feature.
  2. Variables are a good way to manage queries in a growing project.
  3. It’s nice to have a short and easy syntax that still allows for complex queries, when needed.

So we want to use Sass variables to create a per-project system for media queries, and use a short and easy syntax to do it.

Breakpoint creates a mixin called “breakpoint” - It’s easy to remember! And since it makes some assumptions on common use cases we can pass the mixin an argument that contains just a simple numerical value. But you can also stack them to create more complex queries, if necessary.

Simple use

$breakpoint-medium-width: 500px;
.foo {
  @include breakpoint($breakpoint-medium-width) {...}
}

Which compiles to:

@media (min-width: 500px) {.foo {...}}

Example

Let’s say there’s a site, and it goes from one-column mobile to desktop width. Pretty standard, right?

In this design I want certain changes to happen when: 1. the device is wider than a standard phone in portrait mode 2. the device is wide enough to show the whole robot illustration 3. the device is as wide as I wanted the header to get 4. the device is wide enough that I feel the design shouldn’t expand further

I set up the variables in Sass like so:

$bp-not-phone-portrait: 321px
$bp-whole-robot: 481px
$bp-header-max: 700px
$bp-desktop: 1000px

Here you’ll notice a mix of device references and design references - it’s healthy. Use a device size if it suits your content. Just always be sure the content is in the driver’s seat.

In my working Sass I’ll call the variables like this:

header
  hgroup
    +breakpoint($bp-header-max)
       width: $bp-header-max

Note that since the variable is a simple numeric value I'm able to reuse it to set the width of the hgroup when the device is wide enough.

In the case of the robot, I use it in a few places:

header
  .csstransforms3d &
    +breakpoint($bp-whole-robot)
      +perspective(700)

#mc_embed_signup
  +breakpoint($bp-whole-robot)
    padding-right: 0
    background-position: top right
    margin: 0 auto
    max-width: $bp-whole-robot

.point
  position: relative
  &:before
    position: absolute
    content: ""
    top: -24px
    left: 50%
    margin-left: -22px
    +breakpoint($bp-whole-robot)
      left: 1.5em
      margin-left: 0

This let’s me and the other Coding Designers here know why we’re dropping queries that affect different parts of the design. It’s so we can see the whole robot - hooray for clarity!

Link to generated CSS.

Now in Drupal Theming...

We’re big believers in custom code for custom work here at Zivtech, but that doesn’t mean we don’t lean on our toolset. Drupal is a great dancer, and this technique is a great partner. Our base theme, Survival Kit comes with Breakpoint built right in. A full run down on Survival Kit is forthcoming, but the short version is that it's sparse and simple. Installing just the Drupal theme won’t give you much beyond some good default tpl.php files. But once you install the companion Survival Kit Compass extension you get a library of javascript libraries, and a top notch Sass framework for all your CSS needs. Link here and here for details.

Add a break point at the point where it breaks.

Now go get it!

Ready to get started?

Tell us about your project