inuit_rails 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/inuit_rails.gemspec +23 -0
- data/lib/generators/inuit_rails/install_generator.rb +23 -0
- data/lib/generators/inuit_rails/templates/inuit_override.css.scss +209 -0
- data/lib/inuit_rails.rb +6 -0
- data/lib/inuit_rails/version.rb +3 -0
- data/vendor/assets/stylesheets/_defaults.scss +226 -0
- data/vendor/assets/stylesheets/_inuit.scss +215 -0
- data/vendor/assets/stylesheets/base/_code.scss +63 -0
- data/vendor/assets/stylesheets/base/_forms.scss +174 -0
- data/vendor/assets/stylesheets/base/_headings.scss +45 -0
- data/vendor/assets/stylesheets/base/_images.scss +73 -0
- data/vendor/assets/stylesheets/base/_lists.scss +19 -0
- data/vendor/assets/stylesheets/base/_main.scss +13 -0
- data/vendor/assets/stylesheets/base/_massive_print.scss +16 -0
- data/vendor/assets/stylesheets/base/_quotes.scss +98 -0
- data/vendor/assets/stylesheets/base/_small_print.scss +13 -0
- data/vendor/assets/stylesheets/base/_tables.scss +163 -0
- data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
- data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
- data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
- data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
- data/vendor/assets/stylesheets/generic/_inline_block_fix.scss +14 -0
- data/vendor/assets/stylesheets/generic/_inline_block_whitespace_fix.scss +13 -0
- data/vendor/assets/stylesheets/generic/_mixins.scss +341 -0
- data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
- data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
- data/vendor/assets/stylesheets/generic/_push.scss +147 -0
- data/vendor/assets/stylesheets/generic/_reset.scss +85 -0
- data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
- data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
- data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
- data/vendor/assets/stylesheets/objects/_beautons.scss +218 -0
- data/vendor/assets/stylesheets/objects/_block-list.scss +45 -0
- data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
- data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
- data/vendor/assets/stylesheets/objects/_flyout.scss +80 -0
- data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
- data/vendor/assets/stylesheets/objects/_grids.scss +76 -0
- data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
- data/vendor/assets/stylesheets/objects/_island.scss +38 -0
- data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
- data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
- data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
- data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
- data/vendor/assets/stylesheets/objects/_media.scss +60 -0
- data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
- data/vendor/assets/stylesheets/objects/_nav__breadcrumb.scss +67 -0
- data/vendor/assets/stylesheets/objects/_nav__options.scss +45 -0
- data/vendor/assets/stylesheets/objects/_nav__pagination.scss +53 -0
- data/vendor/assets/stylesheets/objects/_rules.scss +63 -0
- data/vendor/assets/stylesheets/objects/_split.scss +39 -0
- data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
- data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
- data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
- metadata +131 -0
@@ -0,0 +1,215 @@
|
|
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/inline_block_whitespace_fix";
|
150
|
+
@import "generic/inline_block_fix";
|
151
|
+
@import "generic/shared";
|
152
|
+
|
153
|
+
|
154
|
+
|
155
|
+
|
156
|
+
|
157
|
+
/**
|
158
|
+
* Base styles; unclassed HTML elements etc.
|
159
|
+
*/
|
160
|
+
@import "base/main";
|
161
|
+
@import "base/headings";
|
162
|
+
@import "base/small_print";
|
163
|
+
@import "base/massive_print";
|
164
|
+
@import "base/quotes";
|
165
|
+
@import "base/code";
|
166
|
+
@import "base/images";
|
167
|
+
@import "base/lists";
|
168
|
+
@import "base/tables";
|
169
|
+
@import "base/forms";
|
170
|
+
|
171
|
+
|
172
|
+
|
173
|
+
|
174
|
+
|
175
|
+
/**
|
176
|
+
* Objects and abstractions
|
177
|
+
*/
|
178
|
+
@import "objects/grids";
|
179
|
+
@import "objects/flexbox";
|
180
|
+
@import "objects/columns";
|
181
|
+
@import "objects/nav";
|
182
|
+
@import "objects/nav__options";
|
183
|
+
@import "objects/nav__pagination";
|
184
|
+
@import "objects/nav__breadcrumb";
|
185
|
+
@import "objects/media";
|
186
|
+
@import "objects/marginalia";
|
187
|
+
@import "objects/island";
|
188
|
+
@import "objects/block-list";
|
189
|
+
@import "objects/matrix";
|
190
|
+
@import "objects/split";
|
191
|
+
@import "objects/this-or-this";
|
192
|
+
@import "objects/link-complex";
|
193
|
+
@import "objects/flyout";
|
194
|
+
@import "objects/arrows";
|
195
|
+
@import "objects/sprite";
|
196
|
+
@import "objects/icon-text";
|
197
|
+
@import "objects/beautons";
|
198
|
+
@import "objects/lozenges";
|
199
|
+
@import "objects/rules";
|
200
|
+
@import "objects/stats";
|
201
|
+
@import "objects/greybox";
|
202
|
+
|
203
|
+
|
204
|
+
|
205
|
+
|
206
|
+
|
207
|
+
/**
|
208
|
+
* Style trumps; helper and brand classes
|
209
|
+
*/
|
210
|
+
@import "generic/widths";
|
211
|
+
@import "generic/push";
|
212
|
+
@import "generic/pull";
|
213
|
+
@import "generic/brand";
|
214
|
+
@import "generic/helper";
|
215
|
+
@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></div><span class=code-comment><!-- /wrapper --></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-left:0;
|
54
|
+
}
|
55
|
+
.form-fields > li{
|
56
|
+
@extend %generic-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
|
+
@extend %inline_block_fix;
|
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
|
+
@extend %inline_block_fix;
|
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
|
+
@extend %inline_block_fix;
|
169
|
+
visibility:hidden;
|
170
|
+
}
|
171
|
+
.text-input:active + .extra-help,
|
172
|
+
.text-input:focus + .extra-help{
|
173
|
+
visibility:visible;
|
174
|
+
}
|