Content Choreography Mixins In LESS

17 May 2012

With the new fangled-ness of CSS3 we've been given a treat in box-orient and box-ordinal group, at some point last year I started creating a little demo for a nice reponsive idea for mobile first navigation but stopped (for some reason that escapes me).

Recently.

Just recently that Jordan Moore created a lovely little post on content choreography that takes these two CSS3 selectors and (with a mobile first, responsive approach) demontstrates how to move your content for various devices.

Just Today.

Today whilst perusing the twitters, I saw this tweet from Jordan -

Content Choreography made even easier with @irishstu's lovely little SASS mixin - blog.woop.ie/post/232270661… #rwd
— Jordan Moore (@jordanmoore) May 17, 2012

I soon tweeted back saying that I'll knock this up in LESS later, and here is that post.

To start with.

The first LESS mixin we will create is for the container (probably <body>) so that it'll initiate the relevant box-orient -

.boxit(@box-dir) {
  display:-webkit-box;
  display:   -moz-box;
  display:        box;

  -webkit-box-orient:@box-dir;
     -moz-box-orient:@box-dir;
      -ms-box-orient:@box-dir;
          box-orient:@box-dir;
}

So for the @box-dir in this mixin you can choose horizontal, vertical, inline-axis, block-axis or inherit> For more information check out the MDN post here.

For example, your LESS file would contain this -

body { .boxit(vertical); }

Which would give the resulting CSS -

body {
  display:-webkit-box;
  display:   -moz-box;
  display:        box;

  -webkit-box-orient:vertical;
     -moz-box-orient:vertical;
      -ms-box-orient:vertical;
          box-orient:vertical;
}

Now, order it.

The second mixin allows you to specifiy where you wish the content to be. The LESS code for this is -

.box-order(@box-order-number: 1) {
-webkit-box-ordinal-group: @box-order-number;
   -moz-box-ordinal-group: @box-order-number;
    -ms-box-ordinal-group: @box-order-number;
        box-ordinal-group: @box-order-number;
}

This allows you to easily define the number order in the chosen box-orient. So you'd write your LESS like this -

h1 { .box-order(3); }
h2 { .box-order; }

Which would give this result -

h1 {
-webkit-box-ordinal-group: 3;
   -moz-box-ordinal-group: 3;
    -ms-box-ordinal-group: 3
        box-ordinal-group: 3;
}

h2 {
-webkit-box-ordinal-group: 1;
   -moz-box-ordinal-group: 1;
    -ms-box-ordinal-group: 1;
        box-ordinal-group: 1;
}

And there we have it.

Here's the LESS version of the Sass version from eariler today

An Update (12/06/12)

After creating this post I thought that, really, I should include the swift becoming new CSS3 flexbox code, as what's written above, although 'current' in some browsers, will soon be depreciated.

So to use the new hawtness of CSS3 Flexbox we first, again, need to (using LESS) set it up in the body.


.flexit(@flex-dir) {

display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display: flex;

-webkit-flex-direction:@flex-dir;
   -moz-flex-direction:@flex-dir;
    -ms-flex-direction:@flex-dir;
     -o-flex-direction:@flex-dir;	
        flex-direction:@flex-dir;

}

As you can see that where we had display: box; the new spec is display: flex;

I've included a new mixin as flex-direction has different properties than box-orient.

Also instead of box-ordinal-group, the new spec uses a simple single word, order. Because the value is still numeric we can fit both spec's (if you wanted to) into the same mixin.


.box-order(@box-order-number: 1) {

-webkit-box-ordinal-group: @box-order-number;   
   -moz-box-ordinal-group: @box-order-number;
        box-ordinal-group: @box-order-number;
	
-webkit-box-order: @box-order-number;
       -moz-order: @box-order-number;
        -ms-order: @box-order-number;
         -o-order: @box-order-number;
            order: @box-order-number;

}

Using these two new mixins you're now set for world dominence, except Opera, they're not supporting it, yet (but I've included for prefix for when they do).