Boldly

Style Guide

Buttons

Selector:

.btn, .btn.btn-alt, .btn.btn-nav

Sample code:

<a href="#" class="btn">A button!</a>

<a href="#" class="btn btn-left">A Left button!</a>

<a href="#" class="btn btn-none">A None button!</a>

<a href="#" class="btn btn-alt">An Alt button!</a>

<a href="#" class="btn btn-rev">A Reverse button!</a>

<a href="#" class="btn btn-success">An Success button!</a>

<a href="#" class="btn btn-action">An Action button!</a>

<a href="#" class="btn btn-highlight">A Highlight button!</a>

<a href="#" class="btn btn-disabled">A Disabled button!</a>

<a href="#" class="btn btn-block">A Block button!</a>

<a href="#" class="btn btn-lg">A Large button!</a>

<a href="#" class="btn btn-sm">A Small button!</a>

<a href="#" class="btn btn-nav">A nav button!</a>

Rendered element:

A button!
A Left button!
A None button!
An Alt button!
A Reverse button!
A Success button!
An Action button!
A Highlight button!
A Disabled button!
A Block button!
A Large button!
A Small button!
A nav button!

Colours

Space Black
HEX: #000000
RGB: 0 0 0
CMYK: 0 0 0 100

Shadow Grey
HEX: #333333
RGB: 51 51 51
CMYK: 70 64 63 61

Dust Grey
HEX: #F1f1f1
RGB: 241 241 241
CMYK: 4 3 3 0

Glint White
HEX: #FFFFFF
RGB: 255 255 255
CMYK: 0 0 0 0

Rover Blue
HEX: #7DA1FF
RGB: 125 161 255
CMYK: 53 24 0 0

Comet Red
HEX: #FF5252
RGB: 255 82 82
CMYK: 0 83 60 0

Live Green
HEX: #58E065
RGB: 88 224 101
CMYK: 83 0 98 0

Hope Yellow
HEX: #F7EE84
RGB: 247 138 132
CMYK: 3 1 63 0

Links

Selector:

a

Sample code:

<a href="#">A link to some more stuff!</a>

Rendered element:

A link to some more stuff!

Lorem ipsum dolor sit amet, and a link embedded within a paragraph.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nesciunt qui, aliquid, porro vitae ipsa officia consequatur, perferendis, facilis ducimus mollitia architecto embedded in larger paragraph nostrum repudiandae. Ab sequi, deserunt possimus laudantium debitis iusto nostrum, reiciendis expedita provident fuga beatae hic explicabo, esse distinctio ipsam! Laboriosam deserunt fuga maiores, obcaecati sit beatae non optio laborum!

Headings

Selector:

h1, h2, h3, h4, h5, h6

Sample code:

<h1>Boldly Making Impact</h1>

<h2>Boldly Making Impact</h2>

<h3>Boldly Making Impact</h3>

<h4>Boldly Making Impact</h4>

Rendered element:

Boldly Making Impact

Paragraphs

Selector:

p.lead, p

Sample code:

<p class="lead">Lorem ipsum dolor sit amet.</p>

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo blanditiis ducimus tempore excepturi nulla ex.</p>

Rendered element:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quis hic fugiat sed ipsum omnis accusantium veritatis voluptatum cupiditate? Modi repellat nostrum odit vel optio recusandae, nihil maxime? Asperiores laudantium expedita dignissimos rem voluptatum cum dolorum. Voluptatem facere excepturi at inventore libero obcaecati ipsa fugiat, assumenda incidunt tenetur, amet laudantium?

Figures

Selector:

figure, figure figcaption, figure img

Sample code:


<figure>
	<img src="img/unsplash/06.jpeg" width="700" height="300">
	<figcaption class="warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, fuga.</figcaption>
</figure>

<figure>
	<img src="img/unsplash/09.jpeg" width="700" height="300">
	<figcaption class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, fuga.</figcaption>
</figure>

<figure>
	<img src="img/unsplash/10.jpeg" width="700" height="300">
	<figcaption class="danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, fuga.</figcaption>
</figure>

<figure>
	<img src="img/unsplash/12.jpeg" width="700" height="300">
	<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, fuga.</figcaption>
</figure>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, fuga.

Lists

Selector:

ol.list, ul.list

Sample code:


<ol class="list">
	<li><a href="http://drivedigital.ca">Drive Digital</a> / <a href="careers/drivedigital-jrweb.pdf">PDF</a></li>
	<li><a href="http://taxi.ca">Taxi</a> / <a href="careers/taxi-jrart.pdf">PDF</a></li>
	<li><a href="http://rethinkcanada.com">Rethink Communications</a></li>
</ol>

Rendered element:

Job Applications List

Web Designer/Developer: Drive Digital / PDF
Junior Art Director: TAXI / PDF
Intern: Rethink Communications / PDF

Grocery List

Milk
Eggs
Bananas

Alerts

Selector:

.alert, .alert .alert-success, .alert .alert-warning, .alert .alert-danger

Sample code:


<div class="alert">
	<p><span class="fa fa-warning"></span> Default alert</p>
</div>
<div class="alert alert-success">
	<p><span class="fa fa-warning"></span> Success alert</p>
</div>
<div class="alert alert-warning">
	<p><span class="fa fa-warning"></span> Warning alert</p>
</div>
<div class="alert alert-danger">
	<p><span class="fa fa-warning"></span> Danger alert</p>
</div>

Rendered element:

Default alert

Success alert

Warning alert

Danger alert

Main Navigation

Selector:

Sample code:

Rendered element:

Project Snippet

Selector:

Sample code:

Rendered element:

Footer

Selector:

Sample code:

Rendered element:

Forms

Selector:

Sample code:

Rendered element:

Fieldset 1

Text Input 1

Text Input 2

Text Input 3

Fieldset 2

Field 1/2

Field 2/2

Select

Textarea

Fieldset 3

Radio 1

Radio 2

Radio 3

Radio 4

Checkbox 1

Checkbox 2

Multiple Select

Cancel

Blog Post

Selector:

.post

Sample code:


<div class="post">
	<article>
		<h1 class="post-title">Lorem Ipsum</h1>
		<p class="lead">Lorem ipsum dolor sit amet.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, nemo! Inventore aliquam, ipsa reiciendis aperiam, odio est dicta officiis ipsum, quas sint hic voluptates adipisci! Animi delectus ad eaque molestias, illum cum. Alias, ipsum! Accusamus alias corporis, consequatur recusandae amet.</p>

		<figure>
			<img src="img/unsplash/12.jpeg" width="700">
			<figcaption class="danger">Lorem ipsum dolor sit amet.</figcaption>
		</figure>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dicta, accusantium ipsa provident dolorum, delectus repellat quibusdam dolor vitae, tempore aperiam consectetur. Illum et, soluta autem, inventore sit officiis voluptates.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero deleniti excepturi doloribus ad consequatur esse quae officiis earum! Veritatis minima nulla, facere inventore maxime necessitatibus labore totam impedit, illum odit velit maiores iure numquam, sunt minus debitis aliquam sint perferendis sed enim. Consequatur labore et quos voluptate, incidunt facilis.</p>
	</article>

	<div class="post-actions">
		<a href="#" class="btn btn-rev">Lorem <span class="fa fa-long-arrow-right"></span></a>
		<a href="#" class="btn btn-alt">Ipsum <span class="fa fa-long-arrow-right"></span></a>
		<a href="#" class="btn btn-alt">Dolor <span class="fa fa-long-arrow-right"></span></a>
	</div>

	<div class="post-nav">
		<div class="grid">
			<div class="col-2of12 post-navleft">
				<a class="post-nav-link" href="#"><span class="fa fa-angle-left fa-2x"></span></a>
			</div>
			<div class="col-8of12">
				<p>Page 1 of 10</p>
			</div>
			<div class="col-2of12 post-navright">
				<a class="post-nav-link" href="#"><span class="fa fa-angle-right fa-2x"></span></a>
			</div>
		</div>
	</div>
</div>

Rendered element:

Lorem Ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, nemo! Inventore aliquam, ipsa reiciendis aperiam, odio est dicta officiis ipsum, quas sint hic voluptates adipisci! Animi delectus ad eaque molestias, illum cum. Alias, ipsum! Accusamus alias corporis, consequatur recusandae amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dicta, accusantium ipsa provident dolorum, delectus repellat quibusdam dolor vitae, tempore aperiam consectetur. Illum et, soluta autem, inventore sit officiis voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero deleniti excepturi doloribus ad consequatur esse quae officiis earum! Veritatis minima nulla, facere inventore maxime necessitatibus labore totam impedit, illum odit velit maiores iure numquam, sunt minus debitis aliquam sint perferendis sed enim. Consequatur labore et quos voluptate, incidunt facilis.

Prev Close Next