Backporting Compass flexbox mixins from bleeding-edge (0.13.alpha.4) to current stable (0.12.2)

gist.md

⇐ back to the gist-blog at jrw.fi

New Compass flexbox mixins

The current Compass bleeding-edge (0.13.alpha.4) contains awesome new flexbox mixins that allow you to generate styling for all three (!) past and current specifications. See http://css-tricks.com/using-flexbox/ for the details behind the careful interweaving of different properties and prefixes, but the beef is support for:

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• iOS any
• Android any

Getting some

The new flexbox module can be found at:

https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_flexbox.scss

and can be backported to current Compass stable (0.12.2) quite conveniently. This way you can enjoy the new goodies without having to upgrade to a less stable Compass altogether.

_flexbox.scss can be included into your project just like any other partial. Only the @import "shared"; needs to be changed to @import "compass/css3/shared"; so the file compiles.

Due to a recent tiny change in Compass internals you have to preconfigure some variables before importing:

$flex-support:    not -moz, -webkit, not -o, not -ms, not -khtml;
$flexbox-support: not -moz, -webkit, not -o,     -ms, not -khtml, not standard;
$box-support:         -moz, -webkit, not -o, not -ms, not -khtml, not standard;

$flex-legacy-enabled: true;

@import "flexbox";

The first three make the new partial compatible with the older Compass experimental-helpers, and the fourth enables style output for current Firefox, Safari et al.

Using some

At this point, generating flexboxes is as easy as pie:

.row {
    @include display-flex(flex);
    width: 100%; // at least Firefox seems to want this *shrug*
    .cell {
        &:nth-child(1) {
            width: 100px; // this is the actual width of the first column
        }
        &:nth-child(2) {
            @include flex(1);
            width: 100px; // this dimension is ignored, but needed by at least Safari to work
        }
        &:nth-child(3) {
            @include flex(2);
            width: 100px; // same as above
        }
    }
}

This will render as a fixed-width first column, with leftover space divided 1-to-2 between the remaining two columns.

Caveats

...are there. And the closer you get to the more tricky bits of flexbox layout you'll likely run into more issues. A few that I already ran into:

• The current stable Firefox (20.0) still uses display: box, which is a bit buggy. Fox example, if the contents of a flex-item are updated dynamically, the size isn't recalculated properly. There might be a JS workaround, but Firefox 22 (currently in the Aurora channel, slated for release around 2013-06-25) already uses the latest flexbox spec, and this Just Works (tm). The new spec can also be already enabled in the current stable by setting layout.css.flexbox.enabled to true in about:config.
• Similarly, in the current stable Firefox, flex-items are mis-sized if they have overflowing content and overflow: ellipsis;.

So there's some bork.

That said, even the simple layout defined above - which already works taking the above bork into account - is already more capable than a float-based equivalent (automatic & equal heights for all cells, for instance). Flexbox definitely is the way forward with complex app-like UI's with responsive aspects, so if you can live with the current browser support, this is good stuff!

Kudos to cimmanon for contributing these to Compass next!

%20to%20current%20stable%20(0.12.2\)&utmr=-&utmp=%2Fjareware%2F5526866&utmac=UA-42176157-3&utmcc=__utma%3D1.1828258468.1374783534.1374783534.1374783534.1%3B%2B__utmz%3D1.1374783534.1.1.utmcsr%3D(direct\)%7Cutmccn%3D(direct\)%7Cutmcmd%3D(none\)%3B)

This seems to exist at https://github.com/timhettler/compass-flexbox

Super excited to see this happening, thank you!

Two questions though:

• Get error application.scss (Line 10: Invalid CSS after " display": expected ")", was ": flex, ")

  @include flexbox((
  display: flex,
  flex-direction: column,
  ));

That error feels like it isn't understanding the named arguments syntax? Even though I have Sass 3.2.12

• With Compass 0.13.alpha.4 why can't I @include 'flexbox'? It cannot find the file

@railsnerd, that is not the mixin for flexbox if you want to use flexbox you have to do something like this: #yourcontainerdiv { @include display-flex(flex); @include flex-direction(column); }