forked from johno/furtive
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
401 lines (376 loc) · 15.3 KB
/
index.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
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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<title>Furtive CSS</title>
<meta name="author" content="John Otander">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A forward-thinking, CSS micro-framework. Minimal by design.">
<link rel="stylesheet" href="site/index.furtive.min.css">
</head>
<body>
<div class="py2">
<div class="txt--center">
<h1 class="h2">
Furtive<br>
<small class="small muted">A forward-thinking, CSS micro-framework (3.92kB gzipped).</small>
</h1>
<div class="my2">
<a href="https://github.com/johnotander/furtive.git" class="btn" title="Furtive source code">Github</a>
</div>
</div>
</div>
<div class="bg--off-white py2">
<section class="measure p2" id="why-furtive">
<h2>Why Furtive?</h2>
<p class="h4">
Furtive is <em>truly</em> mobile-first and nearly all dimensions are done in <code>rem</code>.
It also has a small footprint, cutting down on the bandwidth necessary for downloading CSS.
Furtive is intended to be just that, furtive. It's the perfect starting point to get your project
up and running.
</p>
<p class="h4">
Furtive remains lightweight because it doesn't preoccupy itself with older browsers. As
a result, Furtive can use cutting edge tech like <a href="http://caniuse.com/#search=flexbox">flexbox</a>,
<a href="http://caniuse.com/#search=svg">SVGs</a>, and limited vendor prefixing. It's also available in
SCSS, CSS, and comes with a gulpfile for customizing the build.
</p>
</section>
</div>
<div class="py2 bg--off-white" id="grid">
<div class="measure p2">
<h3>Responsive Grid System</h3>
<p class="h4">
Furtive comes with a responsive grid system based on <code>display: flex;</code>. There are 6 available columns,
however this is easy to customize since it's dynamically generated as part of the build process with
<a href="https://github.com/johnotander/rework-flex-grid">rework-flex-grid</a>.
</p>
<div class="grd bg--off-white brdr--white p2 small">
<div class="txt--center">
<code> .grd > .grd-row > .grd-row-col</code>
</div>
<div class="grd-row my1">
<div class="grd-row-col-1-6 bg--light-gray py1">
<code> .col-1</code>
</div>
<div class="grd-row-col-5-6 py1 bg--white">
<code> .col-5</code>
</div>
</div>
<div class="grd-row my1">
<div class="grd-row-col-2-6 bg--light-gray py1">
<code> .col-2</code>
</div>
<div class="grd-row-col-4-6 py1 bg--white">
<code> .col-4</code>
</div>
</div>
<div class="grd-row my1">
<div class="grd-row-col-3-6 bg--light-gray py1">
<code> .col-3</code>
</div>
<div class="grd-row-col-3-6 py1 bg--white">
<code> .col-3</code>
</div>
</div>
<div class="grd-row my1">
<div class="grd-row-col-4-6 bg--light-gray py1">
<code> .col-4</code>
</div>
<div class="grd-row-col-2-6 py1 bg--white">
<code> .col-2</code>
</div>
</div>
<div class="grd-row my1">
<div class="grd-row-col-5-6 bg--light-gray py1">
<code> .col-5</code>
</div>
<div class="grd-row-col-1-6 py1 bg--white">
<code> .col-1</code>
</div>
</div>
<div class="grd-row my1">
<div class="grd-row-col-6 bg--light-gray py1">
<code> .col-6</code>
</div>
</div>
</div>
</div>
</div>
<section class="measure p2" id="buttons">
<h3>Buttons</h3>
<p class="h4">
There are only a few buttons included, to keep the footprint small. However, the <code>.btn</code>
class can be extended to add custom colors and styling.
</p>
<a href="#!" class="w100--s my1 btn" title="Furtive button example">.btn</a>
<a href="#!" class="w100--s my1 btn--blue" title="Furtive button example">.btn--blue</a>
<a href="#!" class="w100--s my1 btn--green" title="Furtive button example">.btn--green</a>
<a href="#!" class="w100--s my1 btn--gray" title="Furtive button example">.btn--gray</a>
<a href="#!" class="w100--s my1 btn--link" title="Furtive button example">.btn--link</a>
<h4 class="muted">Small buttons</h4>
<p class="h4">
You can also add <code>.btn--s</code> for smaller buttons.
</p>
<a href="#!" class="w100--s my1 btn btn--s" title="Furtive button example.">.btn</a>
<a href="#!" class="w100--s my1 btn--blue btn--s" title="Furtive button example.">.btn--blue.btn--s</a>
<a href="#!" class="w100--s my1 btn--green btn--s" title="Furtive button example.">.btn--green.btn--s</a>
<a href="#!" class="w100--s my1 btn--gray btn--s" title="Furtive button example.">.btn--gray.btn--s</a>
<a href="#!" class="w100--s my1 btn--link btn--s" title="Furtive button example.">.btn--link.btn--s</a>
</section>
<div class="bg--off-white py2">
<section class="measure p2" id="forms">
<h3>Forms</h3>
<p class="h4">
Forms are typically a key component for most websites and web applications. As
such, Furtive seeks to keep them consistent, coherent, and elegant for all devices.
</p>
<form action="#" role="form" class="my2">
<label for="name">Name</label>
<input type="text" name="name" placeholder="Enter your name...">
<label for="email">Email</label>
<input type="email" name"email" placeholder="user@example.com">
<label for="password">Password</label>
<input type="password" name="password" placeholder="8 characters or more...">
<label for="bio">Bio</label>
<textarea name="bio" rows="3" placeholder="Tell us about yourself..."></textarea>
<input type="submit" value="Create Account" class="btn--blue">
</form>
</section>
</div>
<section class="measure p2" id="media-object">
<h3>Media Objects</h3>
<p class="h4">
As <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/" title="Media object article by Stubbornella">Stubbornella</a>
would say, the media object saves hundreds of lines of code. Furtive is inclined to agree.
</p>
<div class="media py2">
<div class="media-figure">
<img src="http://www.gravatar.com/avatar/2e52ef263083c77e2a0a24454dc6f369.png" alt="John Otander avatar">
</div>
<div class="media-body">
<h6 class="m0 p0">John Otander</h6>
<p class="m0 p0">
I think the media objects using <code>flex</code> are pretty rad. The CSS is lightweight, and can be
reused all over the place. Everyone's happy.
</p>
<div class="media py2">
<div class="media-figure">
<img src="http://www.gravatar.com/avatar/2e52ef263083c77e2a0a24454dc6f369.png" alt="John Otander avatar">
</div>
<div class="media-body">
<h6 class="m0 p0">John Otander</h6>
<p class="m0 p0">
They even nest. Not bad for about 10 lines of CSS. Now we wait for caniuse to report more favorably
for the flex box.
</p>
</div>
</div>
</div>
</div>
</section>
<div class="bg--off-white py2">
<section class="measure p2" id="tables">
<h3>Tables</h3>
<p class="h4">
Tables are responsive, and beautiful, right out of the box.
</p>
<div class="oflow-y--scroll bg--white my2 p2">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>twitter</th>
<th>email</th>
<th>website</th>
<th>beer</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>@4lpine</td>
<td>johnotander@gmail.com</td>
<td><a href="http://johnotander.com" title="John Otander's website.">johnotander.com</a></td>
<td>Fresh Squeezed IPA</td>
</tr>
<tr>
<td>2</td>
<td>Ryan</td>
<td>@sessynine</td>
<td>sessynine@gmail.com</td>
<td><a href="http://sessynine.com" title="Ryan Shelton's website.">sessynine.com</a></td>
<td>Coors Light</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<section class="measure p2" id="colors">
<h3>Colors</h3>
<p class="h4">
Inspiration is drawn from <a href="http://clrs.cc" title="Colors.css website">colors.css</a> and
<a href="http://getbootstrap.com" title="Bootstrap website">bootstrap</a> to provide helper classes
and variables.
</p>
<h4 class="muted" id="background-color">Backgrounds</h4>
<p class="h4">
There's an assortment of background colors that can be used for flash messages,
table headings... anything.
</p>
<div class="bg--white p2">.bg--white</div>
<div class="bg--off-white p2">.bg--off-white</div>
<div class="bg--light-gray p2">.bg--light-gray</div>
<div class="bg--mid-gray p2 fnt--white">.bg--mid-gray</div>
<div class="bg--dark-gray p2 fnt--white">.bg--dark-gray</div>
<div class="bg--red p2">.bg--red</div>
<div class="bg--orange p2">.bg--orange</div>
<div class="bg--blue p2">.bg--blue</div>
<div class="bg--green p2">.bg--green</div>
<h4 class="muted" id="borders">Borders</h4>
<p class="h4">
There are a few border classes to take advantage of in order to frame content.
</p>
<div class="brdr--off-white p1 my1">.brdr--off-white</div>
<div class="brdr--light-gray p1 my1">.brdr--light-gray</div>
<div class="brdr--mid-gray p1 my1">.brdr--mid-gray</div>
<div class="brdr--dark-gray p1 my1">.brdr--dark-gray</div>
<h4 class="muted" id="text-color">Text Colors</h4>
<p class="h4">
You can also modify the text color.
</p>
<span class="fnt--white bg--light-gray">.fnt--white</span>
<span class="fnt--off-white bg--light-gray">.fnt--off-white</span> <br>
<span class="fnt--light-gray">.fnt--light-gray</span>
<span class="fnt--mid-gray">.fnt--mid-gray</span>
<span class="fnt--dark-gray">.fnt--dark-gray</span>
<span class="fnt--red">.fnt--red</span>
<span class="fnt--orange">.fnt--orange</span>
<span class="fnt--blue">.fnt--blue</span>
<span class="fnt--green">.fnt--green</span>
</section>
<div class="bg--off-white py2">
<section class="measure p2" id="lists">
<h3>Lists</h3>
<p class="h4">
Simple, elegant, and nearly raw HTML. Some things don't really need to change.
</p>
<h4 class="muted">Ordered</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
<h4 class="muted">Unordered</h4>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Citrus</li>
<ul>
<li>Limes</li>
<li>Oranges</li>
<li>Grapefruit</li>
</ul>
</ul>
<h4 class="muted">Unstyled</h4>
<ul class="list--unstyled">
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</section>
</div>
<section class="measure p2" id="utilities">
<h3>Utilities</h3>
<p class="h4">
There's a collection of utility classes for modifying the interface.
</p>
<h4 class="muted">Padding</h4>
<div class="p0 my1 brdr--light-gray">.p0</div>
<div class="p1 my1 brdr--light-gray">.p1</div>
<div class="p2 my1 brdr--light-gray">.p2</div>
<div class="py1 my1 brdr--light-gray">.py1</div>
<div class="py2 my1 brdr--light-gray">.py2</div>
<div class="px1 my1 brdr--light-gray">.px1</div>
<div class="px2 my1 brdr--light-gray">.px2</div>
<h4 class="muted">Margin</h4>
<div class="m0 p1 brdr--light-gray">.m0</div>
<div class="m1 p1 brdr--light-gray">.m1</div>
<div class="m2 p1 brdr--light-gray">.m2</div>
<div class="my1 p1 brdr--light-gray">.my1</div>
<div class="my2 p1 brdr--light-gray">.my2</div>
<div class="mx1 p1 brdr--light-gray">.mx1</div>
<div class="mx2 p1 brdr--light-gray">.mx2</div>
<h4 class="muted" id="floats">Floats</h4>
<dl>
<dt>Float Left</dt>
<dd><code>.flt--left</code></dd>
<dt>Float Right</dt>
<dd><code>.flt--right</code></dd>
<dt>Float None</dt>
<dd><code>.flt--none</code></dd>
</dl>
<h4 class="muted" id="text-alignment">Text Alignment</h4>
<div class="p2 my1 txt--left bg--off-white">.txt--left</div>
<div class="p2 my1 txt--right bg--off-white">.txt--right</div>
<div class="p2 my1 txt--center bg--off-white">.txt--center</div>
</section>
<div class="bg--off-white py2">
<section class="measure p2" id="type">
<h3>Type</h3>
<p class="h4">
The typography is minimal, and full of contrast. Not to mention, all the key components
are based on Scss variables that can be changed to give a custom look and feel.
</p>
<h4 class="muted">Utilities</h4>
<p class="h4">
In order to ensure that you can modify type styling on the fly,
there are <span class="italic">italics</span>, <span class="thin">thin</span>,
<span class="bold">bold</span>, <span class="caps">caps</span>, and
<span class="small">small</span>, <span class="muted">muted</span>,
<code>code</code> classes.
</p>
<h4 class="muted" id="headings">Headings</h4>
<p class="h4">
There are also heading classes available the represent heading styles. This results
in semantic HTML that still has the styling that you are looking for.
</p>
<p>
<span class="h1">.h1</span>
<span class="h2">.h2</span>
<span class="h3">.h3</span>
<span class="h4">.h4</span>
<span class="h5">.h5</span>
<span class="h6">.h6</span>
</p>
</section>
</div>
<div class="p2 measure">
<div class="py2">
<h4 class="h2">Installing Furtive</h4>
<code>$ npm install --save furtive</code> <br>
<code>$ bower install --save furtive</code> <br>
<code>$ git clone <a href="https://github.com/johnotander/furtive">https://github.com/johnotander/furtive</a></code>
</div>
</div>
<footer class="txt--center p2">
<p class="small p2">
Crafted with <3 by <a href="http://johnotander.com" title="John Otander's website">John Otander</a>
(<a href="https://twitter.com/4lpine" title="John Otander on Twitter (@4lpine)">@4lpine</a>). <br>
</> available on <a href="https://github.com/johnotander/furtive" title="Furtive source code">Github</a>.
</p>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55121523-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>