Tweakpoint SASS mixin

Over the past few months I’ve prescribed more heavily to the method of creating tweakpoints rather than major breakpoints with media queries.

I only modify the layout when it needs modifying and usually only have one major breakpoint jump (which is normally where the mobile nav expands, I call it $FULLFAT). The problem with this is that the old method of specifying a file for each breakpoint just doesn’t cut it any more.

At momentum we were really interested in using breakpoint which allowed you to specify media queries inline as and when you need them whilst still having a fallback for grandad IE. However, whilst giving it a go the current version had a crippling bug in it so we just made our own much simpler version.

Here’s the mixin:

First we create a mixin to output the media query with the desired breakpoint

@mixin breakpoint($point) {
    @media all and (min-width: $point) { @content; }
}

Then we detect if media queries are switched on, if they are the media query is created, if not the css rule is outputted without the media query and will overwrite any previous rule.

@mixin tweak($point){
    @if($media-queries){
        @include breakpoint($point){
            @content;
        }
    }
    @else if($media-queries == false){
        @content;
    }
}

In our variables file (or any high-level file) we turn the media queries on, and specify breakpoints if you wish.

$media-queries: true !default;
$FULLFAT: 768px;

And in our legacy IE stylesheet we turn off the media queries in the first line, but import all the same files as with the non-IE sass file.

$media-queries: false;
@import "all your styles";

Now whenever you have a property you want to tweak in a stylesheet you can do it in-line and at whatever width you specify (or using a variable):

.thing {
    background:blue;
    @include tweak(768px) {
        background:pink;
    }
}

So when it’s compiled…

// Your main stylesheet will show

.thing {
    background:blue;
}

@media (min-width:768px){
    background: pink;
}

// And your legacy stylesheet will show

.thing {
    background:blue;
    background:pink;
}

Pros/Cons

Of course this method will declare a media query wherever you use the mixin, instead of the standard method where you would group together all your media queries. This may have performance issues with very large css files, and although negligible, it’s a small price to pay for a much cleaner and intuitive workflow.

I’ve made some progress in updating my site, what better way to celebrate than a picture of Lenny! More to come…

I’ve made some progress in updating my site, what better way to celebrate than a picture of Lenny! More to come…

Testing IE

Until now, every time I’ve had to test in IE I’ve made a new trial account over at browser stack. Whilst it’s a great service, a monthly plan is excessive for smaller studios who will only use it once or twice a month. A pain free solution I found on osxdaily.com, gives you access to all versions of IE at the cost of a few gigabytes and a little time.

1. First, download Virtual Box

2. Next, open up Terminal and enter this line to install all versions of IE

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash

Alternatively, for IE 7 only:

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="7" bash

IE 8 only:

curl -s curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="8" bash

IE 9 only:

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="9" bash

This will take a while depending on your internet connection, but once it’s done open up Virtual Box and you will have a virtual machine for each version of IE.

These versions of windows are all unregistered - once the 30 day trial period runs out, you can return to the snapshot that was automatically created on install.

I like Chocolat

I’ve been waiting for the perfect text editor for a long time, I love Espresso and before that - Coda. Espresso being only a trial version not wanting to shell out £50 with Coda 2 just around the corner (maybe?). But then I discovered Chocolat. mmm

Having recently tried sublime text, I found out how potentially awesome a column layout would be for coding. You could have your base css in the first column, then the next media query css in the adjacent column, followed by the html in the third column. All nice and tidy, but unfortunately sublime text just felt really horrible with weird shortcuts and menus, due to it being a non-osx native app.

I like columns

Then comes along this handsome fellow, Chocolat, with his multi-column editing (just select multiple files in the left hand menu whilst holding cmd), and as a bonus you can have an auto-updating preview pane on the far right, shwing!

This is perfect for a mobile-up approach to front-end coding, as the column only needs to be skinny to begin with. Although with it’s full screen mode and a 27” screen, I can pretty much fit in a css column, html column, and a decent size web preview for a lovely focused workspace.

Go grab a copy