_frost-styleguide.scss
, line 5
The Frost font is Sailec.
Fonts
Black
Sailec Black .font--family-black
Bold
Sailec Bold .font--family-bold
Medium
Sailec Medium .font--family-medium
Regular
Sailec Regular .font--family-regular
Light
Sailec Light .font--family-light
Type Sizes
All type sizes and line heights come from a typographic scale, which has a base copy size of 18px.
Headings
There are a range of heading sizes from H1 to H5, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.
Header 1
.font--large (Used for headers and landing pages)
Current breakpoint: LG
font-size: 83px / line-height: 83px
Current breakpoint: MD
font-size: 74px / line-height: 75px
Current breakpoint: SM
font-size: 66px / line-height: 68px
Header 1
.font--large (Used for secondary and pages headers)
Current breakpoint: LG
font-size: 58px / line-height: 62px
Current breakpoint: MD
font-size: 52px / line-height: 57px
Current breakpoint: SM
font-size: 41px / line-height: 48px
Header 2
Current breakpoint: LG
font-size: 41px / line-height: 48px
Current breakpoint: MD
font-size: 36px / line-height: 44px
Current breakpoint: SM
font-size: 32px / line-height: 41px
Header 3
Current breakpoint: LG
font-size: 26px / line-height: 35px
Current breakpoint: MD
font-size: 26px / line-height: 35px
Current breakpoint: SM
font-size: 29px / line-height: 38px
Header 4
Current breakpoint: LG
font-size: 20px / line-height: 31px
Current breakpoint: MD
font-size: 20px / line-height: 31px
Current breakpoint: SM
font-size: 23px / line-height: 33px
Header 5
Current breakpoint: LG
font-size: 18px / line-height: 29px
Current breakpoint: MD
font-size: 18px / line-height: 29px
Current breakpoint: SM
font-size: 20px / line-height: 31px
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xlarge
Current breakpoint: LG
font-size: 23px / line-height: 33px
Current breakpoint: MD
font-size: 23px / line-height: 28px
Current breakpoint: SM
font-size: 23px / line-height: 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--large
Current breakpoint: LG
font-size: 20px / line-height: 31px
Current breakpoint: MD
font-size: 20px / line-height: 31px
Current breakpoint: SM
font-size: 20px / line-height: 31px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Current breakpoint: LG
font-size: 18px / line-height: 29px
Current breakpoint: MD
font-size: 18px / line-height: 29px
Current breakpoint: SM
font-size: 18px / line-height: 29px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--small
Current breakpoint: LG
font-size: 16px / line-height: 27px
Current breakpoint: MD
font-size: 16px / line-height: 27px
Current breakpoint: SM
font-size: 16px / line-height: 27px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xsmall
Current breakpoint: LG
font-size: 14px / line-height: 26px
Current breakpoint: MD
font-size: 14px / line-height: 26px
Current breakpoint: SM
font-size: 14px / line-height: 26px
Red font .font--red There are a range of paragraph sizes, using the typographic scale.
Purple font .font--purple There are a range of paragraph sizes, using the typographic scale.
Royal Blue font .font--royal-blue There are a range of paragraph sizes, using the typographic scale.
White font .font--white There are a range of paragraph sizes, using the typographic scale.
Mint Green font .font--mint-green There are a range of paragraph sizes, using the typographic scale.
Markup: core/variables/typography.twig
<style>
.breakpoint-lg, .breakpoint-md{display:none}
.breakpoint-sm{display:inline-block}
@media (min-width: 740px){
.breakpoint-md{display:inline-block}
.breakpoint-sm, .breakpoint-lg {display:none}
}
@media (min-width: 1024px){
.breakpoint-lg {display:inline-block}
.breakpoint-sm, .breakpoint-md{display:none}
}
</style>
<p>The Frost font is Sailec. </p>
<h3>Fonts</h3>
<h1 class="font--family-black">Black</h1>
<p>Sailec Black <b>.font--family-black</b></p>
<h1 class="font--family-bold">Bold</h1>
<p>Sailec Bold <b>.font--family-bold</b></p>
<h1 class="font--family-medium">Medium</h1>
<p>Sailec Medium <b>.font--family-medium</b></p>
<h1 class="font--family-regular">Regular</h1>
<p>Sailec Regular <b>.font--family-regular</b></p>
<h1 class="font--family-light">Light</h1>
<p>Sailec Light <b>.font--family-light</b></p>
<br/>
<br/>
<br/>
<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, which has a base copy size of 18px.</p>
<br/>
<br/>
<br/>
<h3>Headings</h3>
<p>There are a range of heading sizes from H1 to H5, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.</p>
<h1 class="font--xlarge">Header 1</h1>
<p>
<span><b>.font--large</b> (Used for headers and landing pages)<br/></span>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 83px / line-height: 83px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 74px / line-height: 75px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 66px / line-height: 68px</span>
</p>
<h1 class="font--large">Header 1</h1>
<p>
<span><b>.font--large</b> (Used for secondary and pages headers)<br/></span>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 58px / line-height: 62px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 52px / line-height: 57px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 41px / line-height: 48px</span>
<p>
<h2>Header 2</h2>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 41px / line-height: 48px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 36px / line-height: 44px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 32px / line-height: 41px</span>
</p>
<h3>Header 3</h3>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 26px / line-height: 35px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 26px / line-height: 35px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 29px / line-height: 38px</span>
</p>
<h4>Header 4</h4>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 31px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 31px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 33px</span>
</p>
<h5>Header 5</h5>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 29px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 29px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 31px</span>
</p>
<br/>
<br/>
<br/>
<h3>Paragraphs</h3>
<p class="font--xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><b>.font--xlarge</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 33px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 23px / line-height: 28px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 28px</span>
</p>
<p class="font--large">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><b>.font--large</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 31px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 31px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 31px</span>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 29px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 29px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 29px</span>
</p>
<p class="font--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="font--small"><b>.font--small</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 16px / line-height: 27px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 27px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 27px</span>
</p>
<p class="font--xsmall">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="font--xsmall"><b>.font--xsmall</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 14px / line-height: 26px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 14px / line-height: 26px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 14px / line-height: 26px</span>
</p>
<br/>
<p class="font--red">Red font <i>.font--red</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--purple">Purple font <i>.font--purple</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--royal-blue">Royal Blue font <i>.font--royal-blue</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--white bg--black" style="padding: 5px;">White font <i>.font--white</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--mint-green bg--black" style="padding: 5px;">Mint Green font <i>.font--mint-green</i> There are a range of paragraph sizes, using the typographic scale.</p>
core/variables/_typography.scss
, line 2
This is an example of an inline link, this will be the same for all coloured links above.
Markup: links.twig
<p>
<a class="link {{modifier_class}}" href="#">
Link
</a>
</p>
<p>
This is an example of an <a class="link {{modifier_class}} inline">inline link</a>, this will be the same for all coloured links above.
</p>
_frost-styleguide.scss
, line 15
Buttons
Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate. Buttons text uses the Founders Grotesk Semibold font.
Markup: buttons.twig
<a class="btn {{modifier_class}}" href="#">
Primary buttons
</a>
<button class="btn {{modifier_class}}">Native button</button>
_frost-styleguide.scss
, line 21
Primary palette
Across the site we use
$colour-red
#f04257
$colour-white
#fff
$colour-purple
#7d2ca9
Secondary palette
Across the site we use
$colour-blue
#22d2dc
$colour-yellow
#fbef51
$colour-green
#b2e55e
$colour-teal
#00beca
$colour-royal-blue
#0565d1
$colour-pink
#fc9eb9
$colour-dark-blue
#061d38
Greyscale palette
Across the site we use
$colour-black
#030e1a
$colour-jasper-grey
#666
$colour-gainsboro-grey
#c7c7c7
$colour-light-grey
#e6e3dc
$colour-smoke-grey
#f0f0f0
Markup: colour.twig
<h3>Primary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
<div class="bg--red" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-red</p>
<p>#f04257</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; width: 99px;"></div>
<p><br/>$colour-white</p>
<p>#fff</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--purple" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-purple</p>
<p>#7d2ca9</p>
</div>
<h3>Secondary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
<div class="bg--blue" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-blue</p>
<p>#22d2dc</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--yellow" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-yellow</p>
<p>#fbef51</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--green" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-green</p>
<p>#b2e55e</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--teal" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-teal</p>
<p>#00beca</p>
</div>
<br/>
<div style="display: inline-block; margin: 10px">
<div class="bg--royal-blue" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-royal-blue</p>
<p>#0565d1</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--pink" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-pink</p>
<p>#fc9eb9</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--dark-blue" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-dark-blue</p>
<p>#061d38</p>
</div>
<h3>Greyscale palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
<div class="bg--black" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-black</p>
<p>#030e1a</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--jasper-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-jasper-grey</p>
<p>#666</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--gainsboro-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-gainsboro-grey</p>
<p>#c7c7c7</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--light-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-light-grey</p>
<p>#e6e3dc</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--smoke-grey" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-smoke-grey</p>
<p>#f0f0f0</p>
</div>
_frost-styleguide.scss
, line 29
Background Colours
To be used by row components
$colour-red: #f04257;
$colour-blue: #22d2dc;
$colour-yellow: #fbef51;
$colour-green: #b2e55e;
$colour-teal: #00beca;
$colour-royal-blue: #0565d1;
$colour-purple: #7d2ca9;
$colour-pink: #fc9eb9;
$colour-black: #030e1a;
$colour-dark-blue #061d38;
$colour-jasper-grey: #666;
$colour-gainsboro-grey: #c7c7c7;
$colour-light-grey: #e6e3dc;
$colour-smoke-grey: #f0f0f0;
Markup: background-colours.twig
<div class="bg--red" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-red: #f04257;</p>
<div class="bg--blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-blue: #22d2dc;</p>
<div class="bg--yellow" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-yellow: #fbef51;</p>
<div class="bg--green" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-green: #b2e55e;</p>
<div class="bg--teal" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-teal: #00beca;</p>
<div class="bg--royal-blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-royal-blue: #0565d1;</p>
<div class="bg--purple" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-purple: #7d2ca9;</p>
<div class="bg--pink" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-pink: #fc9eb9;</p>
<div class="bg--black" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-black: #030e1a;</p>
<div class="bg--dark-blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-dark-blue #061d38;</p>
<div class="bg--jasper-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-jasper-grey: #666;</p>
<div class="bg--gainsboro-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-gainsboro-grey: #c7c7c7;</p>
<div class="bg--light-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-light-grey: #e6e3dc;</p>
<div class="bg--smoke-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-smoke-grey: #f0f0f0;</p>
_frost-styleguide.scss
, line 35
Markup
<a href="#" class="external-link">External Link</a>
_frost-styleguide.scss
, line 43
Lists
These are the list items
- Item 1
- Item 2
- Item 3
- Item 4
Markup
<div class="cr-body">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
_frost-styleguide.scss
, line 50
Table
Standard Table
_frost-styleguide.scss
, line 66
Markup: core/components/form--frost.twig
<form>
<div>
<select>
<option value selected="selected">- Please select -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
</div>
<div class="form__field form__field--checkbox password-checkbox">
<label for="cb" class="checkbox">
<input type="checkbox" id="cb">
<span class="checkbox"></span>
<span class="form__field--copy" style="display: block; margin-top: 10px;">This is a checkbox</span>
</label>
</div>
<fieldset class="form__fieldset">
<div class="form__field ">
<div class="form__field form__field--radio">
<input type="radio" id="radiobuttons1" name="radiobuttons">
<label for="radiobuttons1" id="labelForRadiobuttons1" class="radio">
<span class="radio"></span>
<span class="form__field--copy">
<span>I like radio buttons</span>
</span>
</label>
</div>
<div class="form__field form__field--radio">
<input type="radio" id="radiobuttons2" name="radiobuttons">
<label for="radiobuttons2" id="labelForRadiobuttons2" class="radio">
<span class="radio"></span>
<span class="form__field--copy">
<span>I <strong>love</strong> radio buttons</span>
</span>
</label>
</div>
</div>
</fieldset>
<div></div>
<div>
<textarea>This is text area</textarea>
</div>
<div>
<input type="submit">
</div>
</form>
_frost-styleguide.scss
, line 74