shipd_style 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +25 -0
- data/.ruby-gemset +1 -0
- data/.ruby-version +1 -0
- data/Gemfile +3 -0
- data/Gemfile.lock +37 -0
- data/LICENSE.txt +22 -0
- data/README.md +140 -0
- data/Rakefile +2 -0
- data/config.rb +25 -0
- data/demo/carousel.html +79 -0
- data/demo/desktop-styles.html +80 -0
- data/demo/dialog.html +143 -0
- data/demo/index.html +63 -0
- data/demo/mobile-styles.html +253 -0
- data/demo/responsive-columns.html +87 -0
- data/demo/tablet-styles.html +79 -0
- data/lib/sass/_shipd-variables.scss +6 -0
- data/lib/sass/desktop/_button-form-elements.scss +15 -0
- data/lib/sass/desktop/_grid.scss +37 -0
- data/lib/sass/desktop/_layout-elements.scss +10 -0
- data/lib/sass/desktop/_typography.scss +6 -0
- data/lib/sass/desktop/_variable_overrides.scss +2 -0
- data/lib/sass/desktop/_variables.scss +2 -0
- data/lib/sass/mobile/_grid.scss +41 -0
- data/lib/sass/mobile/_oo-styles.scss +218 -0
- data/lib/sass/mobile/_typography.scss +50 -0
- data/lib/sass/mobile/widgets/_buttons.scss +134 -0
- data/lib/sass/mobile/widgets/_carousel.scss +16 -0
- data/lib/sass/mobile/widgets/_dialog-overlay.scss +37 -0
- data/lib/sass/mobile/widgets/_form-elements.scss +80 -0
- data/lib/sass/mobile/widgets/_header.scss +6 -0
- data/lib/sass/mobile/widgets/_page-layout.scss +9 -0
- data/lib/sass/shipd-all.scss +9 -0
- data/lib/sass/shipd-desktop.scss +9 -0
- data/lib/sass/shipd-mobile.scss +20 -0
- data/lib/sass/shipd-tablet.scss +9 -0
- data/lib/sass/tablet/_button-form-elements.scss +15 -0
- data/lib/sass/tablet/_grid.scss +39 -0
- data/lib/sass/tablet/_layout-elements.scss +15 -0
- data/lib/sass/tablet/_typography.scss +6 -0
- data/lib/sass/tablet/_variable_overrides.scss +2 -0
- data/lib/sass/tablet/_variables.scss +2 -0
- data/lib/sass/variables/_colors.scss +43 -0
- data/lib/sass/variables/_font.scss +7 -0
- data/lib/sass/variables/_form_spacing.scss +4 -0
- data/lib/sass/variables/_misc.scss +5 -0
- data/lib/sass/variables/_mixins.scss +45 -0
- data/lib/sass/variables/_spacing.scss +4 -0
- data/lib/shipd_style/copy_stylesheets.rb +16 -0
- data/lib/shipd_style/shipd_style.rake +9 -0
- data/lib/shipd_style/tasks.rb +3 -0
- data/lib/shipd_style/version.rb +3 -0
- data/lib/shipd_style.rb +5 -0
- data/lib/templates/carousel.html +6 -0
- data/lib/templates/dialog.html +15 -0
- data/lib/templates/page-layout.html +4 -0
- data/shipd_style.gemspec +25 -0
- metadata +144 -0
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Shipd Style - Basic Styles</title>
|
|
6
|
+
<meta name="viewport" content="initial-scale=1">
|
|
7
|
+
<link href="/favicon.ico" rel="shortcut icon" type="image/ico">
|
|
8
|
+
<link rel="stylesheet" href="../stylesheets/mobile.css">
|
|
9
|
+
<link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div id="page">
|
|
13
|
+
<div id='header' class='row'>
|
|
14
|
+
<div class='inner overflown'>
|
|
15
|
+
<h1 class='unit'>Logo Land</h1>
|
|
16
|
+
<div class='unit spacer'></div>
|
|
17
|
+
<h4 class='unit-right'>menu?</h4>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class='inner'>
|
|
22
|
+
<h1>Hello Shippers</h1>
|
|
23
|
+
|
|
24
|
+
<div class='spacer'></div>
|
|
25
|
+
|
|
26
|
+
<div class='row'>
|
|
27
|
+
<div class='inner border'>
|
|
28
|
+
.inner.border
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div class='spacer'></div>
|
|
33
|
+
|
|
34
|
+
<div class='panel'>
|
|
35
|
+
<div class='inner border'>
|
|
36
|
+
.panel .inner
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class='spacer'></div>
|
|
41
|
+
|
|
42
|
+
<div class='shadow-container'>
|
|
43
|
+
<div class='rounded shadow'>
|
|
44
|
+
<div class='inner border rounded'>
|
|
45
|
+
.shadow-container .rounded.shadow .inner.border.rounded
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class='spacer'></div>
|
|
51
|
+
|
|
52
|
+
<div class='shadow-container'>
|
|
53
|
+
<div class='panel shadow'>
|
|
54
|
+
<div class='inner border'>
|
|
55
|
+
.shadow-container .panel.shadow .inner.border
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class='spacer'></div>
|
|
61
|
+
|
|
62
|
+
<div class='row'>
|
|
63
|
+
<div class='inner border rounded'>
|
|
64
|
+
.inner.border.rounded
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<hr>
|
|
69
|
+
|
|
70
|
+
<h2 class='inner-top inner-bottom'>Color related OO-Styles</h2>
|
|
71
|
+
|
|
72
|
+
<p class='light-text background-dark inner'>.light-text.background-dark.inner</p>
|
|
73
|
+
<p class='primary-text background-dark inner'>.primary-text.background-dark.inner</p>
|
|
74
|
+
<p class='accent-text background-dark inner'>.accent-text.background-dark.inner</p>
|
|
75
|
+
<p class='accent-2-text background-dark inner'>.accent-2-text.background-dark.inner</p>
|
|
76
|
+
<p class='info-text inner'>.info-text.inner</p>
|
|
77
|
+
<p class='info-2-text inner'>.info-2-text.inner</p>
|
|
78
|
+
<p class='warn-text inner'>.warn-text.inner</p>
|
|
79
|
+
<p class='error-text inner'>.error-text.inner</p>
|
|
80
|
+
|
|
81
|
+
<div class='inner background-primary'>.background-primary.inner</div>
|
|
82
|
+
<div class='spacer'></div>
|
|
83
|
+
<div class='inner background-accent'>.background-accent.inner</div>
|
|
84
|
+
<div class='spacer'></div>
|
|
85
|
+
<div class='inner background-accent-2'>.background-accent-2.inner</div>
|
|
86
|
+
<div class='spacer'></div>
|
|
87
|
+
<div class='inner background-info light-text'>.background-info.light-text.inner</div>
|
|
88
|
+
<div class='spacer'></div>
|
|
89
|
+
<div class='inner background-info-2 light-text'>.background-info-2.light-text.inner</div>
|
|
90
|
+
<div class='spacer'></div>
|
|
91
|
+
<div class='inner background-warn'>.background-warn.inner</div>
|
|
92
|
+
<div class='spacer'></div>
|
|
93
|
+
<div class='inner background-error'>.background-error.inner</div>
|
|
94
|
+
|
|
95
|
+
<div class='row'>
|
|
96
|
+
<div class='inner'>
|
|
97
|
+
<div class='unit size-1-3'>
|
|
98
|
+
<div class='background-primary circular' style="width: 75px; height: 75px"></div>
|
|
99
|
+
</div>
|
|
100
|
+
<div class='last-unit'>
|
|
101
|
+
<p>.background-primary.circular style="width: 75px; height: 75px"</p>
|
|
102
|
+
<h5>
|
|
103
|
+
Circular is good for images. For text, the background is cut to a circle, but the text just ends up everywhere. Be careful.
|
|
104
|
+
</h5>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class='row'>
|
|
110
|
+
<div class='inner'>
|
|
111
|
+
<div class='unit size-1-3'>
|
|
112
|
+
<div class='shadow-container'>
|
|
113
|
+
<div class='background-accent circular shadow' style="width: 50px; height: 50px"></div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
<p class='unit size-2-3'>
|
|
117
|
+
.shadow-container .background-accent.circular.shadow style="width: 50px; height: 50px"
|
|
118
|
+
</p>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<hr>
|
|
123
|
+
|
|
124
|
+
<div class='spacer'></div>
|
|
125
|
+
|
|
126
|
+
<h1>Form Elements</h1>
|
|
127
|
+
<form>
|
|
128
|
+
<div class='inner border rounded'>
|
|
129
|
+
<div class='row'>
|
|
130
|
+
<div class='input-container'>
|
|
131
|
+
<input type="text" placeholder="hello"/>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div class='row error'>
|
|
135
|
+
<h6 class='error-message'>Oh, holy error, batgirl!</h6>
|
|
136
|
+
<div class='input-container'>
|
|
137
|
+
<input type="text" placeholder="hello"/>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div class='row'>
|
|
141
|
+
<div class='input-container'>
|
|
142
|
+
<textarea placeholder="hello"></textarea>
|
|
143
|
+
</div>
|
|
144
|
+
<h6 class='error-message'>Oh, holy error, batgirl!</h6>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<div class='row'>
|
|
148
|
+
<div class='unit size1of3'>
|
|
149
|
+
<div class='shadow-container'>
|
|
150
|
+
<a class='button'>Link Button</a>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div class='row'>
|
|
156
|
+
<div class='unit size1of3'>
|
|
157
|
+
<div class='shadow-container'>
|
|
158
|
+
<button>Button Element</button>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<div class='row'>
|
|
164
|
+
<div class='unit size1of3'>
|
|
165
|
+
<div class='shadow-container'>
|
|
166
|
+
<input type='submit' value='Input Element'>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<div class='row'>
|
|
172
|
+
<div class='unit size1of3'>
|
|
173
|
+
<div class='shadow-container'>
|
|
174
|
+
<a class='button accent'>Accent</a>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class='row'>
|
|
180
|
+
<div class='unit size1of3'>
|
|
181
|
+
<div class='shadow-container'>
|
|
182
|
+
<a class='button accent-2'>Accent 2</a>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class='row'>
|
|
188
|
+
<div class='unit size1of3'>
|
|
189
|
+
<div class='shadow-container'>
|
|
190
|
+
<a class='button neutral'>Neutral</a>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class='row'>
|
|
196
|
+
<div class='unit size1of3'>
|
|
197
|
+
<div class='shadow-container'>
|
|
198
|
+
<a class='button info'>Info</a>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<div class='row'>
|
|
204
|
+
<div class='unit size1of3'>
|
|
205
|
+
<div class='shadow-container'>
|
|
206
|
+
<a class='button info-2'>Info 2</a>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
<div class='row'>
|
|
212
|
+
<div class='unit size1of3'>
|
|
213
|
+
<div class='shadow-container'>
|
|
214
|
+
<a class='button warn'>Warn</a>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<div class='row'>
|
|
220
|
+
<div class='unit size1of3'>
|
|
221
|
+
<div class='shadow-container'>
|
|
222
|
+
<a class='button error'>Error</a>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
</div>
|
|
228
|
+
</form>
|
|
229
|
+
|
|
230
|
+
<hr>
|
|
231
|
+
|
|
232
|
+
<h1>h1: Hello World</h1>
|
|
233
|
+
<h2>h2: Hello World</h2>
|
|
234
|
+
<h3>h3: Hello World</h3>
|
|
235
|
+
<h4>h4: Hello World</h4>
|
|
236
|
+
<h5>h5: Hello World</h5>
|
|
237
|
+
<h6>h6: Hello World</h6>
|
|
238
|
+
<p>p: Hello World</p>
|
|
239
|
+
<div>div: Hello World</div>
|
|
240
|
+
<hr>
|
|
241
|
+
<h4>Lorem Ipsum</h4>
|
|
242
|
+
<p>
|
|
243
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non viverra nisl. Aenean rhoncus quam quis metus blandit, a egestas eros condimentum. Nulla at erat nibh. Fusce ut risus vitae lorem placerat mollis. Suspendisse cursus bibendum velit lacinia varius. Donec eu iaculis velit, eu tincidunt sapien. Aenean quam massa, fermentum quis vulputate quis, viverra in quam. Pellentesque pharetra porta quam. Integer lectus libero, vulputate eu nunc nec, tincidunt fringilla lacus. Pellentesque rutrum libero sit amet accumsan sollicitudin. Donec turpis dolor, tempus sed sodales vitae, dictum vitae nisl. Sed hendrerit purus quam, quis rhoncus nulla accumsan congue. Aenean ac risus iaculis, commodo odio sed, pulvinar tellus.
|
|
244
|
+
</p>
|
|
245
|
+
<p>
|
|
246
|
+
In hac habitasse platea dictumst. Vestibulum nec dictum libero. Aenean ultricies placerat hendrerit. Sed turpis quam, ultricies in sodales vel, tristique vel nisi. Ut in nisl ac metus tincidunt gravida. Quisque et diam ligula. Maecenas gravida ante sapien, id fermentum odio bibendum at.
|
|
247
|
+
</p>
|
|
248
|
+
<p>
|
|
249
|
+
Sed auctor eleifend tortor, non posuere neque scelerisque at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed tincidunt a erat id auctor. Vestibulum luctus libero et odio elementum tristique. In in nisl a nibh porta lacinia. Vestibulum nulla mauris, imperdiet eget velit eget, commodo mattis magna. Quisque bibendum, magna quis lacinia ullamcorper, diam metus pharetra nibh, id gravida purus odio consequat ipsum. Quisque sollicitudin viverra lectus in pellentesque. Morbi tempor maximus porttitor. Curabitur diam enim, luctus vitae ornare a, gravida eget erat.
|
|
250
|
+
</p>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</body>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Shipd Style - Responsive Columns</title>
|
|
6
|
+
<meta name="viewport" content="initial-scale=1">
|
|
7
|
+
<link href="/favicon.ico" rel="shortcut icon" type="image/ico">
|
|
8
|
+
<link rel="stylesheet" href="../stylesheets/mobile.css">
|
|
9
|
+
<link rel="stylesheet" href="../stylesheets/tablet.css" media="screen and (min-width: 768px)">
|
|
10
|
+
<link rel="stylesheet" href="../stylesheets/desktop.css" media="screen and (min-width: 1024px)">
|
|
11
|
+
<link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
@media (min-width: 768px) {
|
|
15
|
+
.column-inner {
|
|
16
|
+
padding-left: 5px;
|
|
17
|
+
padding-right: 5px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.layout-inner {
|
|
21
|
+
padding: 15px 10px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<div id="page">
|
|
28
|
+
<div class='inner layout-inner'>
|
|
29
|
+
<div class='layout-inner inner'>
|
|
30
|
+
<h1 class="t-hidden d-hidden">Mobile View</h1>
|
|
31
|
+
<h1 class="m-hidden d-hidden">Tablet View</h1>
|
|
32
|
+
<h1 class="m-hidden t-hidden">Desktop View</h1>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class='m-row t-unit t-size-1-2 d-unit d-size-1-3'>
|
|
36
|
+
<div class='block column-inner'>
|
|
37
|
+
<div class='inner border rounded'>
|
|
38
|
+
<h4>Section 1</h4>
|
|
39
|
+
<p>
|
|
40
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisi ullamcorper velit gravida consectetur. Mauris cursus posuere urna eu aliquam. Aenean metus nulla, ullamcorper vel faucibus a, vulputate ac dui. Phasellus tempor dignissim odio, vel lacinia turpis dapibus a. In hac habitasse platea dictumst. Donec purus erat, fermentum sit amet maximus eu, gravida vitae ex. Ut sed lectus vitae turpis vulputate tincidunt. Pellentesque non egestas lacus, non porttitor dui. Aliquam volutpat lacus eget orci tincidunt, sit amet accumsan neque facilisis.
|
|
41
|
+
</p><p>
|
|
42
|
+
Nam quis ante non velit egestas venenatis. Praesent eleifend ante quis metus venenatis, dictum pharetra justo pretium. Vestibulum vitae egestas sem, ut iaculis massa. Donec sit amet erat in mi commodo commodo. Sed non diam in leo feugiat congue. Mauris tempus non arcu vitae malesuada. Maecenas non diam ac urna imperdiet hendrerit porttitor et felis. Sed ipsum ipsum, placerat ac diam eget, malesuada faucibus enim. Vivamus viverra, urna sed feugiat bibendum, ante mi hendrerit lorem, sit amet maximus diam justo ut est. In sollicitudin quis purus vel fringilla.
|
|
43
|
+
</p><p>
|
|
44
|
+
Vivamus porta luctus massa eu bibendum. Sed sodales vulputate efficitur. Phasellus semper tempor nisi in convallis. Cras dapibus fringilla odio sed fringilla. Phasellus a fringilla urna. Nunc vulputate viverra imperdiet. Suspendisse molestie, neque non auctor viverra, odio arcu volutpat ligula, sed pellentesque felis ante nec velit. Sed semper eleifend elit, vel eleifend nunc gravida at. Morbi ornare a nulla a rhoncus. Quisque dignissim dolor eget lorem ullamcorper auctor.
|
|
45
|
+
</p><p>
|
|
46
|
+
In sit amet orci et lectus tempor vehicula eu et augue. Quisque id est eleifend, tempor justo et, molestie nibh. Phasellus mattis hendrerit ultricies. Donec nec eros sed est euismod consequat. Nulla facilisi. Nulla quis semper turpis. Morbi vitae pellentesque risus. Vestibulum sodales, ante at imperdiet pulvinar, ipsum justo laoreet ex, non viverra metus nunc quis nunc.
|
|
47
|
+
</p>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div class='spacer t-hidden d-hidden m-row'></div>
|
|
52
|
+
<div class='m-row t-unit t-size-1-2 d-unit d-size-1-3'>
|
|
53
|
+
<div class='block column-inner'>
|
|
54
|
+
<div class='inner border rounded'>
|
|
55
|
+
<h4>Section 2</h4>
|
|
56
|
+
<p>
|
|
57
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisi ullamcorper velit gravida consectetur. Mauris cursus posuere urna eu aliquam. Aenean metus nulla, ullamcorper vel faucibus a, vulputate ac dui. Phasellus tempor dignissim odio, vel lacinia turpis dapibus a. In hac habitasse platea dictumst. Donec purus erat, fermentum sit amet maximus eu, gravida vitae ex. Ut sed lectus vitae turpis vulputate tincidunt. Pellentesque non egestas lacus, non porttitor dui. Aliquam volutpat lacus eget orci tincidunt, sit amet accumsan neque facilisis.
|
|
58
|
+
</p><p>
|
|
59
|
+
Nam quis ante non velit egestas venenatis. Praesent eleifend ante quis metus venenatis, dictum pharetra justo pretium. Vestibulum vitae egestas sem, ut iaculis massa. Donec sit amet erat in mi commodo commodo. Sed non diam in leo feugiat congue. Mauris tempus non arcu vitae malesuada. Maecenas non diam ac urna imperdiet hendrerit porttitor et felis. Sed ipsum ipsum, placerat ac diam eget, malesuada faucibus enim. Vivamus viverra, urna sed feugiat bibendum, ante mi hendrerit lorem, sit amet maximus diam justo ut est. In sollicitudin quis purus vel fringilla.
|
|
60
|
+
</p><p>
|
|
61
|
+
Vivamus porta luctus massa eu bibendum. Sed sodales vulputate efficitur. Phasellus semper tempor nisi in convallis. Cras dapibus fringilla odio sed fringilla. Phasellus a fringilla urna. Nunc vulputate viverra imperdiet. Suspendisse molestie, neque non auctor viverra, odio arcu volutpat ligula, sed pellentesque felis ante nec velit. Sed semper eleifend elit, vel eleifend nunc gravida at. Morbi ornare a nulla a rhoncus. Quisque dignissim dolor eget lorem ullamcorper auctor.
|
|
62
|
+
</p><p>
|
|
63
|
+
In sit amet orci et lectus tempor vehicula eu et augue. Quisque id est eleifend, tempor justo et, molestie nibh. Phasellus mattis hendrerit ultricies. Donec nec eros sed est euismod consequat. Nulla facilisi. Nulla quis semper turpis. Morbi vitae pellentesque risus. Vestibulum sodales, ante at imperdiet pulvinar, ipsum justo laoreet ex, non viverra metus nunc quis nunc.
|
|
64
|
+
</p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div class='spacer d-hidden m-row t-row'></div>
|
|
69
|
+
<div class='m-row t-unit t-size-1-2 d-unit d-size-1-3'>
|
|
70
|
+
<div class='block column-inner'>
|
|
71
|
+
<div class='inner border rounded'>
|
|
72
|
+
<h4>Section 3</h4>
|
|
73
|
+
<p>
|
|
74
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisi ullamcorper velit gravida consectetur. Mauris cursus posuere urna eu aliquam. Aenean metus nulla, ullamcorper vel faucibus a, vulputate ac dui. Phasellus tempor dignissim odio, vel lacinia turpis dapibus a. In hac habitasse platea dictumst. Donec purus erat, fermentum sit amet maximus eu, gravida vitae ex. Ut sed lectus vitae turpis vulputate tincidunt. Pellentesque non egestas lacus, non porttitor dui. Aliquam volutpat lacus eget orci tincidunt, sit amet accumsan neque facilisis.
|
|
75
|
+
</p><p>
|
|
76
|
+
Nam quis ante non velit egestas venenatis. Praesent eleifend ante quis metus venenatis, dictum pharetra justo pretium. Vestibulum vitae egestas sem, ut iaculis massa. Donec sit amet erat in mi commodo commodo. Sed non diam in leo feugiat congue. Mauris tempus non arcu vitae malesuada. Maecenas non diam ac urna imperdiet hendrerit porttitor et felis. Sed ipsum ipsum, placerat ac diam eget, malesuada faucibus enim. Vivamus viverra, urna sed feugiat bibendum, ante mi hendrerit lorem, sit amet maximus diam justo ut est. In sollicitudin quis purus vel fringilla.
|
|
77
|
+
</p><p>
|
|
78
|
+
Vivamus porta luctus massa eu bibendum. Sed sodales vulputate efficitur. Phasellus semper tempor nisi in convallis. Cras dapibus fringilla odio sed fringilla. Phasellus a fringilla urna. Nunc vulputate viverra imperdiet. Suspendisse molestie, neque non auctor viverra, odio arcu volutpat ligula, sed pellentesque felis ante nec velit. Sed semper eleifend elit, vel eleifend nunc gravida at. Morbi ornare a nulla a rhoncus. Quisque dignissim dolor eget lorem ullamcorper auctor.
|
|
79
|
+
</p><p>
|
|
80
|
+
In sit amet orci et lectus tempor vehicula eu et augue. Quisque id est eleifend, tempor justo et, molestie nibh. Phasellus mattis hendrerit ultricies. Donec nec eros sed est euismod consequat. Nulla facilisi. Nulla quis semper turpis. Morbi vitae pellentesque risus. Vestibulum sodales, ante at imperdiet pulvinar, ipsum justo laoreet ex, non viverra metus nunc quis nunc.
|
|
81
|
+
</p>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</body>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Shipd Style - Tablet Styles</title>
|
|
6
|
+
<meta name="viewport" content="initial-scale=1">
|
|
7
|
+
<link href="/favicon.ico" rel="shortcut icon" type="image/ico">
|
|
8
|
+
<link rel="stylesheet" href="../stylesheets/mobile.css">
|
|
9
|
+
<link rel="stylesheet" href="../stylesheets/tablet.css" media="screen and (min-width: 768px)">
|
|
10
|
+
<link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="page">
|
|
14
|
+
<div id='header' class='row'>
|
|
15
|
+
<div class='inner overflown'>
|
|
16
|
+
<h1 class='unit'>Logo Land</h1>
|
|
17
|
+
<div class='unit spacer'></div>
|
|
18
|
+
<h4 class='unit-right'>menu?</h4>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<div class='inner'>
|
|
23
|
+
<h1>Hello Shippers - Welcome to Tablet View</h1>
|
|
24
|
+
|
|
25
|
+
<p>Life is pretty good as we are progressively enhancing the mobile view.</p>
|
|
26
|
+
<p>You have some extra styles.</p>
|
|
27
|
+
<ul class='bullet-list'>
|
|
28
|
+
<li>
|
|
29
|
+
t-size-X-X: Where 'X' is a number indicating size.
|
|
30
|
+
These are like the base case sizes: size-X-X.
|
|
31
|
+
The main differences is that these styles are provided for those cases
|
|
32
|
+
where you need a different layout of the same elements in mobile and tablet.
|
|
33
|
+
</li>
|
|
34
|
+
</ul>
|
|
35
|
+
|
|
36
|
+
<p>Also, the base sizes for text have been modified slightly for better usage on tablet</p>
|
|
37
|
+
|
|
38
|
+
<h1>h1: Hello World</h1>
|
|
39
|
+
<h2>h2: Hello World</h2>
|
|
40
|
+
<h3>h3: Hello World</h3>
|
|
41
|
+
<h4>h4: Hello World</h4>
|
|
42
|
+
<h5>h5: Hello World</h5>
|
|
43
|
+
<h6>h6: Hello World</h6>
|
|
44
|
+
<p>p: Hello World</p>
|
|
45
|
+
<div>div: Hello World</div>
|
|
46
|
+
|
|
47
|
+
<h1>Form Elements</h1>
|
|
48
|
+
<form>
|
|
49
|
+
<div class='inner border rounded'>
|
|
50
|
+
<div class='row'>
|
|
51
|
+
<div class='input-container'>
|
|
52
|
+
<input type="text" placeholder="hello"/>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class='row error'>
|
|
56
|
+
<h6 class='error-message'>Oh, holy error, batgirl!</h6>
|
|
57
|
+
<div class='input-container'>
|
|
58
|
+
<input type="text" placeholder="hello"/>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class='row'>
|
|
62
|
+
<div class='input-container'>
|
|
63
|
+
<textarea placeholder="hello"></textarea>
|
|
64
|
+
</div>
|
|
65
|
+
<h6 class='error-message'>Oh, holy error, batgirl!</h6>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class='row'>
|
|
69
|
+
<div class='unit size1of3'>
|
|
70
|
+
<div class='shadow-container'>
|
|
71
|
+
<a class='button'>Link Button</a>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</form>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</body>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
.inner {
|
|
2
|
+
padding: $spacing;
|
|
3
|
+
@include line;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.spacer {
|
|
7
|
+
width: $spacing;
|
|
8
|
+
height: $spacing;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.m-hidden { display: block; }
|
|
12
|
+
.t-hidden { display: block; }
|
|
13
|
+
.d-hidden { display: none; }
|
|
14
|
+
|
|
15
|
+
.m-row { float: left; width: auto; }
|
|
16
|
+
.t-row { float: left; width: auto; }
|
|
17
|
+
.d-row {
|
|
18
|
+
width: 100%;
|
|
19
|
+
@include line;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.d-unit{float:left;}
|
|
23
|
+
.d-unit-right{float:right;}
|
|
24
|
+
.d-size-1-1{width:100%;}
|
|
25
|
+
.d-size-1-2{width:50%;}
|
|
26
|
+
.d-size-1-3{width:33.33333%;}
|
|
27
|
+
.d-size-1-4{width:25%;}
|
|
28
|
+
.d-size-1-5{width:20%;}
|
|
29
|
+
.d-size-2-3{width:66.66666%;}
|
|
30
|
+
.d-size-2-5{width:40%;}
|
|
31
|
+
.d-size-3-4{width:75%;}
|
|
32
|
+
.d-size-3-5{width:60%;}
|
|
33
|
+
.d-size-4-5{width:80%;}
|
|
34
|
+
|
|
35
|
+
.right {
|
|
36
|
+
float: right;
|
|
37
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
.line, .row, .last-unit {
|
|
2
|
+
width: 100%;
|
|
3
|
+
@include line;
|
|
4
|
+
}
|
|
5
|
+
.unit{float:left;}
|
|
6
|
+
.unit-right{float:right;}
|
|
7
|
+
.size-1-1{width:100%;}
|
|
8
|
+
.size-1-2{width:50%;}
|
|
9
|
+
.size-1-3{width:33.33333%;}
|
|
10
|
+
.size-1-4{width:25%;}
|
|
11
|
+
.size-1-5{width:20%;}
|
|
12
|
+
.size-2-3{width:66.66666%;}
|
|
13
|
+
.size-2-5{width:40%;}
|
|
14
|
+
.size-3-4{width:75%;}
|
|
15
|
+
.size-3-5{width:60%;}
|
|
16
|
+
.size-4-5{width:80%;}
|
|
17
|
+
|
|
18
|
+
.last-unit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;}
|
|
19
|
+
|
|
20
|
+
.inner {
|
|
21
|
+
padding: $spacing;
|
|
22
|
+
@include line;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.spacer {
|
|
26
|
+
width: $spacing;
|
|
27
|
+
height: $spacing;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.m-hidden {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.m-row {
|
|
35
|
+
width: 100%;
|
|
36
|
+
@include line;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.right {
|
|
40
|
+
float: right;
|
|
41
|
+
}
|