Wiki

Clone wiki

Turbine FlexBox Plugin / Home

FlexBox - Turbine plugin

FlexBox is a small Turbine plugin to make the implementation of the flexible box model as simple as possible.

You just have to write the flexbox properties as declared by the W3C spec and let the plugin do the dirty work for you. That's what Turbine is all about, baby! ;)

It just adds the vendor-specific versions of the declared flexbox properties, and adds the vendor prefix the the 'display' property's value ( box, -moz-box, or -webkit-box)

Here are a couple of tutorials on the subject to get you started!

Usage

Just include the plugin as you would with any other Turbine plugin and start using the flexbox model.

@turbine
    plugins: boxshadow, flexbox, colormodels

Examples

It's really simple! Let's try with an example from the article at Mozilla Hacks, but turbinized:

body
    display: box
    box-orient: vertical
    box-direction : reverse

#box1
    box-ordinal-group: 2

#box2
    box-ordinal-group: 2

#box3
    box-ordinal-group: 1


As I said, simple. Let's see how the plugin transforms it (what you should have done without the plugin):

body {
    display: -moz-box; /* Modified by FlexBox plugin */
    box-orient: vertical;
    box-direction: reverse;
    -moz-box-orient: vertical; /* Added by FlexBox plugin */
    -webkit-box-orient: vertical; /* Added by FlexBox plugin */
    -moz-box-direction: reverse; /* Added by FlexBox plugin */
    -webkit-box-direction: reverse; /* Added by FlexBox plugin */
}
#box1 {
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2; /* Added by FlexBox plugin */
    -webkit-box-ordinal-group: 2; /* Added by FlexBox plugin */
}
#box2 {
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2; /* Added by FlexBox plugin */
    -webkit-box-ordinal-group: 2; /* Added by FlexBox plugin */
}
#box3 {
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1; /* Added by FlexBox plugin */
    -webkit-box-ordinal-group: 1; /* Added by FlexBox plugin */
}


Have fun!

Updated