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?
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>
<svg class="c-ico"><use xlink:href="#facebook"></use></svg>
<svg class="c-ico"><use xlink:href="#instagram"></use></svg>
<svg class="c-ico"><use xlink:href="#twitter"></use></svg>
Youtube
<svg class="c-ico"><use xlink:href="#youtube"></use></svg>