-
Notifications
You must be signed in to change notification settings - Fork 13
/
mockup4.html
202 lines (202 loc) · 13.6 KB
/
mockup4.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
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Semantic Class Names | StackLayout Mockup 4</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" media="all" type="text/css" href="stacklayout-semantic.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" media="all" type="text/css" href="stacklayout-semantic_lte_ie7.css" />
<![endif]-->
<link rel="stylesheet" media="all" type="text/css" href="skin_mockup.css" />
<link rel="stylesheet" media="handheld, only screen and (max-width: 767px)" type="text/css" href="mockup_mobile.css" />
</head>
<body id="mockup4">
<div id="page" class="stack">
<div id="header">
<div class="wrapper">
<h1 id="title">Semantic Naming</h1>
<div id="banner">
<img width="1100" src="images/my-banner.png" alt="My Banner" />
</div>
<ul id="nav">
<li><a href="mockup1.html">Basic Mockup</a></li>
<li><a href="mockup2.html">Template Variations</a></li>
<li><a href="mockup3.html">Wrappers and Nesting</a></li>
<li class="active"><a href="mockup4.html">Semantic Class Names</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="wrapper">
<div id="column1">
<div class="stackContent">
<h2>Using Semantic Class Names</h2>
<p>This page demonstrates how easy it is to use semantic class for small areas of your site such as the main navigation or a thumbnail gallery, or for the entire site as part of your deployment process. All the stack component classes that relate to non-semantic width propoerties have been replaced with arbitrary 'semantic' classes. I have kept the <code>.stackConent</code> class because i consider it to be semantic enough for this purpose. This could, however also be replaced in a similar fashion. The relevant classes are then simply added to stacklayout.css and stacklayout_lte_ie7.css. In this case i'm using <a href="stacklayout-semantic.css">stacklayout-semantic.css</a> and <a href="stacklayout-semantic_lte_ie7.css">stacklayout-semantic_lte_ie7.css</a>, in which I have commented out the original stack component class names for reference. It should be noted that the parent <code>.stack</code> component is still required.</p>
</div>
<div class="thisClass">
<div class="stackContent">
<h3>This is a full width <strong>.stackContent</strong> component inside a <strong>.stack1of3</strong> component</h3>
<p>Sample content</p>
</div>
<div class="someClass"> <div class="stackContent">
<h4>This is <strong>.stack1of2</strong> component</h4>
</div>
</div>
<div class="someClass">
<div class="stackContent">
<h4>This is <strong>.stack1of2</strong> component</h4>
</div>
</div>
<div class="stackContent">
<h3>Another full width <strong>.stackContent</strong> component</h3>
<p>Even more sample content</p>
</div>
<p class="stackContent">This is a <strong>p.stackContent</strong> component. You can just stack them up like normal block level elements.</p>
<p class="stackContent">This is a <strong>p.stackContent</strong> component. You can just stack them up like normal block level elements.</p>
<p class="stackContent">This is a <strong>p.stackContent</strong> component. You can just stack them up like normal block level elements.</p>
</div>
<div class="thatClass">
<div class="stackContent">
<h3>This is a full width <strong>.stackContent</strong> component inside a <strong>.stack2of3</strong> component</h3>
<p>It has five <strong>.stack1of5</strong> siblings which are <strong>vertical-align:middle</strong>:</p>
</div>
<div class="awesomeClass">
<h5 class="stackContent">.stack1of5 <strong><h5></strong></h5>
</div>
<div class="awesomeClass">
<h3 class="stackContent">.stack1of5 <strong><h3></strong></h3>
</div>
<div class="awesomeClass">
<h1 class="stackContent">.stack1of5 <strong><h1></strong></h1>
</div>
<div class="awesomeClass">
<h3 class="stackContent">.stack1of5 <strong><h3></strong></h3>
</div>
<div class="awesomeClass">
<h5 class="stackContent">.stack1of5 <strong><h5></strong></h5>
</div>
<div class="anotherClass">
<div class="stackContent">
<h4>A <strong>.stackContent</strong> component inside a <strong>.stack1of4</strong> component</h4>
<p>Sample text.</p>
</div>
<div class="stackContent">
<h4>Another <strong>.stackContent</strong> component</h4>
<p>Even more sample text.</p>
</div>
</div>
<div id="gallery">
<h4 class="stackContent">A bunch of different sized images, all wrapped in <strong>.stackAuto</strong> components with <strong>vertical-align:middle</strong> 'stack' neatly into rows like text:</h4>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="24" height="24" src="images/sampleIcon-24.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="48" height="48" src="images/sampleIcon-48.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="64" height="64" src="images/sampleIcon-64.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="24" height="24" src="images/sampleIcon-24.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="48" height="48" src="images/sampleIcon-48.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="16" height="16" src="images/sampleIcon-16.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="64" height="64" src="images/sampleIcon-64.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="24" height="24" src="images/sampleIcon-24.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="48" height="48" src="images/sampleIcon-48.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="48" height="48" src="images/sampleIcon-48.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="32" height="32" src="images/sampleIcon-32.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="16" height="16" src="images/sampleIcon-16.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="32" height="32" src="images/sampleIcon-32.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="64" height="64" src="images/sampleIcon-64.gif" /></a>
</div>
<div class="galleryImage">
<a class="stackContent" href="#"><img width="16" height="16" src="images/sampleIcon-16.gif" /></a>
</div>
<p class="stackContent"><strong>Reduce the screen width to witness their desirable stack behaviour.</strong></p>
</div>
</div>
</div>
<div id="column2">
<div class="stackContent">
<h2>Available sizes</h2>
<p>This column contains samples of all the different proportional component sizes available.</p>
</div>
<div class="january">
<div class="stackContent"><strong>.stack1of2</strong></div>
</div>
<div class="february">
<div class="stackContent"><strong>.stackAuto</strong> component</div>
</div>
<div class="march">
<div class="stackContent"><strong>.stack2of3</strong></div>
</div>
<div class="april">
<div class="stackContent"><strong>.stack1of3</strong></div>
</div>
<div class="may">
<div class="stackContent"><strong>.stack3of4</strong></div>
</div>
<div class="june">
<div class="stackContent"><strong>.stack1of4</strong></div>
</div>
<div class="july">
<div class="stackContent"><strong>.stack4of5</strong></div>
</div>
<div class="august">
<div class="stackContent"><strong>.stack1of5</strong></div>
</div>
<div class="september">
<div class="stackContent"><strong>.stack3of5</strong></div>
</div>
<div class="october">
<div class="stackContent"><strong>.stack2of5</strong></div>
</div>
<div class="february">
<div class="stackContent">Another <strong>.stackAuto</strong> component</div>
</div>
<div class="stackContent">
<h4>This is a <strong>.stackContent</strong> component containing some good old Lorem Ipsum:</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet, tellus a pulvinar tempus, enim orci ultrices mi, a viverra justo sem a nunc. Aenean in nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi est quam, luctus a, mattis id, ullamcorper eget, magna. Nulla odio. Etiam est.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div class="footerItem">
<p class="stackContent">© 2011 Your Name here</p>
</div>
<div class="footerItem">
<a class="stackContent" href="#">License</a>
</div>
<div class="footerItem">
<a id="twitter" class="stackContent" href="#">Follow me on Twitter</a>
</div>
</div>
</div>
</div>
</body>
</html>