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.

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 hate drawing arrows when I design websites or user interfaces, they normally just end up being simple triangles. I searched around for a font that had a nice selection of arrows in it but couldn’t find one, so I made my own!

There are 26 arrows at them moment - the most popular styles I found whilst browsing dribbble, and I will add more as I need them. The font also has the possibility of being used as a web font, but I’m not sure how that will work out yet.

Arrows can be found on letters a-j each with either a bold or outlined alternative, and 1-8 for circled arrows.

Download ArrowKit

We’re used to seeing diagrams of the solar system with all the planets closely bunched together so we can compare the sizes. I’ve been meaning to make a diagram that allows you to see relative distances - so I sat down this evening and made a pretty shitty one. Each pixel is equal to 7900 miles, the diameter of the Earth from pole to pole.

You start your journey from earth, pass the sun and back out into the solar system. Mercury, Venus and Mars are invisible at this scale.

Check out the links from each planet, Saturn is pretty special.

dmatthams.co.uk/earthpixel