Just.Design System

v0.0.28
IntroductionApproach and team
Guidelines
AssetsColour PaletteColour UsageColour Usage - CoralFontsIconsTypography
Components
ButtonCheckboxDateDropdownInputKeylineLinkRadio
Patterns
FooterGridHeaderModal
DownloadsFAQ

Grid

Basic usage

w-1/12
w-11/12
w-1/6
w-5/6
w-1/4
w-3/4
w-1/3
w-2/3
w-5/12
w-7/12
w-1/2
w-1/2
<div class="container">
  <div class="columns mb-4">
    <div class="column w-1/12"><div class="bg-coral">w-1/12</div></div>
    <div class="column w-11/12"><div class="bg-coral">w-11/12</div></div>
  </div>
  <div class="columns mb-4">
    <div class="column w-1/6"><div class="bg-coral">w-1/6</div></div>
    <div class="column w-5/6"><div class="bg-coral">w-5/6</div></div>
  </div>
  <div class="columns mb-4">
    <div class="column w-1/4"><div class="bg-coral">w-1/4</div></div>
    <div class="column w-3/4"><div class="bg-coral">w-3/4</div></div>
  </div>
  <div class="columns mb-4">
    <div class="column w-1/3"><div class="bg-coral">w-1/3</div></div>
    <div class="column w-2/3"><div class="bg-coral">w-2/3</div></div>
  </div>
  <div class="columns mb-4">
    <div class="column w-5/12"><div class="bg-coral">w-5/12</div></div>
    <div class="column w-7/12"><div class="bg-coral">w-7/12</div></div>
  </div>
  <div class="columns mb-4">
    <div class="column w-1/2"><div class="bg-coral">w-1/2</div></div>
    <div class="column w-1/2"><div class="bg-coral">w-1/2</div></div>
  </div>
</div>

Auto fill

Column 1
Column 2
<div class="container">
  <div class="columns">
    <div class="column w-1/1">
      <div class="bg-coral">Column 1</div>
    </div>
    <div class="column flex-1">
      <div class="bg-coral">Column 2</div>
    </div>
  </div>
</div>

Breakpoints

w-1/2 md:w-1/3
w-1/2 md:w-2/3
<div class="container">
  <div class="columns">
    <div class="column w-1/2 md:w-1/3">
      <div class="bg-coral">w-1/2 md:w-1/3</div>
    </div>
    <div class="column w-1/2 md:w-2/3">
      <div class="bg-coral">w-1/2 md:w-2/3</div>
    </div>
  </div>
</div>

Wrapping columns with responsive vertical spacing

1
2
3
4
<div class="container">
  <div class="columns flex-wrap">
    <div class="column w-full md:w-1/4 pt-4 md:pt-0">
      <div class="bg-coral w-full h-full">1</div>
    </div>
    <div class="column w-full md:w-1/4 pt-4 md:pt-0">
      <div class="bg-coral w-full h-full">2</div>
    </div>
    <div class="column w-full md:w-1/4 pt-4 md:pt-0">
      <div class="bg-coral w-full h-full">3</div>
    </div>
    <div class="column w-full md:w-1/4 pt-4 md:pt-0">
      <div class="bg-coral w-full h-full">4</div>
    </div>
  </div>
</div>