CSS Library

Flex

flex-row

Item width is based on content. Flex-wrap: wrap.

flex-item

larger flex-item

larger flex-item with this much content

flex-item with this much content Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit aliquid asperiores culpa facere? Totam ipsum qui at saepe, accusamus, iusto reiciendis alias harum quia vero atque accusantium facilis perferendis recusandae.

            <div class="flex-row">
  <div class="flex-item card">
    <p class="card-content">flex-item</p>
  </div>
  <div class="flex-item card">
    <p class="card-content">larger flex-item</p>
  </div>
  <div class="flex-item card">
    <p class="card-content">
      larger flex-item with this much content
    </p>
  </div>
  <div class="flex-item card">
    <p class="card-content">
      flex-item with this much content Lorem ipsum dolor sit, amet
      consectetur adipisicing elit. Odit aliquid asperiores culpa
      facere? Totam ipsum qui at saepe, accusamus, iusto reiciendis
      alias harum quia vero atque accusantium facilis perferendis
      recusandae.
    </p>
  </div>
</div>

flex-row-even

Every item has the same width. No wrap.

flex-item

larger flex-item

flex-item with this much content

            <div class="flex-row-even">
  <div class="flex-item card">
    <p class="card-content">flex-item</p>
  </div>
  <div class="flex-item card">
    <p class="card-content">larger flex-item</p>
  </div>
  <div class="flex-item card">
    <p class="card-content">larger flex-item</p>
  </div>
  <div class="flex-item card">
    <p class="card-content">flex-item with this much content</p>
  </div>
</div>

Grid

Column span or start / end

Class col-(value) determines property grid-column: span (value). Possible values: 1-12.
Class col-(start)-(end) determines the property grid-column: (start) / (end). Possible values: 1-13.

col-2

col-3

col-12

col-2-4

col-6-13

            <div class="grid">
  <div class="col-2 card">
    <p class="card-content">col-2</p>
  </div>
  <div class="col-2 card">
    <p class="card-content">col-2</p>
  </div>
  <div class="col-3 card">
    <p class="card-content">col-3</p>
  </div>
  <div class="col-12 card">
    <p class="card-content">col-12</p>
  </div>
  <div class="col-2-4 card">
    <p class="card-content">col-2-4</p>
  </div>
  <div class="col-6-13 card">
    <p class="card-content">col-6-13</p>
  </div>
</div>

Responsiveness with breakpoints

Resize items based on screen width. Use class col-(span)-(breakpoint) or col-(start)-(end)-(breakpoint). Current breakpoint:

Item 1:
col-12
col-8-md
col-3-lg

Item 2:
col-12
col-4-sm
col-4-md
col-3-lg

Item 3:
col-12
col-4-sm
col-6-md
col-3-lg

Item 4:
col-12
col-4-sm
col-6-md
col-3-lg

            <div class="grid">
  <div class="col-12 col-8-md col-3-lg card">
    <p class="card-content">
      Item 1: <br />col-12 <br />col-8-md <br />col-3-lg
    </p>
  </div>
  <div class="col-12 col-4-sm col-4-md col-3-lg card">
    <p class="card-content">
      Item 2: <br />col-12 <br />col-4-sm <br />col-4-md <br />col-3-lg
    </p>
  </div>
  <div class="col-12 col-4-sm col-6-md col-3-lg card">
    <p class="card-content">
      Item 3: <br />col-12 <br />col-4-sm <br />col-6-md <br />col-3-lg
    </p>
  </div>
  <div class="col-12 col-4-sm col-6-md col-3-lg card">
    <p class="card-content">
      Item 4: <br />col-12 <br />col-4-sm <br />col-6-md <br />col-3-lg
    </p>
  </div>
</div>

Breakpoints

sm	576px
md	768px
lg	992px
xl	1200px