This-To-That Media Queries

Moar media queries!

Now you can target things between specific breakpoints, rather than just the 'this and below' approach from previous versions. So if you wanted something to take effect between 'sm' and 'md' viewports:

.thing {
    font-size: 2em;

    @include media(sm-to-md) {
        font-size: 1.6em;
    }
}

Any of the media query combos are available for your namespaced media queries using the 'to' keyword, with the smaller value always on the left, e.g. xs-to-lg, md-to-lg, sm-to-xl etc

Minor show/hide updates

0.4.1

Update README.md

The Multiple Media Query Doll

You can now pass through multiple custom media query conditions using matryo's @include media.

As well as the usual namespaced options, e.g.

@include media(sm)

You can now use as many conditions as you like for your custom media queries:

@include media('screen and (min-width: 30em) and (max-width: 40em)')

This is a breaking change

You will need to update previous single custom media queries to be within parens, so @include media('min-width: 30em') needs to be updated to @include media('(min-width: 30em)')

The Show/Hide Doll

Matryo now has show classes to be used in conjunction with the hide classes to give more flexibility and control for showing and hiding content at different breakpoints.

<!-- only show on 'sm' screens -->
<div class="grid__col hide sm-show">

<!-- only show on screen sizes between 'sm' and 'md' -->
<div class="grid__col hide md-show sm-hide">

The First Doll (update 1)

Update to use the direct descendant selector for grid columns within --flush and --rev grids, as subsequent nested grids may not want to inherit these rules.

The First Doll

It is decided.

First production ready release of the Matryo layout system.