forked from FoodFrom/foodfrom.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (88 loc) · 3.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<title>FoodFrom - Digital Style Guide</title>
<!-- TYPEKIT -->
<script type="text/javascript" src="//use.typekit.net/kgn1goa.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="js/build/production.js"></script>
<link rel="stylesheet" type="text/css" href="css/build/global.css" />
</head>
<body>
<header>
<nav>
<ul class="nav nav-main">
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a href="index.html" class="logo">
<span>Food</span>
<span>From</span>
</a>
</header>
<section class="splash">
<div class="content">
<h1>FoodFrom</h1>
<h3>Digital Branding Guidelines</h3>
<p>The following guidelines are to be adhered to in any official digital representation of the company. Strict adherance is expected. Any questions can be directed to <a href="mailto:me@jordanforeman.com">me@jordanforeman.com</a></p>
</div>
</section>
<div class="container">
<section id="copy">
<div class="grid-1">
<h3>Basic Copy</h3>
<p>Copy font will be Proxima Nova. <a href="#">Inline links</a> may be included in text, and should always be styled identically. </p>
</div>
</section>
<section id="logo">
<h3>Logo</h3>
<div class="grid-1-2">
<p>When used outside of basic copy, the company logo should use the font Bello Pro. CSS classes follow a typical OOCSS pattern. To include the proper CSS font-stack, use <code>@include bello</code>.
<ul>
<li>For dark backgrounds, use <code>logo-white</code></li>
<li>For lighter backgrounds, use <code>logo-black</code></li>
<li><code>logo-orange</code> is neutral, and may be used for both light or dark backgrounds, at the designer's discretion</p></li>
</ul>
</div>
<div class="grid-1-2 logo-display">
<span class="logo logo-white">FoodFrom</span>
<code>class="logo logo-white"</code>
<span class="logo logo-black">FoodFrom</span>
<code>class="logo logo-black"</code>
<span class="logo logo-orange">FoodFrom</span>
<code>class="logo logo-orange"</code>
</div>
</section>
<section id="components">
<div class="grid-1">
<h3>UI Components</h3>
<p>Throughout the company's online prescence, there will be several common components used, such as buttons, links, modules, etc. The following section will describe the component, when to use them, and how to style them.</p>
</div>
<section id="buttons">
<h4>Buttons</h4>
<div class="grid-1-2">
<p>Buttons symbolize action. When a user sees a button, they should immediately know what clicking on that button will do. Use the different button types to give visual cues as to the functionality of the button.</p>
</div>
<div class="grid-1-2">
<h5>Sizes</h5>
<button class="btn">.btn</button>
<button class="btn btn-med">.btn-med</button>
<button class="btn btn-large">.btn-large</button>
<h5>Colors</h5>
<button class="btn">Default</button>
<button class="btn btn-danger">.btn-danger</button>
<button class="btn btn-save">.btn-save</button>
<button class="btn btn-action">.btn-action</button>
</div>
</section>
</section>
<footer>
<p>Style Guide © 2013 FoodFrom and <a href="http://jordanforeman.com">Jordan Foreman</a></p>
<p>Fonts by TypeKit</p>
</footer>
</div>
</body>
</html>