style-guide 0.2.1 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. data/Gemfile.lock +3 -2
  2. data/app/assets/stylesheets/style_guide/example.css +55 -6
  3. data/app/assets/stylesheets/style_guide/header.css +5 -5
  4. data/app/assets/stylesheets/style_guide/layout.css +3 -33
  5. data/app/assets/stylesheets/style_guide/navbar.css +25 -22
  6. data/app/assets/stylesheets/style_guide/sidebar.css +2 -0
  7. data/app/views/layouts/style_guide/application.html.erb +1 -1
  8. data/app/views/style_guide/{partials/_button_disabled_state.erb → bootstrap_base/_button:_disabled_anchor.erb} +0 -0
  9. data/app/views/style_guide/{partials/_button_element.erb → bootstrap_base/_button:_disabled_element.erb} +0 -0
  10. data/app/views/style_guide/{partials → bootstrap_base}/_button_sizes.erb +0 -0
  11. data/app/views/style_guide/{partials/_buttons.erb → bootstrap_base/_button_types.erb} +0 -0
  12. data/app/views/style_guide/bootstrap_base/_code:_blocks.erb +8 -0
  13. data/app/views/style_guide/{partials/_code_inline.erb → bootstrap_base/_code:_inline.erb} +0 -0
  14. data/app/views/style_guide/bootstrap_base/_form_controls:_checkbox_and_radio.erb +13 -0
  15. data/app/views/style_guide/bootstrap_base/_form_controls:_input.erb +1 -0
  16. data/app/views/style_guide/bootstrap_base/_form_controls:_select.erb +15 -0
  17. data/app/views/style_guide/bootstrap_base/_form_controls:_textarea.erb +1 -0
  18. data/app/views/style_guide/bootstrap_base/_forms:_default_styles.erb +12 -0
  19. data/app/views/style_guide/bootstrap_base/_forms:_horizontal.erb +22 -0
  20. data/app/views/style_guide/bootstrap_base/_forms:_inline.erb +8 -0
  21. data/app/views/style_guide/bootstrap_base/_forms:_search.erb +4 -0
  22. data/app/views/style_guide/bootstrap_base/_images.erb +136 -0
  23. data/app/views/style_guide/{partials → bootstrap_base}/_tables.erb +0 -0
  24. data/app/views/style_guide/{partials → bootstrap_base}/_typography.erb +0 -0
  25. data/app/views/style_guide/style/_example.erb +10 -0
  26. data/app/views/style_guide/style/show.html.erb +1 -6
  27. data/config/locales/en.yml +57 -0
  28. data/lib/style_guide/config.rb +1 -1
  29. data/lib/style_guide/engine.rb +2 -0
  30. data/lib/style_guide/section.rb +1 -1
  31. data/lib/style_guide/version.rb +1 -1
  32. data/spec/dummy/app/assets/stylesheets/application.css +0 -37
  33. data/spec/dummy/app/assets/stylesheets/swatches.css +26 -1
  34. data/spec/dummy/app/assets/stylesheets/three_dee.css +4 -0
  35. data/spec/dummy/app/views/styles/_00swatches.erb +8 -8
  36. data/spec/dummy/app/views/styles/_three_dee.erb +1 -0
  37. data/spec/dummy/config/locales/en.yml +6 -4
  38. data/spec/lib/style_guide/config_spec.rb +1 -1
  39. data/spec/lib/style_guide/section_spec.rb +3 -3
  40. data/style-guide.gemspec +1 -0
  41. metadata +41 -16
  42. data/app/assets/stylesheets/docs.css +0 -153
  43. data/app/assets/stylesheets/responsive.css +0 -164
  44. data/app/views/style_guide/partials/_code_blocks.erb +0 -12
  45. data/app/views/style_guide/partials/_forms.erb +0 -714
  46. data/app/views/style_guide/partials/_images.erb +0 -318
  47. data/spec/dummy/app/views/styles/_info-header.erb +0 -1
@@ -1,318 +0,0 @@
1
-
2
-
3
- <!-- Images
4
- ================================================== -->
5
- <section id="images">
6
- <div class="page-header">
7
- <h1>Images</h1>
8
- </div>
9
-
10
- <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
11
- <div class="bs-docs-example bs-docs-example-images">
12
- <img src="http://placehold.it/140x140" class="img-rounded">
13
- <img src="http://placehold.it/140x140" class="img-circle">
14
- <img src="http://placehold.it/140x140" class="img-polaroid">
15
- </div>
16
- <pre class="prettyprint linenums">
17
- &lt;img src="..." class="img-rounded"&gt;
18
- &lt;img src="..." class="img-circle"&gt;
19
- &lt;img src="..." class="img-polaroid"&gt;
20
- </pre>
21
- <p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.</p>
22
-
23
-
24
- </section>
25
-
26
-
27
-
28
- <!-- Icons
29
- ================================================== -->
30
- <section id="icons">
31
- <div class="page-header">
32
- <h1>Icons <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
33
- </div>
34
-
35
- <h2>Icon glyphs</h2>
36
- <p>140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.</p>
37
- <ul class="the-icons clearfix">
38
- <li><i class="icon-glass"></i> icon-glass</li>
39
- <li><i class="icon-music"></i> icon-music</li>
40
- <li><i class="icon-search"></i> icon-search</li>
41
- <li><i class="icon-envelope"></i> icon-envelope</li>
42
- <li><i class="icon-heart"></i> icon-heart</li>
43
- <li><i class="icon-star"></i> icon-star</li>
44
- <li><i class="icon-star-empty"></i> icon-star-empty</li>
45
- <li><i class="icon-user"></i> icon-user</li>
46
- <li><i class="icon-film"></i> icon-film</li>
47
- <li><i class="icon-th-large"></i> icon-th-large</li>
48
- <li><i class="icon-th"></i> icon-th</li>
49
- <li><i class="icon-th-list"></i> icon-th-list</li>
50
- <li><i class="icon-ok"></i> icon-ok</li>
51
- <li><i class="icon-remove"></i> icon-remove</li>
52
- <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
53
- <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
54
- <li><i class="icon-off"></i> icon-off</li>
55
- <li><i class="icon-signal"></i> icon-signal</li>
56
- <li><i class="icon-cog"></i> icon-cog</li>
57
- <li><i class="icon-trash"></i> icon-trash</li>
58
- <li><i class="icon-home"></i> icon-home</li>
59
- <li><i class="icon-file"></i> icon-file</li>
60
- <li><i class="icon-time"></i> icon-time</li>
61
- <li><i class="icon-road"></i> icon-road</li>
62
- <li><i class="icon-download-alt"></i> icon-download-alt</li>
63
- <li><i class="icon-download"></i> icon-download</li>
64
- <li><i class="icon-upload"></i> icon-upload</li>
65
- <li><i class="icon-inbox"></i> icon-inbox</li>
66
-
67
- <li><i class="icon-play-circle"></i> icon-play-circle</li>
68
- <li><i class="icon-repeat"></i> icon-repeat</li>
69
- <li><i class="icon-refresh"></i> icon-refresh</li>
70
- <li><i class="icon-list-alt"></i> icon-list-alt</li>
71
- <li><i class="icon-lock"></i> icon-lock</li>
72
- <li><i class="icon-flag"></i> icon-flag</li>
73
- <li><i class="icon-headphones"></i> icon-headphones</li>
74
- <li><i class="icon-volume-off"></i> icon-volume-off</li>
75
- <li><i class="icon-volume-down"></i> icon-volume-down</li>
76
- <li><i class="icon-volume-up"></i> icon-volume-up</li>
77
- <li><i class="icon-qrcode"></i> icon-qrcode</li>
78
- <li><i class="icon-barcode"></i> icon-barcode</li>
79
- <li><i class="icon-tag"></i> icon-tag</li>
80
- <li><i class="icon-tags"></i> icon-tags</li>
81
- <li><i class="icon-book"></i> icon-book</li>
82
- <li><i class="icon-bookmark"></i> icon-bookmark</li>
83
- <li><i class="icon-print"></i> icon-print</li>
84
- <li><i class="icon-camera"></i> icon-camera</li>
85
- <li><i class="icon-font"></i> icon-font</li>
86
- <li><i class="icon-bold"></i> icon-bold</li>
87
- <li><i class="icon-italic"></i> icon-italic</li>
88
- <li><i class="icon-text-height"></i> icon-text-height</li>
89
- <li><i class="icon-text-width"></i> icon-text-width</li>
90
- <li><i class="icon-align-left"></i> icon-align-left</li>
91
- <li><i class="icon-align-center"></i> icon-align-center</li>
92
- <li><i class="icon-align-right"></i> icon-align-right</li>
93
- <li><i class="icon-align-justify"></i> icon-align-justify</li>
94
- <li><i class="icon-list"></i> icon-list</li>
95
-
96
- <li><i class="icon-indent-left"></i> icon-indent-left</li>
97
- <li><i class="icon-indent-right"></i> icon-indent-right</li>
98
- <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
99
- <li><i class="icon-picture"></i> icon-picture</li>
100
- <li><i class="icon-pencil"></i> icon-pencil</li>
101
- <li><i class="icon-map-marker"></i> icon-map-marker</li>
102
- <li><i class="icon-adjust"></i> icon-adjust</li>
103
- <li><i class="icon-tint"></i> icon-tint</li>
104
- <li><i class="icon-edit"></i> icon-edit</li>
105
- <li><i class="icon-share"></i> icon-share</li>
106
- <li><i class="icon-check"></i> icon-check</li>
107
- <li><i class="icon-move"></i> icon-move</li>
108
- <li><i class="icon-step-backward"></i> icon-step-backward</li>
109
- <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
110
- <li><i class="icon-backward"></i> icon-backward</li>
111
- <li><i class="icon-play"></i> icon-play</li>
112
- <li><i class="icon-pause"></i> icon-pause</li>
113
- <li><i class="icon-stop"></i> icon-stop</li>
114
- <li><i class="icon-forward"></i> icon-forward</li>
115
- <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
116
- <li><i class="icon-step-forward"></i> icon-step-forward</li>
117
- <li><i class="icon-eject"></i> icon-eject</li>
118
- <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
119
- <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
120
- <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
121
- <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
122
- <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
123
- <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
124
-
125
- <li><i class="icon-question-sign"></i> icon-question-sign</li>
126
- <li><i class="icon-info-sign"></i> icon-info-sign</li>
127
- <li><i class="icon-screenshot"></i> icon-screenshot</li>
128
- <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
129
- <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
130
- <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
131
- <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
132
- <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
133
- <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
134
- <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
135
- <li><i class="icon-share-alt"></i> icon-share-alt</li>
136
- <li><i class="icon-resize-full"></i> icon-resize-full</li>
137
- <li><i class="icon-resize-small"></i> icon-resize-small</li>
138
- <li><i class="icon-plus"></i> icon-plus</li>
139
- <li><i class="icon-minus"></i> icon-minus</li>
140
- <li><i class="icon-asterisk"></i> icon-asterisk</li>
141
- <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
142
- <li><i class="icon-gift"></i> icon-gift</li>
143
- <li><i class="icon-leaf"></i> icon-leaf</li>
144
- <li><i class="icon-fire"></i> icon-fire</li>
145
- <li><i class="icon-eye-open"></i> icon-eye-open</li>
146
- <li><i class="icon-eye-close"></i> icon-eye-close</li>
147
- <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
148
- <li><i class="icon-plane"></i> icon-plane</li>
149
- <li><i class="icon-calendar"></i> icon-calendar</li>
150
- <li><i class="icon-random"></i> icon-random</li>
151
- <li><i class="icon-comment"></i> icon-comment</li>
152
- <li><i class="icon-magnet"></i> icon-magnet</li>
153
-
154
- <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
155
- <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
156
- <li><i class="icon-retweet"></i> icon-retweet</li>
157
- <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
158
- <li><i class="icon-folder-close"></i> icon-folder-close</li>
159
- <li><i class="icon-folder-open"></i> icon-folder-open</li>
160
- <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
161
- <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
162
- <li><i class="icon-hdd"></i> icon-hdd</li>
163
- <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
164
- <li><i class="icon-bell"></i> icon-bell</li>
165
- <li><i class="icon-certificate"></i> icon-certificate</li>
166
- <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
167
- <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
168
- <li><i class="icon-hand-right"></i> icon-hand-right</li>
169
- <li><i class="icon-hand-left"></i> icon-hand-left</li>
170
- <li><i class="icon-hand-up"></i> icon-hand-up</li>
171
- <li><i class="icon-hand-down"></i> icon-hand-down</li>
172
- <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
173
- <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
174
- <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
175
- <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
176
- <li><i class="icon-globe"></i> icon-globe</li>
177
- <li><i class="icon-wrench"></i> icon-wrench</li>
178
- <li><i class="icon-tasks"></i> icon-tasks</li>
179
- <li><i class="icon-filter"></i> icon-filter</li>
180
- <li><i class="icon-briefcase"></i> icon-briefcase</li>
181
- <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
182
- </ul>
183
-
184
- <h3>Glyphicons attribution</h3>
185
- <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
186
-
187
-
188
- <hr class="bs-docs-separator">
189
-
190
-
191
- <h2>How to use</h2>
192
- <p>All icons require an <code>&lt;i&gt;</code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:</p>
193
- <pre class="prettyprint linenums">
194
- &lt;i class="icon-search"&gt;&lt;/i&gt;
195
- </pre>
196
- <p>There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.</p>
197
- <pre class="prettyprint linenums">
198
- &lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
199
- </pre>
200
- <p>
201
- <span class="label label-info">Heads up!</span>
202
- When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.
203
- </p>
204
-
205
-
206
- <hr class="bs-docs-separator">
207
-
208
-
209
- <h2>Icon examples</h2>
210
- <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
211
-
212
- <h4>Buttons</h4>
213
-
214
- <h5>Button group in a button toolbar</h5>
215
- <div class="bs-docs-example">
216
- <div class="btn-toolbar">
217
- <div class="btn-group">
218
- <a class="btn" href="#"><i class="icon-align-left"></i></a>
219
- <a class="btn" href="#"><i class="icon-align-center"></i></a>
220
- <a class="btn" href="#"><i class="icon-align-right"></i></a>
221
- <a class="btn" href="#"><i class="icon-align-justify"></i></a>
222
- </div>
223
- </div>
224
- </div>
225
- <pre class="prettyprint linenums">
226
- &lt;div class="btn-toolbar"&gt;
227
- &lt;div class="btn-group"&gt;
228
-
229
- &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
230
- &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
231
- &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
232
- &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
233
- &lt;/div&gt;
234
- &lt;/div&gt;
235
- </pre>
236
-
237
- <h5>Dropdown in a button group</h5>
238
- <div class="bs-docs-example">
239
- <div class="btn-group">
240
- <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
241
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
242
- <ul class="dropdown-menu">
243
- <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
244
- <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
245
- <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
246
- <li class="divider"></li>
247
- <li><a href="#"><i class="i"></i> Make admin</a></li>
248
- </ul>
249
- </div>
250
- </div>
251
- <pre class="prettyprint linenums">
252
- &lt;div class="btn-group"&gt;
253
- &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt;
254
- &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
255
- &lt;ul class="dropdown-menu"&gt;
256
- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
257
- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
258
- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
259
- &lt;li class="divider"&gt;&lt;/li&gt;
260
- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
261
- &lt;/ul&gt;
262
- &lt;/div&gt;
263
- </pre>
264
-
265
- <h5>Small button</h5>
266
- <div class="bs-docs-example">
267
- <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
268
- </div>
269
- <pre class="prettyprint linenums">
270
- &lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
271
- </pre>
272
-
273
-
274
- <h4>Navigation</h4>
275
- <div class="bs-docs-example">
276
- <div class="well" style="padding: 8px 0; margin-bottom: 0;">
277
- <ul class="nav nav-list">
278
- <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
279
- <li><a href="#"><i class="icon-book"></i> Library</a></li>
280
- <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
281
- <li><a href="#"><i class="i"></i> Misc</a></li>
282
- </ul>
283
- </div>
284
- </div>
285
- <pre class="prettyprint linenums">
286
- &lt;ul class="nav nav-list"&gt;
287
- &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home icon-white"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
288
- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
289
- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt;
290
- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Misc&lt;/a&gt;&lt;/li&gt;
291
- &lt;/ul&gt;
292
- </pre>
293
-
294
- <h4>Form fields</h4>
295
- <form class="bs-docs-example form-horizontal">
296
- <div class="control-group">
297
- <label class="control-label" for="inputIcon">Email address</label>
298
- <div class="controls">
299
- <div class="input-prepend">
300
- <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
301
- </div>
302
- </div>
303
- </div>
304
- </form>
305
- <pre class="prettyprint linenums">
306
- &lt;div class="control-group"&gt;
307
- &lt;label class="control-label" for="inputIcon"&gt;Email address&lt;/label&gt;
308
- &lt;div class="controls"&gt;
309
- &lt;div class="input-prepend"&gt;
310
- &lt;span class="add-on"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
311
- &lt;input class="span2" id="inputIcon" type="text"&gt;
312
- &lt;/div&gt;
313
- &lt;/div&gt;
314
- &lt;/div&gt;
315
- </pre>
316
-
317
- </section>
318
-
@@ -1 +0,0 @@
1
- <h1 class="info">Info header</h1>