idd-style demo
Flexbox
The black box is the parent container to which the classes selected from the form inputs will be applied.
The colored squares are its affected children.
IMPORTANT: The "base" flex classes of this library set flex-shrink to 0, when the default in the spec is 1 (i.e. things can shrink). After extensive use of flexbox, the default tended to surprise. When we set dimensions (see next section), we expected those dimensions. And when we didn't set dimensions, we expected "common sense" results. In both cases, in testing, we would wind up with vastly different layouts across browsers due to differing agent interpretations of the implied flex-shrink: 1.
If you desire the default flex-shrink: 1, use any of this library's flex principal classes but with the suffix ! (e.g. class="idd-flex-hz-2!" is the shrinkable version of class="idd-flex-hz-2").
In fact, notice the difference on the parent box as you apply the different flavors.
Parent classes: {{parentClasses.join(', ')}}
This small library translates the 9-section layout design of flexbox like so:
Notice that if modifying with idd-flex-space-around or idd-flex-space-between...
- ...when flow is horizontal (
idd-flex-hz*), column selection within a row (e.g. 4-5-6)... - ...when flow is vertical (
idd-flex-vt*), row selection within a column (e.g. 3-6-9)...
...does not matter.
Also note that idd-flex-hz and idd-flex-vt are synonyms for
idd-flex-hz-1 and idd-flex-vt-1, respectively.
Height/Width
The black box is the parent container, of a fixed height and width.
The yellow box is its child whose dimensions will be set by the selected classes.
Child classes: {{childClasses.join(', ')}}
These classes set dimensions percentage-relative to their parent. Note that in order for the height classes to be useful, you will need to set an absolute-height on the containing parent.
The classes follow a similar naming as the flexbox ones:
Supported fractions are:
- whole (
idd-w-1, aka 100%) - halves (e.g.
idd-h-1_2) - thirds (e.g.
idd-w-2_3) - fourths (e.g.
idd-h-2_4) - fifths (e.g.
idd-w-3_5) - sixths (e.g.
idd-h-2_6) - eighths (e.g.
idd-w-3_8) - tenths (e.g.
idd-h-7_10) - twelfths (e.g.
idd-w-5_12) - twentieths (e.g.
idd-h-17_20)
Note that equivalent, unsimplified fractional classes (e.g. idd-h-16_20 == idd-h-4_5) are conveniently provided.