Icon/Arrow-A/05 Icon/Arrow-A/05 Icon/Arrow-A/05 Icon/Arrow-A/03 Copy Icon/Arrow-A/01 Copy 3 Icon/Arrow-A/01 Icon/Arrow-A/01 Icon/Arrow-A/01 Icon/Arrow-A/05 Icon/Arrow-A/05 Icon/Burger Menu/01 Icon/Burger Menu/01 Icon/Arrow-B/05 Copy Icon/Burger Menu/01 Icon/LocationPin02 Search Icon Social/Twitter/01

JuiceDocs

Display:

Prefixes:

We can prefix our classes to determine functionality of elements at descending breakpoints (specified in screen-sizes.scss).

These prefixes are xl:, lg:, md: & sm.

<div class="md:none">
    //element is hidden on mobile
</div>
<div class="none md:block">
    //element is hidden on desktop and visible on mobile
</div>

Headings:

This is a h1

This is a h2

This is a h3

This is a h4

A class of 'h3' can be added to a <p> tag to avoid being used as an indexable element.

<p class="h3">I am a paragraph element, with class="h3"</p>

I am a paragraph element, with class="h3"

Column layouts:

Rows of columns must be wrapped in an element with flex

Columns are prefixed with w- (width). They can be expressed in the range w-1/12 to w-12/12.

Simplified fractions are used for common column widths.

  • w-12/12 - w-full
  • w-6/12 - w-1/2
  • w-4/12 - w-1/3
  • w-3/12 - w-1/4

w-1/2 md:w-full

w-1/2

w-1/3 md:w-full

w-1/3 md:w-full

w-1/3 md:w-full

w-1/4

w-1/4

w-1/4

w-1/4

We can also space columns apart using flex justify modifiers.

  • justify-center
  • justify-between
  • justify-around
  • justify-start
  • justify-end

w-1/3

w-1/3

w-1/3

w-1/3

w-2/3 justify-center

Spacing:

Variables for spacing are declared in global_variables.scss. These variables can be manually set. The 'sizes' object dictates the varying amounts of spacing that can be used.

Spacing classes are named in the format {breakpoint}:{property}{side}-{size}.

Where property is one of:

  • m - used for margin
  • p - used for padding

Where sides is one of:

  • t - used for top
  • b - used for bottom
  • l - used for left
  • r - used for right
  • y - used for top and bottom
  • x - used for left and right

Where size is one of:

  • {size} specifed in sizes object in global_variables.scss

Borders:

Similar to spacing, borders work in the format {breakpoint}:border-{side}-{colour}

<div class="border-colour-primary"></div>
<div class="border-top-colour-primary"></div>
<div class="border-right-colour-primary"></div>
<div class="border-bottom-colour-primary"></div>
<div class="border-left-colour-primary"></div>

We can also remove borders with border-{side}-none.

Search results

Download your file

File name:

Download PDF

Top