ZigZagUI

# Layout

Grid and flex classes to help you implement any layout

In general, we leverage CSS grids for layout, and provide a number of flexbox utility classes for aligning / controlling the display of things.

# CSS Grids

We generally use a 12 column grid for most things, but there are also classes for setting up 2, 4, and 8 column grids.

All grids are responsive, following a mobile-first methodology. This means that a particular grid class will be applied for its breakpoint, and up.

# Grid utilities for all breakpoints

# Grids

Class Properties Note
.grid display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: var(--grid-gutter);
row-gap: space(3);		 You will need this to set up a grid
.grid-cols-2 grid-template-columns: repeat(2, 1fr); Add as a modifier, in addition to .grid
.grid-cols-4 grid-template-columns: repeat(4, 1fr);
.grid-cols-8 grid-template-columns: repeat(8, 1fr);

# Column Spans

Class Properties
.col-span-1 grid-column: span 1;
.col-span-2 grid-column: span 2;
.col-span-3 grid-column: span 3;
.col-span-4 grid-column: span 4;
.col-span-5 grid-column: span 5;
.col-span-6 grid-column: span 6;
.col-span-7 grid-column: span 7;
.col-span-8 grid-column: span 8;
.col-span-9 grid-column: span 9;
.col-span-10 grid-column: span 10;
.col-span-11 grid-column: span 11;
.col-span-12 grid-column: span 12;

EXAMPLE

grid: 12 columns

1
11
2
10
3
9
4
8
5
7
6
6
grid: 4 columns
1
1
1
1
2
2
grid: 2 columns
1
1

<div class="grid grid-cols-12 mb-3">
  <div class="col-span-1 bg-teal pa-2 color-white">1</div>
  <div class="col-span-11 bg-teal pa-2 color-white">11</div>
  <div class="col-span-2 bg-teal pa-2 color-white">2</div>
  <div class="col-span-10 bg-teal pa-2 color-white">10</div>
  <div class="col-span-3 bg-teal pa-2 color-white">3</div>
  <div class="col-span-9 bg-teal pa-2 color-white">9</div>
  <div class="col-span-4 bg-teal pa-2 color-white">4</div>
  <div class="col-span-8 bg-teal pa-2 color-white">8</div>
  <div class="col-span-5 bg-teal pa-2 color-white">5</div>
  <div class="col-span-7 bg-teal pa-2 color-white">7</div>
  <div class="col-span-6 bg-teal pa-2 color-white">6</div>
  <div class="col-span-6 bg-teal pa-2 color-white">6</div>
</div>

<div class="grid grid-cols-4 mb-3">
  <div class="col-span-1 bg-blue pa-2 color-white">1</div>
  <div class="col-span-1 bg-blue pa-2 color-white">1</div>
  <div class="col-span-1 bg-blue pa-2 color-white">1</div>
  <div class="col-span-1 bg-blue pa-2 color-white">1</div>
  <div class="col-span-2 bg-blue pa-2 color-white">2</div>
  <div class="col-span-2 bg-blue pa-2 color-white">2</div>
</div>

<div class="grid grid-cols-2 mb-3">
  <div class="col-span-1 bg-warning pa-2 color-white">1</div>
  <div class="col-span-1 bg-warning pa-2 color-white">1</div>
</div>

TIP

There is an offset($start, $end) helper if you need to offset a grid column

# Responsive grids utilities

Each grid or column-span class can target a particular breakpoint by prepending it with a breakpoint modifier: md or lg. For example, to generate an 8 column grid that is applied from medium and up, use: md:grid-cols-8. Note, grid-cols-8 would already apply from small and up, so no need for the modifier.

# Grids

Class Properties Note
.md:grid-cols-2 grid-template-columns: repeat(2, 1fr); Applies to medium breakpoint, and up
.md:grid-cols-4 grid-template-columns: repeat(4, 1fr);
.md:grid-cols-8 grid-template-columns: repeat(8, 1fr);
.lg:grid-cols-2 grid-template-columns: repeat(2, 1fr); Applies to large breakpoint, and up
.lg:grid-cols-4 grid-template-columns: repeat(4, 1fr);
.lg:grid-cols-8 grid-template-columns: repeat(8, 1fr);

# Column Spans (not an exhaustive selection)

Class Properties
.md:col-span-2 grid-column: span 2;
.md:col-span-3 grid-column: span 3;
.md:col-span-4 grid-column: span 4;
.lg:col-span-1 grid-column: span 1;
.lg:col-span-3 grid-column: span 3;
.lg:col-span-9 grid-column: span 9;

EXAMPLE

grid: 4 columns (small) / 8 columns (medium) / 12 columns (large)

2
2
2
2
2 / 4 / 6
2 / 4 / 6
4 / 8 / 12
<div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 mb-3">
  <div class="col-span-2 bg-teal pa-2 color-white">2</div>
  <div class="col-span-2 bg-teal pa-2 color-white">2</div>
  <div class="col-span-2 bg-teal pa-2 color-white">2</div>
  <div class="col-span-2 bg-teal pa-2 color-white">2</div>
  <div class="col-span-2 md:col-span-4 lg:col-span-6 bg-blue pa-2 color-white">2 / 4 / 6</div>
  <div class="col-span-2 md:col-span-4 lg:col-span-6 bg-blue pa-2 color-white">2 / 4 / 6</div>
  <div class="col-span-4 md:col-span-8 lg:col-span-12 bg-warning pa-2 color-white">4 / 8 / 12</div>
</div>

# Flexbox

There are a number of utility classes for quick n' dirty flex layouts.

TIP

At present, all flexbox helpers presuppose a horizontal direction. For vertical flex, you'll need to author it yourself (or use CSS grid)

# Base

Class Properties Notes
.flex display: flex; Sets the context i.e. the parent
.flex-wrap flex-wrap: wrap;
.flex-1 flex: 1 1 0%; item will grow and shrink as needed, ignoring its initial size
.flex-initial flex: 0 1 auto; item will shrink but not grow, starting from its initial size
.flex-auto flex: 1 1 auto; item will grow and shrink, starting from its initial size
.flex-none flex: none; prevent a flex item from growing or shrinking

# Horizontal alignment

Place any one of these classes on a flexified parent element, and its children will be positioned as shown:

Class Properties
.align-center justify-content: center;
.align-right justify-content: flex-end;
.align-spaced justify-content: space-around;
.align-justify justify-content: space-between;

EXAMPLE

align-center

1
2
3
align-justify
1
2
align-spaced
1
2
3

<div class="flex align-center ...">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
</div>

<div class="flex align-justify ...">
  <div class="...">1</div>
  <div class="...">2</div>
</div>

<div class="flex align-spaced ...">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
</div>

# Vertical alignment

Place any one of these classes on a flexified parent element, and its children will be positioned as shown:

Class Properties
.align-top align-items: flex-start;
.align-bottom align-items: flex-end;
.align-middle align-items: center;

EXAMPLE

align-top

1
2
3
align-bottom
1
2
3
align-middle
1
2
3
(also) align-middle
  • I am some text.
  • Here is another bit of text.
  • We are all centered.
(also) align-middle
This uses a custom class ...with .align-content: center on the parent... and flex-basis: 100% on each child

<div class="flex align-top ...">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
</div>

<div class="flex align-bottom ...">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
</div>

<div class="flex align-middle ...">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
</div>

<div class="flex align-middle ...">
  <ul>
    <li>I am some text.</li>
    <li>Here is another bit of text.</li>
    <li>We are all centered.</li>
  </ul>
</div>

# Self alignment

Use those helper classes to specify the alignment for the selected item inside the flexible container.

Class Properties
.align-self-start align-self: flex-start;
.align-self-end align-self: flex-end;
.align-self-center align-self: center;
.align-self-baseline align-self: baseline;
.align-self-auto align-self: auto;
.align-self-stretch align-self: stretch;

# Container

This class simply centers content on the page, provides it with a nice gutter, and max-width to make sure it doesn't expand forever.

You should (almost) never need to use this class as it is baked into our Vue layout components.

.container {
  margin: 0 auto;
  max-width: $container-width;
  position: relative;
  width: 100%;
}

← Spacing →