atlas_assets 0.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.
Files changed (53) hide show
  1. data/.gitignore +2 -0
  2. data/Gemfile +15 -0
  3. data/Gemfile.lock +86 -0
  4. data/LICENSE +22 -0
  5. data/Procfile +1 -0
  6. data/README.md +36 -0
  7. data/Rakefile +16 -0
  8. data/_config.yml +13 -0
  9. data/atlas_assets.gemspec +21 -0
  10. data/config.ru +9 -0
  11. data/docs/.gitignore +1 -0
  12. data/docs/404.html +1 -0
  13. data/docs/_layouts/default.html +56 -0
  14. data/docs/_plugins/jekyll_assets.rb +3 -0
  15. data/docs/_posts/2013-05-17-buttons.md +43 -0
  16. data/docs/_posts/2013-05-17-flash.md +58 -0
  17. data/docs/_posts/2013-05-17-fonts.md +26 -0
  18. data/docs/_posts/2013-05-17-grid.md +60 -0
  19. data/docs/_posts/2013-05-17-helpers.md +9 -0
  20. data/docs/_posts/2013-05-17-icons.md +1089 -0
  21. data/docs/_posts/2013-05-17-lists.md +76 -0
  22. data/docs/_posts/2013-05-17-navbar.md +73 -0
  23. data/docs/_posts/2013-05-21-forms.md +423 -0
  24. data/docs/index.html +31 -0
  25. data/lib/assets/fonts/atlas.eot +0 -0
  26. data/lib/assets/fonts/atlas.svg +279 -0
  27. data/lib/assets/fonts/atlas.ttf +0 -0
  28. data/lib/assets/fonts/atlas.woff +0 -0
  29. data/lib/assets/javascripts/atlas_assets.js +9 -0
  30. data/lib/assets/javascripts/backbone.js +1572 -0
  31. data/lib/assets/javascripts/jquery.js +9405 -0
  32. data/lib/assets/javascripts/jquery_ujs.js +378 -0
  33. data/lib/assets/javascripts/keypress.js +20 -0
  34. data/lib/assets/javascripts/pusher.js +101 -0
  35. data/lib/assets/javascripts/setup.js +35 -0
  36. data/lib/assets/javascripts/string.js +912 -0
  37. data/lib/assets/javascripts/underscore.js +1228 -0
  38. data/lib/assets/stylesheets/atlas_assets.css +10 -0
  39. data/lib/assets/stylesheets/buttons.css.scss +56 -0
  40. data/lib/assets/stylesheets/flash.css.scss +32 -0
  41. data/lib/assets/stylesheets/fonts.css.scss +66 -0
  42. data/lib/assets/stylesheets/forms.css.scss +861 -0
  43. data/lib/assets/stylesheets/grid.css.scss +762 -0
  44. data/lib/assets/stylesheets/helpers.css.scss +55 -0
  45. data/lib/assets/stylesheets/icons.css.scss +823 -0
  46. data/lib/assets/stylesheets/lists.css.scss +73 -0
  47. data/lib/assets/stylesheets/navbar.css.scss +121 -0
  48. data/lib/assets/stylesheets/pre.css.scss +7 -0
  49. data/lib/atlas_assets/engine.rb +8 -0
  50. data/lib/atlas_assets/version.rb +5 -0
  51. data/lib/atlas_assets.rb +1 -0
  52. data/rails/init.rb +1 -0
  53. metadata +114 -0
@@ -0,0 +1,76 @@
1
+ ---
2
+ layout: default
3
+ title: "Lists"
4
+ date: 2013-05-17 23:24:04
5
+ ---
6
+
7
+ Lists
8
+ =====
9
+
10
+ You can style any list by adding the class `.list` to the `ul` or `div` container, and the class `.list-item` to every single item in the list. The default list item does not have any padding, in order to allow custom styling.
11
+
12
+ <ul class="list">
13
+ <li class="list-item">Item 1</li>
14
+ <li class="list-item">Item 2</li>
15
+ <li class="list-item">Item 3</li>
16
+ <li class="list-item">Item 4</li>
17
+ </ul>
18
+
19
+ ~~~html
20
+ <ul class="list">
21
+ <li class="list-item">Item 1</li>
22
+ <li class="list-item">Item 2</li>
23
+ <li class="list-item">Item 3</li>
24
+ <li class="list-item">Item 4</li>
25
+ </ul>
26
+ ~~~
27
+
28
+ Links
29
+ -----
30
+
31
+ If you have a link in the list, it will apply a default padding to the links.
32
+
33
+ <ul class="list">
34
+ <li class="list-item"><a href="#">Item 1</a></li>
35
+ <li class="list-item"><a href="#">Item 2</a></li>
36
+ <li class="list-item"><a href="#">Item 3</a></li>
37
+ <li class="list-item"><a href="#">Item 4</a></li>
38
+ </ul>
39
+
40
+ ~~~html
41
+ <ul class="list">
42
+ <li class="list-item"><a href="#">Item 1</a></li>
43
+ <li class="list-item"><a href="#">Item 2</a></li>
44
+ <li class="list-item"><a href="#">Item 3</a></li>
45
+ <li class="list-item"><a href="#">Item 4</a></li>
46
+ </ul>
47
+ ~~~
48
+
49
+ Link Arrow
50
+ ----------
51
+
52
+ You can add a arrow icon, which will automatically flow to the right of the list.
53
+
54
+ <ul class="list">
55
+ <li class="list-item"><a href="#">Item 1<i class="icon-arrow-right-2"></i></a></li>
56
+ <li class="list-item"><a href="#">Item 2<i class="icon-arrow-right-2"></i></a></li>
57
+ <li class="list-item"><a href="#">Item 3<i class="icon-arrow-right-2"></i></a></li>
58
+ <li class="list-item"><a href="#">Item 4<i class="icon-arrow-right-2"></i></a></li>
59
+ </ul>
60
+
61
+ ~~~html
62
+ <ul class="list">
63
+ <li class="list-item">
64
+ <a href="#">Item 1<i class="icon-arrow-right-2"></i></a>
65
+ </li>
66
+ <li class="list-item">
67
+ <a href="#">Item 2<i class="icon-arrow-right-2"></i></a>
68
+ </li>
69
+ <li class="list-item">
70
+ <a href="#">Item 3<i class="icon-arrow-right-2"></i></a>
71
+ </li>
72
+ <li class="list-item">
73
+ <a href="#">Item 4<i class="icon-arrow-right-2"></i></a>
74
+ </li>
75
+ </ul>
76
+ ~~~
@@ -0,0 +1,73 @@
1
+ ---
2
+ layout: default
3
+ title: "Navbar"
4
+ date: 2013-05-17 23:24:04
5
+ ---
6
+
7
+ Navbar
8
+ ======
9
+
10
+ Basic Navbar
11
+ -------------
12
+
13
+ <div class="navbar">
14
+ <div class="navbar-inner">
15
+ <a class="brand" href="/">Brand</a>
16
+ <ul class="nav">
17
+ <li><a href="#">Item 1</a></li>
18
+ <li><a href="#">Item 2</a></li>
19
+ </ul>
20
+ </div>
21
+ </div>
22
+
23
+ ~~~html
24
+ <div class="navbar">
25
+ <div class="navbar-inner">
26
+ <a class="brand" href="/">Brand</a>
27
+ <ul class="nav">
28
+ <li><a href="#">Item 1</a></li>
29
+ <li><a href="#">Item 2</a></li>
30
+ </ul>
31
+ </div>
32
+ </div>
33
+ ~~~
34
+
35
+ Alignment
36
+ -------------
37
+
38
+ You can align a `.nav` to the right by appending a `.pull-right` class.
39
+
40
+ <div class="navbar">
41
+ <div class="navbar-inner">
42
+ <a class="brand" href="/">Brand</a>
43
+ <ul class="nav pull-right">
44
+ <li><a href="#">Item 1</a></li>
45
+ <li><a href="#">Item 2</a></li>
46
+ </ul>
47
+ </div>
48
+ </div>
49
+
50
+ ~~~html
51
+ <ul class="nav pull-right">
52
+ <li><a href="#">Item 1</a></li>
53
+ <li><a href="#">Item 2</a></li>
54
+ </ul>
55
+ ~~~
56
+
57
+ Forms
58
+ -----------------
59
+
60
+ <div class="navbar">
61
+ <div class="navbar-inner">
62
+ <a class="brand" href="/">Brand</a>
63
+ <ul class="nav pull-right">
64
+ <li><input type="text" placeholder="Search ..." /></li>
65
+ </ul>
66
+ </div>
67
+ </div>
68
+
69
+ ~~~html
70
+ <ul class="nav pull-right">
71
+ <li><input type="text" placeholder="Search ..." /></li>
72
+ </ul>
73
+ ~~~
@@ -0,0 +1,423 @@
1
+ ---
2
+ layout: default
3
+ title: "Forms"
4
+ date: 2013-05-17 23:24:04
5
+ ---
6
+
7
+ Forms
8
+ ======
9
+
10
+ Elements
11
+ --------
12
+
13
+ ### Input
14
+
15
+ Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Requires the use of a specified type at all times.
16
+
17
+ <div class="example">
18
+ <input type="text" placeholder="Text input">
19
+ </div>
20
+
21
+ ~~~html
22
+ <input type="text" placeholder="Text input">
23
+ ~~~
24
+
25
+ ### Textarea
26
+
27
+ Change rows attribute as necessary.
28
+
29
+ <div class="example">
30
+ <textarea rows="3"></textarea>
31
+ </div>
32
+
33
+ ~~~html
34
+ <textarea rows="3"></textarea>
35
+ ~~~
36
+
37
+ ### Checkbox
38
+
39
+ Checkboxes will stack on top of each other.
40
+
41
+ <div class="example">
42
+ <label class="checkbox">
43
+ <input type="checkbox" value="">Option
44
+ </label>
45
+ <label class="checkbox">
46
+ <input type="checkbox" value="">Option
47
+ </label>
48
+ </div>
49
+
50
+ ~~~html
51
+ <label class="checkbox">
52
+ <input type="checkbox" value="">Option
53
+ </label>
54
+ <label class="checkbox">
55
+ <input type="checkbox" value="">Option
56
+ </label>
57
+ ~~~
58
+
59
+ Add the class `.inline` to enable inline flow.
60
+
61
+ <div class="example">
62
+ <label class="checkbox inline">
63
+ <input type="checkbox" value="option1"> Option
64
+ </label>
65
+ <label class="checkbox inline">
66
+ <input type="checkbox" value="option2"> Option
67
+ </label>
68
+ </div>
69
+
70
+ ~~~html
71
+ <label class="checkbox inline">
72
+ <input type="checkbox" value="option1"> Option
73
+ </label>
74
+ <label class="checkbox inline">
75
+ <input type="checkbox" value="option2"> Option
76
+ </label>
77
+ ~~~
78
+
79
+ ### Radio
80
+
81
+ Radio boxes works in the exact same way as checkboxes.
82
+
83
+ ### Select
84
+
85
+ Specify a multiple="multiple" to show multiple options at once.
86
+
87
+ <div class="example">
88
+ <select>
89
+ <option>1</option>
90
+ <option>2</option>
91
+ <option>3</option>
92
+ <option>4</option>
93
+ <option>5</option>
94
+ </select>
95
+
96
+ <select multiple="multiple">
97
+ <option>1</option>
98
+ <option>2</option>
99
+ <option>3</option>
100
+ <option>4</option>
101
+ <option>5</option>
102
+ </select>
103
+ </div>
104
+
105
+ ~~~html
106
+ <select>
107
+ <option>1</option>
108
+ <option>2</option>
109
+ <option>3</option>
110
+ <option>4</option>
111
+ <option>5</option>
112
+ </select>
113
+
114
+ <select multiple="multiple">
115
+ <option>1</option>
116
+ <option>2</option>
117
+ <option>3</option>
118
+ <option>4</option>
119
+ <option>5</option>
120
+ </select>
121
+ ~~~
122
+
123
+
124
+
125
+ Default Style
126
+ -------------
127
+
128
+ Without any added classes, forms will be styled in a classic, unobtrusive style.
129
+
130
+ <div class="example">
131
+ <form>
132
+ <fieldset>
133
+ <legend>Legend</legend>
134
+ <label>Label name</label>
135
+ <input type="text" placeholder="Type something…">
136
+ <span class="help-block">Example block-level help text here.</span>
137
+ <label class="checkbox">
138
+ <input type="checkbox"> Check me out
139
+ </label>
140
+ <button type="submit" class="btn">Submit</button>
141
+ </fieldset>
142
+ </form>
143
+ </div>
144
+
145
+ ~~~html
146
+ <form>
147
+ <fieldset>
148
+ <legend>Legend</legend>
149
+ <label>Label name</label>
150
+ <input type="text" placeholder="Type something…">
151
+ <span class="help-block">Example block-level help text here.</span>
152
+ <label class="checkbox">
153
+ <input type="checkbox"> Check me out
154
+ </label>
155
+ <button type="submit" class="btn">Submit</button>
156
+ </fieldset>
157
+ </form>
158
+ ~~~
159
+
160
+
161
+ Inline Style
162
+ ---------------
163
+
164
+ Add `.form-inline` for left-aligned labels and inline-block controls for a compact layout.
165
+
166
+ <div class="example">
167
+ <form class="form-inline">
168
+ <input type="text" class="input-small" placeholder="Email">
169
+ <input type="password" class="input-small" placeholder="Password">
170
+ <label class="checkbox">
171
+ <input type="checkbox"> Remember me
172
+ </label>
173
+ <button type="submit" class="btn">Sign in</button>
174
+ </form>
175
+ </div>
176
+
177
+ ~~~html
178
+ <form class="form-inline">
179
+ <input type="text" class="input-small" placeholder="Email">
180
+ <input type="password" class="input-small" placeholder="Password">
181
+ <label class="checkbox">
182
+ <input type="checkbox"> Remember me
183
+ </label>
184
+ <button type="submit" class="btn">Sign in</button>
185
+ </form>
186
+ ~~~
187
+
188
+ Horizontal Style
189
+ ----------------
190
+
191
+ Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
192
+
193
+ * Add .form-horizontal to the form
194
+ * Wrap labels and controls in .control-group
195
+ * Add .control-label to the label
196
+ * Wrap any associated controls in .controls for proper alignment
197
+
198
+ <div class="example">
199
+ <form class="form-horizontal">
200
+ <div class="control-group">
201
+ <label class="control-label" for="inputEmail">Email</label>
202
+ <div class="controls">
203
+ <input type="text" id="inputEmail" placeholder="Email">
204
+ </div>
205
+ </div>
206
+ <div class="control-group">
207
+ <label class="control-label" for="inputPassword">Password</label>
208
+ <div class="controls">
209
+ <input type="password" id="inputPassword" placeholder="Password">
210
+ </div>
211
+ </div>
212
+ <div class="control-group">
213
+ <div class="controls">
214
+ <label class="checkbox">
215
+ <input type="checkbox"> Remember me
216
+ </label>
217
+ <button type="submit" class="btn">Sign in</button>
218
+ </div>
219
+ </div>
220
+ </form>
221
+ </div>
222
+
223
+ ~~~html
224
+ <form class="form-horizontal">
225
+ <div class="control-group">
226
+ <label class="control-label" for="inputEmail">Email</label>
227
+ <div class="controls">
228
+ <input type="text" id="inputEmail" placeholder="Email">
229
+ </div>
230
+ </div>
231
+ <div class="control-group">
232
+ <label class="control-label" for="inputPassword">Password</label>
233
+ <div class="controls">
234
+ <input type="password" id="inputPassword" placeholder="Password">
235
+ </div>
236
+ </div>
237
+ <div class="control-group">
238
+ <div class="controls">
239
+ <label class="checkbox">
240
+ <input type="checkbox"> Remember me
241
+ </label>
242
+ <button type="submit" class="btn">Sign in</button>
243
+ </div>
244
+ </div>
245
+ </form>
246
+ ~~~
247
+
248
+ Grid Sizing
249
+ -----------
250
+
251
+ You can use `.span1` to `.span12` for inputs that match the same sizes of the grid columns.
252
+
253
+ <div class="example">
254
+ <input class="span1" type="text" placeholder=".span1">
255
+ <input class="span2" type="text" placeholder=".span2">
256
+ <input class="span3" type="text" placeholder=".span3">
257
+ </div>
258
+
259
+ ~~~html
260
+ <input class="span1" type="text" placeholder=".span1">
261
+ <input class="span2" type="text" placeholder=".span2">
262
+ <input class="span3" type="text" placeholder=".span3">
263
+ ~~~
264
+
265
+ For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.
266
+
267
+ <div class="example">
268
+ <div class="controls">
269
+ <input class="span7" type="text" placeholder=".span7">
270
+ </div>
271
+ <div class="controls controls-row">
272
+ <input class="span4" type="text" placeholder=".span4">
273
+ <input class="span2" type="text" placeholder=".span2">
274
+ <input class="span1" type="text" placeholder=".span1">
275
+ </div>
276
+ </div>
277
+
278
+ ~~~html
279
+ <div class="controls">
280
+ <input class="span7" type="text" placeholder=".span7">
281
+ </div>
282
+ <div class="controls controls-row">
283
+ <input class="span4" type="text" placeholder=".span4">
284
+ <input class="span2" type="text" placeholder=".span2">
285
+ <input class="span1" type="text" placeholder=".span1">
286
+ </div>
287
+ ~~~
288
+
289
+ Relative Sizing
290
+ ---------------
291
+
292
+ You can relatively size input fields by using the `.input-[size]` classes.
293
+
294
+ <div class="example">
295
+ <input class="input-mini" type="text" placeholder=".input-mini">
296
+ <input class="input-small" type="text" placeholder=".input-small">
297
+ <input class="input-medium" type="text" placeholder=".input-medium">
298
+ <input class="input-large" type="text" placeholder=".input-large">
299
+ <input class="input-xlarge" type="text" placeholder=".input-xlarge">
300
+ <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
301
+ </div>
302
+
303
+ ~~~html
304
+ <input class="input-mini" type="text" placeholder=".input-mini">
305
+ <input class="input-small" type="text" placeholder=".input-small">
306
+ <input class="input-medium" type="text" placeholder=".input-medium">
307
+ <input class="input-large" type="text" placeholder=".input-large">
308
+ <input class="input-xlarge" type="text" placeholder=".input-xlarge">
309
+ <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
310
+ ~~~
311
+
312
+ Prepend & Append
313
+ ----------------
314
+
315
+ Wrap an .add-on and an input with one of two classes to prepend or append text to an input. You can use both at the same time to show on both sides.
316
+
317
+ <div class="example">
318
+ <div class="input-prepend">
319
+ <span class="add-on">@</span>
320
+ <input class="span2" type="text" placeholder="Username">
321
+ </div>
322
+ <div class="input-append">
323
+ <input class="span2" type="text">
324
+ <span class="add-on">.00</span>
325
+ </div>
326
+ <div class="input-prepend input-append">
327
+ <span class="add-on">$</span>
328
+ <input class="span2" type="text">
329
+ <span class="add-on">.00</span>
330
+ </div>
331
+ </div>
332
+
333
+ ~~~html
334
+ <div class="input-prepend">
335
+ <span class="add-on">@</span>
336
+ <input class="span2" type="text" placeholder="Username">
337
+ </div>
338
+ <div class="input-append">
339
+ <input class="span2" type="text">
340
+ <span class="add-on">.00</span>
341
+ </div>
342
+ <div class="input-prepend input-append">
343
+ <span class="add-on">$</span>
344
+ <input class="span2" type="text">
345
+ <span class="add-on">.00</span>
346
+ </div>
347
+ ~~~
348
+
349
+ You can also use buttons as prepend/append elements.
350
+
351
+ <div class="example">
352
+ <div class="input-append">
353
+ <input class="span2" type="text">
354
+ <button class="btn" type="button">Go!</button>
355
+ </div>
356
+ </div>
357
+
358
+ ~~~html
359
+ <div class="example">
360
+ <div class="input-append">
361
+ <input class="span2" type="text">
362
+ <button class="btn" type="button">Go!</button>
363
+ </div>
364
+ </div>
365
+ ~~~
366
+
367
+ Even two buttons
368
+
369
+ <div class="example">
370
+ <div class="input-append">
371
+ <input class="span2" type="text">
372
+ <button class="btn" type="button">Search</button>
373
+ <button class="btn" type="button">Options</button>
374
+ </div>
375
+ </div>
376
+
377
+ ~~~html
378
+ <div class="input-append">
379
+ <input class="span2" type="text">
380
+ <button class="btn" type="button">Search</button>
381
+ <button class="btn" type="button">Options</button>
382
+ </div>
383
+ ~~~
384
+
385
+
386
+ Help Text
387
+ ---------
388
+
389
+ You can create inline helper text.
390
+
391
+ <div class="example">
392
+ <input type="text"><span class="help-inline">Inline text</span>
393
+ </div>
394
+
395
+ ~~~html
396
+ <input type="text"><span class="help-inline">Inline text</span>
397
+ ~~~
398
+
399
+ And you can create block helper text.
400
+
401
+ <div class="example">
402
+ <input type="text"><span class="help-block">Long text ...</span>
403
+ </div>
404
+
405
+ ~~~html
406
+ <input type="text"><span class="help-block">Long text ...</span>
407
+ ~~~
408
+
409
+
410
+ Disable
411
+ -------
412
+
413
+ Disable an input field by using the `disabled` attribute, or create something that looks like a form element, but isn't by using the `.uneditable-input` class.
414
+
415
+ <div class="example">
416
+ <input class="input-xlarge" type="text" placeholder="Disabled input" disabled>
417
+ <span class="input-xlarge uneditable-input">Disabled fake input</span>
418
+ </div>
419
+
420
+ ~~~html
421
+ <input class="input-xlarge" type="text" placeholder="Disabled input" disabled>
422
+ <span class="input-xlarge uneditable-input">Disabled fake input</span>
423
+ ~~~
data/docs/index.html ADDED
@@ -0,0 +1,31 @@
1
+ ---
2
+ layout: default
3
+ title: Your New Jekyll Site
4
+ ---
5
+
6
+
7
+ <h1>Atlas Style Guide</h1>
8
+
9
+ Welcome to the O'Reilly Atlas Style Guide. Please choose an item in the menu to the left.
10
+
11
+
12
+ <h2>Running on Localhost</h2>
13
+
14
+ <p>If you need to add or change styles in this gem, first get a local environment set up:</p>
15
+
16
+ <ol>
17
+ <li>Clone down the gem to your local machine</li>
18
+ <li>Run `bundle` from the gem root</li>
19
+ <li>Fire up jekyll by running <code>jekyll serve --watch</code></li>
20
+ </ol>
21
+
22
+ <p>You now have the site running in your browser on <code>localhost:4000</code></p>
23
+
24
+ <h2>Adding new Styles</h2>
25
+
26
+ <ol>
27
+ <li>Create you own feature branch</li>
28
+ <li>Implement your style by tweaking the CSS and checking the documentation on `localhost:4000`. Do not work from the specific Atlas </li>Rails app by updating the gem constantly. All new styles should be developed using the `docs`, and should be independent from a particular application.
29
+ <li>When ready, bump the version number in `lib/atlas_assets/version.rb`, and send a pull request to the master branch.</li>
30
+ <li>Bump the `atlas_assets` gem version in your apps `Gemfile`, run `bundle`, and use the new styles.</li>
31
+ </ol>
Binary file