polar-express 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. data/MIT-LICENSE +19 -0
  2. data/README.md +37 -0
  3. data/lib/generators/inuitcss/install/USAGE +9 -0
  4. data/lib/generators/inuitcss/install/install_generator.rb +9 -0
  5. data/lib/generators/inuitcss/install/templates/inuit.css.scss +99 -0
  6. data/lib/polar-express.rb +6 -0
  7. data/vendor/assets/stylesheets/CHANGELOG.md +26 -0
  8. data/vendor/assets/stylesheets/CONTRIBUTING.md +42 -0
  9. data/vendor/assets/stylesheets/LICENSE +13 -0
  10. data/vendor/assets/stylesheets/README.md +367 -0
  11. data/vendor/assets/stylesheets/_defaults.scss +225 -0
  12. data/vendor/assets/stylesheets/_inuit.scss +213 -0
  13. data/vendor/assets/stylesheets/base/_code.scss +63 -0
  14. data/vendor/assets/stylesheets/base/_forms.scss +174 -0
  15. data/vendor/assets/stylesheets/base/_headings.scss +60 -0
  16. data/vendor/assets/stylesheets/base/_images.scss +73 -0
  17. data/vendor/assets/stylesheets/base/_lists.scss +19 -0
  18. data/vendor/assets/stylesheets/base/_main.scss +8 -0
  19. data/vendor/assets/stylesheets/base/_paragraphs.scss +11 -0
  20. data/vendor/assets/stylesheets/base/_quotes.scss +96 -0
  21. data/vendor/assets/stylesheets/base/_smallprint.scss +13 -0
  22. data/vendor/assets/stylesheets/base/_tables.scss +163 -0
  23. data/vendor/assets/stylesheets/component.json +5 -0
  24. data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
  25. data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
  26. data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
  27. data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
  28. data/vendor/assets/stylesheets/generic/_mixins.scss +328 -0
  29. data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
  30. data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
  31. data/vendor/assets/stylesheets/generic/_push.scss +147 -0
  32. data/vendor/assets/stylesheets/generic/_reset.scss +80 -0
  33. data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
  34. data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
  35. data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
  36. data/vendor/assets/stylesheets/objects/_beautons.scss +226 -0
  37. data/vendor/assets/stylesheets/objects/_block-list.scss +44 -0
  38. data/vendor/assets/stylesheets/objects/_breadcrumb.scss +63 -0
  39. data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
  40. data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
  41. data/vendor/assets/stylesheets/objects/_flyout.scss +63 -0
  42. data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
  43. data/vendor/assets/stylesheets/objects/_grids.scss +69 -0
  44. data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
  45. data/vendor/assets/stylesheets/objects/_island.scss +38 -0
  46. data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
  47. data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
  48. data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
  49. data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
  50. data/vendor/assets/stylesheets/objects/_media.scss +60 -0
  51. data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
  52. data/vendor/assets/stylesheets/objects/_options.scss +45 -0
  53. data/vendor/assets/stylesheets/objects/_pagination.scss +50 -0
  54. data/vendor/assets/stylesheets/objects/_rules.scss +65 -0
  55. data/vendor/assets/stylesheets/objects/_split.scss +39 -0
  56. data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
  57. data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
  58. data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
  59. data/vendor/assets/stylesheets/style.scss +26 -0
  60. metadata +122 -0
@@ -0,0 +1,225 @@
1
+ /*------------------------------------*\
2
+ $DEFAULTS
3
+ \*------------------------------------*/
4
+ /**
5
+ * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
6
+ * in the inuit.css-web-template) to override them.
7
+ */
8
+
9
+
10
+
11
+
12
+
13
+ /*------------------------------------*\
14
+ $DEBUG
15
+ \*------------------------------------*/
16
+ /**
17
+ * Debug mode will visually highlight any potential markup/accessibility quirks
18
+ * in the browser. Set to `true` or `false`.
19
+ */
20
+ $debug-mode: false!default;
21
+
22
+
23
+
24
+
25
+
26
+ /*------------------------------------*\
27
+ $BORDER-BOX
28
+ \*------------------------------------*/
29
+ /**
30
+ * Do you want all elements to adopt `box-sizing:border-box;` as per
31
+ * paulirish.com/2012/box-sizing-border-box-ftw ?
32
+ */
33
+ $global-border-box: true!default;
34
+
35
+
36
+
37
+
38
+
39
+ /*------------------------------------*\
40
+ $BASE
41
+ \*------------------------------------*/
42
+ /**
43
+ * Base stuff
44
+ */
45
+ $base-font-size: 16px!default;
46
+ $base-line-height: 24px!default;
47
+
48
+ /**
49
+ * Base font-family.
50
+ */
51
+ $base-font-family: sans-serif!default;
52
+
53
+ /**
54
+ * Default colour for objects’ borders etc.
55
+ */
56
+ $base-ui-color: #ccc!default;
57
+
58
+
59
+
60
+
61
+
62
+ /*------------------------------------*\
63
+ $RESPONSIVE
64
+ \*------------------------------------*/
65
+ /**
66
+ * Responsiveness?
67
+ */
68
+ $responsive: true!default;
69
+
70
+ /**
71
+ * Responsiveness for widescreen/high resolution desktop monitors and beyond?
72
+ * Note: `$responsive` variable above must be set to true before enabling this.
73
+ */
74
+ $responsive-extra: false!default;
75
+
76
+ /**
77
+ * Responsive push and pull produce a LOT of code, only turn them on if you
78
+ * definitely need them.
79
+ */
80
+ $push: false!default;
81
+ /**
82
+ * Note: `$push` variable above must be set to true before enabling these.
83
+ */
84
+ $palm-push: false!default;
85
+ $lap-push: false!default;
86
+ $lap-and-up-push: false!default;
87
+ $portable-push: false!default;
88
+ $desk-push: false!default;
89
+
90
+ $pull: false!default;
91
+ /**
92
+ * Note: `$pull` variable above must be set to true before enabling these.
93
+ */
94
+ $palm-pull: false!default;
95
+ $lap-pull: false!default;
96
+ $lap-and-up-pull: false!default;
97
+ $portable-pull: false!default;
98
+ $desk-pull: false!default;
99
+
100
+ /**
101
+ * Tell inuit.css when breakpoints start.
102
+ */
103
+ $lap-start: 481px!default;
104
+ $desk-start: 1024px!default;
105
+ $desk-wide-start: 1200px!default;
106
+
107
+
108
+
109
+
110
+
111
+ /*------------------------------------*\
112
+ $FONT-SIZES
113
+ \*------------------------------------*/
114
+ /**
115
+ * Font-sizes (in pixels). Refer to relevant sections for their implementations.
116
+ */
117
+ $giga-size: 96px!default;
118
+ $mega-size: 72px!default;
119
+ $kilo-size: 48px!default;
120
+
121
+ $h1-size: 36px!default; // .alpha
122
+ $h2-size: 30px!default; // .beta
123
+ $h3-size: 24px!default; // .gamma
124
+ $h4-size: 20px!default; // .delta
125
+ $h5-size: 16px!default; // .epsilon
126
+ $h6-size: 14px!default; // .zeta
127
+
128
+ $milli-size: 12px!default;
129
+ $micro-size: 10px!default;
130
+
131
+
132
+
133
+
134
+
135
+ /*------------------------------------*\
136
+ $QUOTES
137
+ \*------------------------------------*/
138
+ /**
139
+ * English quote marks?
140
+ */
141
+ $english-quotes: true!default;
142
+
143
+ /**
144
+ * If you want English quotes then please do not edit these; they’re only here
145
+ * because Sass needs them.
146
+ */
147
+ $open-quote: null;
148
+ $close-quote: null;
149
+
150
+ /**
151
+ * If you need non-English quotes, please alter the following values accordingly:
152
+ */
153
+ @if $english-quotes != true{
154
+ $open-quote: \00AB;
155
+ $close-quote: \00BB;
156
+ }
157
+
158
+
159
+
160
+
161
+
162
+ /*------------------------------------*\
163
+ $BRAND
164
+ \*------------------------------------*/
165
+ /**
166
+ * Brand stuff
167
+ */
168
+ $brand-color: #4a8ec2!default;
169
+ $brand-face: "Helvetica Neue", sans-serif!default;
170
+
171
+ /**
172
+ * How big would you like round corners to be by default?
173
+ */
174
+ $brand-round: 4px!default;
175
+
176
+
177
+
178
+
179
+
180
+ /*------------------------------------*\
181
+ $OBJECTS AND ABSTRACTIONS
182
+ \*------------------------------------*/
183
+ /**
184
+ * Which objects and abstractions would you like to use?
185
+ */
186
+ $use-grids: false!default;
187
+ $use-flexbox: false!default;
188
+ $use-columns: false!default;
189
+ $use-nav: false!default;
190
+ $use-options: false!default;
191
+ $use-pagination: false!default;
192
+ $use-breadcrumb: false!default;
193
+ $use-media: false!default;
194
+ $use-marginalia: false!default;
195
+ $use-island: false!default;
196
+ $use-block-list: false!default;
197
+ $use-matrix: false!default;
198
+ $use-split: false!default;
199
+ $use-this-or-this: false!default;
200
+ $use-link-complex: false!default;
201
+ $use-flyout: false!default;
202
+ $use-arrows: false!default;
203
+ $use-sprite: false!default;
204
+ $use-icon-text: false!default;
205
+ $use-beautons: false!default;
206
+ $use-lozenges: false!default;
207
+ $use-rules: false!default;
208
+ $use-stats: false!default;
209
+ $use-greybox: false!default;
210
+
211
+
212
+
213
+
214
+
215
+ /*------------------------------------*\
216
+ $FRAMEWORK
217
+ \*------------------------------------*/
218
+ /**
219
+ * inuit.css will work these next ones out for use within the framework.
220
+ *
221
+ * Assign our `$base-line-height` to a new spacing var for more transparency.
222
+ */
223
+ $base-spacing-unit: $base-line-height!default;
224
+ $half-spacing-unit: $base-spacing-unit / 2!default;
225
+ $line-height-ratio: $base-line-height / $base-font-size;
@@ -0,0 +1,213 @@
1
+ /*------------------------------------*\
2
+ INUIT.CSS
3
+ \*------------------------------------*/
4
+ /*!*
5
+ *
6
+ * inuitcss.com -- @inuitcss -- @csswizardry
7
+ *
8
+ */
9
+ /**
10
+ * inuit.css acts as a base stylesheet which you should extend with your own
11
+ * theme stylesheet.
12
+ *
13
+ * inuit.css aims to do the heavy lifting; sorting objects and abstractions,
14
+ * design patterns and fiddly bits of CSS, whilst leaving as much design as
15
+ * possible to you. inuit.css is the scaffolding to your decorator.
16
+ *
17
+ * This stylesheet is heavily documented and contains lots of comments, please
18
+ * take care to read and refer to them as you build. For further support please
19
+ * tweet at @inuitcss.
20
+ *
21
+ * Owing to the amount of comments please only ever use minified CSS in
22
+ * production. This file is purely a dev document.
23
+ *
24
+ * The table of contents below maps to section titles of the same name, to jump
25
+ * to any section simply run a find for $[SECTION-TITLE].
26
+ *
27
+ * Most objects and abstractions come with a chunk of markup that you should be
28
+ * able to paste into any view to quickly see how the CSS works in conjunction
29
+ * with the correct HTML.
30
+ *
31
+ * inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines
32
+ *
33
+ * LICENSE
34
+ *
35
+ * Copyright 2013 Harry Roberts
36
+ *
37
+ * Licensed under the Apache License, Version 2.0 (the "License");
38
+ * you may not use this file except in compliance with the License.
39
+ * You may obtain a copy of the License at
40
+ *
41
+ * http://apache.org/licenses/LICENSE-2.0
42
+ *
43
+ * Unless required by applicable law or agreed to in writing, software
44
+ * distributed under the License is distributed on an "AS IS" BASIS,
45
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
46
+ * See the License for the specific language governing permissions and
47
+ * limitations under the License.
48
+ *
49
+ * Thank you for choosing inuit.css. May your web fonts render perfectly.
50
+ */
51
+
52
+
53
+
54
+
55
+
56
+ /*------------------------------------*\
57
+ $CONTENTS
58
+ \*------------------------------------*/
59
+ /**
60
+ * CONTENTS............You’re reading it!
61
+ * WARNING.............Here be dragons!
62
+ * IMPORTS.............Begin importing the sections below
63
+ *
64
+ * MIXINS..............Super-simple Sass stuff
65
+ * NORMALIZE...........normalize.css
66
+ * RESET...............Set some defaults
67
+ * CLEARFIX............
68
+ * SHARED..............Shared declarations
69
+ *
70
+ * MAIN................High-level elements like `html`, `body`, etc.
71
+ * HEADINGS............Double-stranded heading hierarchy
72
+ * PARAGRAPHS..........
73
+ * SMALLPRINT..........Smaller text elements like `small`
74
+ * QUOTES..............
75
+ * CODE................
76
+ * LISTS...............
77
+ * IMAGES..............
78
+ * TABLES..............
79
+ * FORMS...............
80
+ *
81
+ * GRIDS...............Fluid, proportional and nestable grids
82
+ * FLEXBOX.............Crudely emulate flexbox
83
+ * COLUMNS.............CSS3 columns
84
+ * NAV.................A simple abstraction to put a list in horizontal nav mode
85
+ * OPTIONS.............Grouped nav items
86
+ * PAGINATION..........Very stripped back, basic paginator
87
+ * BREADCRUMB..........Simple breadcrumb trail object
88
+ * MEDIA...............Media object
89
+ * MARGINALIA..........Simple marginalia content
90
+ * ISLAND..............Boxed off content
91
+ * BLOCK-LIST..........Blocky lists of content
92
+ * MATRIX..............Gridded lists
93
+ * SPLIT...............A simple split-in-two object
94
+ * THIS-OR-THIS........Options object
95
+ * LINK-COMPLEX........
96
+ * FLYOUT..............Flyout-on-hover object
97
+ * ARROWS..............CSS arrows
98
+ * SPRITE..............Generic spriting element
99
+ * ICON-TEXT...........Icon and text couplings
100
+ * BEAUTONS............Use the beautons micro library
101
+ * LOZENGES............Basic lozenge styles
102
+ * RULES...............Horizontal rules
103
+ * STATS...............Simple stats object
104
+ * GREYBOX.............Wireframing styles
105
+ *
106
+ * WIDTHS..............Width classes for use alongside the grid system etc.
107
+ * PUSH................Push classes for manipulating grids
108
+ * PULL................Pull classes for manipulating grids
109
+ * BRAND...............Helper class to apply brand treatment to elements
110
+ * HELPER..............A series of helper classes to use arbitrarily
111
+ * DEBUG...............Enable to add visual flags for debugging purposes
112
+ */
113
+
114
+
115
+
116
+
117
+
118
+ /*------------------------------------*\
119
+ $WARNING
120
+ \*------------------------------------*/
121
+ /*
122
+ * inuit.css, being an OO framework, works in keeping with the open/closed
123
+ * principle. The variables you set previously are now being used throughout
124
+ * inuit.css to style everything we need for a base. Any custom styles SHOULD
125
+ * NOT be added or modified in inuit.css directly, but added via your theme
126
+ * stylesheet as per the open/closed principle:
127
+ *
128
+ * csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
129
+ *
130
+ * Try not to edit any CSS beyond this point; if you find you need to do so
131
+ * it is a failing of the framework so please tweet at @inuitcss.
132
+ */
133
+
134
+
135
+
136
+
137
+
138
+ /*------------------------------------*\
139
+ $IMPORTS
140
+ \*------------------------------------*/
141
+ /**
142
+ * Generic utility styles etc.
143
+ */
144
+ @import "defaults";
145
+ @import "generic/mixins";
146
+ @import "generic/normalize";
147
+ @import "generic/reset";
148
+ @import "generic/clearfix";
149
+ @import "generic/shared";
150
+
151
+
152
+
153
+
154
+
155
+ /**
156
+ * Base styles; unclassed HTML elements etc.
157
+ */
158
+ @import "base/main";
159
+ @import "base/headings";
160
+ @import "base/paragraphs";
161
+ @import "base/smallprint";
162
+ @import "base/quotes";
163
+ @import "base/code";
164
+ @import "base/images";
165
+ @import "base/lists";
166
+ @import "base/tables";
167
+ @import "base/forms";
168
+
169
+
170
+
171
+
172
+
173
+ /**
174
+ * Objects and abstractions
175
+ */
176
+ @import "objects/grids";
177
+ @import "objects/flexbox";
178
+ @import "objects/columns";
179
+ @import "objects/nav";
180
+ @import "objects/options";
181
+ @import "objects/pagination";
182
+ @import "objects/breadcrumb";
183
+ @import "objects/media";
184
+ @import "objects/marginalia";
185
+ @import "objects/island";
186
+ @import "objects/block-list";
187
+ @import "objects/matrix";
188
+ @import "objects/split";
189
+ @import "objects/this-or-this";
190
+ @import "objects/link-complex";
191
+ @import "objects/flyout";
192
+ @import "objects/arrows";
193
+ @import "objects/sprite";
194
+ @import "objects/icon-text";
195
+ @import "objects/beautons";
196
+ @import "objects/lozenges";
197
+ @import "objects/rules";
198
+ @import "objects/stats";
199
+ @import "objects/greybox";
200
+
201
+
202
+
203
+
204
+
205
+ /**
206
+ * Style trumps; helper and brand classes
207
+ */
208
+ @import "generic/widths";
209
+ @import "generic/push";
210
+ @import "generic/pull";
211
+ @import "generic/brand";
212
+ @import "generic/helper";
213
+ @import "generic/debug";
@@ -0,0 +1,63 @@
1
+ /*------------------------------------*\
2
+ $CODE
3
+ \*------------------------------------*/
4
+ /**
5
+ * Use an explicit font stack to ensure browsers render correct `line-height`.
6
+ */
7
+ pre{
8
+ overflow:auto;
9
+ }
10
+ pre mark{
11
+ background:none;
12
+ border-bottom:1px solid;
13
+ color:inherit;
14
+ }
15
+
16
+
17
+ /**
18
+ * Add comments to your code examples, e.g.:
19
+ *
20
+ <code>&lt;/div&gt;<span class=code-comment>&lt;!-- /wrapper --&gt;</span></code>
21
+ *
22
+ */
23
+ .code-comment{
24
+ /**
25
+ * Override this setting in your theme stylesheet
26
+ */
27
+ opacity:0.75;
28
+ filter:alpha(opacity=75);
29
+ }
30
+
31
+
32
+ /**
33
+ * You can add line numbers to your code examples but be warned, it requires
34
+ * some pretty funky looking markup, e.g.:
35
+ *
36
+ <ol class=line-numbers>
37
+ <li><code>.nav{</code></li>
38
+ <li><code> list-style:none;</code></li>
39
+ <li><code> margin-left:0;</code></li>
40
+ <li><code>}</code></li>
41
+ <li><code> .nav > li,</code></li>
42
+ <li><code> .nav > li > a{</code></li>
43
+ <li><code> display:inline-block;</code></li>
44
+ <li><code> *display:inline-block;</code></li>
45
+ <li><code> zoom:1;</code></li>
46
+ <li><code> }</code></li>
47
+ </ol>
48
+ *
49
+ * 1. Make the list look like code.
50
+ * 2. Give the list flush numbers with a leading zero.
51
+ * 3. Make sure lines of code don’t wrap.
52
+ * 4. Give the code form by forcing the `code` to honour white-space.
53
+ */
54
+ .line-numbers{
55
+ font-family:monospace, serif; /* [1] */
56
+ list-style:decimal-leading-zero inside; /* [2] */
57
+ white-space:nowrap; /* [3] */
58
+ overflow:auto; /* [3] */
59
+ margin-left:0;
60
+ }
61
+ .line-numbers code{
62
+ white-space:pre; /* [4] */
63
+ }
@@ -0,0 +1,174 @@
1
+ /*------------------------------------*\
2
+ $FORMS
3
+ \*------------------------------------*/
4
+ /**
5
+ *
6
+ * Demo: jsfiddle.net/inuitcss/MhHHU
7
+ *
8
+ */
9
+ fieldset{
10
+ padding:$base-spacing-unit;
11
+ }
12
+
13
+
14
+ /**
15
+ * Text inputs
16
+ *
17
+ * Instead of a `[type]` selector for each kind of form input, we just use a
18
+ * class to target any/every one, e.g.:
19
+ <input type=text class=text-input>
20
+ <input type=email class=text-input>
21
+ <input type=password class=text-input>
22
+ *
23
+ */
24
+ .text-input,
25
+ textarea{
26
+ /**
27
+ * Style these via your theme stylesheet.
28
+ */
29
+ }
30
+
31
+
32
+ /**
33
+ * Group sets of form fields in a list, e.g.:
34
+ *
35
+ <ul class=form-fields>
36
+ <li>
37
+ <label />
38
+ <input />
39
+ </li>
40
+ <li>
41
+ <label />
42
+ <select />
43
+ </li>
44
+ <li>
45
+ <label />
46
+ <input />
47
+ </li>
48
+ </ul>
49
+ *
50
+ */
51
+ .form-fields{
52
+ list-style:none;
53
+ margin:0;
54
+ }
55
+ .form-fields > li{
56
+ @extend %sass-margin-bottom;
57
+ }
58
+ .form-fields > li:last-child{
59
+ margin-bottom:0;
60
+ }
61
+
62
+
63
+ /**
64
+ * Labels
65
+ *
66
+ * Define a `.label` class as well as a `label` element. This means we can apply
67
+ * label-like styling to meta-labels for groups of options where a `label`
68
+ * element is not suitable, e.g.:
69
+ *
70
+ <li>
71
+ <span class=label>Select an option below:</span>
72
+ <ul class="multi-list four-cols">
73
+ <li>
74
+ <input /> <label />
75
+ </li>
76
+ <li>
77
+ <input /> <label />
78
+ </li>
79
+ <li>
80
+ <input /> <label />
81
+ </li>
82
+ <li>
83
+ <input /> <label />
84
+ </li>
85
+ </ul>
86
+ </li>
87
+ *
88
+ */
89
+ label,
90
+ .label{
91
+ display:block;
92
+ }
93
+ /**
94
+ * Extra help text in `label`s, e.g.:
95
+ *
96
+ <label>Card number <small class=additional>No spaces</small></label>
97
+ *
98
+ */
99
+ .additional{
100
+ display:block;
101
+ font-weight:normal;
102
+ }
103
+
104
+
105
+ /*
106
+ * Groups of checkboxes and radios, e.g.:
107
+ *
108
+ <li>
109
+ <ul class=check-list>
110
+ <li>
111
+ <input /> <label />
112
+ </li>
113
+ <li>
114
+ <input /> <label />
115
+ </li>
116
+ </ul>
117
+ </li>
118
+ *
119
+ */
120
+ .check-list{
121
+ list-style:none;
122
+ margin:0;
123
+ }
124
+ /*
125
+ * Labels in check-lists
126
+ */
127
+ .check-label,
128
+ .check-list label,
129
+ .check-list .label{
130
+ display:inline-block;
131
+ }
132
+
133
+
134
+ /**
135
+ * Spoken forms are for forms that read like spoken word, e.g.:
136
+ *
137
+ <li class=spoken-form>
138
+ Hello, my <label for=spoken-name>name</label> is
139
+ <input type=text class=text-input id=spoken-name>. My home
140
+ <label for=country>country</label> is
141
+ <select id=country>
142
+ <option>UK</option>
143
+ <option>US</option>
144
+ <option>Other</option>
145
+ </select>
146
+ </li>
147
+ *
148
+ */
149
+ .spoken-form label{
150
+ display:inline-block;
151
+ font:inherit;
152
+ }
153
+
154
+
155
+ /**
156
+ * Extra help text displayed after a field when that field is in focus, e.g.:
157
+ *
158
+ <label for=email>Email:</label>
159
+ <input type=email class=text-input id=email>
160
+ <small class=extra-help>.edu emails only</small>
161
+ *
162
+ * We leave the help text in the document flow and merely set it to
163
+ * `visibility:hidden;`. This means that it won’t interfere with anything once
164
+ * it reappears.
165
+ *
166
+ */
167
+ /*small*/.extra-help{
168
+ display:inline-block;
169
+ visibility:hidden;
170
+ }
171
+ .text-input:active + .extra-help,
172
+ .text-input:focus + .extra-help{
173
+ visibility:visible;
174
+ }