Layout helper

Layout helper is page attribute based on CSS flexbox specification. It's designed as quick flexbox shorthand providing easier syntax:

layout — use on container(parent) element to set layout of child elements
self — use on child element to set size or align for element itself


<div layout="row center-center" self="center" >
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Playground Link

Try some of layout helper options — live interactive demo.

Layout attribute

Syntax of the layout attribute with available values:

layout="direction  vertically - horizontally  reverse  spacing" 
        ▼          ▼            ▼             ▼        ▼
        row        top          left          reverse  spacing-0
        rows       center       center                 spacing-1
        column     bottom       right                  spacing-2
        columns    justify      justify                spacing-3
                   spread       spread                 spacing-4
                   stretch      stretch                spacing-5
                                                       spacing-6
                                                       spacing-7

Direction Link

<div layout="direction center-center" > ... </div>

Value	Description
`row`	horizontal flow of items forced into single row
`rows`	horizontal flow of items and can be wrapped in multiple rows
`column`	vertical flow of items forced into single column
`columns`	vertical flow of items and can be wrapped in multiple columns

Vertically Link

<div layout="row center-center" > ... </div>

Value	Description
`top`	items are placed toward the top of the container
`center`	items are placed toward the vertical center of the container
`bottom`	items are placed toward the bottom of the container
`justify`	items are vertically evenly distributed.
`spread`	space between vertical items is evenly distributed.
`stretch`	items are stretched evenly (to the sam height) to occupy whole height of the container

Horizontally Link

<div layout="row center-center" > ... </div>

Value	Description
`left`	items are placed toward the left side of the container
`center`	items are placed toward the horizontal center of the container
`right`	items are placed toward the right side of the container
`justify`	items are horizontally evenly distributed.
`spread`	space between horizontal items is evenly distributed.
`stretch`	items are stretched evenly (to the same width) to occupy whole width of the container

Reverse Link

<div layout="row center-center reverse" > ... </div>

Value	Description
`reverse`	appearance order of items is reversed

Items spacing Link

<div layout="row spacing-2" > ... </div>

Value	Description
Horizontal spacing between layout items. Use item spacing with `<figure>` element or when layout direction is set to "row".
`spacing-0`	Spacing between items: 0
`spacing-1`	Spacing between items: 0.5 rem
`spacing-2`	Spacing between items: 1 rem
`spacing-3`	Spacing between items: 2 rem
`spacing-4`	Spacing between items: 3 rem
`spacing-5`	Spacing between items: 4 rem
`spacing-6`	Spacing between items: 5 rem
`spacing-7`	Spacing between items: 6 rem

Self attribute

Syntax of the self attribute with available values:

self="item-size  item-align  item-order " 
      ⇩          ▼           ▼
      size-x1    top         order-first
      size-x2    center      order-1
      size-x3    bottom      order-2
      size-x4    left        order-3
      size-x5    right       order-last
      size-x6
      size-x7
      size-x8
      size-1of5
      size-1of4
      size-1of3
      size-2of5
      size-1of2
      size-3of5
      size-2of3
      size-3of4
      size-4of5
      size-1of1
      size-xxsmall
      size-xsmall
      size-small
      size-smaller
      size-medium
      size-larger
      size-large
      size-xlarge
      size-xxlarge
      stretch

Size Link

<div layout="row center-center">
    <div self="size-x1">1</div>
    <div self="size-x2">2 times larger</div>
</div>

Value	Description
Item proportional size	Amount of the available space inside the container the item should take up regard to smallest sibling:
`size-x1`	equal or maximum space
`size-x2`	2 times larger
`size-x3`	3 times larger
`size-x4`	4 times larger
`size-x5`	5 times larger
`size-x6`	6 times larger
`size-x7`	7 times larger
`size-x8`	8 times larger
Item width in percents	Item width relative to container width:
Value	Description
`size-1of5`	width: 20%
`size-1of4`	width: 25%
`size-1of3`	width: 33.33%
`size-2of5`	width: 40%
`size-1of2`	width: 50%
`size-3of5`	width: 60%
`size-2of3`	width: 66.66%
`size-3of4`	width: 75%
`size-4of5`	width: 80%
`size-1of1`	width: 100%
Item width in pixels	Fixed maximum width:
Value	Description
`size-xxsmall`	max-width: 240px
`size-xsmall`	max-width: 360px
`size-small`	max-width: 480px
`size-smaller`	max-width: 600px
`size-medium`	max-width: 720px
`size-larger`	max-width: 840px
`size-large`	max-width: 960px
`size-xlarge`	max-width: 1200px
`size-xxlarge`	max-width: 1440px

Align Link

<div layout="row center-center">
    <div self="size-x1 bottom">item bottom aligned</div>
    <div self="size-x2 top">2 times larger, top aligned</div>
</div>

Align of the item itself within container

Value	Description
`top`	Aligned toward the top of the container.
`left`	Aligned toward the left side of the container.
`center`	Aligned to the center of container.
`right`	Aligned toward the right side of the container.
`bottom`	Aligned toward the bottom of the container.

Order Link

<div layout="row center-center">
    <div self="bottom">item bottom aligned</div>
    <div self="top order-first"> top aligned, appears on the left</div>
</div>

Order of the item appearance in container among it's siblings:

Value	Description
`order-first`	appears first
`order-1`	appears first (same as above just different syntax)
`order-2`	appears second
`order-3`	appears third
`order-last`	appears last

× × ×

Learn next: Introduction