prelude-framework 0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +20 -0
- data/Gemfile +4 -0
- data/LICENCE +19 -0
- data/README.md +5 -0
- data/Rakefile +1 -0
- data/lib/prelude/version.rb +3 -0
- data/lib/prelude-framework.rb +8 -0
- data/prelude.gemspec +23 -0
- data/scss/prelude/_abstractions.scss +21 -0
- data/scss/prelude/_all.scss +6 -0
- data/scss/prelude/_base.scss +6 -0
- data/scss/prelude/_core.scss +13 -0
- data/scss/prelude/_debug-mode.scss +125 -0
- data/scss/prelude/_defaults.scss +159 -0
- data/scss/prelude/_functions.scss +8 -0
- data/scss/prelude/_images.scss +9 -0
- data/scss/prelude/_mixins.scss +9 -0
- data/scss/prelude/_modules.scss +7 -0
- data/scss/prelude/_typography.scss +15 -0
- data/scss/prelude/abstractions/_flag.scss +67 -0
- data/scss/prelude/abstractions/_flexbox.scss +29 -0
- data/scss/prelude/abstractions/_island.scss +53 -0
- data/scss/prelude/abstractions/_media.scss +61 -0
- data/scss/prelude/abstractions/_nav.scss +110 -0
- data/scss/prelude/abstractions/_split.scss +26 -0
- data/scss/prelude/base/_border-box.scss +7 -0
- data/scss/prelude/base/_helpers.scss +167 -0
- data/scss/prelude/functions/_contrasty.scss +24 -0
- data/scss/prelude/functions/_is-saturated.scss +14 -0
- data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
- data/scss/prelude/images/_base.scss +36 -0
- data/scss/prelude/images/_cover-image.scss +16 -0
- data/scss/prelude/images/_thumbnails.scss +47 -0
- data/scss/prelude/mixins/_button-style.scss +40 -0
- data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
- data/scss/prelude/mixins/_gradients.scss +12 -0
- data/scss/prelude/mixins/_rem.scss +31 -0
- data/scss/prelude/mixins/_set-font-size.scss +26 -0
- data/scss/prelude/modules/_buttons.scss +126 -0
- data/scss/prelude/modules/_forms.scss +634 -0
- data/scss/prelude/modules/_tables.scss +160 -0
- data/scss/prelude/typography/_base.scss +16 -0
- data/scss/prelude/typography/_brand.scss +19 -0
- data/scss/prelude/typography/_links.scss +14 -0
- data/scss/prelude/typography/_paragraphs.scss +9 -0
- data/scss/prelude/typography/_quotes.scss +31 -0
- data/scss/prelude/typography/_sizes.scss +63 -0
- data/scss/prelude.scss +53 -0
- data/test/config.rb +9 -0
- data/test/index.html +381 -0
- data/test/scss/_prelude-settings.scss +159 -0
- data/test/scss/style.scss +55 -0
- metadata +164 -0
data/test/index.html
ADDED
|
@@ -0,0 +1,381 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Prelude</title>
|
|
6
|
+
<link rel="stylesheet" href="css/style.css">
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div class="wrapper">
|
|
10
|
+
<h1 class="logo push--top push--bottom brand">Prelude</h1>
|
|
11
|
+
|
|
12
|
+
<!--
|
|
13
|
+
==========================================================================
|
|
14
|
+
Typography
|
|
15
|
+
===========================================================================
|
|
16
|
+
-->
|
|
17
|
+
|
|
18
|
+
<section id="type" class="push--top">
|
|
19
|
+
<h2>Typography</h2>
|
|
20
|
+
|
|
21
|
+
<!--
|
|
22
|
+
Typographic scale
|
|
23
|
+
===========================================================================
|
|
24
|
+
-->
|
|
25
|
+
|
|
26
|
+
<article id="type__scale" class="push--top">
|
|
27
|
+
<h3>Typographic scale</h3>
|
|
28
|
+
<div class="test push--top push--bottom">
|
|
29
|
+
<h4 class="flush--top giga">Giga</h4>
|
|
30
|
+
<h4 class="flush--top mega">Mega</h4>
|
|
31
|
+
<h4 class="flush--top kilo">Kilo</h4>
|
|
32
|
+
<h4 class="flush--top alpha">Alpha</h4>
|
|
33
|
+
<h4 class="flush--top beta">Beta</h4>
|
|
34
|
+
<h4 class="flush--top gamma">Gamma</h4>
|
|
35
|
+
<h4 class="flush--top delta">Delta</h4>
|
|
36
|
+
<h4 class="flush--top epsilon">Epsilon</h4>
|
|
37
|
+
<h4 class="flush--top zeta">Zeta</h4>
|
|
38
|
+
<p>A simple paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
39
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
40
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
41
|
+
consequat.</p>
|
|
42
|
+
<h4 class="milli">Milli</h4>
|
|
43
|
+
<h4 class="micro">Micro</h4>
|
|
44
|
+
<h4 class="nano">Nano</h4>
|
|
45
|
+
</div>
|
|
46
|
+
</article>
|
|
47
|
+
|
|
48
|
+
<!--
|
|
49
|
+
Brand
|
|
50
|
+
===========================================================================
|
|
51
|
+
-->
|
|
52
|
+
|
|
53
|
+
<article id="type__brand" class="push--top">
|
|
54
|
+
<h3>Brand typography</h3>
|
|
55
|
+
<div class="test push--top push--bottom">
|
|
56
|
+
<p class="brand">Brand style</p>
|
|
57
|
+
<p class="brand-face">Brand typeface</p>
|
|
58
|
+
<p class="brand-color">Brand color only</p>
|
|
59
|
+
</div>
|
|
60
|
+
</article>
|
|
61
|
+
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<hr>
|
|
65
|
+
|
|
66
|
+
<!--
|
|
67
|
+
==========================================================================
|
|
68
|
+
Buttons
|
|
69
|
+
===========================================================================
|
|
70
|
+
-->
|
|
71
|
+
|
|
72
|
+
<section id="buttons" class="push--top">
|
|
73
|
+
<h2>Buttons</h2>
|
|
74
|
+
|
|
75
|
+
<!--
|
|
76
|
+
Button styles
|
|
77
|
+
===========================================================================
|
|
78
|
+
-->
|
|
79
|
+
|
|
80
|
+
<article id="buttons__styles" class="push--top">
|
|
81
|
+
<h3>Button styles</h3>
|
|
82
|
+
|
|
83
|
+
<div class="test push--top push--bottom text-center">
|
|
84
|
+
<button class="btn push-half">Normal</button>
|
|
85
|
+
<button class="btn btn--primary push-half">Primary</button>
|
|
86
|
+
<button class="btn btn--success push-half">Succes</button>
|
|
87
|
+
<button class="btn btn--info push-half">Info</button>
|
|
88
|
+
<button class="btn btn--warning push-half">Warning</button>
|
|
89
|
+
<button class="btn btn--danger push-half">Danger</button>
|
|
90
|
+
<button class="btn btn--inverse push-half">Inverse</button>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div class="buttons-with-gradient test push--top push--bottom text-center">
|
|
94
|
+
<button class="btn push-half">Normal</button>
|
|
95
|
+
<button class="btn btn--primary push-half">Primary</button>
|
|
96
|
+
<button class="btn btn--success push-half">Succes</button>
|
|
97
|
+
<button class="btn btn--info push-half">Info</button>
|
|
98
|
+
<button class="btn btn--warning push-half">Warning</button>
|
|
99
|
+
<button class="btn btn--danger push-half">Danger</button>
|
|
100
|
+
<button class="btn btn--inverse push-half">Inverse</button>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
</article>
|
|
104
|
+
|
|
105
|
+
<!--
|
|
106
|
+
Button sizes
|
|
107
|
+
===========================================================================
|
|
108
|
+
-->
|
|
109
|
+
|
|
110
|
+
<article id="buttons__sizes" class="push--top">
|
|
111
|
+
<h3>Button sizes</h3>
|
|
112
|
+
<div class="test push--top push--bottom text-center">
|
|
113
|
+
<button class="btn btn--success btn--large push-half">Large</button>
|
|
114
|
+
<button class="btn btn--success btn--medium push-half">Medium</button>
|
|
115
|
+
<button class="btn btn--success push-half">Base</button>
|
|
116
|
+
<button class="btn btn--success btn--small push-half">Small</button>
|
|
117
|
+
<button class="btn btn--success btn--tiny push-half">Tiny</button>
|
|
118
|
+
<button class="btn btn--success btn--expand push-half--top">Danger</button>
|
|
119
|
+
</div>
|
|
120
|
+
</article>
|
|
121
|
+
|
|
122
|
+
<!--
|
|
123
|
+
Button groups
|
|
124
|
+
===========================================================================
|
|
125
|
+
-->
|
|
126
|
+
|
|
127
|
+
<article id="buttons__groups" class="push--top">
|
|
128
|
+
<h3>Button groups</h3>
|
|
129
|
+
<div class="test push--top push--bottom">
|
|
130
|
+
<div class="btn-group">
|
|
131
|
+
<button class="btn btn--success">Option 1</button><!--
|
|
132
|
+
--><button class="btn btn--success">Option 2</button>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
</article>
|
|
136
|
+
|
|
137
|
+
</section>
|
|
138
|
+
|
|
139
|
+
<hr/>
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
<!--
|
|
143
|
+
==========================================================================
|
|
144
|
+
Abstractions
|
|
145
|
+
===========================================================================
|
|
146
|
+
-->
|
|
147
|
+
|
|
148
|
+
<section id="abstractions" class="push--top">
|
|
149
|
+
<h2>Abstractions</h2>
|
|
150
|
+
|
|
151
|
+
<!--
|
|
152
|
+
Media object
|
|
153
|
+
===========================================================================
|
|
154
|
+
-->
|
|
155
|
+
|
|
156
|
+
<article id="abstractions__media" class="push--top">
|
|
157
|
+
<h3>Media object</h3>
|
|
158
|
+
<div class="test push--top push--bottom">
|
|
159
|
+
<div class="media">
|
|
160
|
+
<img src="http://www.fillmurray.com/90/90" width="45" alt="Fill Murray" class="media__fl">
|
|
161
|
+
<div class="media__body">
|
|
162
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing.
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<hr>
|
|
167
|
+
|
|
168
|
+
<div class="media">
|
|
169
|
+
<img src="http://www.fillmurray.com/90/90" width="45" alt="Fill Murray" class="media__fr">
|
|
170
|
+
<div class="media__body">
|
|
171
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing.
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</article>
|
|
176
|
+
|
|
177
|
+
<!--
|
|
178
|
+
Flag object
|
|
179
|
+
===========================================================================
|
|
180
|
+
-->
|
|
181
|
+
|
|
182
|
+
<article id="abstractions__flag" class="push--top">
|
|
183
|
+
<h3>Flag object</h3>
|
|
184
|
+
<div class="test push--top push--bottom">
|
|
185
|
+
|
|
186
|
+
<div class="flag">
|
|
187
|
+
<div class="flag__image">
|
|
188
|
+
<img src="http://www.fillmurray.com/90/90" width="45" alt="Fill Murray">
|
|
189
|
+
</div>
|
|
190
|
+
<div class="flag__body">
|
|
191
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing.
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<hr>
|
|
196
|
+
|
|
197
|
+
<div class="flag flag--top">
|
|
198
|
+
<div class="flag__image">
|
|
199
|
+
<img src="http://www.fillmurray.com/90/90" width="45" alt="Fill Murray">
|
|
200
|
+
</div>
|
|
201
|
+
<div class="flag__body">
|
|
202
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing.
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<hr>
|
|
207
|
+
|
|
208
|
+
<div class="flag flag--bottom">
|
|
209
|
+
<div class="flag__image">
|
|
210
|
+
<img src="http://www.fillmurray.com/90/90" width="45" alt="Fill Murray">
|
|
211
|
+
</div>
|
|
212
|
+
<div class="flag__body">
|
|
213
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing.
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
</div>
|
|
218
|
+
</article>
|
|
219
|
+
|
|
220
|
+
<!--
|
|
221
|
+
Nav object
|
|
222
|
+
===========================================================================
|
|
223
|
+
-->
|
|
224
|
+
|
|
225
|
+
<article id="abstractions__nav" class="push--top">
|
|
226
|
+
<h3>Nav object</h3>
|
|
227
|
+
<div class="test push--top push--bottom">
|
|
228
|
+
<ul class="nav">
|
|
229
|
+
<li>Item 1</li>
|
|
230
|
+
<li>Item 2</li>
|
|
231
|
+
<li>Item 3</li>
|
|
232
|
+
<li>Item 4</li>
|
|
233
|
+
<li>Item 5</li>
|
|
234
|
+
</ul>
|
|
235
|
+
|
|
236
|
+
<hr>
|
|
237
|
+
|
|
238
|
+
<ul class="nav nav--stacked">
|
|
239
|
+
<li>Item 1</li>
|
|
240
|
+
<li>Item 2</li>
|
|
241
|
+
<li>Item 3</li>
|
|
242
|
+
<li>Item 4</li>
|
|
243
|
+
<li>Item 5</li>
|
|
244
|
+
</ul>
|
|
245
|
+
|
|
246
|
+
<hr>
|
|
247
|
+
|
|
248
|
+
<ul class="nav nav--banner">
|
|
249
|
+
<li>Item 1</li>
|
|
250
|
+
<li>Item 2</li>
|
|
251
|
+
<li>Item 3</li>
|
|
252
|
+
<li>Item 4</li>
|
|
253
|
+
<li>Item 5</li>
|
|
254
|
+
</ul>
|
|
255
|
+
|
|
256
|
+
<hr>
|
|
257
|
+
|
|
258
|
+
<ul class="nav nav--elastic">
|
|
259
|
+
<li>Item 1</li>
|
|
260
|
+
<li>Item 2</li>
|
|
261
|
+
<li>Item 3</li>
|
|
262
|
+
<li>Item 4</li>
|
|
263
|
+
<li>Item 5</li>
|
|
264
|
+
</ul>
|
|
265
|
+
|
|
266
|
+
</div>
|
|
267
|
+
</article>
|
|
268
|
+
|
|
269
|
+
<!--
|
|
270
|
+
Split object
|
|
271
|
+
===========================================================================
|
|
272
|
+
-->
|
|
273
|
+
|
|
274
|
+
<article id="abstractions__split" class="push--top">
|
|
275
|
+
<h3>Split object</h3>
|
|
276
|
+
<div class="test push--top push--bottom">
|
|
277
|
+
<div class="split">
|
|
278
|
+
<div class="split__left">
|
|
279
|
+
To the left
|
|
280
|
+
</div>
|
|
281
|
+
<div>
|
|
282
|
+
To the right
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</article>
|
|
287
|
+
|
|
288
|
+
<!--
|
|
289
|
+
Flexbox object
|
|
290
|
+
===========================================================================
|
|
291
|
+
-->
|
|
292
|
+
|
|
293
|
+
<article id="abstractions__flexbox" class="push--top">
|
|
294
|
+
<h3>Flexbox object</h3>
|
|
295
|
+
<div class="test push--top push--bottom">
|
|
296
|
+
<div class="flexbox">
|
|
297
|
+
<div class="flexbox__item">Item 1</div>
|
|
298
|
+
<div class="flexbox__item">Item 2</div>
|
|
299
|
+
<div class="flexbox__item">Item 3</div>
|
|
300
|
+
<div class="flexbox__item">Item 4</div>
|
|
301
|
+
<div class="flexbox__item">Item 5</div>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</article>
|
|
305
|
+
|
|
306
|
+
<!--
|
|
307
|
+
Island object
|
|
308
|
+
===========================================================================
|
|
309
|
+
-->
|
|
310
|
+
|
|
311
|
+
<article id="abstractions__island" class="push--top">
|
|
312
|
+
<h3>Island object</h3>
|
|
313
|
+
<div class="test push--top push--bottom">
|
|
314
|
+
<div class="island">Island</div>
|
|
315
|
+
<hr>
|
|
316
|
+
<div class="islet">Islet</div>
|
|
317
|
+
<hr>
|
|
318
|
+
<div class="nauru">Nauru</div>
|
|
319
|
+
</div>
|
|
320
|
+
</article>
|
|
321
|
+
|
|
322
|
+
</section>
|
|
323
|
+
|
|
324
|
+
<hr>
|
|
325
|
+
|
|
326
|
+
<!--
|
|
327
|
+
==========================================================================
|
|
328
|
+
Images
|
|
329
|
+
===========================================================================
|
|
330
|
+
-->
|
|
331
|
+
|
|
332
|
+
<section id="type" class="push--top">
|
|
333
|
+
<h2>Images</h2>
|
|
334
|
+
|
|
335
|
+
<!--
|
|
336
|
+
Image placement
|
|
337
|
+
===========================================================================
|
|
338
|
+
-->
|
|
339
|
+
|
|
340
|
+
<article id="images__placement" class="push--top">
|
|
341
|
+
<h3>Image placement</h3>
|
|
342
|
+
<div class="test push--top push--bottom">
|
|
343
|
+
<div class="cf">
|
|
344
|
+
<img src="http://www.fillmurray.com/120/120" alt="" width="60" class="img--center">
|
|
345
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro obcaecati non asperiores maxime nihil rerum optio unde sequi iure ipsam. Quisquam, animi, recusandae fugit labore ut reprehenderit rerum asperiores libero.</div>
|
|
346
|
+
</div>
|
|
347
|
+
<hr>
|
|
348
|
+
<div class="cf">
|
|
349
|
+
<img src="http://www.fillmurray.com/120/120" alt="" width="60" class="img--left">
|
|
350
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, placeat, odio adipisci quaerat impedit sed nam repudiandae laboriosam earum libero quo debitis reprehenderit explicabo aliquam quis fugit facilis accusantium voluptas?</div>
|
|
351
|
+
</div>
|
|
352
|
+
<hr>
|
|
353
|
+
<div class="cf">
|
|
354
|
+
<img src="http://www.fillmurray.com/120/120" alt="" width="60" class="img--right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
355
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos consectetur vero. Laborum, cumque, veritatis, consequuntur exercitationem ducimus autem libero perferendis vitae cupiditate sapiente itaque sint earum nobis necessitatibus excepturi.</div>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</article>
|
|
359
|
+
|
|
360
|
+
<hr>
|
|
361
|
+
|
|
362
|
+
<!--
|
|
363
|
+
Image thumbnails
|
|
364
|
+
===========================================================================
|
|
365
|
+
-->
|
|
366
|
+
|
|
367
|
+
<article id="images__thumbnails" class="push--top">
|
|
368
|
+
<h3>Image thumbnails</h3>
|
|
369
|
+
<div class="test push--top push--bottom">
|
|
370
|
+
<img src="http://www.fillmurray.com/120/120" alt="" width="60" class="thumbnail-rounded">
|
|
371
|
+
<img src="http://www.fillmurray.com/120/120" alt="" width="60" class="thumbnail-circle">
|
|
372
|
+
<img src="http://www.fillmurray.com/120/120" alt="" width="60" class="thumbnail-polaroid">
|
|
373
|
+
</div>
|
|
374
|
+
</article>
|
|
375
|
+
|
|
376
|
+
</section>
|
|
377
|
+
|
|
378
|
+
<hr>
|
|
379
|
+
</div>
|
|
380
|
+
</body>
|
|
381
|
+
</html>
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Prelude settings
|
|
3
|
+
//
|
|
4
|
+
// Table of contents:
|
|
5
|
+
// 1. Base
|
|
6
|
+
// 2. Colors
|
|
7
|
+
// 3. Typography
|
|
8
|
+
// 4. Forms
|
|
9
|
+
// 5. Tables
|
|
10
|
+
// 6. Buttons
|
|
11
|
+
// 7. Debug mode
|
|
12
|
+
//
|
|
13
|
+
// =============================================================================
|
|
14
|
+
|
|
15
|
+
// =============================================================================
|
|
16
|
+
// 1. Base
|
|
17
|
+
// =============================================================================
|
|
18
|
+
|
|
19
|
+
//Border radius
|
|
20
|
+
$default-border-radius: 4px; // default: 4px
|
|
21
|
+
|
|
22
|
+
// =============================================================================
|
|
23
|
+
// 2. Colors
|
|
24
|
+
// =============================================================================
|
|
25
|
+
|
|
26
|
+
// Grays
|
|
27
|
+
$white: #fff; // default: #fff
|
|
28
|
+
$gray-lighter: #e9e9e9; // default: #ccc
|
|
29
|
+
$gray-light: #999; // default: #999
|
|
30
|
+
$gray: #777; // default: #777
|
|
31
|
+
$gray-dark: #555; // default: #555
|
|
32
|
+
$gray-darker: #333; // default: #333
|
|
33
|
+
$black: #000; // default: #000
|
|
34
|
+
|
|
35
|
+
// Accent Colors
|
|
36
|
+
$red: #9d261d; // default: #9d261d
|
|
37
|
+
$green: #349D76; // default: #349D76
|
|
38
|
+
$blue: #36C; // default: #36C
|
|
39
|
+
$yellow: #fffbe4; // default: #fffbe4
|
|
40
|
+
$orange: #f89406; // default: #f89406
|
|
41
|
+
$pink: #fa5b7d; // default: #fa5b7d
|
|
42
|
+
$purple: #7a43b6; // default: #7a43b6
|
|
43
|
+
|
|
44
|
+
// Link Colors
|
|
45
|
+
$link-color: $blue; // default: $blue
|
|
46
|
+
$link-hover-color: $pink; // default: $pink
|
|
47
|
+
|
|
48
|
+
// Text Colors
|
|
49
|
+
$base-text-color: $gray-darker; // default: $gray-darker
|
|
50
|
+
$strong-text-color: $black; // default: $black
|
|
51
|
+
$weak-text-color: $gray; // default: $gray
|
|
52
|
+
$header-color: $gray-lighter; // default: $gray-lighter
|
|
53
|
+
$blockquote-color: $gray-lighter; // default: $gray-lighter
|
|
54
|
+
|
|
55
|
+
// Line & Border colors
|
|
56
|
+
$line-color: #e6e6e6; // default: #e6e6e6
|
|
57
|
+
|
|
58
|
+
// =============================================================================
|
|
59
|
+
// 3. Typography
|
|
60
|
+
// =============================================================================
|
|
61
|
+
|
|
62
|
+
// Vertical Rythm
|
|
63
|
+
$base-font-size: $base-font-size; // default: $base-font-size (from Compass)
|
|
64
|
+
$base-line-height: $base-line-height; // default: $base-line-height (From Compass)
|
|
65
|
+
|
|
66
|
+
$base-spacing-unit: $base-line-height; // default: $base-line-height
|
|
67
|
+
$half-spacing-unit: $base-spacing-unit / 2; // default: $base-spacing-unit / 2
|
|
68
|
+
$quarter-spacing-unit: $half-spacing-unit / 2; // default: $half-spacing-unit / 2
|
|
69
|
+
|
|
70
|
+
// Typographic scale
|
|
71
|
+
$giga: 117px; // default 117px
|
|
72
|
+
$mega: 90px; // default 90px
|
|
73
|
+
$kilo: 72px; // default 72px
|
|
74
|
+
$alpha: 60px; // default 60px
|
|
75
|
+
$beta: 48px; // default 48px
|
|
76
|
+
$gamma: 36px; // default 36px
|
|
77
|
+
$delta: 24px; // default 24px
|
|
78
|
+
$epsilon: 21px; // default 21px
|
|
79
|
+
$zeta: 18px; // default 18px
|
|
80
|
+
$milli: 16px; // default 16px
|
|
81
|
+
$micro: 14px; // default 14px
|
|
82
|
+
$nano: 11px; // default 11px
|
|
83
|
+
|
|
84
|
+
// Fonts
|
|
85
|
+
$base-font-family: "Helvetica Neue", Arial, sans-serif; // default: "Helvetica Neue", Arial, sans-serif
|
|
86
|
+
$alternate-font-family: Georgia, "Times New Roman", serif; // default: Georgia, "Times New Roman", serif
|
|
87
|
+
$headings-font-family: $base-font-family; // default: $base-font-family
|
|
88
|
+
|
|
89
|
+
// Brand
|
|
90
|
+
$brand-face: $base-font-family; // default: $base-font-family
|
|
91
|
+
$brand-color: $green; // default: $black
|
|
92
|
+
|
|
93
|
+
// Colors
|
|
94
|
+
$subheader-color: $gray-light; // default: $gray-light
|
|
95
|
+
|
|
96
|
+
// =============================================================================
|
|
97
|
+
// 4. Forms
|
|
98
|
+
// =============================================================================
|
|
99
|
+
|
|
100
|
+
$input-background: $white; // default: $white
|
|
101
|
+
$input-border: #ccc; // default: #ccc
|
|
102
|
+
$input-border-radius: 3px; // default: 3px
|
|
103
|
+
$input-disabled-background: $gray-lighter; // default: $gray-lighter
|
|
104
|
+
$form-actions-background: #f5f5f5; // default: #f5f5f5
|
|
105
|
+
|
|
106
|
+
// Form states and alerts
|
|
107
|
+
// =============================================================================
|
|
108
|
+
|
|
109
|
+
$warning-text: #c09853; // default: #c09853
|
|
110
|
+
$warning-background: #fcf8e3; // default: #fcf8e3
|
|
111
|
+
$warning-border: darken(adjust-hue($warning-background, -10), 3%); // default: darken(adjust-hue($warning-background, -10), 3%)
|
|
112
|
+
|
|
113
|
+
$error-text: #b94a48; // default: #b94a48
|
|
114
|
+
$error-background: #f2dede; // default: #f2dede
|
|
115
|
+
$error-border: darken(adjust-hue($error-background, -10), 3%); // default: darken(adjust-hue($error-background, -10), 3%)
|
|
116
|
+
|
|
117
|
+
$success-text: #468847; // default: #468847
|
|
118
|
+
$success-background: #dff0d8; // default: #dff0d8
|
|
119
|
+
$success-border: darken(adjust-hue($success-background, -10), 5%); // default: darken(adjust-hue($success-background, -10), 5%)
|
|
120
|
+
|
|
121
|
+
$info-text: #3a87ad; // default: #3a87ad
|
|
122
|
+
$info-background: #d9edf7; // default: #d9edf7
|
|
123
|
+
$info-border: darken(adjust-hue($info-background, -10), 7%); // default: darken(adjust-hue($info-background, -10), 7%)
|
|
124
|
+
|
|
125
|
+
// =============================================================================
|
|
126
|
+
// 5. Tables
|
|
127
|
+
// =============================================================================
|
|
128
|
+
|
|
129
|
+
$table-background: transparent; // default: transparent
|
|
130
|
+
$table-background-stripe: #f1f1f1; // default: #f1f1f1
|
|
131
|
+
$table-background-hover: #f1f1f1; // default: #f1f1f1
|
|
132
|
+
$table-border: $line-color; // default: $line-color
|
|
133
|
+
|
|
134
|
+
// =============================================================================
|
|
135
|
+
// 6. Buttons
|
|
136
|
+
// =============================================================================
|
|
137
|
+
|
|
138
|
+
$btn-font-weight: normal; // default: normal
|
|
139
|
+
$btn-border-radius: 6px; // default: none
|
|
140
|
+
$btn-padding: .35em 1.5em; // default: .35em 1.5em
|
|
141
|
+
|
|
142
|
+
$btn-use-gradient: false; // default: false
|
|
143
|
+
$btn-use-shadow: false; // default: false
|
|
144
|
+
|
|
145
|
+
$create-btn-styles: true; // default: true
|
|
146
|
+
|
|
147
|
+
$btn-background: #f1f1f1; // default: #f1f1f1
|
|
148
|
+
$btn-primary-background: $link-color; // default: $link-color
|
|
149
|
+
$btn-info-background: #5bc0de; // default: #5bc0de
|
|
150
|
+
$btn-success-background: lighten($green, 15%); // default: lighten($green, 15%)
|
|
151
|
+
$btn-warning-background: lighten($orange, 15%); // default: lighten($orange, 15%)
|
|
152
|
+
$btn-danger-background: #ee5f5b; // default: #ee5f5b
|
|
153
|
+
$btn-inverse-background: $gray; // default: $gray
|
|
154
|
+
|
|
155
|
+
// =============================================================================
|
|
156
|
+
// 7. Debug mode
|
|
157
|
+
// =============================================================================
|
|
158
|
+
|
|
159
|
+
$debug-mode: false; // default: false
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Prelude Test Bed
|
|
3
|
+
// =============================================================================
|
|
4
|
+
|
|
5
|
+
// Prelude framework import
|
|
6
|
+
@import "compass",
|
|
7
|
+
"prelude-settings",
|
|
8
|
+
"prelude",
|
|
9
|
+
"prelude/all";
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
// =============================================================================
|
|
13
|
+
// Main wrapper
|
|
14
|
+
// =============================================================================
|
|
15
|
+
|
|
16
|
+
.wrapper {
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
padding: 0 2em;
|
|
19
|
+
max-width: 990px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
// =============================================================================
|
|
24
|
+
// Responsive font styles
|
|
25
|
+
// =============================================================================
|
|
26
|
+
|
|
27
|
+
@media screen and (max-width: pixels-to-ems(400px)) {
|
|
28
|
+
@include set-font-size(14px, 14px * 1.35);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
// =============================================================================
|
|
33
|
+
// Test blocks
|
|
34
|
+
// =============================================================================
|
|
35
|
+
|
|
36
|
+
.test {
|
|
37
|
+
padding: $base-spacing-unit;
|
|
38
|
+
background-color: $gray-lighter;
|
|
39
|
+
border-radius: $default-border-radius;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
// =============================================================================
|
|
44
|
+
// Buttons
|
|
45
|
+
// =============================================================================
|
|
46
|
+
|
|
47
|
+
.buttons-with-gradient {
|
|
48
|
+
.btn { @include btn-style($btn-background, true); }
|
|
49
|
+
.btn--primary { @include btn-style($btn-primary-background, true); }
|
|
50
|
+
.btn--info { @include btn-style($btn-info-background, true); }
|
|
51
|
+
.btn--success { @include btn-style($btn-success-background, true); }
|
|
52
|
+
.btn--warning { @include btn-style($btn-warning-background, true); }
|
|
53
|
+
.btn--danger { @include btn-style($btn-danger-background, true); }
|
|
54
|
+
.btn--inverse { @include btn-style($btn-inverse-background, true); }
|
|
55
|
+
}
|