FREE UK DELIVERY

ON ORDERS OVER £100

UK mainland only

Component Library

v.1.0.0

Last Revision by: Geoffrey Allman

Site Settings

This document determines the core settings and components which make up the UI of this site.

Global Spacing

The spacing system is created by defining a scale of non-linear (spacing) values using our base values ($global-scale-ratio / $global-baseline) and a multiplier ($global-spacing-factor)..

$global-scale-ratio: 1.250; // Major Third Ratio
$global-baseline: 1rem; // The Browsers default baseline of 10px converted to rem

To calculate all of our spacing variables we also use a fibonacci sequence i.e. 1, 2, 4, 8, 16 and multiply the above values which each value in this sequence.

e.g.

$global-spacing: (1.250 * 2) * 1rem; // 30px / 3rem

By updating the $global-scale-ratio you can update the spacing values across the entire site.

Colour Scheme

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, maiores?

#000000
#53565a
#888b8d
#ff595d
#64ccc9
#f5cdaf
#c8afaa
#d2a5a5
#fbebdf

Typography

This project uses the Sophia Pro Typeface served by Adobe Typekit and Alma Mono Typeface served by Shopify

Sizes

Sizes have been generated using a Modular Scale: 1.250 and calculated via a global baseline of 1rem (10px).

The defined Modular Scale calculates your font sizes based on your $base-font-size and $global-scale-ratio

e.g.

$global-scale-ratio: 1.250; // Major Third
$base-font-size: 16; // Our decided baseline font-size value
$size-alpha: round(50 * 1.250) = 62.5 | 62px | 6.2rem

The Sizes are calculated on the previous size defined in the hierarchy e.g. $size-beta will be passed in to determine the outcome of $size-alpha.

These values can of course be overridden. e.g.

$size-alpha: _fs($size-beta)

...... could also be:

$size-alpha: 50;

H1 - Alpha 3rem

H2 - Beta 2.4rem

H3 - Gamma 1.9rem

H4 - Delta 1.5rem

H5 - Epsilon 1.25rem
H6 - Zeta 1rem

Base/Body Size 1rem

Grid

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, alias.


                    <div class="o-row">
                        <div class="o-col  o-col--1"></div>
                    </div>
                

Components

Page components.

Icons

Outlines Icons for The5th

Logo

<svg class="c-ico"><use xlink:href="#logo"></use></svg>

Arrow-left

<svg class="c-ico"><use xlink:href="#arrow-left"></use></svg>

Arrow-right

<svg class="c-ico"><use xlink:href="#arrow-right"></use></svg>

Bag

<svg class="c-ico"><use xlink:href="#bag"></use></svg>

Account

<svg class="c-ico"><use xlink:href="#account"></use></svg>

Search

<svg class="c-ico"><use xlink:href="#search"></use></svg>

Facebook

<svg class="c-ico"><use xlink:href="#facebook"></use></svg>

Instagram

<svg class="c-ico"><use xlink:href="#instagram"></use></svg>

Twitter

<svg class="c-ico"><use xlink:href="#twitter"></use></svg>

Youtube

<svg class="c-ico"><use xlink:href="#youtube"></use></svg>