How I'm rolling my media queries

As I've previously mentioned, I start with a default set of common breakpoints when I'm creating my responsive stylesheets. Recently you may also have seen a post where I discuss the exciting Media Query bubbling that's available in LESS. So I thought I'd write a quick post on how I'm currently rolling out media queries in my stylesheets.

Snippets

First off, I used Espresso for my code editor. I know there's many a code editor available and having spent almost 12 years in dreamweaver prior to purchasing, this app suits my 'workflow'.

So, to start I've created several snippets in the app for my common breakpoints which are 320, 480, 600, 768, 900, 1100 & 1300px (although these are stipulated in ems based on 1em = 16px).

This means that if I type 320 then hit 'tab' the following code gets put in place 

@media screen and (min-width:  20em) { 

I can then write the rules that I'd like within this query and close it at the end. I have also created a 'blank' media query snippet for 'ordinary' media queries and device media queries. Which are mq + 'tab' and dmq + 'tab' that will give you this code


@media only screen and (min-width :  ) {
}

@media only screen and (min-device-width :  ) {
}

Bubbles?

Like I said at the start, I'm now implementing the use of media query 'bubbling' in my LESS files. For me that keeps all the elements and there selectors close together. Not in seperate 'media query files. All together, under one roof and with the media query within it so I can see at ease what I'm playing with and if I've already added 10px of padding to that element already, straight away. Without having to find it and check.

Sorted!

So I can quickly create my CSS using LESS. I can start with my base styles. Quickly add a media query (common or not) with snippets so that I can alter what's needed when it starts to look shit. I can see at a glance what element has what CSS effecting it and where and it's simple (with snippets) to add as many media queries as I so wish. So I could end up with a LESS file like this snippet.

header {
  body: background-color: blue;
    @media screen and (min-width:  20em) {
      body: background-color: red;
    }

    @media screen and (min-width:  37.5em) {
      body: background-color: green;
    }

    @media screen and (min-width:  48em) {
      body: background-color: blue;
    }

    @media screen and (min-width:  1176px) {
      body: background-color: orange;
    }
}

Ta-da!

Not the greatest blogpost I know, but I'd just thought I'd share a little insight into how I'm 'doing it' with responsive web design, LESS and media query bubblin'