compass-inuit 4.1.0 → 4.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +71 -0
- data/lib/compass-inuit.rb +3 -0
- data/stylesheets/_compass-inuit.scss +138 -0
- data/stylesheets/partials/_base.scss +14 -0
- data/stylesheets/partials/_generic.scss +13 -0
- data/stylesheets/partials/_objects.scss +20 -0
- data/stylesheets/partials/base/_code.scss +61 -0
- data/stylesheets/partials/base/_forms.scss +141 -0
- data/stylesheets/partials/base/_headings.scss +58 -0
- data/stylesheets/partials/base/_images.scss +10 -0
- data/stylesheets/partials/base/_links.scss +32 -0
- data/stylesheets/partials/base/_lists.scss +10 -0
- data/stylesheets/partials/base/_main.scss +7 -0
- data/stylesheets/partials/base/_paragraphs.scss +11 -0
- data/stylesheets/partials/base/_quotes.scss +45 -0
- data/stylesheets/partials/base/_smallprint.scss +21 -0
- data/stylesheets/partials/base/_tables.scss +150 -0
- data/stylesheets/partials/generic/_brand.scss +18 -0
- data/stylesheets/partials/generic/_clearfix.scss +19 -0
- data/stylesheets/partials/generic/_helper.scss +69 -0
- data/stylesheets/partials/generic/_mixins.scss +31 -0
- data/stylesheets/partials/generic/_reset.scss +75 -0
- data/stylesheets/partials/generic/_shared.scss +50 -0
- data/stylesheets/partials/objects/_block-list.scss +36 -0
- data/stylesheets/partials/objects/_buttons.scss +41 -0
- data/stylesheets/partials/objects/_columns.scss +22 -0
- data/stylesheets/partials/objects/_complex-link.scss +28 -0
- data/stylesheets/partials/objects/_flexbox.scss +39 -0
- data/stylesheets/partials/objects/_flyout.scss +57 -0
- data/stylesheets/partials/objects/_grids.scss +154 -0
- data/stylesheets/partials/objects/_icon-text.scss +36 -0
- data/stylesheets/partials/objects/_island.scss +33 -0
- data/stylesheets/partials/objects/_lozenges.scss +35 -0
- data/stylesheets/partials/objects/_matrix.scss +90 -0
- data/stylesheets/partials/objects/_media.scss +55 -0
- data/stylesheets/partials/objects/_nav.scss +62 -0
- data/stylesheets/partials/objects/_pagination.scss +39 -0
- data/stylesheets/partials/objects/_split.scss +35 -0
- data/stylesheets/partials/objects/_sprite.scss +62 -0
- data/stylesheets/partials/objects/_this-or-this.scss +33 -0
- data/templates/project/_vars.scss +38 -0
- data/templates/project/manifest.rb +3 -0
- data/templates/project/your-project.scss +16 -0
- metadata +50 -9
data/README.md
ADDED
@@ -0,0 +1,71 @@
|
|
1
|
+
# ![inuit.css](http://csswizardry.com/inuitcss/img/logo.jpg)
|
2
|
+
|
3
|
+
A powerful little Compass extension for inuit.css for _insanely serious_ developers who use Compass.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
### Bundler
|
8
|
+
If you want to bundle into your app, install bundler.
|
9
|
+
|
10
|
+
$ sudo gem install bundler
|
11
|
+
|
12
|
+
With Bundler installed, add this to your Gemfile.
|
13
|
+
|
14
|
+
group :assets do
|
15
|
+
gem 'compass-inuit'
|
16
|
+
end
|
17
|
+
|
18
|
+
Run this in the command line:
|
19
|
+
|
20
|
+
$ bundle install
|
21
|
+
$ git add Gemfile Gemfile.lock
|
22
|
+
|
23
|
+
### Manual
|
24
|
+
If bundler isn't your thing, install this gem.
|
25
|
+
|
26
|
+
$ sudo gem install compass-inuit
|
27
|
+
|
28
|
+
Next in your Compass project add this to your config.rb
|
29
|
+
|
30
|
+
require 'compass-inuit'
|
31
|
+
|
32
|
+
## Documentation
|
33
|
+
|
34
|
+
To get started install into your project.
|
35
|
+
|
36
|
+
compass install compass-inuit
|
37
|
+
|
38
|
+
Then verify it's installed.
|
39
|
+
|
40
|
+
compass help compass-inuit
|
41
|
+
|
42
|
+
Imports have been branched out in this extension, additionally you can use these:
|
43
|
+
|
44
|
+
@import "inuit/generic";
|
45
|
+
|
46
|
+
@import "inuit/base";
|
47
|
+
|
48
|
+
@import "inuit/objects";
|
49
|
+
|
50
|
+
## Support inuit.css
|
51
|
+
|
52
|
+
If you use and/or like inuit.css, perhaps you might consider [supporting it
|
53
|
+
through Gumroad](http://gum.co/nOoht).
|
54
|
+
|
55
|
+
## Credits
|
56
|
+
|
57
|
+
inuit.css, although produced and maintained by one developer, could not have
|
58
|
+
been possible without inspiration and work from an array of other people.
|
59
|
+
|
60
|
+
* **[Nicole Sullivan](https://twitter.com/stubbornella)** for her work on OOCSS
|
61
|
+
* **[Jonathan Snook](https://twitter.com/snookca)** for his work on SMACSS
|
62
|
+
* **[Nicolas Gallagher](https://twitter.com/necolas)** for his work on various
|
63
|
+
CSS things
|
64
|
+
* **[Bryan James](https://twitter.com/WengersToyBus)** for the inuit.css logo
|
65
|
+
|
66
|
+
And probably more…
|
67
|
+
|
68
|
+
This Compass extension was created by **[Stephen Way](https://twitter.com/stephencway)**
|
69
|
+
|
70
|
+
**inuit.css is the most powerful little framework out there, and it’s ready to
|
71
|
+
go!**
|
@@ -0,0 +1,138 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
INUIT.CSS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/*! inuitcss.com -- @inuitcss -- @csswizardry */
|
5
|
+
/**
|
6
|
+
* inuit.css acts as a base stylesheet which you should extend with your own
|
7
|
+
* theme stylesheet.
|
8
|
+
*
|
9
|
+
* inuit.css aims to do the heavy lifting; sorting objects and abstractions,
|
10
|
+
* design patterns and fiddly bits of CSS, whilst leaving as much design as
|
11
|
+
* possible to you. inuit.css is the scaffolding to your decorator.
|
12
|
+
*
|
13
|
+
* This stylesheet is heavily documented and contains lots of comments, please
|
14
|
+
* take care to read and refer to them as you build. For further support please
|
15
|
+
* tweet at @inuitcss.
|
16
|
+
*
|
17
|
+
* Owing to the amount of comments please only ever use `inuit.min.css` in
|
18
|
+
* production. This file is purely a dev document.
|
19
|
+
*
|
20
|
+
* The table of contents below maps to section titles of the same name, to jump
|
21
|
+
* to any section simply run a find for $[SECTION-TITLE].
|
22
|
+
*
|
23
|
+
* Most objects and abstractions come with a chunk of markup that you should be
|
24
|
+
* able to paste into any view to quickly see how the CSS works in conjunction
|
25
|
+
* with the correct HTML.
|
26
|
+
*
|
27
|
+
* LICENSE
|
28
|
+
*
|
29
|
+
* Copyright 2012 Harry Roberts
|
30
|
+
*
|
31
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
32
|
+
* you may not use this file except in compliance with the License.
|
33
|
+
* You may obtain a copy of the License at
|
34
|
+
*
|
35
|
+
* http://apache.org/licenses/LICENSE-2.0
|
36
|
+
*
|
37
|
+
* Unless required by applicable law or agreed to in writing, software
|
38
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
39
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
40
|
+
* See the License for the specific language governing permissions and
|
41
|
+
* limitations under the License.
|
42
|
+
*
|
43
|
+
* Thank you for choosing inuit.css. May your specificity always stay low.
|
44
|
+
*/
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
|
50
|
+
/*------------------------------------*\
|
51
|
+
$CONTENTS
|
52
|
+
\*------------------------------------*/
|
53
|
+
/**
|
54
|
+
* CONTENTS............You’re reading it!
|
55
|
+
* WARNING.............Here be dragons!
|
56
|
+
* IMPORTS.............Begin importing the sections below
|
57
|
+
*
|
58
|
+
* MIXINS..............Super-simple Sass stuff
|
59
|
+
* RESET...............Set some defaults
|
60
|
+
* CLEARFIX............
|
61
|
+
* SHARED..............Shared declarations
|
62
|
+
*
|
63
|
+
* MAIN................High-level elements like `html`, `body`, etc.
|
64
|
+
* HEADINGS............Double-stranded heading hierarchy
|
65
|
+
* PARAGRAPHS..........
|
66
|
+
* SMALLPRINT..........Smaller text elements like `small`
|
67
|
+
* QUOTES..............
|
68
|
+
* CODE................
|
69
|
+
* LINKS...............
|
70
|
+
* LISTS...............
|
71
|
+
* IMAGES..............
|
72
|
+
* TABLES..............
|
73
|
+
* FORMS...............
|
74
|
+
*
|
75
|
+
* GRIDS...............Fluid, proportional and nestable grids
|
76
|
+
* FLEXBOX.............Crudely emulate flexbox
|
77
|
+
* COLUMNS.............CSS3 columns
|
78
|
+
* NAV.................A simple abstraction to put a list in horizontal nav mode
|
79
|
+
* PAGINATION..........Very stripped back, basic paginator
|
80
|
+
* MEDIA...............Media object
|
81
|
+
* ISLAND..............Boxed off content
|
82
|
+
* BLOCK-LIST..........Blocky lists of content
|
83
|
+
* MATRIX..............Gridded lists
|
84
|
+
* SPLIT...............A simple split-in-two object
|
85
|
+
* THIS-OR-THIS........Options object
|
86
|
+
* COMPLEX-LINK........
|
87
|
+
* FLYOUT..............Flyout-on-hover object
|
88
|
+
* SPRITE..............Generic spriting element
|
89
|
+
* ICON-TEXT...........Icon and text couplings
|
90
|
+
* BUTTONS.............
|
91
|
+
* LOZENGES............Basic lozenge styles
|
92
|
+
*
|
93
|
+
* BRAND...............Helper class to apply brand treatment to elements
|
94
|
+
* HELPER..............A series of helper classes to use arbitrarily
|
95
|
+
*/
|
96
|
+
|
97
|
+
|
98
|
+
|
99
|
+
|
100
|
+
|
101
|
+
/*------------------------------------*\
|
102
|
+
$WARNING
|
103
|
+
\*------------------------------------*/
|
104
|
+
/*
|
105
|
+
* inuit.css, being an OO framework, works in keeping with the open/closed
|
106
|
+
* principle. The variables you set previously are now being used throughout
|
107
|
+
* inuit.css to style everything we need for a base. Any custom styles SHOULD
|
108
|
+
* NOT be added or modified in inuit.css directly, but added via your theme
|
109
|
+
* stylesheet as per the open/closed principle:
|
110
|
+
*
|
111
|
+
* csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
|
112
|
+
*
|
113
|
+
* Try not to edit any CSS beyond this point; if you find you need to do so
|
114
|
+
* it is a failing of the framework so please tweet at @inuitcss.
|
115
|
+
*/
|
116
|
+
|
117
|
+
|
118
|
+
|
119
|
+
|
120
|
+
|
121
|
+
/*------------------------------------*\
|
122
|
+
$IMPORTS
|
123
|
+
\*------------------------------------*/
|
124
|
+
/**
|
125
|
+
* Generic utility styles etc.
|
126
|
+
* Style trumps; helper and brand classes
|
127
|
+
*/
|
128
|
+
@import "partials/generic";
|
129
|
+
|
130
|
+
/**
|
131
|
+
* Base styles; unclassed HTML elements etc.
|
132
|
+
*/
|
133
|
+
@import "partials/base";
|
134
|
+
|
135
|
+
/**
|
136
|
+
* Objects and abstractions
|
137
|
+
*/
|
138
|
+
@import "partials/objects";
|
@@ -0,0 +1,14 @@
|
|
1
|
+
/**
|
2
|
+
* Base styles; unclassed HTML elements etc.
|
3
|
+
*/
|
4
|
+
@import "partials/base/main";
|
5
|
+
@import "partials/base/headings";
|
6
|
+
@import "partials/base/paragraphs";
|
7
|
+
@import "partials/base/smallprint";
|
8
|
+
@import "partials/base/quotes";
|
9
|
+
@import "partials/base/code";
|
10
|
+
@import "partials/base/links";
|
11
|
+
@import "partials/base/images";
|
12
|
+
@import "partials/base/lists";
|
13
|
+
@import "partials/base/tables";
|
14
|
+
@import "partials/base/forms";
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/**
|
2
|
+
* Generic utility styles etc.
|
3
|
+
*/
|
4
|
+
@import "partials/generic/mixins";
|
5
|
+
@import "partials/generic/reset";
|
6
|
+
@import "partials/generic/clearfix";
|
7
|
+
@import "partials/generic/shared";
|
8
|
+
|
9
|
+
/**
|
10
|
+
* Style trumps; helper and brand classes
|
11
|
+
*/
|
12
|
+
@import "partials/generic/brand";
|
13
|
+
@import "partials/generic/helper";
|
@@ -0,0 +1,20 @@
|
|
1
|
+
/**
|
2
|
+
* Objects and abstractions
|
3
|
+
*/
|
4
|
+
@import "partials/objects/grids";
|
5
|
+
@import "partials/objects/flexbox";
|
6
|
+
@import "partials/objects/columns";
|
7
|
+
@import "partials/objects/nav";
|
8
|
+
@import "partials/objects/pagination";
|
9
|
+
@import "partials/objects/media";
|
10
|
+
@import "partials/objects/island";
|
11
|
+
@import "partials/objects/block-list";
|
12
|
+
@import "partials/objects/matrix";
|
13
|
+
@import "partials/objects/split";
|
14
|
+
@import "partials/objects/this-or-this";
|
15
|
+
@import "partials/objects/complex-link";
|
16
|
+
@import "partials/objects/flyout";
|
17
|
+
@import "partials/objects/sprite";
|
18
|
+
@import "partials/objects/icon-text";
|
19
|
+
@import "partials/objects/buttons";
|
20
|
+
@import "partials/objects/lozenges";
|
@@ -0,0 +1,61 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$CODE
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Use an explicit font stack to ensure browsers render correct `line-height`.
|
6
|
+
*/
|
7
|
+
pre,code,samp,kbd{
|
8
|
+
font-family:$code-face;
|
9
|
+
}
|
10
|
+
pre{
|
11
|
+
overflow:auto;
|
12
|
+
}
|
13
|
+
pre mark{
|
14
|
+
background:none;
|
15
|
+
border-bottom:1px solid;
|
16
|
+
color:inherit;
|
17
|
+
}
|
18
|
+
|
19
|
+
/**
|
20
|
+
* Add comments to your code examples, e.g.:
|
21
|
+
*
|
22
|
+
<code></div><span class=code-comment><!-- /wrapper --></span></code>
|
23
|
+
*
|
24
|
+
*/
|
25
|
+
.code-comment{
|
26
|
+
/**
|
27
|
+
* Override this setting in your theme stylesheet
|
28
|
+
*/
|
29
|
+
opacity:0.75;
|
30
|
+
filter:alpha(opacity=75);
|
31
|
+
}
|
32
|
+
|
33
|
+
/**
|
34
|
+
* You can add line numbers to your code examples but be warned, it requires
|
35
|
+
* some pretty funky looking markup, e.g.:
|
36
|
+
<pre class=numbered>
|
37
|
+
<ol class=numbered__numbers>
|
38
|
+
<li><code>.nav{</code></li>
|
39
|
+
<li><code> list-style:none;</code></li>
|
40
|
+
<li><code> margin-left:0;</code></li>
|
41
|
+
<li><code>}</code></li>
|
42
|
+
<li><code> .nav > li,</code></li>
|
43
|
+
<li><code> .nav > li > a{</code></li>
|
44
|
+
<li><code> display:inline-block;</code></li>
|
45
|
+
<li><code> *display:inline-block;</code></li>
|
46
|
+
<li><code> zoom:1;</code></li>
|
47
|
+
<li><code> }</code></li>
|
48
|
+
</ol>
|
49
|
+
</pre>
|
50
|
+
*/
|
51
|
+
.numbered{
|
52
|
+
white-space:nowrap;
|
53
|
+
}
|
54
|
+
.numbered__numbers{
|
55
|
+
list-style:decimal-leading-zero inside;
|
56
|
+
margin-bottom:0;
|
57
|
+
margin-left:0;
|
58
|
+
}
|
59
|
+
.numbered__numbers code{
|
60
|
+
white-space:pre;
|
61
|
+
}
|
@@ -0,0 +1,141 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$FORMS
|
3
|
+
\*------------------------------------*/
|
4
|
+
fieldset{
|
5
|
+
padding:$base-spacing-unit +px;
|
6
|
+
}
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Text inputs
|
10
|
+
*
|
11
|
+
* Instead of a `[type]` selector for each kind of form input, we just use a
|
12
|
+
* class to target any/every one, e.g.:
|
13
|
+
<input type=text class=text-input>
|
14
|
+
<input type=email class=text-input>
|
15
|
+
<input type=password class=text-input>
|
16
|
+
*
|
17
|
+
*/
|
18
|
+
.text-input,
|
19
|
+
textarea{
|
20
|
+
/**
|
21
|
+
* Style these via your theme stylesheet.
|
22
|
+
*/
|
23
|
+
}
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Group sets of form fields in a list, e.g.:
|
27
|
+
<ul class=form-fields>
|
28
|
+
<li>
|
29
|
+
<label />
|
30
|
+
<input />
|
31
|
+
</li>
|
32
|
+
<li>
|
33
|
+
<label />
|
34
|
+
<select />
|
35
|
+
</li>
|
36
|
+
<li>
|
37
|
+
<label />
|
38
|
+
<input />
|
39
|
+
</li>
|
40
|
+
</ul>
|
41
|
+
*
|
42
|
+
*/
|
43
|
+
.form-fields{
|
44
|
+
list-style:none;
|
45
|
+
margin:0;
|
46
|
+
}
|
47
|
+
.form-fields > li{
|
48
|
+
@extend .sass-margin-bottom;
|
49
|
+
}
|
50
|
+
.form-fields > li:last-child{
|
51
|
+
margin-bottom:0;
|
52
|
+
}
|
53
|
+
|
54
|
+
/**
|
55
|
+
* Labels
|
56
|
+
*
|
57
|
+
* Define a `.label` class as well as a `label` element. This means we can apply
|
58
|
+
* label-like styling to meta-labels for groups of options where a `label`
|
59
|
+
* element is not suitable, e.g.:
|
60
|
+
*
|
61
|
+
<li>
|
62
|
+
<span class=label>Select an option below:</span>
|
63
|
+
<ul class="multi-list four-cols">
|
64
|
+
<li>
|
65
|
+
<input /> <label />
|
66
|
+
</li>
|
67
|
+
<li>
|
68
|
+
<input /> <label />
|
69
|
+
</li>
|
70
|
+
<li>
|
71
|
+
<input /> <label />
|
72
|
+
</li>
|
73
|
+
<li>
|
74
|
+
<input /> <label />
|
75
|
+
</li>
|
76
|
+
</ul>
|
77
|
+
</li>
|
78
|
+
*
|
79
|
+
*/
|
80
|
+
label,
|
81
|
+
.label{
|
82
|
+
display:block;
|
83
|
+
}
|
84
|
+
/**
|
85
|
+
* Extra help text in `label`s, e.g.:
|
86
|
+
*
|
87
|
+
<label>Card number <small class=additional>No spaces</small></label>
|
88
|
+
*
|
89
|
+
*/
|
90
|
+
.additional{
|
91
|
+
display:block;
|
92
|
+
font-weight:normal;
|
93
|
+
}
|
94
|
+
|
95
|
+
/*
|
96
|
+
* Groups of checkboxes and radios, e.g.:
|
97
|
+
*
|
98
|
+
<li>
|
99
|
+
<ul class=check-list>
|
100
|
+
<li>
|
101
|
+
<input /> <label />
|
102
|
+
</li>
|
103
|
+
<li>
|
104
|
+
<input /> <label />
|
105
|
+
</li>
|
106
|
+
</ul>
|
107
|
+
</li>
|
108
|
+
*
|
109
|
+
*/
|
110
|
+
.check-list{
|
111
|
+
list-style:none;
|
112
|
+
margin:0;
|
113
|
+
}
|
114
|
+
/*
|
115
|
+
* Labels in check-lists
|
116
|
+
*/
|
117
|
+
.check-label,
|
118
|
+
.check-list label,
|
119
|
+
.check-list .label{
|
120
|
+
display:inline-block;
|
121
|
+
}
|
122
|
+
|
123
|
+
/**
|
124
|
+
* Spoken forms are for forms that read like spoken word, e.g.:
|
125
|
+
*
|
126
|
+
<li class=spoken-form>
|
127
|
+
Hello, my <label for=spoken-name>name</label> is
|
128
|
+
<input type=text class=text-input id=spoken-name>. My home
|
129
|
+
<label for=country>country</label> is
|
130
|
+
<select id=country>
|
131
|
+
<option>UK</option>
|
132
|
+
<option>US</option>
|
133
|
+
<option>Other</option>
|
134
|
+
</select>
|
135
|
+
</li>
|
136
|
+
*
|
137
|
+
*/
|
138
|
+
.spoken-form label{
|
139
|
+
display:inline-block;
|
140
|
+
font:inherit;
|
141
|
+
}
|