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
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<h3>Uniform Input</h3>
|
|
2
|
+
<div class="row">
|
|
3
|
+
<div class="col-sm-6">
|
|
4
|
+
<p><input type="text" class="uniform-input" /></p>
|
|
5
|
+
<p><input type="text" class="uniform-input large" /></p>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="col-sm-6">
|
|
8
|
+
<pre><xmp><input type="text" class="uniform-input" /></xmp></pre>
|
|
9
|
+
<pre><xmp><input type="text" class="uniform-input large" /></xmp></pre>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<h3>Custom Inputs</h3>
|
|
14
|
+
<div class="row">
|
|
15
|
+
<div class="col-sm-6">
|
|
16
|
+
<p>Styled Select Box</p>
|
|
17
|
+
<p><span class="uniform-select"><select><option>An Option</option></select></span></p>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="col-sm-6">
|
|
20
|
+
<pre><xmp><span class='uniform-select'>
|
|
21
|
+
<select>
|
|
22
|
+
<option>An Option</option>
|
|
23
|
+
</select>
|
|
24
|
+
</span></xmp></pre>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<h3>Inline Inputs</h3>
|
|
29
|
+
<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>
|
|
30
|
+
<div class="row">
|
|
31
|
+
<div class="col-sm-6">
|
|
32
|
+
<div class="inline-input">
|
|
33
|
+
<span class="label">
|
|
34
|
+
<label for="rate">$</label>
|
|
35
|
+
</span>
|
|
36
|
+
<span>
|
|
37
|
+
<input id="rate">
|
|
38
|
+
</span>
|
|
39
|
+
<span class="units">
|
|
40
|
+
<label for="rate">/hour</label>
|
|
41
|
+
</span>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="col-sm-6">
|
|
45
|
+
<pre><xmp><div class="inline-input">
|
|
46
|
+
<span class="label">$</span>
|
|
47
|
+
<span>
|
|
48
|
+
<input id="name" placeholder="Jonathan Doe">
|
|
49
|
+
</span>
|
|
50
|
+
<span class="units">/hour</span>
|
|
51
|
+
</div></xmp></pre>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="row">
|
|
55
|
+
<div class="col-sm-6">
|
|
56
|
+
<div class="inline-input">
|
|
57
|
+
<span class="label"><label for="car">Car Preference</label></span>
|
|
58
|
+
<span class="select"><select id="car"><option>Tesla</option></select></span>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="col-sm-6">
|
|
62
|
+
<pre><xmp><div class="inline-input">
|
|
63
|
+
<span class="label">
|
|
64
|
+
<label for="car">Car Preference</label>
|
|
65
|
+
</span>
|
|
66
|
+
<span>
|
|
67
|
+
<select id="car"><option>Tesla</option></select>
|
|
68
|
+
</span>
|
|
69
|
+
</div></xmp></pre>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="row">
|
|
73
|
+
<div class="col-sm-6">
|
|
74
|
+
<div class="inline-input block">
|
|
75
|
+
<span class="label">
|
|
76
|
+
<label for="car">Car Preference</label>
|
|
77
|
+
</span>
|
|
78
|
+
<span>
|
|
79
|
+
<input id="name" value="Jonathan Doe" disabled>
|
|
80
|
+
</span>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="col-sm-6">
|
|
84
|
+
<pre><xmp><div class="inline-input block">
|
|
85
|
+
<span class="label">
|
|
86
|
+
<label for="car">Car Preference</label>
|
|
87
|
+
</span>
|
|
88
|
+
<span>
|
|
89
|
+
<input id="name" value="Jonathan Doe" disabled>
|
|
90
|
+
</span>
|
|
91
|
+
</div></xmp></pre>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<div class="row">
|
|
2
|
+
<div class="col-sm-6">
|
|
3
|
+
<ol class="uniform-step">
|
|
4
|
+
<li>Fill out the form</li>
|
|
5
|
+
<li>Join the club</li>
|
|
6
|
+
<li>Chill</li>
|
|
7
|
+
</ol>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="col-sm-6">
|
|
10
|
+
<pre><xmp>
|
|
11
|
+
<ol class="uniform-step">
|
|
12
|
+
<li>Fill out the form</li>
|
|
13
|
+
<li>Join the club</li>
|
|
14
|
+
<li>Chill</li>
|
|
15
|
+
</ol></xmp></pre>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div class="row">
|
|
20
|
+
<div class="col-sm-6">
|
|
21
|
+
<ul class="uniform-checks">
|
|
22
|
+
<li>Fill out the form</li>
|
|
23
|
+
<li>Join the club</li>
|
|
24
|
+
<li>Chill</li>
|
|
25
|
+
</ul>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="col-sm-6">
|
|
28
|
+
<pre><xmp>
|
|
29
|
+
<ul class="uniform-checks">
|
|
30
|
+
<li>Fill out the form</li>
|
|
31
|
+
<li>Join the club</li>
|
|
32
|
+
<li>Chill</li>
|
|
33
|
+
</ul></xmp></pre>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="row">
|
|
38
|
+
<div class="col-sm-6">
|
|
39
|
+
<ul class="uniform-icons">
|
|
40
|
+
<li data-icon="">Fill out the form</li>
|
|
41
|
+
<li data-icon="">Join the club</li>
|
|
42
|
+
<li data-icon="">Chill</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="col-sm-6">
|
|
46
|
+
<pre><xmp>
|
|
47
|
+
<ul class="uniform-icons">
|
|
48
|
+
<li data-icon="">Fill out the form</li>
|
|
49
|
+
<li data-icon="">Join the club</li>
|
|
50
|
+
<li data-icon="">Chill</li>
|
|
51
|
+
</ul></xmp></pre>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<div class="row">
|
|
2
|
+
<div class="col-sm-6">
|
|
3
|
+
<div class="uniform-loader">
|
|
4
|
+
<div class="uniform-loader-container">
|
|
5
|
+
<span>•</span>
|
|
6
|
+
<span>•</span>
|
|
7
|
+
<span>•</span>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="col-sm-6">
|
|
12
|
+
<pre><xmp><div class="uniform-loader">
|
|
13
|
+
<div class="uniform-loader-container">
|
|
14
|
+
<span>•</span>
|
|
15
|
+
<span>•</span>
|
|
16
|
+
<span>•</span>
|
|
17
|
+
</div>
|
|
18
|
+
</div></xmp></pre>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="row">
|
|
22
|
+
<div class="col-sm-6">
|
|
23
|
+
<span style="position:relative; display:inline-block">
|
|
24
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;" width="150" height="100">
|
|
25
|
+
<div class="uniform-loader cover">
|
|
26
|
+
<div class="uniform-loader-container">
|
|
27
|
+
<span>•</span>
|
|
28
|
+
<span>•</span>
|
|
29
|
+
<span>•</span>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</span>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="col-sm-6">
|
|
35
|
+
<pre><xmp><span style="position:relative; display:inline-block">
|
|
36
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;">
|
|
37
|
+
<div class="uniform-loader cover">
|
|
38
|
+
<div class="uniform-loader-container">
|
|
39
|
+
<span>•</span>
|
|
40
|
+
<span>•</span>
|
|
41
|
+
<span>•</span>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</span></xmp></pre>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="row">
|
|
48
|
+
<div class="col-sm-6">
|
|
49
|
+
<span style="position:relative; display:inline-block">
|
|
50
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;" width="150" height="100">
|
|
51
|
+
<div class="uniform-loader cover light">
|
|
52
|
+
<div class="uniform-loader-container">
|
|
53
|
+
<span>•</span>
|
|
54
|
+
<span>•</span>
|
|
55
|
+
<span>•</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</span>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="col-sm-6">
|
|
61
|
+
<pre><xmp><span style="position:relative; display:inline-block">
|
|
62
|
+
<img src="https://unsplash.it/150/100/?random" style="display:block;">
|
|
63
|
+
<div class="uniform-loader cover light">
|
|
64
|
+
<div class="uniform-loader-container">
|
|
65
|
+
<span>•</span>
|
|
66
|
+
<span>•</span>
|
|
67
|
+
<span>•</span>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</span></xmp></pre>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<div class="uniform-nav">
|
|
2
|
+
<div class="brand">
|
|
3
|
+
<img src="site/logo.png" height="31" width="137">
|
|
4
|
+
</div>
|
|
5
|
+
<ul>
|
|
6
|
+
<li><a href="#">Home</a></li>
|
|
7
|
+
<li><a href="#">About</a></li>
|
|
8
|
+
<li><a href="#">Contact</a></li>
|
|
9
|
+
</ul>
|
|
10
|
+
<ul class="uniform-nav-right">
|
|
11
|
+
<li><a href="#">Login</a></li>
|
|
12
|
+
</ul>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="uniform-nav uniform-nav-subnav">
|
|
15
|
+
<ul>
|
|
16
|
+
<li><a href="#">Home</a></li>
|
|
17
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
18
|
+
<li><a href="#">Nav</a></li>
|
|
19
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
20
|
+
<li><a href="#">Preview</a></li>
|
|
21
|
+
</ul>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<br><br>
|
|
25
|
+
<pre><xmp><div class="uniform-nav">
|
|
26
|
+
<div class="brand">
|
|
27
|
+
<img src="site/logo.png" height="31" width="137">
|
|
28
|
+
</div>
|
|
29
|
+
<ul>
|
|
30
|
+
<li><a href="#">Home</a></li>
|
|
31
|
+
<li><a href="#">About</a></li>
|
|
32
|
+
<li><a href="#">Contact</a></li>
|
|
33
|
+
</ul>
|
|
34
|
+
<ul class="uniform-nav-right">
|
|
35
|
+
<li><a href="#">Login</a></li>
|
|
36
|
+
</ul>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="uniform-nav uniform-nav-subnav">
|
|
39
|
+
<ul>
|
|
40
|
+
<li><a href="#">Home</a></li>
|
|
41
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
42
|
+
<li><a href="#">Nav</a></li>
|
|
43
|
+
<li><span style="font-family: 'fortycons'"></span></li>
|
|
44
|
+
<li><a href="#">Preview</a></li>
|
|
45
|
+
</ul>
|
|
46
|
+
</div></xmp></pre>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<h3>Don't use ID's</h3>
|
|
2
|
+
<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>
|
|
3
|
+
|
|
4
|
+
<h3>Use Semanitc Classes Presentationaly :)</h3>
|
|
5
|
+
<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>
|
|
6
|
+
<p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
|
|
7
|
+
<p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
|
|
8
|
+
<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>
|
|
9
|
+
<p>Structure html so that the semantic class is first and presentational classes follow.</p>
|
|
10
|
+
<p><code>class="property-list ul-list col-sm-4"</code></p>
|
|
11
|
+
|
|
12
|
+
<h3>Save the Namespace, save the world</h3>
|
|
13
|
+
<p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
|
|
14
|
+
<p><code>class="label"</code> should be <code>class="text-label"</code></p>
|
|
15
|
+
|
|
16
|
+
<h3>Train-case</h3>
|
|
17
|
+
<p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
|
|
18
|
+
|
|
19
|
+
<div class="row">
|
|
20
|
+
<div class="col-sm-6">
|
|
21
|
+
<h3>Wrappers and Containers</h3>
|
|
22
|
+
<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>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="col-sm-6">
|
|
25
|
+
<h3> </h3>
|
|
26
|
+
<pre><xmp><div class="property-wrapper">
|
|
27
|
+
<div class="property">
|
|
28
|
+
<div class="property-container">
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div></xmp></pre>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<a class="uniform-row" href="#rows">
|
|
2
|
+
<span class="uniform-row-avatar">
|
|
3
|
+
<img src="https://unsplash.it/63/47/?random" width="63" height="47">
|
|
4
|
+
</span>
|
|
5
|
+
<span class="uniform-row-container">
|
|
6
|
+
<span class="col-sm-6">
|
|
7
|
+
John Doe
|
|
8
|
+
<span class="uniform-row-secondary">ABC Designs</span>
|
|
9
|
+
</span>
|
|
10
|
+
<span class="col-sm-3">
|
|
11
|
+
Garland, TX
|
|
12
|
+
</span>
|
|
13
|
+
<span class="col-sm-3">
|
|
14
|
+
Texas Ranger Fan
|
|
15
|
+
</span>
|
|
16
|
+
</span>
|
|
17
|
+
</a>
|
|
18
|
+
<br><br>
|
|
19
|
+
<pre><xmp><a class="uniform-row" href="#rows">
|
|
20
|
+
<span class="uniform-row-avatar">
|
|
21
|
+
<img src="https://unsplash.it/63/47/?random" width="63" height="47">
|
|
22
|
+
</span>
|
|
23
|
+
<span class="uniform-row-container">
|
|
24
|
+
<span class="col-sm-6">
|
|
25
|
+
John Doe
|
|
26
|
+
<span class="uniform-row-secondary">ABC Designs</span>
|
|
27
|
+
</span>
|
|
28
|
+
<span class="col-sm-3">
|
|
29
|
+
Garland, TX
|
|
30
|
+
</span>
|
|
31
|
+
<span class="col-sm-3">
|
|
32
|
+
Texas Ranger Fan
|
|
33
|
+
</span>
|
|
34
|
+
</span>
|
|
35
|
+
</a></xmp></pre>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
TODO
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
TODO
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
TODO
|
data/preview/index.html.erb
CHANGED
|
@@ -7,481 +7,47 @@
|
|
|
7
7
|
<link rel="stylesheet" href="site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<p>Structure html so that the semantic class is first and presentational classes follow.</p>
|
|
40
|
-
<p><code>class="property-list ul-list col-sm-4"</code></p>
|
|
41
|
-
|
|
42
|
-
<h3>Save the Namespace, save the world</h3>
|
|
43
|
-
<p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
|
|
44
|
-
<p><code>class="label"</code> should be <code>class="text-label"</code></p>
|
|
45
|
-
|
|
46
|
-
<h3>Train-case</h3>
|
|
47
|
-
<p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
|
|
48
|
-
|
|
49
|
-
<div class="row">
|
|
50
|
-
<div class="col-sm-6">
|
|
51
|
-
<h3>Wrappers and Containers</h3>
|
|
52
|
-
<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>
|
|
53
|
-
</div>
|
|
54
|
-
<div class="col-sm-6">
|
|
55
|
-
<h3> </h3>
|
|
56
|
-
<pre><xmp><div class="property-wrapper">
|
|
57
|
-
<div class="property">
|
|
58
|
-
<div class="property-container">
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
</div></xmp></pre>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
HTML
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
colors: <<-HTML,
|
|
69
|
-
<table>
|
|
70
|
-
#{%w(green blue red gray yellow).map{|color|
|
|
71
|
-
["-light", "", "-dark"].map{|style|
|
|
72
|
-
"<tr>
|
|
73
|
-
<td><span class='swatch #{color}#{style}-bg'></span></td>
|
|
74
|
-
<td><code>sass// $#{color}#{style}</code></td>
|
|
75
|
-
<td><code>class// .#{color}#{style}</code></td>
|
|
76
|
-
</tr>"
|
|
77
|
-
} + ["<tr><td colspan='3'> </td></tr>"]
|
|
78
|
-
}.flatten.join("\n")}
|
|
79
|
-
</table>
|
|
80
|
-
HTML
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
buttons: <<-HTML,
|
|
84
|
-
<p>Mix and match styles to make the right button, all colors are available as well.</p>
|
|
85
|
-
<p><code>#{CGI::escapeHTML "<a href='#' class='btn'></a>"}</code></p>
|
|
86
|
-
<table class="table" cellspacing="0" cellpadding="0">
|
|
87
|
-
<tr>
|
|
88
|
-
<th></th>
|
|
89
|
-
<th>Normal</th>
|
|
90
|
-
<th><code>.green</code></th>
|
|
91
|
-
</tr>
|
|
92
|
-
<tr>
|
|
93
|
-
<th></th>
|
|
94
|
-
<td><a class="btn">Button</a></td>
|
|
95
|
-
<td><a class="btn green">Button</a></td>
|
|
96
|
-
</tr>
|
|
97
|
-
<tr>
|
|
98
|
-
<th><code>:hover</code> or <code>.hover</code></th>
|
|
99
|
-
<td><a class="btn hover">Button</a></td>
|
|
100
|
-
<td><a class="btn green hover">Button</a></td>
|
|
101
|
-
</tr>
|
|
102
|
-
<tr>
|
|
103
|
-
<th><code>:active</code> or <code>.active</code></th>
|
|
104
|
-
<td><a class="btn active">Button</a></td>
|
|
105
|
-
<td><a class="btn green active">Button</a></td>
|
|
106
|
-
</tr>
|
|
107
|
-
<tr>
|
|
108
|
-
<th><code>:disabled</code> or <code>.disabled</code></th>
|
|
109
|
-
<td><a class="btn disabled">Button</a></td>
|
|
110
|
-
<td><a class="btn green disabled">Button</a></td>
|
|
111
|
-
</tr>
|
|
112
|
-
<tr>
|
|
113
|
-
<th><code>.subtle</code></th>
|
|
114
|
-
<td><a class="btn subtle">Button</a></td>
|
|
115
|
-
<td><a class="btn green subtle">Button</a></td>
|
|
116
|
-
</tr>
|
|
117
|
-
<tr>
|
|
118
|
-
<th><code>.small</code></th>
|
|
119
|
-
<td><a class="btn small">Button</a></td>
|
|
120
|
-
<td><a class="btn green small">Button</a></td>
|
|
121
|
-
</tr>
|
|
122
|
-
<tr>
|
|
123
|
-
<th><code>.large</code></th>
|
|
124
|
-
<td><a class="btn large">Button</a></td>
|
|
125
|
-
<td><a class="btn green large">Button</a></td>
|
|
126
|
-
</tr>
|
|
127
|
-
<tr>
|
|
128
|
-
<th><code>.outline</code></th>
|
|
129
|
-
<td><a class="btn outline">Button</a></td>
|
|
130
|
-
<td><a class="btn green outline">Button</a></td>
|
|
131
|
-
</tr>
|
|
132
|
-
<tr>
|
|
133
|
-
<th><code>.circle</code></th>
|
|
134
|
-
<td><a class="btn circle">Button</a></td>
|
|
135
|
-
<td><a class="btn green circle">Button</a></td>
|
|
136
|
-
</tr>
|
|
137
|
-
<tr>
|
|
138
|
-
<th><code>.block</code></th>
|
|
139
|
-
<td><a class="btn block">Button</a></td>
|
|
140
|
-
<td><a class="btn green block">Button</a></td>
|
|
141
|
-
</tr>
|
|
142
|
-
</table>
|
|
143
|
-
HTML
|
|
144
|
-
|
|
145
|
-
grid: <<-HTML,
|
|
146
|
-
TODO
|
|
147
|
-
HTML
|
|
148
|
-
|
|
149
|
-
inputs: <<-HTML,
|
|
150
|
-
<h3>Custom Inputs</h3>
|
|
151
|
-
<div class="row">
|
|
152
|
-
<div class="col-sm-6">
|
|
153
|
-
<p>Styled Select Box
|
|
154
|
-
<p><span class="uniform-select"><select><option>An Option</option></select></span></p>
|
|
155
|
-
</div>
|
|
156
|
-
<div class="col-sm-6">
|
|
157
|
-
<pre><xmp><span class='uniform-select'>
|
|
158
|
-
<select>
|
|
159
|
-
<option>An Option</option>
|
|
160
|
-
</select>
|
|
161
|
-
</span></xmp></pre>
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
<h3>Inline Inputs</h3>
|
|
166
|
-
<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>
|
|
167
|
-
<div class="row">
|
|
168
|
-
<div class="col-sm-6">
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
<div class="inline-input">
|
|
172
|
-
<span class="label">
|
|
173
|
-
<label for="rate">$</label>
|
|
174
|
-
</span>
|
|
175
|
-
<span>
|
|
176
|
-
<input id="rate">
|
|
177
|
-
</span>
|
|
178
|
-
<span class="units">
|
|
179
|
-
<label for="rate">/hour</label>
|
|
180
|
-
</span>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
<div class="col-sm-6">
|
|
184
|
-
<pre><xmp><div class="inline-input">
|
|
185
|
-
<span class="label">$</span>
|
|
186
|
-
<span>
|
|
187
|
-
<input id="name" placeholder="Jonathan Doe">
|
|
188
|
-
</span>
|
|
189
|
-
<span class="units">/hour</span>
|
|
190
|
-
</div></xmp></pre>
|
|
191
|
-
</div>
|
|
192
|
-
</div>
|
|
193
|
-
<div class="row">
|
|
194
|
-
<div class="col-sm-6">
|
|
195
|
-
<div class="inline-input">
|
|
196
|
-
<span class="label"><label for="car">Car Preference</label></span>
|
|
197
|
-
<span class="select"><select id="car"><option>Tesla</option></select></span>
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
200
|
-
<div class="col-sm-6">
|
|
201
|
-
<pre><xmp><div class="inline-input">
|
|
202
|
-
<span class="label">
|
|
203
|
-
<label for="car">Car Preference</label>
|
|
204
|
-
</span>
|
|
205
|
-
<span>
|
|
206
|
-
<select id="car"><option>Tesla</option></select>
|
|
207
|
-
</span>
|
|
208
|
-
</div></xmp></pre>
|
|
209
|
-
</div>
|
|
210
|
-
</div>
|
|
211
|
-
<div class="row">
|
|
212
|
-
<div class="col-sm-6">
|
|
213
|
-
<div class="inline-input block">
|
|
214
|
-
<span class="label">
|
|
215
|
-
<label for="car">Car Preference</label>
|
|
216
|
-
</span>
|
|
217
|
-
<span>
|
|
218
|
-
<input id="name" value="Jonathan Doe" disabled>
|
|
219
|
-
</span>
|
|
220
|
-
</div>
|
|
221
|
-
</div>
|
|
222
|
-
<div class="col-sm-6">
|
|
223
|
-
<pre><xmp><div class="inline-input block">
|
|
224
|
-
<span class="label">
|
|
225
|
-
<label for="car">Car Preference</label>
|
|
226
|
-
</span>
|
|
227
|
-
<span>
|
|
228
|
-
<input id="name" value="Jonathan Doe" disabled>
|
|
229
|
-
</span>
|
|
230
|
-
</div></xmp></pre>
|
|
231
|
-
</div>
|
|
232
|
-
</div>
|
|
233
|
-
HTML
|
|
234
|
-
|
|
235
|
-
forms: <<-HTML,
|
|
236
|
-
TODO
|
|
237
|
-
HTML
|
|
238
|
-
|
|
239
|
-
loaders: <<-HTML,
|
|
240
|
-
<div class="row">
|
|
241
|
-
<div class="col-sm-6">
|
|
242
|
-
<div class="uniform-loader">
|
|
243
|
-
<div class="uniform-loader-container">
|
|
244
|
-
<span>•</span>
|
|
245
|
-
<span>•</span>
|
|
246
|
-
<span>•</span>
|
|
247
|
-
</div>
|
|
248
|
-
</div>
|
|
249
|
-
</div>
|
|
250
|
-
<div class="col-sm-6">
|
|
251
|
-
<pre><xmp><div class="uniform-loader">
|
|
252
|
-
<div class="uniform-loader-container">
|
|
253
|
-
<span>•</span>
|
|
254
|
-
<span>•</span>
|
|
255
|
-
<span>•</span>
|
|
256
|
-
</div>
|
|
257
|
-
</div></xmp></pre>
|
|
258
|
-
</div>
|
|
259
|
-
</div>
|
|
260
|
-
<div class="row">
|
|
261
|
-
<div class="col-sm-6">
|
|
262
|
-
<span style="position:relative; display:inline-block">
|
|
263
|
-
<img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
|
|
264
|
-
<div class="uniform-loader cover">
|
|
265
|
-
<div class="uniform-loader-container">
|
|
266
|
-
<span>•</span>
|
|
267
|
-
<span>•</span>
|
|
268
|
-
<span>•</span>
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
</span>
|
|
272
|
-
</div>
|
|
273
|
-
<div class="col-sm-6">
|
|
274
|
-
<pre><xmp><span style="position:relative; display:inline-block">
|
|
275
|
-
<img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
|
|
276
|
-
<div class="uniform-loader cover">
|
|
277
|
-
<div class="uniform-loader-container">
|
|
278
|
-
<span>•</span>
|
|
279
|
-
<span>•</span>
|
|
280
|
-
<span>•</span>
|
|
281
|
-
</div>
|
|
282
|
-
</div>
|
|
283
|
-
</span></xmp></pre>
|
|
284
|
-
</div>
|
|
285
|
-
</div>
|
|
286
|
-
<div class="row">
|
|
287
|
-
<div class="col-sm-6">
|
|
288
|
-
<span style="position:relative; display:inline-block">
|
|
289
|
-
<img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
|
|
290
|
-
<div class="uniform-loader cover light">
|
|
291
|
-
<div class="uniform-loader-container">
|
|
292
|
-
<span>•</span>
|
|
293
|
-
<span>•</span>
|
|
294
|
-
<span>•</span>
|
|
295
|
-
</div>
|
|
296
|
-
</div>
|
|
297
|
-
</span>
|
|
298
|
-
</div>
|
|
299
|
-
<div class="col-sm-6">
|
|
300
|
-
<pre><xmp><span style="position:relative; display:inline-block">
|
|
301
|
-
<img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
|
|
302
|
-
<div class="uniform-loader cover light">
|
|
303
|
-
<div class="uniform-loader-container">
|
|
304
|
-
<span>•</span>
|
|
305
|
-
<span>•</span>
|
|
306
|
-
<span>•</span>
|
|
307
|
-
</div>
|
|
308
|
-
</div>
|
|
309
|
-
</span></xmp></pre>
|
|
310
|
-
</div>
|
|
311
|
-
</div>
|
|
312
|
-
HTML
|
|
313
|
-
|
|
314
|
-
cards: <<-HTML,
|
|
315
|
-
<div class="row">
|
|
316
|
-
<div class="col-sm-6">
|
|
317
|
-
<div class="uniform-card">
|
|
318
|
-
<div class="uniform-card-title">
|
|
319
|
-
<span class="type">Sample Card</span>
|
|
320
|
-
</div>
|
|
321
|
-
<div class="uniform-card-body">Put Content In Here</div>
|
|
322
|
-
</div>
|
|
323
|
-
</div>
|
|
324
|
-
<div class="col-sm-6">
|
|
325
|
-
<pre><xmp><div class="uniform-card">
|
|
326
|
-
<div class="uniform-card-title">
|
|
327
|
-
<span class="type">Sample Card</span>
|
|
328
|
-
</div>
|
|
329
|
-
<div class="uniform-card-body">Put Content In Here</div>
|
|
330
|
-
</div></xmp></pre>
|
|
331
|
-
</div>
|
|
332
|
-
</div>
|
|
333
|
-
<div class="row">
|
|
334
|
-
<div class="col-sm-6">
|
|
335
|
-
<div class="uniform-card">
|
|
336
|
-
<div class="uniform-card-avatar">
|
|
337
|
-
<img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
|
|
338
|
-
</div>
|
|
339
|
-
<div class="uniform-card-container">
|
|
340
|
-
<div class="uniform-card-title">
|
|
341
|
-
<span class="type">John Dozer</span>
|
|
342
|
-
<div class="actions">
|
|
343
|
-
<a class="btn">Edit</a>
|
|
344
|
-
</div>
|
|
345
|
-
</div>
|
|
346
|
-
<div class="uniform-card-body">
|
|
347
|
-
<div class="uniform-card-attributes">
|
|
348
|
-
<div>
|
|
349
|
-
<div>Company</div>
|
|
350
|
-
<div>Friendly Associates</div>
|
|
351
|
-
</div>
|
|
352
|
-
<div>
|
|
353
|
-
<div>Title</div>
|
|
354
|
-
<div>Head Dude</div>
|
|
355
|
-
</div>
|
|
356
|
-
<div>
|
|
357
|
-
<div>Skills</div>
|
|
358
|
-
<div>Stapling, Jogging</div>
|
|
359
|
-
</div>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
</div>
|
|
363
|
-
</div>
|
|
364
|
-
</div>
|
|
365
|
-
<div class="col-sm-6">
|
|
366
|
-
<pre><xmp><div class="uniform-card">
|
|
367
|
-
<div class="uniform-card-avatar">
|
|
368
|
-
<img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
|
|
369
|
-
</div>
|
|
370
|
-
<div class="uniform-card-container">
|
|
371
|
-
<div class="uniform-card-title">
|
|
372
|
-
<span class="type">John Dozer</span>
|
|
373
|
-
<div class="actions">
|
|
374
|
-
<a class="btn">Edit</a>
|
|
375
|
-
</div>
|
|
376
|
-
</div>
|
|
377
|
-
<div class="uniform-card-body">
|
|
378
|
-
<div class="uniform-card-attributes">
|
|
379
|
-
<div>
|
|
380
|
-
<div>Company</div>
|
|
381
|
-
<div>Friendly Associates</div>
|
|
382
|
-
</div>
|
|
383
|
-
<div>
|
|
384
|
-
<div>Title</div>
|
|
385
|
-
<div>Head Dude</div>
|
|
386
|
-
</div>
|
|
387
|
-
<div>
|
|
388
|
-
<div>Skills</div>
|
|
389
|
-
<div>Stapling, Jogging</div>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
392
|
-
</div>
|
|
393
|
-
</div>
|
|
394
|
-
</div></xmp></pre>
|
|
395
|
-
</div>
|
|
396
|
-
</div>
|
|
397
|
-
HTML
|
|
398
|
-
|
|
399
|
-
tiles: <<-HTML,
|
|
400
|
-
TODO
|
|
401
|
-
HTML
|
|
402
|
-
|
|
403
|
-
rows: <<-HTML,
|
|
404
|
-
TODO
|
|
405
|
-
HTML
|
|
406
|
-
|
|
407
|
-
lists: <<-HTML,
|
|
408
|
-
TODO
|
|
409
|
-
HTML
|
|
410
|
-
|
|
411
|
-
tables: <<-HTML,
|
|
412
|
-
TODO
|
|
413
|
-
HTML
|
|
414
|
-
|
|
415
|
-
nav: <<-HTML,
|
|
416
|
-
<div class="row">
|
|
417
|
-
<div class="col-sm-6">
|
|
418
|
-
<div class="uniform-nav horizontal main">
|
|
419
|
-
<div class="pad">Logo</div>
|
|
420
|
-
<div class="right">
|
|
421
|
-
<div><a>Account</a></div>
|
|
422
|
-
<div><a>Sign Out</a></div>
|
|
423
|
-
</div>
|
|
424
|
-
</div>
|
|
425
|
-
</div>
|
|
426
|
-
<div class="col-sm-6">
|
|
427
|
-
<pre><xmp><div class="uniform-nav horizontal main">
|
|
428
|
-
<div class="pad">Logo</div>
|
|
429
|
-
<div class="right">
|
|
430
|
-
<div><a>Account</a></div>
|
|
431
|
-
<div><a>Sign Out</a></div>
|
|
432
|
-
</div>
|
|
433
|
-
</div></xmp></pre>
|
|
10
|
+
<% sections = [
|
|
11
|
+
:uniform,
|
|
12
|
+
:installation,
|
|
13
|
+
:philosophy,
|
|
14
|
+
:colors,
|
|
15
|
+
:buttons,
|
|
16
|
+
:grid,
|
|
17
|
+
:inputs,
|
|
18
|
+
:forms,
|
|
19
|
+
:loaders,
|
|
20
|
+
:cards,
|
|
21
|
+
:tiles,
|
|
22
|
+
:rows,
|
|
23
|
+
:lists,
|
|
24
|
+
:tables,
|
|
25
|
+
:nav,
|
|
26
|
+
:tabs,
|
|
27
|
+
:helpers
|
|
28
|
+
] %>
|
|
29
|
+
<div class="side-nav">
|
|
30
|
+
<div style="padding: 20px; padding-right: 30px">
|
|
31
|
+
<img src="site/logo.png" style="width: 100%; height: auto;">
|
|
32
|
+
</div>
|
|
33
|
+
<div class="uniform-nav vertical">
|
|
34
|
+
<ul>
|
|
35
|
+
<% sections.each do |section| %>
|
|
36
|
+
<li><a href="#<%= section %>"><%= section.to_s.titleize %></a></li>
|
|
37
|
+
<% end %>
|
|
38
|
+
</ul>
|
|
434
39
|
</div>
|
|
435
40
|
</div>
|
|
436
|
-
<div class="
|
|
437
|
-
|
|
438
|
-
<
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
41
|
+
<div class="main-content">
|
|
42
|
+
<% sections.each do |section| %>
|
|
43
|
+
<a name="<%= section %>"></a>
|
|
44
|
+
<div class="section">
|
|
45
|
+
<% if section != :uniform %>
|
|
46
|
+
<h1><%= section.to_s.titleize %></h1>
|
|
47
|
+
<% end %>
|
|
48
|
+
<%= ERB.new(File.read("preview/_#{section}.html.erb")).result %>
|
|
443
49
|
</div>
|
|
444
|
-
|
|
445
|
-
<div class="col-sm-6">
|
|
446
|
-
<pre><xmp><div class="uniform-nav">
|
|
447
|
-
<ul>
|
|
448
|
-
<li><a>Account</a></li>
|
|
449
|
-
<li><a>Sign Out</a></li>
|
|
450
|
-
</ul>
|
|
451
|
-
</div></xmp></pre>
|
|
452
|
-
</div>
|
|
50
|
+
<% end %>
|
|
453
51
|
</div>
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
tabs: <<-HTML,
|
|
457
|
-
TODO
|
|
458
|
-
HTML
|
|
459
|
-
|
|
460
|
-
helpers: <<-HTML,
|
|
461
|
-
TODO
|
|
462
|
-
HTML
|
|
463
|
-
|
|
464
|
-
} %>
|
|
465
|
-
<div class="side-nav">
|
|
466
|
-
<div style="padding: 20px; padding-right: 30px">
|
|
467
|
-
<img src="site/logo.png" style="width: 100%; height: auto;">
|
|
468
|
-
</div>
|
|
469
|
-
<ul class="uniform-nav">
|
|
470
|
-
<% sections.each do |key, html| %>
|
|
471
|
-
<li><a href="#<%= key %>"><%= key.to_s.titleize %></a></li>
|
|
472
|
-
<% end %>
|
|
473
|
-
</ul>
|
|
474
|
-
</div>
|
|
475
|
-
<div class="main-content">
|
|
476
|
-
<% sections.each do |key, html| %>
|
|
477
|
-
<a name="<%= key %>"></a>
|
|
478
|
-
<div class="section">
|
|
479
|
-
<% if key != :uniform %>
|
|
480
|
-
<h1><%= key.to_s.titleize %></h1>
|
|
481
|
-
<% end %>
|
|
482
|
-
<%= html %>
|
|
483
|
-
</div>
|
|
484
|
-
<% end %>
|
|
485
|
-
</div>
|
|
486
|
-
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
|
|
52
|
+
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
|
|
487
53
|
</body>
|