Layout classes

The primary layout primitives in Tela are X and Y.

• The X class lays out a flexbox container in the row direction.
• The Y class lays out a flexbox container in the column direction.
• CSS custom properties can be used to adjust the spacing between child items.
• Additional classes can be added to justify and align items.

X

Flexbox row container.

• Set --X-spacing CSS property to add a gap between items.
• Center justified by default.
• Add |X- class to justify to start (left).
• Add -X| class to justify to end (right).
• Add |X-X| class to justify to add automatic space between items.
• Add |-X-X-| class to justify to add automatic space around items.

X = centered by default

<ul class="X">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

X + 1rem spacing = centered with 1rem gap

<ul class="X" style="--X-spacing: 1rem;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

X |X- = start/left justified

<ul class="X |X-" style="--X-spacing: 1rem;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

X -X| = end/right justified

<ul class="X -X|" style="--X-spacing: 1rem;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

X |X-X| · min spacing: 1rem

<ul class="X |X-X|" style="--X-spacing: 1rem;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

X |-X-X-| · min spacing: 1rem

<ul class="X |-X-X-|" style="--X-spacing: 1rem;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

X · spacing: 1rem, separator between 2nd & 3rd

<ul class="X" style="--X-spacing: 1rem;">
  <li>First</li>
  <li>Second</li>
  <li role="separator"></li>
  <li>Third</li>
</ul>

Y

Flexbox column container

• Set --Y-spacing CSS property to add a vertical gap between items.
• Add -Y- class to vertically center.
• Add -X- class to horizontally center.

Y = vertically stacked

<ul class="Y" style="height: 300px;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Y · spacing: 1rem = vertically stacked with 1rem gap

<ul class="Y" style="--Y-spacing: 1rem; height: 300px;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Y -Y- · spacing: 1rem = vertically centered

<ul class="Y -Y-" style="--Y-spacing: 1rem; height: 300px;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Y -X- · spacing: 1rem = horizontally centered

<ul class="Y -X-" style="--Y-spacing: 1rem; height: 300px;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Y -X- -Y- · spacing: 1rem = horizontally & vertically centered

<ul class="Y -X- -Y-" style="--Y-spacing: 1rem; height: 300px;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>