forked from bjankord/Style-Guide-Boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
347 lines (330 loc) · 18.5 KB
/
index.php
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<?php
// Build out URI to reload from form dropdown
// Need full url for this to work in Opera Mini
$pageURL = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://";
if (isset($_POST['sg_uri']) && isset($_POST['sg_section_switcher'])) {
$pageURL .= $_POST[sg_uri].$_POST[sg_section_switcher];
$pageURL = htmlspecialchars( filter_var( $pageURL, FILTER_SANITIZE_URL ) );
header("Location: $pageURL");
}
// Display title of each markup samples as a select option
function listMarkupAsOptions ($type) {
$files = array();
$handle=opendir('markup/'.$type);
while (false !== ($file = readdir($handle))):
if(stristr($file,'.html')):
$files[] = $file;
endif;
endwhile;
sort($files);
foreach ($files as $file):
$filename = preg_replace("/\.html$/i", "", $file);
$title = preg_replace("/\-/i", " ", $filename);
$title = ucwords($title);
echo '<option value="#sg-'.$filename.'">'.$title.'</option>';
endforeach;
}
// Display markup view & source
function showMarkup($type) {
$files = array();
$handle=opendir('markup/'.$type);
while (false !== ($file = readdir($handle))):
if(stristr($file,'.html')):
$files[] = $file;
endif;
endwhile;
sort($files);
foreach ($files as $file):
$filename = preg_replace("/\.html$/i", "", $file);
$title = preg_replace("/\-/i", " ", $filename);
$documentation = 'doc/'.$type.'/'.$file;
echo '<div class="sg-markup sg-section">';
echo '<div class="sg-display">';
echo '<h2 class="sg-h2"><a id="sg-'.$filename.'" class="sg-anchor">'.$title.'</a></h2>';
if (file_exists($documentation)) {
echo '<div class="sg-doc">';
echo '<h3 class="sg-h3">Usage</h3>';
include($documentation);
echo '</div>';
}
echo '<h3 class="sg-h3">Example</h3>';
include('markup/'.$type.'/'.$file);
echo '</div>';
echo '<div class="sg-markup-controls"><a class="sg-btn sg-btn--source" href="#">View Source</a> <a class="sg-btn--top" href="#top">Back to Top</a> </div>';
echo '<div class="sg-source sg-animated">';
echo '<a class="sg-btn sg-btn--select" href="#">Copy Source</a>';
echo '<pre class="prettyprint linenums"><code>';
echo htmlspecialchars(file_get_contents('markup/'.$type.'/'.$file));
echo '</code></pre>';
echo '</div>';
echo '</div>';
endforeach;
}
?>
<!DOCTYPE html>
<head>
<meta name="robots" content="noindex,nofollow"/>
<meta charset="utf-8">
<title>BlueLabs Style Guide</title>
<meta name="viewport" content="width=device-width">
<!-- Style Guide Boilerplate Styles -->
<link rel="stylesheet" href="css/sg-style.css">
<!-- Replace below stylesheet with your own stylesheet -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body style="max-width: 1400px; margin: 0 auto;">
<div id="top" class="sg-header sg-container">
<h1 class="sg-logo">BlueLabs <span>StyleGuide</span></h1>
<form id="js-sg-nav" action="" method="post" class="sg-nav">
<select id="js-sg-section-switcher" class="sg-section-switcher" name="sg_section_switcher">
<option value="">Jump To Section:</option>
<optgroup label="Intro">
<option value="#sg-about">About</option>
<option value="#sg-colors">Colors</option>
<option value="#sg-fontStacks">Typography</option>
<option value="#sg-logos">Logo Usage</option>
<option value="#sg-dos-donts">BlueLabs Style Don'ts</option>
<option value="#sg-email">Email Signature</option>
<option value="#sg-templates">Templates</option>
</optgroup>
</select>
<input type="hidden" name="sg_uri" value="<?php echo $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?>">
<button type="submit" class="sg-submit-btn">Go</button>
</form><!--/.sg-nav-->
</div><!--/.sg-header-->
<div class="sg-body sg-container" style="width: 90%; margin-left: auto; margin-right: auto;">
<div class="sg-info">
<div class="sg-about sg-section">
<h2 class="sg-h2"><a id="sg-about" class="sg-anchor">Why is a style guide important?</a></h2>
<br>
<p>In a nutshell, a style guide helps to ensure a continuous brand experience. It means that no matter how, when or where a customer experiences a brand, they are experiencing the same underlying traits. It’s this consistency across every touch-point that helps build a brand and brand loyalty. And with 2.4 billion Internet users around the world (and growing), it’s really more critical than ever for businesses to establish a comprehensive style guide.</p>
</div><!--/.sg-about-->
<div class="sg-colors sg-section">
<h2 class="sg-h2"><a id="sg-colors" class="sg-anchor">Colors</a></h2>
<div class="sg-color sg-color--a"><span class="sg-color-swatch"><span class="sg-animated">#236995 (35,105,149)</span></span></div>
<div class="sg-color sg-color--b"><span class="sg-color-swatch"><span class="sg-animated">#2875A1 (40,117,161)</span></span></div>
<div class="sg-color sg-color--c"><span class="sg-color-swatch"><span class="sg-animated">#2E82AE (46,130,174)</span></span></div>
<div class="sg-color sg-color--d"><span class="sg-color-swatch"><span class="sg-animated">#3DA6D2 (61,166,210)</span></span></div>
<div class="sg-color sg-color--e"><span class="sg-color-swatch"><span class="sg-animated">#42b3df (66,179,223)</span></span></div>
<div class="sg-color sg-color--f"><span class="sg-color-swatch"><span class="sg-animated">#48bfeb (72,191,235)</span></span></div>
<div class="sg-color sg-color--h"><span class="sg-color-swatch"><span class="sg-animated">#b2b2b2 (178,178,178)</span></span></div>
<div class="sg-color sg-color--g"><span class="sg-color-swatch"><span class="sg-animated">#feffff (254,255,255)</span></span></div>
<div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div><!--/.sg-colors-->
<div class="sg-font-stacks sg-section">
<h2 class="sg-h2"><a id="sg-fontStacks" class="sg-anchor">Typography</a></h2>
<table class="table table-bordered">
<tr>
<th>Font Family</th>
<th>Example Text</th>
<th>Use Case</th>
</tr>
<tr>
<td style="min-width:125px;"><a target="_blank" href="http://www.typography.com/fonts/knockout/webfonts/knockout-28/">Knockout 28 A</a></td>
<td>
<img src="images/text/knockout.png" style="max-width:800px;">
</td>
<td>Website Headers</td>
</tr>
<td><a target="_blank" href="http://www.typography.com/fonts/whitney/webfonts/whitneyssm-book/">Whitney SSm A</a></td>
<td>
<img src="images/text/whitney.png" style="max-width:800px;">
</td>
<td>Website Body Copy</td>
</tr>
</table>
<div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div><!--/.sg-font-stacks-->
</div><!--/.sg-info-->
<div class="sg-logos sg-section">
<h2 class="sg-h2"><a id="sg-logos" class="sg-anchor">Logos</a></h2>
<br>
<p>Our logo is the touchstone of our brand and one of our most valualble assets. We must ensure proper use. The following logos are the only BlueLabs Logos that have been approved for use. <strong>Before using any of these logos please get in touch with Kat to make sure that you are using the proper logo.</strong></p>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Logo</th>
<th>Download Link</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/logos/bluelabs-full-large-blue.png" alt="Image Alt Text" style="max-width:350px;"></td>
<td>Print (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhVWpjVWs2blhiS2c/edit?usp=sharing">Download</a>) <br> Web (<a target="_blank" href="http://bit.ly/1yipP1Z">Small</a> | <a target="_blank" href="http://bit.ly/1tnXvH5">Medium</a> | <a target="_blank" href="http://bit.ly/1qhrCtT">Large</a> ) <br><br> <strong>Max Sizes:</strong> <br> <p>Small: 358px x 99px</p><p>Medium: 715px x 198px</p><p>Large: 1430px x 396px</p></td>
</tr>
<tr>
<td><img src="images/logos/bluelabs-full-large-white.png" alt="Image Alt Text" style="max-width:350px; background:#236995;"></td>
<td>Print (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhemw1VlBQXzVhNmM/edit?usp=sharing">Download</a>) <br> Web (<a target="_blank" href="http://bit.ly/1r2jRNs">Small</a> | <a target="_blank" href="http://bit.ly/1DlGj9u">Medium</a> | <a target="_blank" href="http://bit.ly/1suZo0n">Large</a> ) <br><br> <strong>Max Sizes:</strong> <br> <p>Small: 358px x 99px</p><p>Medium: 715px x 198px</p><p>Large: 1430px x 396px</p></td>
</tr>
<tr>
<td><img src="images/logos/bluelabs-only-large-blue.png" alt="Image Alt Text" style="max-width:350px;"></td>
<td>Print (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhYTVqcXlwNEczOEE/edit?usp=sharing">Download</a>) <br> Web (<a target="_blank" href="http://bit.ly/1s8AUQi">Small</a> | <a target="_blank" href="http://bit.ly/1qhrsm8">Medium</a> | <a target="_blank" href="http://bit.ly/1udGSM8">Large</a> ) <br><br> <strong>Max Sizes:</strong> <br> <p>Small: 251px x 80px</p><p>Medium: 501px x 160px</p><p>Large: 1002px x 320px</p></td>
</tr>
<tr>
<td><img src="images/logos/bluelabs-only-large-white.png" alt="Image Alt Text" style="max-width:350px; background:#236995;"></td>
<td>Print (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhV010MTNDbUFzTEE/edit?usp=sharing">Download</a>) <br> Web (<a target="_blank" href="http://bit.ly/1BQ5LlP">Small</a> | <a target="_blank" href="http://bit.ly/1r3S9P4">Medium</a> | <a target="_blank" href="http://bit.ly/1u3NKQ3">Large</a> ) <br><br> <strong>Max Sizes:</strong> <br> <p>Small: 251px x 80px</p><p>Medium: 501px x 160px</p><p>Large: 1002px x 320px</p></td>
</tr>
<tr>
<td><img src="images/logos/starburst-large-blue.png" alt="Image Alt Text" style="max-width:250px;"></td>
<td>Print (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhSnNDUmxPbGJTYzg/edit?usp=sharing">Download</a>) <br> Web (<a target="_blank" href="http://bit.ly/1uKP8FY">Small</a> | <a target="_blank" href="http://bit.ly/1uWFyOo">Medium</a> | <a target="_blank" href="http://bit.ly/1udIsOc">Large</a> ) <br><br> <strong>Max Sizes:</strong> <br> <p>Small: 194px x 194px</p><p>Medium: 388px x 388px</p><p>Large: 776px x 776px</p></td>
</tr>
<tr>
<td><img src="images/logos/starburst-large-white.png" alt="Image Alt Text" style="max-width:250px; background:#236995;"></td>
<td>Print (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhekY2WlVZM3ZIbjg/edit?usp=sharing">Download</a>) <br> Web (<a target="_blank" href="http://bit.ly/1mfWvUy">Small</a> | <a target="_blank" href="http://bit.ly/XLjjQG">Medium</a> | <a target="_blank" href="http://bit.ly/1to2p6U">Large</a> ) <br><br> <strong>Max Sizes:</strong> <br> <p>Small: 194px x 194px</p><p>Medium: 388px x 388px</p><p>Large: 776px x 776px</p></td>
</tr>
</tbody>
</table>
<div class="sg-markup-controls clear"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div><!--/.sg-font-stacks-->
<div class="sg-dos-donts sg-section">
<h2 class="sg-h2"><a id="sg-dos-donts" class="sg-anchor">Style Guide Don'ts</a></h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Case</th>
<th>Why its wrong</th>
</tr>
</thead>
<tbody>
<tr>
<td><h4>Blue Labs</h4></td>
<td>The company name "BlueLabs", when typed out, is always one word.</td>
</tr>
<tr>
<td><h4>blue.labs</h4></td>
<td>When typing the company name in print, BlueLabs, the "B" and "L" in BlueLabs should always be capitalized. Also, there should never be any punctuation in the middle of the word as it is one word and not two.</td>
</tr>
<tr>
<td><h4>Blue.Labs</h4></td>
<td>There should never be any punctuation in the middle of the word as it is one word and not two.</td>
</tr>
<tr>
<td><img src="images/dont/bluelabs-no-under-text.png" style="width: 200px;" alt="Image Alt Text"></td>
<td>The logo above that has not text under it should never be used outside of the website.</td>
</tr>
<tr>
<td><img src="images/dont/bluelabs-logomarque-black_1200.png" style="width: 200px;" alt="Image Alt Text"></td>
<td>No BlueLabs logo should ever have periods separating the logo. Also periods should never be used. The only spacer that should be used in the logo is a bullet.</td>
</tr>
</tbody>
</table>
<div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div><!--/.sg-info-->
<div class="sg-pictures sg-section">
<h2 class="sg-h2"><a id="sg-email" class="sg-anchor">Email Signature</a></h2>
<br>
<p>The email signature below should be used on all staff person's emails sent from a bluelabs.com email address.</p>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Structure</th>
<th>Example</th>
<th>Instructions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
<span style="font-size: 1.2em;"><strong style="color: #2E82AE;">[FULL NAME]<!-- , --></strong> <!-- [JOB TITLE] --></span> </br>
T: [PHONE NUMBER] | bluelabs.com | twitter.com/blue_labs
</p>
</td>
<td>
<p>
<span style="font-size: 1.2em;"><strong style="color: #2E82AE;">Courtney Eimerman-Wallace<!-- , --></strong><!-- Software Engineer --></span> </br>
T: 312 505 1093 | bluelabs.com | twitter.com/blue_labs
</p>
</td>
<td style="width: 250px;"><p>You can find instructions for creating your signature <a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhYklFQWVoeGljLTg/edit?usp=sharing">HERE</a>.</p></td>
</tr>
</tbody>
</table>
<br>
<div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div> <!--/.sg-info-->
<div class="sg-pictures sg-section">
<h2 class="sg-h2"><a id="sg-templates" class="sg-anchor">Templates</a></h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Template</th>
<th>Use Case</th>
<th>Download Link</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/templates/presentation.png" style="width: 200px;" alt="Image Alt Text"></td>
<td>
<p>This template should be used for:</p>
<ul>
<li>More formal speaking events</li>
<li>Presentations that have a lot of information.</li>
</ul>
<p><em>Example: Sales pitch meeting.</em></p>
</td>
<td><p>Presentation Template (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhUEhDSE1nNmt0WVU/edit?usp=sharing">Keynote</a> | <a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhOFJmcWY1ZFF6ck0/edit?usp=sharing">Powerpoint</a>)</p></td>
</tr>
<tr>
<td><img src="images/templates/alternate_pres.png" style="width: 200px;" alt="Image Alt Text"></td>
<td>
<p>This template should be used for:</p>
<ul>
<li>Casual speaking events</li>
<li>Presentations that have 20 slide or fewer.</li>
</ul>
<p><em>Example: Predictive Analytics webinar.</em></p>
</td>
<td><p>Alternate Presentation Template (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhbVQ0MUc2ODRnVk0/edit?usp=sharing">Keynote</a> | <a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhbTZjWFNMdnRnUEk/edit?usp=sharing">Powerpoint</a>)</p></td>
</tr>
<tr>
<td><img src="images/templates/proposal.png" style="width: 200px;" alt="Image Alt Text"></td>
<td>
<p>This template should be used for:</p>
<ul>
<li>Proposals only</li>
</ul>
</td>
<td><p>Proposal Template (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhcFZKVlkyREZ6Ylk/edit?usp=sharing">Keynote</a> | <a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhOVlST2JSX01iams/edit?usp=sharing">Powerpoint</a>)</p></td>
</tr>
<tr>
<td><img src="images/templates/letter_img.png" style="width: 200px;" alt="Image Alt Text"></td>
<td>
<p>This template should be used for:</p>
<ul>
<li>Any document that needs to be on BlueLabs Letterhead.</li>
</ul>
</td>
<td><p>Letter Template (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhRU1DTWdVZGlJWVU/edit?usp=sharing">Word Doc</a>)</p></td>
</tr>
<tr>
<td><img src="images/templates/memo_img.png" style="width: 200px;" alt="Image Alt Text"></td>
<td>
<p>This template should be used for:</p>
<ul>
<li>Any BlueLabs Memo.</li>
</ul>
</td>
<td><p>Memo Template (<a target="_blank" href="https://drive.google.com/a/bluelabs.com/file/d/0ByANPVgHNzKhNVFWVk05UlhwdTA/edit?usp=sharing">Word Doc</a>)</p></td>
</tr>
</tbody>
</table>
<div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
</div><!--/.sg-info
<!-- <div class="sg-base-styles">
<h1 class="sg-h1">Base Styles</h1>
<?php //showMarkup('base'); ?>
</div> --><!--/.sg-base-styles-->
<!-- <div class="sg-pattern-styles">
<h1 class="sg-h1">Pattern Styles<small> - Design and mark-up patterns unique to your site.</small></h1>
<?php //showMarkup('patterns'); ?>
</div> --><!--/.sg-pattern-styles-->
</div><!--/.sg-body-->
<script src="js/sg-plugins.js"></script>
<script src="js/sg-scripts.js"></script>
</body>
</html>