-
Notifications
You must be signed in to change notification settings - Fork 0
/
style-guide.php
221 lines (186 loc) · 8.72 KB
/
style-guide.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
<?php
$client_name = 'Upstatement';
/* This array fills in the tabs and includes the files for each section of the style guide
Delete a section if you don't need it */
// $style_tabs = array();
// $style_tabs[] = array('title' => 'Type', 'file' => '_includes/_style/type.php');
// $style_tabs[] = array('title' => 'Objects', 'file' => '_includes/_style/objects.php');
// $style_tabs[] = array('title' => 'Forms', 'file' => '_includes/_style/forms.php');
// $style_tabs[] = array('title' => 'Tables', 'file' => '_includes/_style/tables.php');
/* $style_tabs[] = array('title' => 'Layout', 'file' => '_includes/_style/layout.php'); */
/* $style_tabs[] = array('title' => 'Color', 'file' => '_includes/_style/color.php'); */
?>
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6 ie oldie" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7 ie oldie" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8 ie oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php echo $client_name ?> Patterns</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/_css/screen.css?v=2">
<link rel="stylesheet" href="/_css/style-guide.css" media="screen"/>
<script type="text/javascript" src="_js/libs/modernizr-2.0.6.min.js"></script>
<?php
$code_snip = '<pre class="html-code prettyprint linenums"></pre>';
?>
</head>
<body class="style-bd details-off" onload="prettyPrint()">
<div class="style-content">
<!-- ~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Header -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~ -->
<nav id="style-hdr" class="style-hdr">
<h1 class="style-page-h"><?php echo $client_name ?> <span class="thin">Style Guide</span></h1>
<a class="all-code-btn details-trigger"><span class="verb">Show</span> All Details</a>
</nav> <!--style-hdr -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Typography -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~ -->
<section id="typography" class="typography">
<article class="style-mod details-off">
<hgroup class="style-hgroup">
<h3 class="style-h">Page Headline - h1</h3>
<a class="code-btn details-trigger"><span class="verb">Show</span> Details</a>
</hgroup>
<div class="inner">
<div class="style-example">
<h1 class="page-h1">page-h1: Sample Page Headline 1</h1>
</div>
</div> <!-- /inner -->
<section class="style-details">
<article class="style-meta inner">
<h4 class="detail-h">Description</h4>
<ul class="detail-list">
<li><p>Used for cover teases</p></li>
<li><p>Subhead for page headline. Of course, usage is up to you. Just establishing a naming convention.</p></li>
</ul>
</article> <!-- /style-meta -->
<article class="code-example inner">
<h4 class="detail-h" title="Copy to Clipboard">Code Snip <span class="code-copy">Copy to clipboard</span></h4>
<?php echo $code_snip ?>
</article>
</section> <!-- /style-details -->
</article> <!-- /style-mod -->
<article class="style-mod details-off">
<hgroup class="style-hgroup">
<h3 class="style-h">Page Headline - h2</h3>
<a class="code-btn details-trigger"><span class="verb">Show</span> Details</a>
</hgroup>
<div class="inner">
<div class="style-example">
<h2 class="page-h2">page-h2: Sample Page Headline 2</h2>
</div>
</div> <!-- /inner -->
<section class="style-details">
<article class="style-meta inner">
<h4 class="detail-h">Description</h4>
<ul class="detail-list">
<li><p>Header for a section of content. Think sidebar. Or a series of small site teases.</p></li>
</ul>
</article> <!-- /style-meta -->
<article class="code-example inner">
<h4 class="detail-h" title="Copy to Clipboard">Code Snip <span class="code-copy">Copy to clipboard</span></h4>
<?php echo $code_snip ?>
</article>
</section> <!-- /style-details -->
</article> <!-- /style-mod -->
<article class="style-mod details-off">
<hgroup class="style-hgroup">
<h3 class="style-h">Section Headline</h3>
<a class="code-btn details-trigger"><span class="verb">Show</span> Details</a>
</hgroup>
<div class="inner">
<div class="style-example">
<h3 class="section-h1">.section-h1: Sample Section Headline</h3>
</div>
</div> <!-- /inner -->
<section class="style-details">
<article class="style-meta inner">
<h4 class="detail-h">Description</h4>
<ul class="detail-list">
<li><p>Header for a section of content. Think sidebar. Or a series of small site teases.</p></li>
</ul>
</article> <!-- /style-meta -->
<article class="code-example inner">
<h4 class="detail-h" title="Copy to Clipboard">Code Snip <span class="code-copy">Copy to clipboard</span></h4>
<?php echo $code_snip ?>
</article>
</section> <!-- /style-details -->
</article> <!-- /style-mod -->
<article class="style-mod details-off">
<hgroup class="style-hgroup">
<h3 class="style-h">Section Headline Small</h3>
<a class="code-btn details-trigger"><span class="verb">Show</span> Details</a>
</hgroup>
<div class="inner">
<div class="style-example">
<h4 class="section-h2">.section-h2: Sample Section Headline Small</h4>
</div>
</div> <!-- /inner -->
<section class="style-details">
<article class="style-meta inner">
<h4 class="detail-h">Description</h4>
<ul class="detail-list">
<li><p>Smaller version of the aforementioned section headline.</p></li>
</ul>
</article> <!-- /style-meta -->
<article class="code-example inner">
<h4 class="detail-h" title="Copy to Clipboard">Code Snip <span class="code-copy">Copy to clipboard</span></h4>
<?php echo $code_snip ?>
</article>
</section> <!-- /style-details -->
</article> <!-- /style-mod -->
<article class="style-mod details-off">
<hgroup class="style-hgroup">
<h3 class="style-h">Text Large</h3>
<a class="code-btn details-trigger"><span class="verb">Show</span> Details</a>
</hgroup>
<div class="inner">
<div class="style-example">
<article class="txt-lg">
<p>Sample text shown here. Sample text shown here. Sample text shown here. Sample text shown here. Sample text shown here. Sample text shown here. Sample text shown here. <a href="#">Sample link shown here</a>. Sample text shown here. Sample text shown here.</p>
<p>Sample text shown here. Sample text shown here. Sample text shown here. Sample text shown here. Sample text shown here.</p>
</article>
</div>
</div> <!-- /inner -->
<section class="style-details">
<article class="code-example inner">
<h4 class="detail-h" title="Copy to Clipboard">Code Snip <span class="code-copy">Copy to clipboard</span></h4>
<?php echo $code_snip ?>
</article>
</section> <!-- /style-details -->
</article> <!-- /style-mod -->
</section> <!-- /typography -->
</div> <!-- panes -->
<script type="text/javascript" src="_js/libs/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="_js/libs/jquery.tools.min.js"></script>
<!-- Modals: Do you enjoy modals? Yes you do -->
<script type="text/javascript" src="_js/libs/jquery.simplemodal.1.4.2.min.js"></script>
<!-- scripts concatenated and minified via ant build script-->
<script type="text/javascript" src="_js/libs/prettify.js"></script>
<script type="text/javascript" src="_js/libs/style-guide.js"></script>
<script type="text/javascript" src="_js/script.js"></script>
<script type="text/javascript" src="_js/up-base.js"></script>
<!-- end scripts-->
<!-- change the UA-XXXXX-X to be your site's ID -->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>