Layout

The Layout system provides flexible containers for organizing content either horizontally or vertically, with various alignment options. It uses CSS Flexbox under the hood to create consistent and responsive layouts.

Base Structure

The Layout system provides two fundamental ways to organize content: horizontal and vertical arrangements. These base structures form the foundation for more complex layouts.

Horizontal Layout

The layout layout--row classes create a horizontal layout. Items are arranged in a row and flow from left to right.

1
2
3
Layout Horizontal 
<div class="layout layout--row">
  {{ Item 1 }}
  {{ Item 2 }}
  {{ Item 3 }}
</div>
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Title</span>
</div>

Vertical Layout

The layout layout--col classes create a vertical layout. Items are stacked on top of each other and flow from top to bottom.

1
2
3
Layout Vertical 
<div class="layout layout--col">
  {{ Item 1 }}
  {{ Item 2 }}
  {{ Item 3 }}
</div>
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Title</span>
</div>

Alignment Modifiers

Once you've chosen a base layout structure, you can apply these modifier classes to control how items are aligned within their container. These modifiers work with both row and column layouts.

Top Alignment

Add layout--top to align items to the top of the container.

1
2
3
Layout Top 
<div class="layout layout--top">
  {{ Item 1 }}
  {{ Item 2 }}
  {{ Item 3 }}
</div>
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Title</span>
</div>

Center Alignment

Add layout--center to center items both horizontally and vertically.

1
2
3
Layout Center 
<div class="layout layout--center">
  {{ Item 1 }}
  {{ Item 2 }}
  {{ Item 3 }}
</div>
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Title</span>
</div>

Bottom Alignment

Add layout--bottom to align items to the bottom of the container.

1
2
3
Layout Bottom 
<div class="layout layout--bottom">
  {{ Item 1 }}
  {{ Item 2 }}
  {{ Item 3 }}
</div>
<div class="title_bar">
  <img class="image" src="/images/plugins/trmnl--render.svg" />
  <span class="title">Title</span>
</div>