We introduce the concept of @media queries in CSS.

A lot of what using Sass on this project allows us to do is stay DRY (don't repeat yourself). We did that setting color and size variables. We did that with our font stacks. Now we're doing it again with media queries. Anytime we need a media query, we now have a @mixin we can use. That way if we need to adjust them, we can change them in just one place.

Instead of naming our media queries stuff like "iPad" or anything overly specific like that, we'll just use some arbitrary but understandable names like "Baby Bear" and "Papa Bear".

We start with a wide screen, then narrow it down until the navigation looks bad, and that's our first media query break. At that point we break the navigation into two rows of four instead of one row of eight. We have to adjust the shadows to have it look right.

We also adjust the width of the page wrap at certain media queries, which means we need to tweak how the logo works too.

Comments

  1. Gray Ghost Visuals
    Permalink to comment#

    Chris,

    When I first heard you mention this break point naming convention I was like “Brilliant!,” but after using this technique I was like “What’s between them?”

    tiny-bear? really-tiny-bear? cousin-bear? grandpa-bear? What if you have more than 3 breakpoints in your design?

    • Chris Coyier
      Permalink to comment#

      Sure, that sounds fine. Whatever works for you (that you can remember). Maybe Alpha, Beta, Gamma, etc. Or arbitrary numbering similar to what you might set up for keeping track of z-index. 100, 200, 300, etc – which might be nice because there is always room in between.

  2. Michael McKenzie
    Permalink to comment#

    How are you keeping the font icons from bouncing above the nav words? When I start shrinking my page to find break points the icons jump above the words when I hit my break points.

  3. Amrit
    Permalink to comment#

    Chris excellent use of media queries, another thing I learned today, however upon implementing this style in one of my projects, I found it creates repetitive instances of the media query in the final css stylesheet.

    So in the CSS document, rather then outputting…

    @media(max-width:1000px)
    “all properties for this width”

    ..it outputs…

    “property”
    @media(max-width:1000px)…

    “another property”
    @media(max-width:1000px)…

    So although you don’t repeat yourself in development, you do in the processed file. Do you feel this is a small price to pay for increased efficiency?

    • Chris Coyier
      Permalink to comment#

      Do you feel this is a small price to pay for increased efficiency?

      I do feel that. For one, gzip eats that repetitive stuff for breakfast. Also, the Sass people are aware of this and are currently considering some ways to improve it.

  4. Michael McKenzie
    Permalink to comment#

    Never mind, once I applied the media query to catch it they stopped jumping.

  5. andyunleash
    Permalink to comment#

    Re: SASS/Codekit – how do I find out if I’m using the latest version of SASS? I know that 3.2 went through in August but is there a way to check & confirm within Codekit?

  6. andyunleash
    Permalink to comment#

    Ah, nevermind –> http://d.pr/i/KxBJ

  7. Rodrigo Ibarra
    Permalink to comment#

    wit wait… on main-nav you have now something like this

    .main-nav{
       a { width: (100%/8 - 0.1); }
    }

    I understand how’s that working but i’ve never seen that before, how does it work as far as support and stuff…

    • Chris Coyier
      Permalink to comment#

      That’s just math in Sass.

      That exact line compiles into:

      .main-nav a { width: 12.4%; }

      The 0.1 being a janky fix because of subpixel rounding sometimes being off and bumping the next nav item down onto the next line.

      I think the way it’s written in Sass just expresses that idea more clearly. Start with 100%, there are 8 menu items so divide by that, then do the janky fix. Rather than just having the computed value there…

  8. Seth Hall
    Permalink to comment#

    Another great one. Although the video is a bit blurry. Is that just me or is that a Vimeo upload/compression issue?

  9. Seth Hall
    Permalink to comment#

    Any chance of implementing a copy to clipboard feature on your code blocks. Nit picky I know, but very useful. I am sure you have considered this and have good reasons for not implementing it, I just thought I would request that feature. Peace.

    • Chris Coyier
      Permalink to comment#

      I used to have that feature, but to be honest it’s kind of a hacky mess (ZeroClipboard, etc). As well as adds weight to the page (theoretically could be loaded as needed, but how complicated do we want to get here? =)).

      The real truth is, when I had that feature and reference my own site (which I do often), I didn’t even use it. I preferred just selecting and copying as normal. So in that spirit, I made sure that the code on the site was easy to copy and paste (no line numbers or other weird garbage come over).

  10. webifish
    Permalink to comment#

    Oh I am really starting to enjoy that! was nice to see that you too have annoying stupid problems when looking for that that grey font color… Can I suggest that we’ll have some kind of indication as for the videos one has already watched? and is it possible to have a “download all movies” link ? Thanks for doing that ! learned loads already.

  11. Aurel
    Permalink to comment#

    Great stuff! this naming contention on the media queries feels great.

  12. FLDLVL
    Permalink to comment#

    Stupid question I’m sure but I’ve been stuck with a “Syntax error: Invalid CSS after “…int(mama-bear) “: expected “}”, was “{” on line 74 of . Maybe someone can help me out. SASS 3.2.1 is installed. I’m new, be easy please.

    @mixin breakpoint($point) {
      @if $point == mama-bear {
        @media (max-width: 1250px) { @content; }
      }
    }
    
    @include breakpoint(mama-bear) {
      background: red;
    }
    • Devin Dombrowski
      Permalink to comment#

      Wrap your breakpoint in a selector

      @mixin breakpoint($point) { 
        @if $point == mama-bear { 
          @media (max-width: 1250px) { @content; } 
        }
      } 
      
      body { 
        @include breakpoint(mama-bear) { background: red; } 
      }
  13. h.bliemel@web.de
    Permalink to comment#

    Hey Chris,

    there is a gap between videos #15 and #16. You don’t show how to apply the :hover states for example. Makes it hard to follow the new stuff when I have to figure things out by myself, especially for a newbie like me.

    • Gary A
      Permalink to comment#

      Pause the video at 6:15. Check out the code at lines 95 to 98. There’s the hover.

      &:hover, &:focus {
        // stuff here 
      }
      

      If you want a transition, below that do:

      @include transition(background-color 0.3s ease-in, color 0.35s ease-out);
      
  14. sugarfreejones@gmail.com
    Permalink to comment#

    Few comments:

    1) I love how this shows using CONTENT (in this case nav) to determine breakpoints as opposed to iPhone/iPad/etc.

    2) Using SASS mixins to set properties at breakpoints this way totally makes sense. It should have been this way all along IMHO.

    3) As if Oct 2012, Codekit is using SASS 3.2.1 so folks should be good to go.

  15. Dean Birkett
    Permalink to comment#

    For windows guys using ScoutApp. It is not using SASS 3.2 at present, so this will cause you to get a whole bunch of errors.

    To fix:

    1) https://github.com/mhs/scout-app/downloads – grab the latest version, this is in alpha at the time of writing, so be aware.

    2) If you are also on Windows 7 and get an error when running, this thread may help – https://github.com/mhs/scout-app/issues/19

  16. Ahrengot
    Permalink to comment#

    Brilliant! I had no idea, you could reference @content from within a mixin. I’ve been looking for a way to do simmilar things for a while. I.e.:

    div.box {
        @include do-stuff-to-parent();
    }
    
    @mixin do-stuff-to-parent() {
        padding: 2em;
        background: #bada55;
    
        @content;
    }
    
  17. Jeffrey Walmsley
    Permalink to comment#

    What is the tool that you are using to measure the pixels on your screen cast. From the videos you just seem to click and drag in any program and you get the distance in pixels

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.