uniform-ui 0.6 → 1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +27 -0
  3. data/CNAME +1 -0
  4. data/Gemfile +0 -4
  5. data/Gemfile.lock +1 -11
  6. data/README.md +2 -3
  7. data/Rakefile +34 -24
  8. data/index.html +240 -1160
  9. data/preview/{_tables.html.erb → alerts.html.erb} +0 -0
  10. data/preview/buttons.html.erb +62 -0
  11. data/preview/cards.html.erb +23 -0
  12. data/preview/colors.html.erb +22 -0
  13. data/preview/{_tabs.html.erb → dropdown.html.erb} +0 -0
  14. data/preview/form.html.erb +233 -0
  15. data/preview/grid.html.erb +304 -0
  16. data/preview/helpers.html.erb +225 -0
  17. data/preview/index.html.erb +74 -50
  18. data/preview/{_tiles.html.erb → labels.html.erb} +0 -0
  19. data/preview/layout.html.erb +63 -0
  20. data/preview/loaders.html.erb +83 -0
  21. data/preview/modal.html.erb +1 -0
  22. data/preview/nav.html.erb +77 -0
  23. data/preview/preview.scss +39 -10
  24. data/preview/rows.html.erb +36 -0
  25. data/preview/select.html.erb +1 -0
  26. data/preview/tables.html.erb +1 -0
  27. data/preview/tabs.html.erb +17 -0
  28. data/preview/tiles.html.erb +1 -0
  29. data/preview/tooltip.erb +1 -0
  30. data/site/alerts.html +157 -0
  31. data/site/alerts.html copy +133 -0
  32. data/site/buttons.html +286 -0
  33. data/site/cards.html +177 -0
  34. data/site/colors.html +275 -0
  35. data/site/dropdown.html +157 -0
  36. data/site/dropdown.html copy +141 -0
  37. data/site/form.html +369 -0
  38. data/site/grid.html +716 -0
  39. data/site/helpers.html +1008 -0
  40. data/site/index.html +208 -617
  41. data/site/labels.html +157 -0
  42. data/site/layout.html +313 -0
  43. data/site/loaders.html +233 -0
  44. data/site/modal.html +157 -0
  45. data/site/nav.html +229 -0
  46. data/site/preview.css +1 -1
  47. data/site/preview.js +59 -0
  48. data/site/rows.html +190 -0
  49. data/site/select.html +157 -0
  50. data/site/tables.html +157 -0
  51. data/site/tabs.html +171 -0
  52. data/site/tiles.html +157 -0
  53. data/site/tiles.html copy +109 -0
  54. data/site/tooltip +157 -0
  55. data/site/uniform.css +1 -1
  56. data/uniform.gemspec +2 -8
  57. data/vendor/assets/stylesheets/uniform.scss +4 -4
  58. data/vendor/assets/stylesheets/uniform/base.scss +2 -0
  59. data/vendor/assets/stylesheets/uniform/components/alert.scss +27 -0
  60. data/vendor/assets/stylesheets/uniform/components/buttons.scss +135 -86
  61. data/vendor/assets/stylesheets/uniform/components/card.scss +69 -67
  62. data/vendor/assets/stylesheets/uniform/components/dropdown.scss +69 -0
  63. data/vendor/assets/stylesheets/uniform/components/form.scss +268 -85
  64. data/vendor/assets/stylesheets/uniform/components/grid.scss +214 -72
  65. data/vendor/assets/stylesheets/uniform/components/label.scss +63 -0
  66. data/vendor/assets/stylesheets/uniform/components/loaders.scss +38 -18
  67. data/vendor/assets/stylesheets/uniform/components/modal.scss +51 -0
  68. data/vendor/assets/stylesheets/uniform/components/nav.scss +171 -54
  69. data/vendor/assets/stylesheets/uniform/components/row.scss +69 -101
  70. data/vendor/assets/stylesheets/uniform/components/select.scss +98 -0
  71. data/vendor/assets/stylesheets/uniform/components/table.scss +83 -0
  72. data/vendor/assets/stylesheets/uniform/components/tabs.scss +39 -26
  73. data/vendor/assets/stylesheets/uniform/components/tile.scss +15 -27
  74. data/vendor/assets/stylesheets/uniform/components/tooltip.scss +46 -0
  75. data/vendor/assets/stylesheets/uniform/defaults.scss +85 -19
  76. data/vendor/assets/stylesheets/uniform/helpers.scss +82 -81
  77. data/vendor/assets/stylesheets/uniform/helpers/colors.scss +37 -0
  78. data/vendor/assets/stylesheets/uniform/helpers/margin.scss +44 -0
  79. data/vendor/assets/stylesheets/uniform/helpers/padding.scss +74 -0
  80. data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +31 -0
  81. data/vendor/assets/stylesheets/uniform/helpers/text.scss +121 -0
  82. data/vendor/assets/stylesheets/uniform/mixins.scss +25 -48
  83. data/vendor/assets/stylesheets/uniform/variables.scss +10 -28
  84. metadata +61 -85
  85. data/preview/_buttons.html.erb +0 -59
  86. data/preview/_cards.html.erb +0 -82
  87. data/preview/_colors.html.erb +0 -12
  88. data/preview/_forms.html.erb +0 -196
  89. data/preview/_grid.html.erb +0 -49
  90. data/preview/_helpers.html.erb +0 -158
  91. data/preview/_inputs.html.erb +0 -93
  92. data/preview/_installation.html.erb +0 -4
  93. data/preview/_lists.html.erb +0 -53
  94. data/preview/_loaders.html.erb +0 -72
  95. data/preview/_nav.html.erb +0 -46
  96. data/preview/_philosophy.html.erb +0 -33
  97. data/preview/_rows.html.erb +0 -35
  98. data/preview/_uniform.html.erb +0 -4
  99. data/site/site/logo.png +0 -0
  100. data/site/site/preview.css +0 -1
  101. data/site/site/uniform.css +0 -1
  102. data/vendor/assets/stylesheets/uniform/components/inputs.scss +0 -131
  103. data/vendor/assets/stylesheets/uniform/components/lists.scss +0 -62
  104. data/vendor/assets/stylesheets/uniform/components/table-container.scss +0 -44
  105. data/vendor/assets/stylesheets/uniform/components/table-form.scss +0 -159
  106. data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +0 -142
@@ -1,59 +0,0 @@
1
- <p>Mix and match styles to make the right button, all colors are available as well.</p>
2
- <p><code><%= CGI::escapeHTML "<a href='#' class='uniform-btn'></a>" %></code></p>
3
- <table class="table" cellspacing="0" cellpadding="0">
4
- <tr>
5
- <th></th>
6
- <th>Normal</th>
7
- <th><code>.green</code></th>
8
- </tr>
9
- <tr>
10
- <th></th>
11
- <td><a class="uniform-btn">Button</a></td>
12
- <td><a class="uniform-btn green">Button</a></td>
13
- </tr>
14
- <tr>
15
- <th><code>:hover</code> or <code>.hover</code></th>
16
- <td><a class="uniform-btn hover">Button</a></td>
17
- <td><a class="uniform-btn green hover">Button</a></td>
18
- </tr>
19
- <tr>
20
- <th><code>:active</code> or <code>.active</code></th>
21
- <td><a class="uniform-btn active">Button</a></td>
22
- <td><a class="uniform-btn green active">Button</a></td>
23
- </tr>
24
- <tr>
25
- <th><code>:disabled</code> or <code>.disabled</code></th>
26
- <td><a class="uniform-btn disabled">Button</a></td>
27
- <td><a class="uniform-btn green disabled">Button</a></td>
28
- </tr>
29
- <tr>
30
- <th><code>.subtle</code></th>
31
- <td><a class="uniform-btn subtle">Button</a></td>
32
- <td><a class="uniform-btn green subtle">Button</a></td>
33
- </tr>
34
- <tr>
35
- <th><code>.small</code></th>
36
- <td><a class="uniform-btn small">Button</a></td>
37
- <td><a class="uniform-btn green small">Button</a></td>
38
- </tr>
39
- <tr>
40
- <th><code>.large</code></th>
41
- <td><a class="uniform-btn large">Button</a></td>
42
- <td><a class="uniform-btn green large">Button</a></td>
43
- </tr>
44
- <tr>
45
- <th><code>.outline</code></th>
46
- <td><a class="uniform-btn outline">Button</a></td>
47
- <td><a class="uniform-btn green outline">Button</a></td>
48
- </tr>
49
- <tr>
50
- <th><code>.circle</code></th>
51
- <td><a class="uniform-btn circle">Button</a></td>
52
- <td><a class="uniform-btn green circle">Button</a></td>
53
- </tr>
54
- <tr>
55
- <th><code>.block</code></th>
56
- <td><a class="uniform-btn block">Button</a></td>
57
- <td><a class="uniform-btn green block">Button</a></td>
58
- </tr>
59
- </table>
@@ -1,82 +0,0 @@
1
- <div class="row">
2
- <div class="col-sm-6">
3
- <div class="uniform-card">
4
- <div class="uniform-card-title">
5
- <span class="type">Sample Card</span>
6
- </div>
7
- <div class="uniform-card-body">Put Content In Here</div>
8
- </div>
9
- </div>
10
- <div class="col-sm-6">
11
- <pre><xmp><div class="uniform-card">
12
- <div class="uniform-card-title">
13
- <span class="type">Sample Card</span>
14
- </div>
15
- <div class="uniform-card-body">Put Content In Here</div>
16
- </div></xmp></pre>
17
- </div>
18
- </div>
19
- <div class="row">
20
- <div class="col-sm-6">
21
- <div class="uniform-card">
22
- <div class="uniform-card-avatar">
23
- <img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
24
- </div>
25
- <div class="uniform-card-container">
26
- <div class="uniform-card-title">
27
- <span class="type">John Dozer</span>
28
- <div class="actions">
29
- <a class="uniform-btn">Edit</a>
30
- </div>
31
- </div>
32
- <div class="uniform-card-body">
33
- <div class="uniform-card-attributes">
34
- <div>
35
- <div>Company</div>
36
- <div>Friendly Associates</div>
37
- </div>
38
- <div>
39
- <div>Title</div>
40
- <div>Head Dude</div>
41
- </div>
42
- <div>
43
- <div>Skills</div>
44
- <div>Stapling, Jogging</div>
45
- </div>
46
- </div>
47
- </div>
48
- </div>
49
- </div>
50
- </div>
51
- <div class="col-sm-6">
52
- <pre><xmp><div class="uniform-card">
53
- <div class="uniform-card-avatar">
54
- <img src="https://unsplash.it/166/166/?random" style="display:block;" height="166" width="166">
55
- </div>
56
- <div class="uniform-card-container">
57
- <div class="uniform-card-title">
58
- <span class="type">John Dozer</span>
59
- <div class="actions">
60
- <a class="uniform-btn">Edit</a>
61
- </div>
62
- </div>
63
- <div class="uniform-card-body">
64
- <div class="uniform-card-attributes">
65
- <div>
66
- <div>Company</div>
67
- <div>Friendly Associates</div>
68
- </div>
69
- <div>
70
- <div>Title</div>
71
- <div>Head Dude</div>
72
- </div>
73
- <div>
74
- <div>Skills</div>
75
- <div>Stapling, Jogging</div>
76
- </div>
77
- </div>
78
- </div>
79
- </div>
80
- </div></xmp></pre>
81
- </div>
82
- </div>
@@ -1,12 +0,0 @@
1
- <table>
2
- <% %w(green blue red gray yellow).each do |color| %>
3
- <% ["-light", "", "-dark"].each do |style| %>
4
- <tr>
5
- <td><span class='swatch <%= color %><%= style %>-bg'></span></td>
6
- <td><code>sass// $<%= color %><%= style %></code></td>
7
- <td><code>class// .<%= color %><%= style %></code></td>
8
- </tr>
9
- <% end %>
10
- <tr><td colspan='3'>&nbsp;</td></tr>
11
- <% end %>
12
- </table>
@@ -1,196 +0,0 @@
1
- <div class="row">
2
- <div class="col-sm-6">
3
- <form class="uniform-form">
4
- <div class="row">
5
- <div class="uniform-form-group col-sm-4">
6
- <label>Name</label>
7
- <input type="text">
8
- </div>
9
- <div class="uniform-form-group col-sm-4">
10
- <label>Email</label>
11
- <input type="text">
12
- </div>
13
- <div class="uniform-form-group col-sm-4">
14
- <label>Phone</label>
15
- <input type="text">
16
- </div>
17
- </div>
18
- <div class="row">
19
- <div class="uniform-form-group col-sm-4">
20
- <label>Twitter</label>
21
- <input type="text">
22
- <label>Facebook</label>
23
- <input type="text">
24
- <label>Instagram</label>
25
- <input type="text">
26
- </div>
27
- <div class="uniform-form-group col-sm-8">
28
- <label>Details</label>
29
- <textarea rows="9"></textarea>
30
- </div>
31
- </div>
32
- </form>
33
- </div>
34
- <div class="col-sm-6">
35
- <pre><xmp><form class="uniform-form">
36
- <div class="row">
37
- <div class="uniform-form-group col-sm-4">
38
- <label>Name</label>
39
- <input type="text">
40
- </div>
41
- <div class="uniform-form-group col-sm-4">
42
- <label>Email</label>
43
- <input type="text">
44
- </div>
45
- <div class="uniform-form-group col-sm-4">
46
- <label>Phone</label>
47
- <input type="text">
48
- </div>
49
- </div>
50
- <div class="row">
51
- <div class="uniform-form-group col-sm-4">
52
- <label>Twitter</label>
53
- <input type="text">
54
- <label>Facebook</label>
55
- <input type="text">
56
- <label>Instagram</label>
57
- <input type="text">
58
- </div>
59
- <div class="uniform-form-group col-sm-8">
60
- <label>Details</label>
61
- <textarea rows="9"></textarea>
62
- </div>
63
- </div>
64
- </form></xmp></pre>
65
- </div>
66
- </div>
67
-
68
- <h3>Has Error</h3>
69
- <div class="row">
70
- <div class="col-sm-6">
71
- <form class="uniform-form">
72
- <div class="row">
73
- <div class="uniform-form-group col-sm-12">
74
- <div class="has-error">
75
- <label>Name</label>
76
- <input type="text">
77
- </div>
78
- </div>
79
- </div>
80
- </form>
81
- </div>
82
- <div class="col-sm-6">
83
- <pre><xmp><form class="uniform-form">
84
- <div class="row">
85
- <div class="uniform-form-group col-sm-4">
86
- <div class="has-error">
87
- <label>Name</label>
88
- <input type="text">
89
- </div>
90
- </div>
91
- </div>
92
- </form></xmp></pre>
93
- </div>
94
- </div>
95
-
96
- <div class="row">
97
- <div class="col-sm-6">
98
- <form class="uniform-form uniform-form-table">
99
- <div class="row">
100
- <div class="uniform-form-group col-sm-4">
101
- <label>Name</label>
102
- <input type="text">
103
- </div>
104
- <div class="uniform-form-group col-sm-4">
105
- <label>Email</label>
106
- <input type="text">
107
- </div>
108
- <div class="uniform-form-group col-sm-4">
109
- <label>Phone</label>
110
- <input type="text">
111
- </div>
112
- </div>
113
- <div class="row">
114
- <div class="uniform-form-group col-sm-4">
115
- <label>Twitter</label>
116
- <input type="text">
117
- <label>Facebook</label>
118
- <input type="text">
119
- <label>Instagram</label>
120
- <input type="text">
121
- </div>
122
- <div class="uniform-form-group col-sm-8 col-span-2">
123
- <label>Details</label>
124
- <textarea rows="6"></textarea>
125
- </div>
126
- </div>
127
- </form>
128
- <br>
129
- <form class="uniform-form uniform-form-table">
130
- <div class="row">
131
- <div class="uniform-form-group col-sm-4">
132
- <label>Name</label>
133
- <input type="text">
134
- </div>
135
- <div class="uniform-form-group col-sm-4">
136
- <div class="has-error">
137
- <label>Email</label>
138
- <input type="text">
139
- </div>
140
- </div>
141
- <div class="uniform-form-group col-sm-4">
142
- <label>Phone</label>
143
- <input type="text">
144
- </div>
145
- </div>
146
- <div class="row">
147
- <div class="uniform-form-group col-sm-4">
148
- <label>Twitter</label>
149
- <input type="text">
150
- <label>Facebook</label>
151
- <input type="text">
152
- <div class="has-error">
153
- <label>Instagram</label>
154
- <input type="text">
155
- </div>
156
- </div>
157
- <div class="uniform-form-group col-sm-8 col-span-2">
158
- <label>Details</label>
159
- <textarea rows="6"></textarea>
160
- </div>
161
- </div>
162
- </form>
163
- </div>
164
- <div class="col-sm-6">
165
- <pre><xmp><form class="uniform-form uniform-form-table">
166
- <div class="row">
167
- <div class="uniform-form-group col-sm-4">
168
- <label>Name</label>
169
- <input type="text">
170
- </div>
171
- <div class="uniform-form-group col-sm-4">
172
- <label>Email</label>
173
- <input type="text">
174
- </div>
175
- <div class="uniform-form-group col-sm-4">
176
- <label>Phone</label>
177
- <input type="text">
178
- </div>
179
- </div>
180
- <div class="row">
181
- <div class="uniform-form-group col-sm-4">
182
- <label>Twitter</label>
183
- <input type="text">
184
- <label>Facebook</label>
185
- <input type="text">
186
- <label>Instagram</label>
187
- <input type="text">
188
- </div>
189
- <div class="uniform-form-group col-sm-8 col-span-2">
190
- <label>Details</label>
191
- <textarea rows="6"></textarea>
192
- </div>
193
- </div>
194
- </form></xmp></pre>
195
- </div>
196
- </div>
@@ -1,49 +0,0 @@
1
- <p>Uses Bootstrap3 grid notation</p>
2
- <div class="row">
3
- <div class="col-sm-4">
4
- <div class="green-light-bg">col-sm-4</div>
5
- </div>
6
- <div class="col-sm-4">
7
- <div class="green-light-bg">col-sm-4</div>
8
- </div>
9
- <div class="col-sm-4">
10
- <div class="green-light-bg">col-sm-4</div>
11
- </div>
12
- </div>
13
- <br>
14
- <div class="row">
15
- <div class="col-sm-2">
16
- <div class="green-light-bg">col-sm-2</div>
17
- </div>
18
- <div class="col-sm-6">
19
- <div class="green-light-bg">col-sm-6</div>
20
- </div>
21
- <div class="col-sm-4">
22
- <div class="green-light-bg">col-sm-4</div>
23
- </div>
24
- </div>
25
- <br>
26
- <pre><xmp><div class="row">
27
- <div class="col-sm-4">
28
- <div class="green-light-bg">col-sm-4</div>
29
- </div>
30
- <div class="col-sm-4">
31
- <div class="green-light-bg">col-sm-4</div>
32
- </div>
33
- <div class="col-sm-4">
34
- <div class="green-light-bg">col-sm-4</div>
35
- </div>
36
- </div></xmp></pre>
37
- <br>
38
- <div class="row">
39
- <div class="col-sm-3 col-sm-push-2">
40
- <div class="green-light-bg">.col-sm-3 .col-sm-push-2</div>
41
- </div>
42
- </div>
43
- <br>
44
-
45
- <h3>Breakpoints</h3>
46
- <p><code>xs</code> = 480px</p>
47
- <p><code>sm</code> = 768px</p>
48
- <p><code>md</code> = 992px</p>
49
- <p><code>lg</code> = 1200px</p>
@@ -1,158 +0,0 @@
1
- <div class="row">
2
- <div class="col-sm-6">
3
- <vr>
4
- </div>
5
- <div class="col-sm-6">
6
- <pre><xmp><vr></xmp></pre>
7
- </div>
8
- </div>
9
- <br>
10
- <br>
11
- <div class="row">
12
- <div class="col-sm-6">
13
- <code>.rounded</code>, <code>.round</code>
14
- </div>
15
- <div class="col-sm-6">
16
- <pre><xmp>border-radius: 50%</xmp></pre>
17
- </div>
18
- </div>
19
- <div class="row">
20
- <div class="col-sm-6">
21
- <code>.handle</code>
22
- </div>
23
- <div class="col-sm-6">
24
- <pre><xmp>cursor: hand;</xmp></pre>
25
- </div>
26
- </div>
27
- <div class="row">
28
- <div class="col-sm-6">
29
- <code>.pointer</code>
30
- </div>
31
- <div class="col-sm-6">
32
- <pre><xmp>cursor: pointer;</xmp></pre>
33
- </div>
34
- </div>
35
- <div class="row">
36
- <div class="col-sm-6">
37
- <code>.honeypot</code>
38
- </div>
39
- <div class="col-sm-6">
40
- <pre><xmp>position:absolute !important;
41
- left:-999999px !important;
42
- width:1px !important;
43
- display:block !important;
44
- </xmp></pre>
45
- </div>
46
- </div>
47
- <div class="row">
48
- <div class="col-sm-6">
49
- <code>.hidden, .hide</code>
50
- </div>
51
- <div class="col-sm-6">
52
- <pre><xmp>display:none;</xmp></pre>
53
- </div>
54
- </div>
55
- <div class="row">
56
- <div class="col-sm-6">
57
- <code>.right</code>
58
- </div>
59
- <div class="col-sm-6">
60
- <pre><xmp>float:right;</xmp></pre>
61
- </div>
62
- </div>
63
- <div class="row">
64
- <div class="col-sm-6">
65
- <code>.text-right</code>
66
- </div>
67
- <div class="col-sm-6">
68
- <pre><xmp>text-align: right;</xmp></pre>
69
- </div>
70
- </div>
71
- <div class="row">
72
- <div class="col-sm-6">
73
- <code>.text-center</code>
74
- </div>
75
- <div class="col-sm-6">
76
- <pre><xmp>text-align: center;</xmp></pre>
77
- </div>
78
- </div>
79
- <div class="row">
80
- <div class="col-sm-6">
81
- <code>.clear</code>
82
- </div>
83
- <div class="col-sm-6">
84
- <pre><xmp>clear:both;</xmp></pre>
85
- </div>
86
- </div>
87
- <div class="row">
88
- <div class="col-sm-6">
89
- <code>.pad</code>
90
- </div>
91
- <div class="col-sm-6">
92
- <pre><xmp>padding:10px;</xmp></pre>
93
- </div>
94
- </div>
95
- <div class="row">
96
- <div class="col-sm-6">
97
- <code>.text-overflow</code>
98
- </div>
99
- <div class="col-sm-6">
100
- <pre><xmp>text-overflow: inherit;
101
- white-space: inherit;
102
- overflow: inherit;</xmp></pre>
103
- </div>
104
- </div>
105
- <div class="row">
106
- <div class="col-sm-6">
107
- <code>.strong, .bold</code>
108
- </div>
109
- <div class="col-sm-6">
110
- <pre><xmp>font-weight: 700;</xmp></pre>
111
- </div>
112
- </div>
113
- <div class="row">
114
- <div class="col-sm-6">
115
- <code>.light, .text-light</code>
116
- </div>
117
- <div class="col-sm-6">
118
- <pre><xmp>font-weight: 300;</xmp></pre>
119
- </div>
120
- </div>
121
- <div class="row">
122
- <div class="col-sm-6">
123
- <code>.text-normal</code>
124
- </div>
125
- <div class="col-sm-6">
126
- <pre><xmp>font-weight: normal;</xmp></pre>
127
- </div>
128
- </div>
129
- <div class="row">
130
- <div class="col-sm-6">
131
- <code>.warn</code>
132
- </div>
133
- <div class="col-sm-6">
134
- <pre><xmp>color:lighten($gray, 20);
135
- &:hover{
136
- color:$red;
137
- }</xmp></pre>
138
- </div>
139
- </div>
140
- <div class="row">
141
- <div class="col-sm-6">
142
- <code>p.large</code>
143
- </div>
144
- <div class="col-sm-6">
145
- <pre><xmp>font-size:1.5em;
146
- font-weight:300;
147
- margin-bottom:20px;</xmp></pre>
148
- </div>
149
- </div>
150
- <div class="row">
151
- <div class="col-sm-6">
152
- <code>.nowrap</code>
153
- </div>
154
- <div class="col-sm-6">
155
- <pre><xmp>white-space: nowrap;
156
- overflow:hidden;</xmp></pre>
157
- </div>
158
- </div>