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>
- First
- Second
- Third
X + 1rem spacing
= centered with 1rem gap
<ul class="X" style="--X-spacing: 1rem;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
- First
- Second
- Third
X |X-
= start/left justified
<ul class="X |X-" style="--X-spacing: 1rem;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
- First
- Second
- Third
X -X|
= end/right justified
<ul class="X -X|" style="--X-spacing: 1rem;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
- First
- Second
- Third
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>
- First
- Second
- Third
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>
- First
- Second
- Third
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>
- First
- Second
- Third
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>
- First
- Second
- Third
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>
- First
- Second
- Third
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>
- First
- Second
- Third
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>
- First
- Second
- Third
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>
- First
- Second
- Third