compass-inuit 4.4.1 → 4.5.4
Sign up to get free protection for your applications and to get access to all the features.
- data/stylesheets/_compass-inuit.scss +0 -146
- data/stylesheets/partials/_objects.scss +1 -3
- data/stylesheets/partials/base/_images.scss +4 -2
- data/stylesheets/partials/base/_quotes.scss +59 -11
- data/stylesheets/partials/generic/_normalize.scss +1 -1
- data/stylesheets/partials/objects/_batch.scss +15 -0
- data/stylesheets/partials/objects/_sprite.scss +34 -19
- data/templates/batch/assets/batch/batch.eot +0 -0
- data/templates/batch/assets/batch/batch.svg +360 -0
- data/templates/batch/assets/batch/batch.ttf +0 -0
- data/templates/batch/assets/batch/batch.woff +0 -0
- data/templates/batch/assets/batch/batch_webfont_reference.pdf +0 -0
- data/templates/batch/manifest.rb +21 -0
- data/templates/project/manifest.rb +11 -3
- data/templates/project/sass/_vars.scss +40 -3
- data/templates/project/sass/{your-project.scss → style.scss} +0 -0
- data/templates/project/watch.sh +1 -1
- metadata +11 -4
@@ -1,150 +1,4 @@
|
|
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 2012 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 floats remain cleared.
|
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
|
-
* LINKS...............
|
77
|
-
* LISTS...............
|
78
|
-
* IMAGES..............
|
79
|
-
* TABLES..............
|
80
|
-
* FORMS...............
|
81
|
-
*
|
82
|
-
* GRIDS...............Fluid, proportional and nestable grids
|
83
|
-
* FLEXBOX.............Crudely emulate flexbox
|
84
|
-
* COLUMNS.............CSS3 columns
|
85
|
-
* NAV.................A simple abstraction to put a list in horizontal nav mode
|
86
|
-
* OPTIONS.............Grouped nav items
|
87
|
-
* PAGINATION..........Very stripped back, basic paginator
|
88
|
-
* BREADCRUMB..........Simple breadcrumb trail object
|
89
|
-
* MEDIA...............Media object
|
90
|
-
* MARGINALIA..........Simple marginalia content
|
91
|
-
* ISLAND..............Boxed off content
|
92
|
-
* BLOCK-LIST..........Blocky lists of content
|
93
|
-
* MATRIX..............Gridded lists
|
94
|
-
* SPLIT...............A simple split-in-two object
|
95
|
-
* THIS-OR-THIS........Options object
|
96
|
-
* LINK-COMPLEX........
|
97
|
-
* FLYOUT..............Flyout-on-hover object
|
98
|
-
* ARROWS..............CSS arrows
|
99
|
-
* SPRITE..............Generic spriting element
|
100
|
-
* ICON-TEXT...........Icon and text couplings
|
101
|
-
* BUTTONS.............
|
102
|
-
* LOZENGES............Basic lozenge styles
|
103
|
-
* RULES...............Horizontal rules
|
104
|
-
* STATS...............Simple stats object
|
105
|
-
* GREYBOX.............Wireframing styles
|
106
|
-
*
|
107
|
-
* WIDTHS..............Width classes for use alongside the grid system etc.
|
108
|
-
* PUSH................Push classes for manipulating grids
|
109
|
-
* PULL................Pull classes for manipulating grids
|
110
|
-
* BRAND...............Helper class to apply brand treatment to elements
|
111
|
-
* HELPER..............A series of helper classes to use arbitrarily
|
112
|
-
* DEBUG...............Enable to add visual flags for debugging purposes
|
113
|
-
*/
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
/*------------------------------------*\
|
120
|
-
$WARNING
|
121
|
-
\*------------------------------------*/
|
122
|
-
/*
|
123
|
-
* inuit.css, being an OO framework, works in keeping with the open/closed
|
124
|
-
* principle. The variables you set previously are now being used throughout
|
125
|
-
* inuit.css to style everything we need for a base. Any custom styles SHOULD
|
126
|
-
* NOT be added or modified in inuit.css directly, but added via your theme
|
127
|
-
* stylesheet as per the open/closed principle:
|
128
|
-
*
|
129
|
-
* csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
|
130
|
-
*
|
131
|
-
* Try not to edit any CSS beyond this point; if you find you need to do so
|
132
|
-
* it is a failing of the framework so please tweet at @inuitcss.
|
133
|
-
*/
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
/*------------------------------------*\
|
141
|
-
$IMPORTS
|
142
|
-
\*------------------------------------*/
|
143
|
-
|
144
1
|
@import "partials/generic";
|
145
|
-
|
146
2
|
@import "partials/base";
|
147
|
-
|
148
3
|
@import "partials/objects";
|
149
|
-
|
150
4
|
@import "partials/helpers";
|
@@ -1,7 +1,5 @@
|
|
1
1
|
/**
|
2
2
|
* Objects and abstractions
|
3
|
-
*
|
4
|
-
* Single-line comment (//) out any objects you do not need in your project.
|
5
3
|
*/
|
6
4
|
@import "partials/objects/grids";
|
7
5
|
@import "partials/objects/flexbox";
|
@@ -16,7 +14,6 @@
|
|
16
14
|
@import "partials/objects/block-list";
|
17
15
|
@import "partials/objects/matrix";
|
18
16
|
@import "partials/objects/split";
|
19
|
-
// @import "example/unnecessary/file";
|
20
17
|
@import "partials/objects/this-or-this";
|
21
18
|
@import "partials/objects/link-complex";
|
22
19
|
@import "partials/objects/flyout";
|
@@ -28,3 +25,4 @@
|
|
28
25
|
@import "partials/objects/rules";
|
29
26
|
@import "partials/objects/stats";
|
30
27
|
@import "partials/objects/greybox";
|
28
|
+
@import "partials/objects/batch";
|
@@ -1,21 +1,69 @@
|
|
1
1
|
/*------------------------------------*\
|
2
2
|
$QUOTES
|
3
3
|
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* If English quotes are set in `_vars.scss`, define them here.
|
6
|
+
*/
|
7
|
+
@if $english-quotes == true{
|
8
|
+
$open-quote: “;
|
9
|
+
$close-quote: ”;
|
10
|
+
}
|
11
|
+
|
12
|
+
|
4
13
|
/**
|
5
14
|
* Big up @boblet: html5doctor.com/blockquote-q-cite
|
6
15
|
*/
|
7
|
-
q{ quotes:"‘" "’" "“" "”"; }
|
8
16
|
|
9
|
-
|
10
|
-
|
17
|
+
/**
|
18
|
+
* Inline quotes.
|
19
|
+
*/
|
20
|
+
q{
|
21
|
+
quotes:"‘" "’" "#{$open-quote}" "#{$close-quote}";
|
22
|
+
|
23
|
+
&:before{
|
24
|
+
content:"‘";
|
25
|
+
content:open-quote;
|
26
|
+
}
|
27
|
+
&:after{
|
28
|
+
content:"’";
|
29
|
+
content:close-quote;
|
30
|
+
}
|
31
|
+
|
32
|
+
q:before{
|
33
|
+
content:"“";
|
34
|
+
content:open-quote;
|
35
|
+
}
|
36
|
+
q:after{
|
37
|
+
content:"”";
|
38
|
+
content:close-quote;
|
39
|
+
}
|
40
|
+
}
|
11
41
|
|
12
|
-
|
13
|
-
|
42
|
+
blockquote{
|
43
|
+
quotes:"#{$open-quote}" "#{$close-quote}";
|
44
|
+
|
45
|
+
p:before{
|
46
|
+
content:"#{$open-quote}";
|
47
|
+
content:open-quote;
|
48
|
+
}
|
49
|
+
p:after{
|
50
|
+
content:"";
|
51
|
+
content:no-close-quote;
|
52
|
+
}
|
53
|
+
p:last-of-type:after{
|
54
|
+
content:"#{$close-quote}";
|
55
|
+
content:close-quote;
|
56
|
+
}
|
14
57
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
58
|
+
q:before{
|
59
|
+
content:"‘";
|
60
|
+
content:open-quote;
|
61
|
+
}
|
62
|
+
q:after{
|
63
|
+
content:"’";
|
64
|
+
content:close-quote;
|
65
|
+
}
|
66
|
+
}
|
19
67
|
|
20
68
|
|
21
69
|
/**
|
@@ -31,7 +79,7 @@ blockquote{
|
|
31
79
|
/**
|
32
80
|
* .4em is roughly equal to the width of the opening “ that we wish to hang.
|
33
81
|
*/
|
34
|
-
text-indent:-0.
|
82
|
+
text-indent:-0.41em;
|
35
83
|
|
36
84
|
p:last-of-type{
|
37
85
|
margin-bottom:0;
|
@@ -45,4 +93,4 @@ blockquote{
|
|
45
93
|
&:before{
|
46
94
|
content:"—";
|
47
95
|
}
|
48
|
-
}
|
96
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$BATCH
|
3
|
+
\*------------------------------------*/
|
4
|
+
@if $batch == true{
|
5
|
+
@font-face{
|
6
|
+
font-family:Batch;
|
7
|
+
src:url('assets/batch/batch.eot');
|
8
|
+
src:url('assets/batch/batch.eot?#iefix') format('embedded-opentype'),
|
9
|
+
url('assets/batch/batch.woff') format('woff'),
|
10
|
+
url('assets/batch/batch.ttf') format('truetype'),
|
11
|
+
url('assets/batch/batch.svg#batchregular') format('svg');
|
12
|
+
font-weight:normal;
|
13
|
+
font-style:normal;
|
14
|
+
}
|
15
|
+
}
|
@@ -13,15 +13,11 @@
|
|
13
13
|
*
|
14
14
|
* Giving an element a class of `.i` will throw it into ‘icon’ mode and will
|
15
15
|
* not add a background, but should be used for icon fonts and is populated
|
16
|
-
* through a `data-
|
16
|
+
* through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
|
17
17
|
*
|
18
|
-
<a href
|
18
|
+
<a href=#><i class=i data-icon=""></i> View your favourites</a>
|
19
19
|
*
|
20
|
-
*
|
21
|
-
*
|
22
|
-
<a href=#><i class=i data-char="C"></i> View your favourites</a>
|
23
|
-
*
|
24
|
-
* Where ‘C’ might map to a star in your particular font.
|
20
|
+
* Where ‘’ might map to a star in your particular font.
|
25
21
|
*
|
26
22
|
* These all require extension in your theme stylesheet.
|
27
23
|
*
|
@@ -31,17 +27,15 @@
|
|
31
27
|
.s,
|
32
28
|
.i{
|
33
29
|
display:inline-block;
|
34
|
-
|
35
|
-
* The typical size of most icons. Override in your theme stylesheet.
|
36
|
-
*/
|
37
|
-
width: 16px;
|
38
|
-
height:16px;
|
30
|
+
line-height:1;
|
39
31
|
position:relative;
|
32
|
+
vertical-align:middle;
|
40
33
|
zoom:1;
|
41
34
|
/**
|
42
|
-
* So using `.i` on
|
35
|
+
* So using `.i` on certain elements doesn’t make a visual difference.
|
43
36
|
*/
|
44
37
|
font-style:normal;
|
38
|
+
font-weight:normal;
|
45
39
|
/**
|
46
40
|
* So icons added using `.i` sit in the centre of the element.
|
47
41
|
*/
|
@@ -49,7 +43,11 @@
|
|
49
43
|
}
|
50
44
|
.s{
|
51
45
|
background-image:url(/path/to/your/sprite.png);
|
52
|
-
|
46
|
+
/**
|
47
|
+
* The typical size of most icons. Override in your theme stylesheet.
|
48
|
+
*/
|
49
|
+
width: 16px;
|
50
|
+
height:16px;
|
53
51
|
top:-1px;
|
54
52
|
|
55
53
|
/*
|
@@ -67,11 +65,28 @@
|
|
67
65
|
}
|
68
66
|
}
|
69
67
|
|
70
|
-
|
68
|
+
/**
|
69
|
+
* Set up Batch icon font
|
70
|
+
*/
|
71
71
|
.i{
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
72
|
+
@if $batch == true{
|
73
|
+
font-family:Batch;
|
74
|
+
}
|
75
|
+
font-size:16px;
|
76
|
+
/**
|
77
|
+
* Place the icon in a box the exact same dimensions as the icon itself.
|
78
|
+
*/
|
79
|
+
width:1em;
|
80
|
+
height:1em;
|
81
|
+
|
82
|
+
&:before{
|
83
|
+
content:attr(data-icon);
|
76
84
|
}
|
77
85
|
}
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Icon size modifiers.
|
89
|
+
*/
|
90
|
+
.i--large { font-size:32px; }
|
91
|
+
.i--huge { font-size:64px; }
|
92
|
+
.i--natural { font-size:inherit; }
|
Binary file
|