uniform-ui 0.5.1 → 0.6
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.
- checksums.yaml +4 -4
- data/index.html +900 -389
- data/preview/_buttons.html.erb +59 -0
- data/preview/_cards.html.erb +82 -0
- data/preview/_colors.html.erb +12 -0
- data/preview/_forms.html.erb +196 -0
- data/preview/_grid.html.erb +49 -0
- data/preview/_helpers.html.erb +158 -0
- data/preview/_inputs.html.erb +93 -0
- data/preview/_installation.html.erb +4 -0
- data/preview/_lists.html.erb +53 -0
- data/preview/_loaders.html.erb +72 -0
- data/preview/_nav.html.erb +46 -0
- data/preview/_philosophy.html.erb +33 -0
- data/preview/_rows.html.erb +35 -0
- data/preview/_tables.html.erb +1 -0
- data/preview/_tabs.html.erb +1 -0
- data/preview/_tiles.html.erb +1 -0
- data/preview/_uniform.html.erb +4 -0
- data/preview/index.html.erb +39 -473
- data/preview/preview.scss +5 -0
- data/site/index.html +23 -23
- data/site/preview.css +1 -1
- data/site/site/uniform.css +1 -1
- data/site/uniform.css +1 -1
- data/uniform.gemspec +1 -1
- data/vendor/assets/stylesheets/uniform/components/buttons.scss +9 -9
- data/vendor/assets/stylesheets/uniform/components/card.scss +1 -1
- data/vendor/assets/stylesheets/uniform/components/form.scss +16 -130
- data/vendor/assets/stylesheets/uniform/components/inputs.scss +21 -0
- data/vendor/assets/stylesheets/uniform/components/lists.scss +52 -52
- data/vendor/assets/stylesheets/uniform/components/nav.scss +65 -29
- data/vendor/assets/stylesheets/uniform/components/row.scss +20 -61
- data/vendor/assets/stylesheets/uniform/components/table-form.scss +141 -246
- data/vendor/assets/stylesheets/uniform/components/tabs.scss +1 -1
- data/vendor/assets/stylesheets/uniform/components/tile.scss +1 -1
- data/vendor/assets/stylesheets/uniform/helpers.scss +1 -6
- data/vendor/assets/stylesheets/uniform/mixins.scss +38 -0
- metadata +20 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 76cef56f683b4d387665fe0594057866d2c8ea4c
|
|
4
|
+
data.tar.gz: 5da06246b7d45a8f3d288081831ebc94d762b8a8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 76f2f59566d24b9d53805dc5c81437526f1c23a4db1f410229f14e432f3b73f1a73245fe5bbf1de43c2de800eef52e4cc4368af5fc71f5656c1e043523d18684
|
|
7
|
+
data.tar.gz: 0451af2f789d52fcee972be2690c895c989ab431b4b56626a013b3b503c0a160e2b76db29294838120d25349bcdccc7e21ee56a17a48c98502dc42d07991e115
|
data/index.html
CHANGED
|
@@ -8,389 +8,658 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
<div
|
|
13
|
-
<
|
|
14
|
-
<img src="site/logo.png" style="width: 100%; height: auto;">
|
|
15
|
-
</div>
|
|
16
|
-
<ul class="uniform-nav">
|
|
17
|
-
|
|
18
|
-
<li><a href="#uniform">Uniform</a></li>
|
|
19
|
-
|
|
20
|
-
<li><a href="#installation">Installation</a></li>
|
|
21
|
-
|
|
22
|
-
<li><a href="#philosophy">Philosophy</a></li>
|
|
23
|
-
|
|
24
|
-
<li><a href="#colors">Colors</a></li>
|
|
25
|
-
|
|
26
|
-
<li><a href="#buttons">Buttons</a></li>
|
|
27
|
-
|
|
28
|
-
<li><a href="#grid">Grid</a></li>
|
|
29
|
-
|
|
30
|
-
<li><a href="#inputs">Inputs</a></li>
|
|
31
|
-
|
|
32
|
-
<li><a href="#forms">Forms</a></li>
|
|
33
|
-
|
|
34
|
-
<li><a href="#loaders">Loaders</a></li>
|
|
35
|
-
|
|
36
|
-
<li><a href="#cards">Cards</a></li>
|
|
37
|
-
|
|
38
|
-
<li><a href="#tiles">Tiles</a></li>
|
|
39
|
-
|
|
40
|
-
<li><a href="#rows">Rows</a></li>
|
|
41
|
-
|
|
42
|
-
<li><a href="#lists">Lists</a></li>
|
|
43
|
-
|
|
44
|
-
<li><a href="#tables">Tables</a></li>
|
|
45
|
-
|
|
46
|
-
<li><a href="#nav">Nav</a></li>
|
|
47
|
-
|
|
48
|
-
<li><a href="#tabs">Tabs</a></li>
|
|
49
|
-
|
|
50
|
-
<li><a href="#helpers">Helpers</a></li>
|
|
51
|
-
|
|
52
|
-
</ul>
|
|
11
|
+
<div class="side-nav">
|
|
12
|
+
<div style="padding: 20px; padding-right: 30px">
|
|
13
|
+
<img src="site/logo.png" style="width: 100%; height: auto;">
|
|
53
14
|
</div>
|
|
54
|
-
<div class="
|
|
15
|
+
<div class="uniform-nav vertical">
|
|
16
|
+
<ul>
|
|
17
|
+
|
|
18
|
+
<li><a href="#uniform">Uniform</a></li>
|
|
19
|
+
|
|
20
|
+
<li><a href="#installation">Installation</a></li>
|
|
21
|
+
|
|
22
|
+
<li><a href="#philosophy">Philosophy</a></li>
|
|
23
|
+
|
|
24
|
+
<li><a href="#colors">Colors</a></li>
|
|
25
|
+
|
|
26
|
+
<li><a href="#buttons">Buttons</a></li>
|
|
27
|
+
|
|
28
|
+
<li><a href="#grid">Grid</a></li>
|
|
29
|
+
|
|
30
|
+
<li><a href="#inputs">Inputs</a></li>
|
|
31
|
+
|
|
32
|
+
<li><a href="#forms">Forms</a></li>
|
|
33
|
+
|
|
34
|
+
<li><a href="#loaders">Loaders</a></li>
|
|
35
|
+
|
|
36
|
+
<li><a href="#cards">Cards</a></li>
|
|
55
37
|
|
|
56
|
-
<a
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<
|
|
38
|
+
<li><a href="#tiles">Tiles</a></li>
|
|
39
|
+
|
|
40
|
+
<li><a href="#rows">Rows</a></li>
|
|
41
|
+
|
|
42
|
+
<li><a href="#lists">Lists</a></li>
|
|
43
|
+
|
|
44
|
+
<li><a href="#tables">Tables</a></li>
|
|
45
|
+
|
|
46
|
+
<li><a href="#nav">Nav</a></li>
|
|
47
|
+
|
|
48
|
+
<li><a href="#tabs">Tabs</a></li>
|
|
49
|
+
|
|
50
|
+
<li><a href="#helpers">Helpers</a></li>
|
|
51
|
+
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="main-content">
|
|
56
|
+
|
|
57
|
+
<a name="uniform"></a>
|
|
58
|
+
<div class="section">
|
|
59
|
+
|
|
60
|
+
<div class="center">
|
|
61
61
|
<img src="site/logo.png" width="451" height="101">
|
|
62
62
|
<p class="large">Sass components and defaults for building a UI that's on fleak.</p>
|
|
63
63
|
</div>
|
|
64
|
-
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
<a name="installation"></a>
|
|
68
|
-
<div class="section">
|
|
69
|
-
|
|
70
|
-
<h1>Installation</h1>
|
|
71
|
-
|
|
72
|
-
<p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
|
|
73
|
-
<p>Execute:<br/><code>$ bundle</code></p>
|
|
74
|
-
<p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
|
|
75
|
-
<p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
|
|
64
|
+
</div>
|
|
76
65
|
|
|
66
|
+
<a name="installation"></a>
|
|
67
|
+
<div class="section">
|
|
68
|
+
|
|
69
|
+
<h1>Installation</h1>
|
|
70
|
+
|
|
71
|
+
<p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
|
|
72
|
+
<p>Execute:<br/><code>$ bundle</code></p>
|
|
73
|
+
<p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
|
|
74
|
+
<p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<a name="philosophy"></a>
|
|
78
|
+
<div class="section">
|
|
79
|
+
|
|
80
|
+
<h1>Philosophy</h1>
|
|
81
|
+
|
|
82
|
+
<h3>Don't use ID's</h3>
|
|
83
|
+
<p>Unless you have to, and even then, think twice. HTML Id's make things not reusable. There should only be one instance of an id in a document</p>
|
|
77
84
|
|
|
85
|
+
<h3>Use Semanitc Classes Presentationaly :)</h3>
|
|
86
|
+
<p>Here's a decent post on OOCSS (Object Oriented CSS) as it relates to semantic vs presentational classes: <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
|
|
87
|
+
<p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
|
|
88
|
+
<p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
|
|
89
|
+
<p>Some of us don't want to touch css files (preference: presentational), and some of us live there (preference: semantic). Honestly, the art of good ui development is balancing semantic and presentational classes. Each taken to their extreme is bad.</p>
|
|
90
|
+
<p>Structure html so that the semantic class is first and presentational classes follow.</p>
|
|
91
|
+
<p><code>class="property-list ul-list col-sm-4"</code></p>
|
|
78
92
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<div class="section">
|
|
83
|
-
|
|
84
|
-
<h1>Philosophy</h1>
|
|
85
|
-
|
|
86
|
-
<h3>Don't use ID's</h3>
|
|
87
|
-
<p>Unless you have to, and even then, think twice. HTML Id's make things not reusable. There should only be one instance of an id in a document</p>
|
|
88
|
-
|
|
89
|
-
<h3>Use Semanitc Classes Presentationaly :)</h3>
|
|
90
|
-
<p>Here's a decent post on OOCSS (Object Oriented CSS) as it relates to semantic vs presentational classes: <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
|
|
91
|
-
<p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
|
|
92
|
-
<p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
|
|
93
|
-
<p>Some of us don't want to touch css files (preference: presentational), and some of us live there (preference: semantic). Honestly, the art of good ui development is balancing semantic and presentational classes. Each taken to their extreme is bad.</p>
|
|
94
|
-
<p>Structure html so that the semantic class is first and presentational classes follow.</p>
|
|
95
|
-
<p><code>class="property-list ul-list col-sm-4"</code></p>
|
|
96
|
-
|
|
97
|
-
<h3>Save the Namespace, save the world</h3>
|
|
98
|
-
<p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
|
|
99
|
-
<p><code>class="label"</code> should be <code>class="text-label"</code></p>
|
|
93
|
+
<h3>Save the Namespace, save the world</h3>
|
|
94
|
+
<p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
|
|
95
|
+
<p><code>class="label"</code> should be <code>class="text-label"</code></p>
|
|
100
96
|
|
|
101
|
-
|
|
102
|
-
|
|
97
|
+
<h3>Train-case</h3>
|
|
98
|
+
<p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
|
|
103
99
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
100
|
+
<div class="row">
|
|
101
|
+
<div class="col-sm-6">
|
|
102
|
+
<h3>Wrappers and Containers</h3>
|
|
103
|
+
<p>The order of nesting should go Wrapper > Element > Container. Sometimes you have to have an inside layer to do advanced css things, and the container should be that layer. This is not a suggestion for every object; use wrapper and/or container as needed.</p>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="col-sm-6">
|
|
106
|
+
<h3> </h3>
|
|
111
107
|
<pre><xmp><div class="property-wrapper">
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
</div>
|
|
108
|
+
<div class="property">
|
|
109
|
+
<div class="property-container">
|
|
115
110
|
</div>
|
|
111
|
+
</div>
|
|
116
112
|
</div></xmp></pre>
|
|
117
|
-
</div>
|
|
118
113
|
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<a name="colors"></a>
|
|
118
|
+
<div class="section">
|
|
119
|
+
|
|
120
|
+
<h1>Colors</h1>
|
|
121
|
+
|
|
122
|
+
<table>
|
|
119
123
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<a name="colors"></a>
|
|
123
|
-
<div class="section">
|
|
124
|
-
|
|
125
|
-
<h1>Colors</h1>
|
|
126
|
-
|
|
127
|
-
<table>
|
|
128
|
-
<tr>
|
|
124
|
+
|
|
125
|
+
<tr>
|
|
129
126
|
<td><span class='swatch green-light-bg'></span></td>
|
|
130
127
|
<td><code>sass// $green-light</code></td>
|
|
131
128
|
<td><code>class// .green-light</code></td>
|
|
132
129
|
</tr>
|
|
133
|
-
|
|
130
|
+
|
|
131
|
+
<tr>
|
|
134
132
|
<td><span class='swatch green-bg'></span></td>
|
|
135
133
|
<td><code>sass// $green</code></td>
|
|
136
134
|
<td><code>class// .green</code></td>
|
|
137
135
|
</tr>
|
|
138
|
-
|
|
136
|
+
|
|
137
|
+
<tr>
|
|
139
138
|
<td><span class='swatch green-dark-bg'></span></td>
|
|
140
139
|
<td><code>sass// $green-dark</code></td>
|
|
141
140
|
<td><code>class// .green-dark</code></td>
|
|
142
141
|
</tr>
|
|
143
|
-
|
|
144
|
-
<tr>
|
|
142
|
+
|
|
143
|
+
<tr><td colspan='3'> </td></tr>
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
<tr>
|
|
145
147
|
<td><span class='swatch blue-light-bg'></span></td>
|
|
146
148
|
<td><code>sass// $blue-light</code></td>
|
|
147
149
|
<td><code>class// .blue-light</code></td>
|
|
148
150
|
</tr>
|
|
149
|
-
|
|
151
|
+
|
|
152
|
+
<tr>
|
|
150
153
|
<td><span class='swatch blue-bg'></span></td>
|
|
151
154
|
<td><code>sass// $blue</code></td>
|
|
152
155
|
<td><code>class// .blue</code></td>
|
|
153
156
|
</tr>
|
|
154
|
-
|
|
157
|
+
|
|
158
|
+
<tr>
|
|
155
159
|
<td><span class='swatch blue-dark-bg'></span></td>
|
|
156
160
|
<td><code>sass// $blue-dark</code></td>
|
|
157
161
|
<td><code>class// .blue-dark</code></td>
|
|
158
162
|
</tr>
|
|
159
|
-
|
|
160
|
-
<tr>
|
|
163
|
+
|
|
164
|
+
<tr><td colspan='3'> </td></tr>
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
<tr>
|
|
161
168
|
<td><span class='swatch red-light-bg'></span></td>
|
|
162
169
|
<td><code>sass// $red-light</code></td>
|
|
163
170
|
<td><code>class// .red-light</code></td>
|
|
164
171
|
</tr>
|
|
165
|
-
|
|
172
|
+
|
|
173
|
+
<tr>
|
|
166
174
|
<td><span class='swatch red-bg'></span></td>
|
|
167
175
|
<td><code>sass// $red</code></td>
|
|
168
176
|
<td><code>class// .red</code></td>
|
|
169
177
|
</tr>
|
|
170
|
-
|
|
178
|
+
|
|
179
|
+
<tr>
|
|
171
180
|
<td><span class='swatch red-dark-bg'></span></td>
|
|
172
181
|
<td><code>sass// $red-dark</code></td>
|
|
173
182
|
<td><code>class// .red-dark</code></td>
|
|
174
183
|
</tr>
|
|
175
|
-
|
|
176
|
-
<tr>
|
|
184
|
+
|
|
185
|
+
<tr><td colspan='3'> </td></tr>
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
<tr>
|
|
177
189
|
<td><span class='swatch gray-light-bg'></span></td>
|
|
178
190
|
<td><code>sass// $gray-light</code></td>
|
|
179
191
|
<td><code>class// .gray-light</code></td>
|
|
180
192
|
</tr>
|
|
181
|
-
|
|
193
|
+
|
|
194
|
+
<tr>
|
|
182
195
|
<td><span class='swatch gray-bg'></span></td>
|
|
183
196
|
<td><code>sass// $gray</code></td>
|
|
184
197
|
<td><code>class// .gray</code></td>
|
|
185
198
|
</tr>
|
|
186
|
-
|
|
199
|
+
|
|
200
|
+
<tr>
|
|
187
201
|
<td><span class='swatch gray-dark-bg'></span></td>
|
|
188
202
|
<td><code>sass// $gray-dark</code></td>
|
|
189
203
|
<td><code>class// .gray-dark</code></td>
|
|
190
204
|
</tr>
|
|
191
|
-
|
|
192
|
-
<tr>
|
|
205
|
+
|
|
206
|
+
<tr><td colspan='3'> </td></tr>
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
<tr>
|
|
193
210
|
<td><span class='swatch yellow-light-bg'></span></td>
|
|
194
211
|
<td><code>sass// $yellow-light</code></td>
|
|
195
212
|
<td><code>class// .yellow-light</code></td>
|
|
196
213
|
</tr>
|
|
197
|
-
|
|
214
|
+
|
|
215
|
+
<tr>
|
|
198
216
|
<td><span class='swatch yellow-bg'></span></td>
|
|
199
217
|
<td><code>sass// $yellow</code></td>
|
|
200
218
|
<td><code>class// .yellow</code></td>
|
|
201
219
|
</tr>
|
|
202
|
-
|
|
220
|
+
|
|
221
|
+
<tr>
|
|
203
222
|
<td><span class='swatch yellow-dark-bg'></span></td>
|
|
204
223
|
<td><code>sass// $yellow-dark</code></td>
|
|
205
224
|
<td><code>class// .yellow-dark</code></td>
|
|
206
225
|
</tr>
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
</div>
|
|
211
|
-
|
|
212
|
-
<a name="buttons"></a>
|
|
213
|
-
<div class="section">
|
|
214
|
-
|
|
215
|
-
<h1>Buttons</h1>
|
|
216
|
-
|
|
217
|
-
<p>Mix and match styles to make the right button, all colors are available as well.</p>
|
|
218
|
-
<p><code><a href='#' class='btn'></a></code></p>
|
|
219
|
-
<table class="table" cellspacing="0" cellpadding="0">
|
|
220
|
-
<tr>
|
|
221
|
-
<th></th>
|
|
222
|
-
<th>Normal</th>
|
|
223
|
-
<th><code>.green</code></th>
|
|
224
|
-
</tr>
|
|
225
|
-
<tr>
|
|
226
|
-
<th></th>
|
|
227
|
-
<td><a class="btn">Button</a></td>
|
|
228
|
-
<td><a class="btn green">Button</a></td>
|
|
229
|
-
</tr>
|
|
230
|
-
<tr>
|
|
231
|
-
<th><code>:hover</code> or <code>.hover</code></th>
|
|
232
|
-
<td><a class="btn hover">Button</a></td>
|
|
233
|
-
<td><a class="btn green hover">Button</a></td>
|
|
234
|
-
</tr>
|
|
235
|
-
<tr>
|
|
236
|
-
<th><code>:active</code> or <code>.active</code></th>
|
|
237
|
-
<td><a class="btn active">Button</a></td>
|
|
238
|
-
<td><a class="btn green active">Button</a></td>
|
|
239
|
-
</tr>
|
|
240
|
-
<tr>
|
|
241
|
-
<th><code>:disabled</code> or <code>.disabled</code></th>
|
|
242
|
-
<td><a class="btn disabled">Button</a></td>
|
|
243
|
-
<td><a class="btn green disabled">Button</a></td>
|
|
244
|
-
</tr>
|
|
245
|
-
<tr>
|
|
246
|
-
<th><code>.subtle</code></th>
|
|
247
|
-
<td><a class="btn subtle">Button</a></td>
|
|
248
|
-
<td><a class="btn green subtle">Button</a></td>
|
|
249
|
-
</tr>
|
|
250
|
-
<tr>
|
|
251
|
-
<th><code>.small</code></th>
|
|
252
|
-
<td><a class="btn small">Button</a></td>
|
|
253
|
-
<td><a class="btn green small">Button</a></td>
|
|
254
|
-
</tr>
|
|
255
|
-
<tr>
|
|
256
|
-
<th><code>.large</code></th>
|
|
257
|
-
<td><a class="btn large">Button</a></td>
|
|
258
|
-
<td><a class="btn green large">Button</a></td>
|
|
259
|
-
</tr>
|
|
260
|
-
<tr>
|
|
261
|
-
<th><code>.outline</code></th>
|
|
262
|
-
<td><a class="btn outline">Button</a></td>
|
|
263
|
-
<td><a class="btn green outline">Button</a></td>
|
|
264
|
-
</tr>
|
|
265
|
-
<tr>
|
|
266
|
-
<th><code>.circle</code></th>
|
|
267
|
-
<td><a class="btn circle">Button</a></td>
|
|
268
|
-
<td><a class="btn green circle">Button</a></td>
|
|
269
|
-
</tr>
|
|
270
|
-
<tr>
|
|
271
|
-
<th><code>.block</code></th>
|
|
272
|
-
<td><a class="btn block">Button</a></td>
|
|
273
|
-
<td><a class="btn green block">Button</a></td>
|
|
274
|
-
</tr>
|
|
275
|
-
</table>
|
|
226
|
+
|
|
227
|
+
<tr><td colspan='3'> </td></tr>
|
|
276
228
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
229
|
+
</table>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<a name="buttons"></a>
|
|
233
|
+
<div class="section">
|
|
234
|
+
|
|
235
|
+
<h1>Buttons</h1>
|
|
236
|
+
|
|
237
|
+
<p>Mix and match styles to make the right button, all colors are available as well.</p>
|
|
238
|
+
<p><code><a href='#' class='uniform-btn'></a></code></p>
|
|
239
|
+
<table class="table" cellspacing="0" cellpadding="0">
|
|
240
|
+
<tr>
|
|
241
|
+
<th></th>
|
|
242
|
+
<th>Normal</th>
|
|
243
|
+
<th><code>.green</code></th>
|
|
244
|
+
</tr>
|
|
245
|
+
<tr>
|
|
246
|
+
<th></th>
|
|
247
|
+
<td><a class="uniform-btn">Button</a></td>
|
|
248
|
+
<td><a class="uniform-btn green">Button</a></td>
|
|
249
|
+
</tr>
|
|
250
|
+
<tr>
|
|
251
|
+
<th><code>:hover</code> or <code>.hover</code></th>
|
|
252
|
+
<td><a class="uniform-btn hover">Button</a></td>
|
|
253
|
+
<td><a class="uniform-btn green hover">Button</a></td>
|
|
254
|
+
</tr>
|
|
255
|
+
<tr>
|
|
256
|
+
<th><code>:active</code> or <code>.active</code></th>
|
|
257
|
+
<td><a class="uniform-btn active">Button</a></td>
|
|
258
|
+
<td><a class="uniform-btn green active">Button</a></td>
|
|
259
|
+
</tr>
|
|
260
|
+
<tr>
|
|
261
|
+
<th><code>:disabled</code> or <code>.disabled</code></th>
|
|
262
|
+
<td><a class="uniform-btn disabled">Button</a></td>
|
|
263
|
+
<td><a class="uniform-btn green disabled">Button</a></td>
|
|
264
|
+
</tr>
|
|
265
|
+
<tr>
|
|
266
|
+
<th><code>.subtle</code></th>
|
|
267
|
+
<td><a class="uniform-btn subtle">Button</a></td>
|
|
268
|
+
<td><a class="uniform-btn green subtle">Button</a></td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
271
|
+
<th><code>.small</code></th>
|
|
272
|
+
<td><a class="uniform-btn small">Button</a></td>
|
|
273
|
+
<td><a class="uniform-btn green small">Button</a></td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<th><code>.large</code></th>
|
|
277
|
+
<td><a class="uniform-btn large">Button</a></td>
|
|
278
|
+
<td><a class="uniform-btn green large">Button</a></td>
|
|
279
|
+
</tr>
|
|
280
|
+
<tr>
|
|
281
|
+
<th><code>.outline</code></th>
|
|
282
|
+
<td><a class="uniform-btn outline">Button</a></td>
|
|
283
|
+
<td><a class="uniform-btn green outline">Button</a></td>
|
|
284
|
+
</tr>
|
|
285
|
+
<tr>
|
|
286
|
+
<th><code>.circle</code></th>
|
|
287
|
+
<td><a class="uniform-btn circle">Button</a></td>
|
|
288
|
+
<td><a class="uniform-btn green circle">Button</a></td>
|
|
289
|
+
</tr>
|
|
290
|
+
<tr>
|
|
291
|
+
<th><code>.block</code></th>
|
|
292
|
+
<td><a class="uniform-btn block">Button</a></td>
|
|
293
|
+
<td><a class="uniform-btn green block">Button</a></td>
|
|
294
|
+
</tr>
|
|
295
|
+
</table>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<a name="grid"></a>
|
|
299
|
+
<div class="section">
|
|
300
|
+
|
|
301
|
+
<h1>Grid</h1>
|
|
302
|
+
|
|
303
|
+
<p>Uses Bootstrap3 grid notation</p>
|
|
304
|
+
<div class="row">
|
|
305
|
+
<div class="col-sm-4">
|
|
306
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="col-sm-4">
|
|
309
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="col-sm-4">
|
|
312
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
<br>
|
|
316
|
+
<div class="row">
|
|
317
|
+
<div class="col-sm-2">
|
|
318
|
+
<div class="green-light-bg">col-sm-2</div>
|
|
319
|
+
</div>
|
|
320
|
+
<div class="col-sm-6">
|
|
321
|
+
<div class="green-light-bg">col-sm-6</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="col-sm-4">
|
|
324
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
<br>
|
|
328
|
+
<pre><xmp><div class="row">
|
|
329
|
+
<div class="col-sm-4">
|
|
330
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
331
|
+
</div>
|
|
332
|
+
<div class="col-sm-4">
|
|
333
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="col-sm-4">
|
|
336
|
+
<div class="green-light-bg">col-sm-4</div>
|
|
337
|
+
</div>
|
|
338
|
+
</div></xmp></pre>
|
|
339
|
+
<br>
|
|
340
|
+
<div class="row">
|
|
341
|
+
<div class="col-sm-3 col-sm-push-2">
|
|
342
|
+
<div class="green-light-bg">.col-sm-3 .col-sm-push-2</div>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
<br>
|
|
285
346
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
<h1>Inputs</h1>
|
|
292
|
-
|
|
293
|
-
<h3>Custom Inputs</h3>
|
|
294
|
-
<div class="row">
|
|
295
|
-
<div class="col-sm-6">
|
|
296
|
-
<p>Styled Select Box
|
|
297
|
-
<p><span class="uniform-select"><select><option>An Option</option></select></span></p>
|
|
347
|
+
<h3>Breakpoints</h3>
|
|
348
|
+
<p><code>xs</code> = 480px</p>
|
|
349
|
+
<p><code>sm</code> = 768px</p>
|
|
350
|
+
<p><code>md</code> = 992px</p>
|
|
351
|
+
<p><code>lg</code> = 1200px</p>
|
|
298
352
|
</div>
|
|
299
|
-
|
|
353
|
+
|
|
354
|
+
<a name="inputs"></a>
|
|
355
|
+
<div class="section">
|
|
356
|
+
|
|
357
|
+
<h1>Inputs</h1>
|
|
358
|
+
|
|
359
|
+
<h3>Uniform Input</h3>
|
|
360
|
+
<div class="row">
|
|
361
|
+
<div class="col-sm-6">
|
|
362
|
+
<p><input type="text" class="uniform-input" /></p>
|
|
363
|
+
<p><input type="text" class="uniform-input large" /></p>
|
|
364
|
+
</div>
|
|
365
|
+
<div class="col-sm-6">
|
|
366
|
+
<pre><xmp><input type="text" class="uniform-input" /></xmp></pre>
|
|
367
|
+
<pre><xmp><input type="text" class="uniform-input large" /></xmp></pre>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
|
|
371
|
+
<h3>Custom Inputs</h3>
|
|
372
|
+
<div class="row">
|
|
373
|
+
<div class="col-sm-6">
|
|
374
|
+
<p>Styled Select Box</p>
|
|
375
|
+
<p><span class="uniform-select"><select><option>An Option</option></select></span></p>
|
|
376
|
+
</div>
|
|
377
|
+
<div class="col-sm-6">
|
|
300
378
|
<pre><xmp><span class='uniform-select'>
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
379
|
+
<select>
|
|
380
|
+
<option>An Option</option>
|
|
381
|
+
</select>
|
|
304
382
|
</span></xmp></pre>
|
|
305
|
-
</div>
|
|
306
383
|
</div>
|
|
384
|
+
</div>
|
|
307
385
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
</
|
|
321
|
-
|
|
322
|
-
<label for="rate">/hour</label>
|
|
323
|
-
</span>
|
|
324
|
-
</div>
|
|
386
|
+
<h3>Inline Inputs</h3>
|
|
387
|
+
<p>Ever want to put in an input and it's label in line, and have it be 100% width responsive? Well, you can't, unless you use something like inline-input.</p>
|
|
388
|
+
<div class="row">
|
|
389
|
+
<div class="col-sm-6">
|
|
390
|
+
<div class="inline-input">
|
|
391
|
+
<span class="label">
|
|
392
|
+
<label for="rate">$</label>
|
|
393
|
+
</span>
|
|
394
|
+
<span>
|
|
395
|
+
<input id="rate">
|
|
396
|
+
</span>
|
|
397
|
+
<span class="units">
|
|
398
|
+
<label for="rate">/hour</label>
|
|
399
|
+
</span>
|
|
325
400
|
</div>
|
|
326
|
-
|
|
401
|
+
</div>
|
|
402
|
+
<div class="col-sm-6">
|
|
327
403
|
<pre><xmp><div class="inline-input">
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
404
|
+
<span class="label">$</span>
|
|
405
|
+
<span>
|
|
406
|
+
<input id="name" placeholder="Jonathan Doe">
|
|
407
|
+
</span>
|
|
408
|
+
<span class="units">/hour</span>
|
|
333
409
|
</div></xmp></pre>
|
|
334
|
-
</div>
|
|
335
410
|
</div>
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
</
|
|
411
|
+
</div>
|
|
412
|
+
<div class="row">
|
|
413
|
+
<div class="col-sm-6">
|
|
414
|
+
<div class="inline-input">
|
|
415
|
+
<span class="label"><label for="car">Car Preference</label></span>
|
|
416
|
+
<span class="select"><select id="car"><option>Tesla</option></select></span>
|
|
342
417
|
</div>
|
|
343
|
-
|
|
418
|
+
</div>
|
|
419
|
+
<div class="col-sm-6">
|
|
344
420
|
<pre><xmp><div class="inline-input">
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
421
|
+
<span class="label">
|
|
422
|
+
<label for="car">Car Preference</label>
|
|
423
|
+
</span>
|
|
424
|
+
<span>
|
|
425
|
+
<select id="car"><option>Tesla</option></select>
|
|
426
|
+
</span>
|
|
351
427
|
</div></xmp></pre>
|
|
352
|
-
</div>
|
|
353
428
|
</div>
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
</
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
</
|
|
429
|
+
</div>
|
|
430
|
+
<div class="row">
|
|
431
|
+
<div class="col-sm-6">
|
|
432
|
+
<div class="inline-input block">
|
|
433
|
+
<span class="label">
|
|
434
|
+
<label for="car">Car Preference</label>
|
|
435
|
+
</span>
|
|
436
|
+
<span>
|
|
437
|
+
<input id="name" value="Jonathan Doe" disabled>
|
|
438
|
+
</span>
|
|
364
439
|
</div>
|
|
365
|
-
|
|
440
|
+
</div>
|
|
441
|
+
<div class="col-sm-6">
|
|
366
442
|
<pre><xmp><div class="inline-input block">
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
443
|
+
<span class="label">
|
|
444
|
+
<label for="car">Car Preference</label>
|
|
445
|
+
</span>
|
|
446
|
+
<span>
|
|
447
|
+
<input id="name" value="Jonathan Doe" disabled>
|
|
448
|
+
</span>
|
|
373
449
|
</div></xmp></pre>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
374
452
|
</div>
|
|
453
|
+
|
|
454
|
+
<a name="forms"></a>
|
|
455
|
+
<div class="section">
|
|
456
|
+
|
|
457
|
+
<h1>Forms</h1>
|
|
458
|
+
|
|
459
|
+
<div class="row">
|
|
460
|
+
<div class="col-sm-6">
|
|
461
|
+
<form class="uniform-form">
|
|
462
|
+
<div class="row">
|
|
463
|
+
<div class="uniform-form-group col-sm-4">
|
|
464
|
+
<label>Name</label>
|
|
465
|
+
<input type="text">
|
|
466
|
+
</div>
|
|
467
|
+
<div class="uniform-form-group col-sm-4">
|
|
468
|
+
<label>Email</label>
|
|
469
|
+
<input type="text">
|
|
470
|
+
</div>
|
|
471
|
+
<div class="uniform-form-group col-sm-4">
|
|
472
|
+
<label>Phone</label>
|
|
473
|
+
<input type="text">
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
<div class="row">
|
|
477
|
+
<div class="uniform-form-group col-sm-4">
|
|
478
|
+
<label>Twitter</label>
|
|
479
|
+
<input type="text">
|
|
480
|
+
<label>Facebook</label>
|
|
481
|
+
<input type="text">
|
|
482
|
+
<label>Instagram</label>
|
|
483
|
+
<input type="text">
|
|
484
|
+
</div>
|
|
485
|
+
<div class="uniform-form-group col-sm-8">
|
|
486
|
+
<label>Details</label>
|
|
487
|
+
<textarea rows="9"></textarea>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
</form>
|
|
491
|
+
</div>
|
|
492
|
+
<div class="col-sm-6">
|
|
493
|
+
<pre><xmp><form class="uniform-form">
|
|
494
|
+
<div class="row">
|
|
495
|
+
<div class="uniform-form-group col-sm-4">
|
|
496
|
+
<label>Name</label>
|
|
497
|
+
<input type="text">
|
|
498
|
+
</div>
|
|
499
|
+
<div class="uniform-form-group col-sm-4">
|
|
500
|
+
<label>Email</label>
|
|
501
|
+
<input type="text">
|
|
502
|
+
</div>
|
|
503
|
+
<div class="uniform-form-group col-sm-4">
|
|
504
|
+
<label>Phone</label>
|
|
505
|
+
<input type="text">
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
<div class="row">
|
|
509
|
+
<div class="uniform-form-group col-sm-4">
|
|
510
|
+
<label>Twitter</label>
|
|
511
|
+
<input type="text">
|
|
512
|
+
<label>Facebook</label>
|
|
513
|
+
<input type="text">
|
|
514
|
+
<label>Instagram</label>
|
|
515
|
+
<input type="text">
|
|
516
|
+
</div>
|
|
517
|
+
<div class="uniform-form-group col-sm-8">
|
|
518
|
+
<label>Details</label>
|
|
519
|
+
<textarea rows="9"></textarea>
|
|
520
|
+
</div>
|
|
521
|
+
</div>
|
|
522
|
+
</form></xmp></pre>
|
|
375
523
|
</div>
|
|
524
|
+
</div>
|
|
376
525
|
|
|
526
|
+
<h3>Has Error</h3>
|
|
527
|
+
<div class="row">
|
|
528
|
+
<div class="col-sm-6">
|
|
529
|
+
<form class="uniform-form">
|
|
530
|
+
<div class="row">
|
|
531
|
+
<div class="uniform-form-group col-sm-12">
|
|
532
|
+
<div class="has-error">
|
|
533
|
+
<label>Name</label>
|
|
534
|
+
<input type="text">
|
|
535
|
+
</div>
|
|
536
|
+
</div>
|
|
377
537
|
</div>
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
538
|
+
</form>
|
|
539
|
+
</div>
|
|
540
|
+
<div class="col-sm-6">
|
|
541
|
+
<pre><xmp><form class="uniform-form">
|
|
542
|
+
<div class="row">
|
|
543
|
+
<div class="uniform-form-group col-sm-4">
|
|
544
|
+
<div class="has-error">
|
|
545
|
+
<label>Name</label>
|
|
546
|
+
<input type="text">
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
</form></xmp></pre>
|
|
551
|
+
</div>
|
|
552
|
+
</div>
|
|
385
553
|
|
|
554
|
+
<div class="row">
|
|
555
|
+
<div class="col-sm-6">
|
|
556
|
+
<form class="uniform-form uniform-form-table">
|
|
557
|
+
<div class="row">
|
|
558
|
+
<div class="uniform-form-group col-sm-4">
|
|
559
|
+
<label>Name</label>
|
|
560
|
+
<input type="text">
|
|
561
|
+
</div>
|
|
562
|
+
<div class="uniform-form-group col-sm-4">
|
|
563
|
+
<label>Email</label>
|
|
564
|
+
<input type="text">
|
|
565
|
+
</div>
|
|
566
|
+
<div class="uniform-form-group col-sm-4">
|
|
567
|
+
<label>Phone</label>
|
|
568
|
+
<input type="text">
|
|
569
|
+
</div>
|
|
386
570
|
</div>
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
571
|
+
<div class="row">
|
|
572
|
+
<div class="uniform-form-group col-sm-4">
|
|
573
|
+
<label>Twitter</label>
|
|
574
|
+
<input type="text">
|
|
575
|
+
<label>Facebook</label>
|
|
576
|
+
<input type="text">
|
|
577
|
+
<label>Instagram</label>
|
|
578
|
+
<input type="text">
|
|
579
|
+
</div>
|
|
580
|
+
<div class="uniform-form-group col-sm-8 col-span-2">
|
|
581
|
+
<label>Details</label>
|
|
582
|
+
<textarea rows="6"></textarea>
|
|
583
|
+
</div>
|
|
584
|
+
</div>
|
|
585
|
+
</form>
|
|
586
|
+
<br>
|
|
587
|
+
<form class="uniform-form uniform-form-table">
|
|
588
|
+
<div class="row">
|
|
589
|
+
<div class="uniform-form-group col-sm-4">
|
|
590
|
+
<label>Name</label>
|
|
591
|
+
<input type="text">
|
|
592
|
+
</div>
|
|
593
|
+
<div class="uniform-form-group col-sm-4">
|
|
594
|
+
<div class="has-error">
|
|
595
|
+
<label>Email</label>
|
|
596
|
+
<input type="text">
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="uniform-form-group col-sm-4">
|
|
600
|
+
<label>Phone</label>
|
|
601
|
+
<input type="text">
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
<div class="row">
|
|
605
|
+
<div class="uniform-form-group col-sm-4">
|
|
606
|
+
<label>Twitter</label>
|
|
607
|
+
<input type="text">
|
|
608
|
+
<label>Facebook</label>
|
|
609
|
+
<input type="text">
|
|
610
|
+
<div class="has-error">
|
|
611
|
+
<label>Instagram</label>
|
|
612
|
+
<input type="text">
|
|
613
|
+
</div>
|
|
614
|
+
</div>
|
|
615
|
+
<div class="uniform-form-group col-sm-8 col-span-2">
|
|
616
|
+
<label>Details</label>
|
|
617
|
+
<textarea rows="6"></textarea>
|
|
618
|
+
</div>
|
|
619
|
+
</div>
|
|
620
|
+
</form>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="col-sm-6">
|
|
623
|
+
<pre><xmp><form class="uniform-form uniform-form-table">
|
|
624
|
+
<div class="row">
|
|
625
|
+
<div class="uniform-form-group col-sm-4">
|
|
626
|
+
<label>Name</label>
|
|
627
|
+
<input type="text">
|
|
628
|
+
</div>
|
|
629
|
+
<div class="uniform-form-group col-sm-4">
|
|
630
|
+
<label>Email</label>
|
|
631
|
+
<input type="text">
|
|
632
|
+
</div>
|
|
633
|
+
<div class="uniform-form-group col-sm-4">
|
|
634
|
+
<label>Phone</label>
|
|
635
|
+
<input type="text">
|
|
636
|
+
</div>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="row">
|
|
639
|
+
<div class="uniform-form-group col-sm-4">
|
|
640
|
+
<label>Twitter</label>
|
|
641
|
+
<input type="text">
|
|
642
|
+
<label>Facebook</label>
|
|
643
|
+
<input type="text">
|
|
644
|
+
<label>Instagram</label>
|
|
645
|
+
<input type="text">
|
|
646
|
+
</div>
|
|
647
|
+
<div class="uniform-form-group col-sm-8 col-span-2">
|
|
648
|
+
<label>Details</label>
|
|
649
|
+
<textarea rows="6"></textarea>
|
|
650
|
+
</div>
|
|
651
|
+
</div>
|
|
652
|
+
</form></xmp></pre>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<a name="loaders"></a>
|
|
658
|
+
<div class="section">
|
|
659
|
+
|
|
660
|
+
<h1>Loaders</h1>
|
|
661
|
+
|
|
662
|
+
<div class="row">
|
|
394
663
|
<div class="col-sm-6">
|
|
395
664
|
<div class="uniform-loader">
|
|
396
665
|
<div class="uniform-loader-container">
|
|
@@ -413,7 +682,7 @@
|
|
|
413
682
|
<div class="row">
|
|
414
683
|
<div class="col-sm-6">
|
|
415
684
|
<span style="position:relative; display:inline-block">
|
|
416
|
-
<img src="https://unsplash.it/150/100/?random" style="display:
|
|
685
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;" width="150" height="100">
|
|
417
686
|
<div class="uniform-loader cover">
|
|
418
687
|
<div class="uniform-loader-container">
|
|
419
688
|
<span>•</span>
|
|
@@ -425,7 +694,7 @@
|
|
|
425
694
|
</div>
|
|
426
695
|
<div class="col-sm-6">
|
|
427
696
|
<pre><xmp><span style="position:relative; display:inline-block">
|
|
428
|
-
<img src="https://unsplash.it/150/100/?random" style="display:
|
|
697
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;">
|
|
429
698
|
<div class="uniform-loader cover">
|
|
430
699
|
<div class="uniform-loader-container">
|
|
431
700
|
<span>•</span>
|
|
@@ -439,7 +708,7 @@
|
|
|
439
708
|
<div class="row">
|
|
440
709
|
<div class="col-sm-6">
|
|
441
710
|
<span style="position:relative; display:inline-block">
|
|
442
|
-
<img src="https://unsplash.it/150/100/?random" style="display:
|
|
711
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;" width="150" height="100">
|
|
443
712
|
<div class="uniform-loader cover light">
|
|
444
713
|
<div class="uniform-loader-container">
|
|
445
714
|
<span>•</span>
|
|
@@ -451,7 +720,7 @@
|
|
|
451
720
|
</div>
|
|
452
721
|
<div class="col-sm-6">
|
|
453
722
|
<pre><xmp><span style="position:relative; display:inline-block">
|
|
454
|
-
<img src="https://unsplash.it/150/100/?random" style="display:
|
|
723
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;">
|
|
455
724
|
<div class="uniform-loader cover light">
|
|
456
725
|
<div class="uniform-loader-container">
|
|
457
726
|
<span>•</span>
|
|
@@ -462,15 +731,14 @@
|
|
|
462
731
|
</span></xmp></pre>
|
|
463
732
|
</div>
|
|
464
733
|
</div>
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
<div class="row">
|
|
734
|
+
</div>
|
|
735
|
+
|
|
736
|
+
<a name="cards"></a>
|
|
737
|
+
<div class="section">
|
|
738
|
+
|
|
739
|
+
<h1>Cards</h1>
|
|
740
|
+
|
|
741
|
+
<div class="row">
|
|
474
742
|
<div class="col-sm-6">
|
|
475
743
|
<div class="uniform-card">
|
|
476
744
|
<div class="uniform-card-title">
|
|
@@ -492,13 +760,13 @@
|
|
|
492
760
|
<div class="col-sm-6">
|
|
493
761
|
<div class="uniform-card">
|
|
494
762
|
<div class="uniform-card-avatar">
|
|
495
|
-
<img src="https://unsplash.it/
|
|
763
|
+
<img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
|
|
496
764
|
</div>
|
|
497
765
|
<div class="uniform-card-container">
|
|
498
766
|
<div class="uniform-card-title">
|
|
499
767
|
<span class="type">John Dozer</span>
|
|
500
768
|
<div class="actions">
|
|
501
|
-
<a class="btn">Edit</a>
|
|
769
|
+
<a class="uniform-btn">Edit</a>
|
|
502
770
|
</div>
|
|
503
771
|
</div>
|
|
504
772
|
<div class="uniform-card-body">
|
|
@@ -523,13 +791,13 @@
|
|
|
523
791
|
<div class="col-sm-6">
|
|
524
792
|
<pre><xmp><div class="uniform-card">
|
|
525
793
|
<div class="uniform-card-avatar">
|
|
526
|
-
<img src="https://unsplash.it/
|
|
794
|
+
<img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
|
|
527
795
|
</div>
|
|
528
796
|
<div class="uniform-card-container">
|
|
529
797
|
<div class="uniform-card-title">
|
|
530
798
|
<span class="type">John Dozer</span>
|
|
531
799
|
<div class="actions">
|
|
532
|
-
<a class="btn">Edit</a>
|
|
800
|
+
<a class="uniform-btn">Edit</a>
|
|
533
801
|
</div>
|
|
534
802
|
</div>
|
|
535
803
|
<div class="uniform-card-body">
|
|
@@ -552,109 +820,352 @@
|
|
|
552
820
|
</div></xmp></pre>
|
|
553
821
|
</div>
|
|
554
822
|
</div>
|
|
555
|
-
|
|
556
|
-
</div>
|
|
557
|
-
|
|
558
|
-
<a name="tiles"></a>
|
|
559
|
-
<div class="section">
|
|
560
|
-
|
|
561
|
-
<h1>Tiles</h1>
|
|
562
|
-
|
|
563
|
-
TODO
|
|
564
|
-
|
|
565
|
-
</div>
|
|
566
|
-
|
|
567
|
-
<a name="rows"></a>
|
|
568
|
-
<div class="section">
|
|
569
|
-
|
|
570
|
-
<h1>Rows</h1>
|
|
571
|
-
|
|
572
|
-
TODO
|
|
573
|
-
|
|
574
|
-
</div>
|
|
575
|
-
|
|
576
|
-
<a name="lists"></a>
|
|
577
|
-
<div class="section">
|
|
578
|
-
|
|
579
|
-
<h1>Lists</h1>
|
|
580
|
-
|
|
581
|
-
TODO
|
|
582
|
-
|
|
583
|
-
</div>
|
|
584
|
-
|
|
585
|
-
<a name="tables"></a>
|
|
586
|
-
<div class="section">
|
|
587
|
-
|
|
588
|
-
<h1>Tables</h1>
|
|
589
|
-
|
|
590
|
-
TODO
|
|
591
|
-
|
|
592
|
-
</div>
|
|
593
|
-
|
|
594
|
-
<a name="nav"></a>
|
|
595
|
-
<div class="section">
|
|
596
|
-
|
|
597
|
-
<h1>Nav</h1>
|
|
598
|
-
|
|
599
|
-
<div class="row">
|
|
600
|
-
<div class="col-sm-6">
|
|
601
|
-
<div class="uniform-nav horizontal main">
|
|
602
|
-
<div class="pad">Logo</div>
|
|
603
|
-
<div class="right">
|
|
604
|
-
<div><a>Account</a></div>
|
|
605
|
-
<div><a>Sign Out</a></div>
|
|
606
|
-
</div>
|
|
607
823
|
</div>
|
|
824
|
+
|
|
825
|
+
<a name="tiles"></a>
|
|
826
|
+
<div class="section">
|
|
827
|
+
|
|
828
|
+
<h1>Tiles</h1>
|
|
829
|
+
|
|
830
|
+
TODO
|
|
831
|
+
</div>
|
|
832
|
+
|
|
833
|
+
<a name="rows"></a>
|
|
834
|
+
<div class="section">
|
|
835
|
+
|
|
836
|
+
<h1>Rows</h1>
|
|
837
|
+
|
|
838
|
+
<a class="uniform-row" href="#rows">
|
|
839
|
+
<span class="uniform-row-avatar">
|
|
840
|
+
<img src="https://unsplash.it/63/47/?random" width="63" height="47">
|
|
841
|
+
</span>
|
|
842
|
+
<span class="uniform-row-container">
|
|
843
|
+
<span class="col-sm-6">
|
|
844
|
+
John Doe
|
|
845
|
+
<span class="uniform-row-secondary">ABC Designs</span>
|
|
846
|
+
</span>
|
|
847
|
+
<span class="col-sm-3">
|
|
848
|
+
Garland, TX
|
|
849
|
+
</span>
|
|
850
|
+
<span class="col-sm-3">
|
|
851
|
+
Texas Ranger Fan
|
|
852
|
+
</span>
|
|
853
|
+
</span>
|
|
854
|
+
</a>
|
|
855
|
+
<br><br>
|
|
856
|
+
<pre><xmp><a class="uniform-row" href="#rows">
|
|
857
|
+
<span class="uniform-row-avatar">
|
|
858
|
+
<img src="https://unsplash.it/63/47/?random" width="63" height="47">
|
|
859
|
+
</span>
|
|
860
|
+
<span class="uniform-row-container">
|
|
861
|
+
<span class="col-sm-6">
|
|
862
|
+
John Doe
|
|
863
|
+
<span class="uniform-row-secondary">ABC Designs</span>
|
|
864
|
+
</span>
|
|
865
|
+
<span class="col-sm-3">
|
|
866
|
+
Garland, TX
|
|
867
|
+
</span>
|
|
868
|
+
<span class="col-sm-3">
|
|
869
|
+
Texas Ranger Fan
|
|
870
|
+
</span>
|
|
871
|
+
</span>
|
|
872
|
+
</a></xmp></pre>
|
|
873
|
+
</div>
|
|
874
|
+
|
|
875
|
+
<a name="lists"></a>
|
|
876
|
+
<div class="section">
|
|
877
|
+
|
|
878
|
+
<h1>Lists</h1>
|
|
879
|
+
|
|
880
|
+
<div class="row">
|
|
881
|
+
<div class="col-sm-6">
|
|
882
|
+
<ol class="uniform-step">
|
|
883
|
+
<li>Fill out the form</li>
|
|
884
|
+
<li>Join the club</li>
|
|
885
|
+
<li>Chill</li>
|
|
886
|
+
</ol>
|
|
608
887
|
</div>
|
|
609
888
|
<div class="col-sm-6">
|
|
610
|
-
<pre><xmp
|
|
611
|
-
|
|
612
|
-
<
|
|
613
|
-
|
|
614
|
-
|
|
889
|
+
<pre><xmp>
|
|
890
|
+
<ol class="uniform-step">
|
|
891
|
+
<li>Fill out the form</li>
|
|
892
|
+
<li>Join the club</li>
|
|
893
|
+
<li>Chill</li>
|
|
894
|
+
</ol></xmp></pre>
|
|
615
895
|
</div>
|
|
616
|
-
</div
|
|
896
|
+
</div>
|
|
897
|
+
|
|
898
|
+
<div class="row">
|
|
899
|
+
<div class="col-sm-6">
|
|
900
|
+
<ul class="uniform-checks">
|
|
901
|
+
<li>Fill out the form</li>
|
|
902
|
+
<li>Join the club</li>
|
|
903
|
+
<li>Chill</li>
|
|
904
|
+
</ul>
|
|
905
|
+
</div>
|
|
906
|
+
<div class="col-sm-6">
|
|
907
|
+
<pre><xmp>
|
|
908
|
+
<ul class="uniform-checks">
|
|
909
|
+
<li>Fill out the form</li>
|
|
910
|
+
<li>Join the club</li>
|
|
911
|
+
<li>Chill</li>
|
|
912
|
+
</ul></xmp></pre>
|
|
617
913
|
</div>
|
|
618
914
|
</div>
|
|
915
|
+
|
|
619
916
|
<div class="row">
|
|
620
917
|
<div class="col-sm-6">
|
|
621
|
-
<
|
|
622
|
-
<
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
</div>
|
|
918
|
+
<ul class="uniform-icons">
|
|
919
|
+
<li data-icon="">Fill out the form</li>
|
|
920
|
+
<li data-icon="">Join the club</li>
|
|
921
|
+
<li data-icon="">Chill</li>
|
|
922
|
+
</ul>
|
|
627
923
|
</div>
|
|
628
924
|
<div class="col-sm-6">
|
|
925
|
+
<pre><xmp>
|
|
926
|
+
<ul class="uniform-icons">
|
|
927
|
+
<li data-icon="">Fill out the form</li>
|
|
928
|
+
<li data-icon="">Join the club</li>
|
|
929
|
+
<li data-icon="">Chill</li>
|
|
930
|
+
</ul></xmp></pre>
|
|
931
|
+
</div>
|
|
932
|
+
</div>
|
|
933
|
+
</div>
|
|
934
|
+
|
|
935
|
+
<a name="tables"></a>
|
|
936
|
+
<div class="section">
|
|
937
|
+
|
|
938
|
+
<h1>Tables</h1>
|
|
939
|
+
|
|
940
|
+
TODO
|
|
941
|
+
</div>
|
|
942
|
+
|
|
943
|
+
<a name="nav"></a>
|
|
944
|
+
<div class="section">
|
|
945
|
+
|
|
946
|
+
<h1>Nav</h1>
|
|
947
|
+
|
|
948
|
+
<div class="uniform-nav">
|
|
949
|
+
<div class="brand">
|
|
950
|
+
<img src="site/logo.png" height="31" width="137">
|
|
951
|
+
</div>
|
|
952
|
+
<ul>
|
|
953
|
+
<li><a href="#">Home</a></li>
|
|
954
|
+
<li><a href="#">About</a></li>
|
|
955
|
+
<li><a href="#">Contact</a></li>
|
|
956
|
+
</ul>
|
|
957
|
+
<ul class="uniform-nav-right">
|
|
958
|
+
<li><a href="#">Login</a></li>
|
|
959
|
+
</ul>
|
|
960
|
+
</div>
|
|
961
|
+
<div class="uniform-nav uniform-nav-subnav">
|
|
962
|
+
<ul>
|
|
963
|
+
<li><a href="#">Home</a></li>
|
|
964
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
965
|
+
<li><a href="#">Nav</a></li>
|
|
966
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
967
|
+
<li><a href="#">Preview</a></li>
|
|
968
|
+
</ul>
|
|
969
|
+
</div>
|
|
970
|
+
|
|
971
|
+
<br><br>
|
|
629
972
|
<pre><xmp><div class="uniform-nav">
|
|
973
|
+
<div class="brand">
|
|
974
|
+
<img src="site/logo.png" height="31" width="137">
|
|
975
|
+
</div>
|
|
630
976
|
<ul>
|
|
631
|
-
<li><a>
|
|
632
|
-
<li><a>
|
|
977
|
+
<li><a href="#">Home</a></li>
|
|
978
|
+
<li><a href="#">About</a></li>
|
|
979
|
+
<li><a href="#">Contact</a></li>
|
|
980
|
+
</ul>
|
|
981
|
+
<ul class="uniform-nav-right">
|
|
982
|
+
<li><a href="#">Login</a></li>
|
|
983
|
+
</ul>
|
|
984
|
+
</div>
|
|
985
|
+
<div class="uniform-nav uniform-nav-subnav">
|
|
986
|
+
<ul>
|
|
987
|
+
<li><a href="#">Home</a></li>
|
|
988
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
989
|
+
<li><a href="#">Nav</a></li>
|
|
990
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
991
|
+
<li><a href="#">Preview</a></li>
|
|
633
992
|
</ul>
|
|
634
993
|
</div></xmp></pre>
|
|
994
|
+
</div>
|
|
995
|
+
|
|
996
|
+
<a name="tabs"></a>
|
|
997
|
+
<div class="section">
|
|
998
|
+
|
|
999
|
+
<h1>Tabs</h1>
|
|
1000
|
+
|
|
1001
|
+
TODO
|
|
1002
|
+
</div>
|
|
1003
|
+
|
|
1004
|
+
<a name="helpers"></a>
|
|
1005
|
+
<div class="section">
|
|
1006
|
+
|
|
1007
|
+
<h1>Helpers</h1>
|
|
1008
|
+
|
|
1009
|
+
<div class="row">
|
|
1010
|
+
<div class="col-sm-6">
|
|
1011
|
+
<vr>
|
|
1012
|
+
</div>
|
|
1013
|
+
<div class="col-sm-6">
|
|
1014
|
+
<pre><xmp><vr></xmp></pre>
|
|
635
1015
|
</div>
|
|
636
1016
|
</div>
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
1017
|
+
<br>
|
|
1018
|
+
<br>
|
|
1019
|
+
<div class="row">
|
|
1020
|
+
<div class="col-sm-6">
|
|
1021
|
+
<code>.rounded</code>, <code>.round</code>
|
|
1022
|
+
</div>
|
|
1023
|
+
<div class="col-sm-6">
|
|
1024
|
+
<pre><xmp>border-radius: 50%</xmp></pre>
|
|
1025
|
+
</div>
|
|
1026
|
+
</div>
|
|
1027
|
+
<div class="row">
|
|
1028
|
+
<div class="col-sm-6">
|
|
1029
|
+
<code>.handle</code>
|
|
1030
|
+
</div>
|
|
1031
|
+
<div class="col-sm-6">
|
|
1032
|
+
<pre><xmp>cursor: hand;</xmp></pre>
|
|
1033
|
+
</div>
|
|
1034
|
+
</div>
|
|
1035
|
+
<div class="row">
|
|
1036
|
+
<div class="col-sm-6">
|
|
1037
|
+
<code>.pointer</code>
|
|
1038
|
+
</div>
|
|
1039
|
+
<div class="col-sm-6">
|
|
1040
|
+
<pre><xmp>cursor: pointer;</xmp></pre>
|
|
1041
|
+
</div>
|
|
1042
|
+
</div>
|
|
1043
|
+
<div class="row">
|
|
1044
|
+
<div class="col-sm-6">
|
|
1045
|
+
<code>.honeypot</code>
|
|
1046
|
+
</div>
|
|
1047
|
+
<div class="col-sm-6">
|
|
1048
|
+
<pre><xmp>position:absolute !important;
|
|
1049
|
+
left:-999999px !important;
|
|
1050
|
+
width:1px !important;
|
|
1051
|
+
display:block !important;
|
|
1052
|
+
</xmp></pre>
|
|
1053
|
+
</div>
|
|
1054
|
+
</div>
|
|
1055
|
+
<div class="row">
|
|
1056
|
+
<div class="col-sm-6">
|
|
1057
|
+
<code>.hidden, .hide</code>
|
|
1058
|
+
</div>
|
|
1059
|
+
<div class="col-sm-6">
|
|
1060
|
+
<pre><xmp>display:none;</xmp></pre>
|
|
1061
|
+
</div>
|
|
1062
|
+
</div>
|
|
1063
|
+
<div class="row">
|
|
1064
|
+
<div class="col-sm-6">
|
|
1065
|
+
<code>.right</code>
|
|
1066
|
+
</div>
|
|
1067
|
+
<div class="col-sm-6">
|
|
1068
|
+
<pre><xmp>float:right;</xmp></pre>
|
|
1069
|
+
</div>
|
|
1070
|
+
</div>
|
|
1071
|
+
<div class="row">
|
|
1072
|
+
<div class="col-sm-6">
|
|
1073
|
+
<code>.text-right</code>
|
|
1074
|
+
</div>
|
|
1075
|
+
<div class="col-sm-6">
|
|
1076
|
+
<pre><xmp>text-align: right;</xmp></pre>
|
|
1077
|
+
</div>
|
|
1078
|
+
</div>
|
|
1079
|
+
<div class="row">
|
|
1080
|
+
<div class="col-sm-6">
|
|
1081
|
+
<code>.text-center</code>
|
|
1082
|
+
</div>
|
|
1083
|
+
<div class="col-sm-6">
|
|
1084
|
+
<pre><xmp>text-align: center;</xmp></pre>
|
|
1085
|
+
</div>
|
|
1086
|
+
</div>
|
|
1087
|
+
<div class="row">
|
|
1088
|
+
<div class="col-sm-6">
|
|
1089
|
+
<code>.clear</code>
|
|
1090
|
+
</div>
|
|
1091
|
+
<div class="col-sm-6">
|
|
1092
|
+
<pre><xmp>clear:both;</xmp></pre>
|
|
1093
|
+
</div>
|
|
1094
|
+
</div>
|
|
1095
|
+
<div class="row">
|
|
1096
|
+
<div class="col-sm-6">
|
|
1097
|
+
<code>.pad</code>
|
|
1098
|
+
</div>
|
|
1099
|
+
<div class="col-sm-6">
|
|
1100
|
+
<pre><xmp>padding:10px;</xmp></pre>
|
|
1101
|
+
</div>
|
|
1102
|
+
</div>
|
|
1103
|
+
<div class="row">
|
|
1104
|
+
<div class="col-sm-6">
|
|
1105
|
+
<code>.text-overflow</code>
|
|
1106
|
+
</div>
|
|
1107
|
+
<div class="col-sm-6">
|
|
1108
|
+
<pre><xmp>text-overflow: inherit;
|
|
1109
|
+
white-space: inherit;
|
|
1110
|
+
overflow: inherit;</xmp></pre>
|
|
1111
|
+
</div>
|
|
1112
|
+
</div>
|
|
1113
|
+
<div class="row">
|
|
1114
|
+
<div class="col-sm-6">
|
|
1115
|
+
<code>.strong, .bold</code>
|
|
1116
|
+
</div>
|
|
1117
|
+
<div class="col-sm-6">
|
|
1118
|
+
<pre><xmp>font-weight: 700;</xmp></pre>
|
|
1119
|
+
</div>
|
|
1120
|
+
</div>
|
|
1121
|
+
<div class="row">
|
|
1122
|
+
<div class="col-sm-6">
|
|
1123
|
+
<code>.light, .text-light</code>
|
|
658
1124
|
</div>
|
|
659
|
-
<
|
|
1125
|
+
<div class="col-sm-6">
|
|
1126
|
+
<pre><xmp>font-weight: 300;</xmp></pre>
|
|
1127
|
+
</div>
|
|
1128
|
+
</div>
|
|
1129
|
+
<div class="row">
|
|
1130
|
+
<div class="col-sm-6">
|
|
1131
|
+
<code>.text-normal</code>
|
|
1132
|
+
</div>
|
|
1133
|
+
<div class="col-sm-6">
|
|
1134
|
+
<pre><xmp>font-weight: normal;</xmp></pre>
|
|
1135
|
+
</div>
|
|
1136
|
+
</div>
|
|
1137
|
+
<div class="row">
|
|
1138
|
+
<div class="col-sm-6">
|
|
1139
|
+
<code>.warn</code>
|
|
1140
|
+
</div>
|
|
1141
|
+
<div class="col-sm-6">
|
|
1142
|
+
<pre><xmp>color:lighten($gray, 20);
|
|
1143
|
+
&:hover{
|
|
1144
|
+
color:$red;
|
|
1145
|
+
}</xmp></pre>
|
|
1146
|
+
</div>
|
|
1147
|
+
</div>
|
|
1148
|
+
<div class="row">
|
|
1149
|
+
<div class="col-sm-6">
|
|
1150
|
+
<code>p.large</code>
|
|
1151
|
+
</div>
|
|
1152
|
+
<div class="col-sm-6">
|
|
1153
|
+
<pre><xmp>font-size:1.5em;
|
|
1154
|
+
font-weight:300;
|
|
1155
|
+
margin-bottom:20px;</xmp></pre>
|
|
1156
|
+
</div>
|
|
1157
|
+
</div>
|
|
1158
|
+
<div class="row">
|
|
1159
|
+
<div class="col-sm-6">
|
|
1160
|
+
<code>.nowrap</code>
|
|
1161
|
+
</div>
|
|
1162
|
+
<div class="col-sm-6">
|
|
1163
|
+
<pre><xmp>white-space: nowrap;
|
|
1164
|
+
overflow:hidden;</xmp></pre>
|
|
1165
|
+
</div>
|
|
1166
|
+
</div>
|
|
1167
|
+
</div>
|
|
1168
|
+
|
|
1169
|
+
</div>
|
|
1170
|
+
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
|
|
660
1171
|
</body>
|