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.
- data/.gitignore +2 -0
- data/Gemfile +15 -0
- data/Gemfile.lock +86 -0
- data/LICENSE +22 -0
- data/Procfile +1 -0
- data/README.md +36 -0
- data/Rakefile +16 -0
- data/_config.yml +13 -0
- data/atlas_assets.gemspec +21 -0
- data/config.ru +9 -0
- data/docs/.gitignore +1 -0
- data/docs/404.html +1 -0
- data/docs/_layouts/default.html +56 -0
- data/docs/_plugins/jekyll_assets.rb +3 -0
- data/docs/_posts/2013-05-17-buttons.md +43 -0
- data/docs/_posts/2013-05-17-flash.md +58 -0
- data/docs/_posts/2013-05-17-fonts.md +26 -0
- data/docs/_posts/2013-05-17-grid.md +60 -0
- data/docs/_posts/2013-05-17-helpers.md +9 -0
- data/docs/_posts/2013-05-17-icons.md +1089 -0
- data/docs/_posts/2013-05-17-lists.md +76 -0
- data/docs/_posts/2013-05-17-navbar.md +73 -0
- data/docs/_posts/2013-05-21-forms.md +423 -0
- data/docs/index.html +31 -0
- data/lib/assets/fonts/atlas.eot +0 -0
- data/lib/assets/fonts/atlas.svg +279 -0
- data/lib/assets/fonts/atlas.ttf +0 -0
- data/lib/assets/fonts/atlas.woff +0 -0
- data/lib/assets/javascripts/atlas_assets.js +9 -0
- data/lib/assets/javascripts/backbone.js +1572 -0
- data/lib/assets/javascripts/jquery.js +9405 -0
- data/lib/assets/javascripts/jquery_ujs.js +378 -0
- data/lib/assets/javascripts/keypress.js +20 -0
- data/lib/assets/javascripts/pusher.js +101 -0
- data/lib/assets/javascripts/setup.js +35 -0
- data/lib/assets/javascripts/string.js +912 -0
- data/lib/assets/javascripts/underscore.js +1228 -0
- data/lib/assets/stylesheets/atlas_assets.css +10 -0
- data/lib/assets/stylesheets/buttons.css.scss +56 -0
- data/lib/assets/stylesheets/flash.css.scss +32 -0
- data/lib/assets/stylesheets/fonts.css.scss +66 -0
- data/lib/assets/stylesheets/forms.css.scss +861 -0
- data/lib/assets/stylesheets/grid.css.scss +762 -0
- data/lib/assets/stylesheets/helpers.css.scss +55 -0
- data/lib/assets/stylesheets/icons.css.scss +823 -0
- data/lib/assets/stylesheets/lists.css.scss +73 -0
- data/lib/assets/stylesheets/navbar.css.scss +121 -0
- data/lib/assets/stylesheets/pre.css.scss +7 -0
- data/lib/atlas_assets/engine.rb +8 -0
- data/lib/atlas_assets/version.rb +5 -0
- data/lib/atlas_assets.rb +1 -0
- data/rails/init.rb +1 -0
- 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
|