forked from csswizardry/inuit.css
-
Notifications
You must be signed in to change notification settings - Fork 7
/
inuit.less
207 lines (186 loc) · 6.35 KB
/
inuit.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
/*------------------------------------*\
INUIT.CSS
\*------------------------------------*/
/*!*
*
* inuitcss.com -- @inuitcss -- @csswizardry
*
*/
/**
* inuit.css acts as a base stylesheet which you should extend with your own
* theme stylesheet.
*
* inuit.css aims to do the heavy lifting; sorting objects and abstractions,
* design patterns and fiddly bits of CSS, whilst leaving as much design as
* possible to you. inuit.css is the scaffolding to your decorator.
*
* This stylesheet is heavily documented and contains lots of comments, please
* take care to read and refer to them as you build. For further support please
* tweet at @inuitcss.
*
* Owing to the amount of comments please only ever use minified CSS in
* production. This file is purely a dev document.
*
* The table of contents below maps to section titles of the same name, to jump
* to any section simply run a find for $[SECTION-TITLE].
*
* Most objects and abstractions come with a chunk of markup that you should be
* able to paste into any view to quickly see how the CSS works in conjunction
* with the correct HTML.
*
* inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines
*
* LICENSE
*
* Copyright 2013 Harry Roberts
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Thank you for choosing inuit.css. May your web fonts render perfectly.
*/
/*------------------------------------*\
$CONTENTS
\*------------------------------------*/
/**
* CONTENTS............You’re reading it!
* WARNING.............Here be dragons!
* IMPORTS.............Begin importing the sections below
*
* MIXINS..............Super-simple LESS stuff
* NORMALIZE...........normalize.css
* RESET...............Set some defaults
* CLEARFIX............
* SHARED..............Shared declarations
*
* MAIN................High-level elements like `html`, `body`, etc.
* HEADINGS............Double-stranded heading hierarchy
* PARAGRAPHS..........
* SMALLPRINT..........Smaller text elements like `small`
* QUOTES..............
* CODE................
* LISTS...............
* IMAGES..............
* TABLES..............
* FORMS...............
*
* GRIDS...............Fluid, proportional and nestable grids
* FLEXBOX.............Crudely emulate flexbox
* COLUMNS.............CSS3 columns
* NAV.................A simple abstraction to put a list in horizontal nav mode
* OPTIONS.............Grouped nav items
* PAGINATION..........Very stripped back, basic paginator
* BREADCRUMB..........Simple breadcrumb trail object
* MEDIA...............Media object
* MARGINALIA..........Simple marginalia content
* ISLAND..............Boxed off content
* BLOCK-LIST..........Blocky lists of content
* MATRIX..............Gridded lists
* SPLIT...............A simple split-in-two object
* THIS-OR-THIS........Options object
* LINK-COMPLEX........
* FLYOUT..............Flyout-on-hover object
* ARROWS..............CSS arrows
* SPRITE..............Generic spriting element
* ICON-TEXT...........Icon and text couplings
* BEAUTONS............Use the beautons micro library
* LOZENGES............Basic lozenge styles
* RULES...............Horizontal rules
* STATS...............Simple stats object
* GREYBOX.............Wireframing styles
*
* WIDTHS..............Width classes for use alongside the grid system etc.
* PUSH................Push classes for manipulating grids
* PULL................Pull classes for manipulating grids
* BRAND...............Helper class to apply brand treatment to elements
* HELPER..............A series of helper classes to use arbitrarily
* DEBUG...............Enable to add visual flags for debugging purposes
*/
/*------------------------------------*\
$WARNING
\*------------------------------------*/
/*
* inuit.css, being an OO framework, works in keeping with the open/closed
* principle. The variables you set previously are now being used throughout
* inuit.css to style everything we need for a base. Any custom styles SHOULD
* NOT be added or modified in inuit.css directly, but added via your theme
* stylesheet as per the open/closed principle:
*
* csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
*
* Try not to edit any CSS beyond this point; if you find you need to do so
* it is a failing of the framework so please tweet at @inuitcss.
*/
/*------------------------------------*\
$IMPORTS
\*------------------------------------*/
/**
* Generic utility styles etc.
*/
// @import "defaults";
@import "generic/mixins";
@import "generic/normalize";
@import "generic/reset";
@import "generic/clearfix";
@import "generic/shared";
/**
* Base styles; unclassed HTML elements etc.
*/
@import "base/main";
@import "base/headings";
@import "base/paragraphs";
@import "base/smallprint";
@import "base/quotes";
@import "base/code";
@import "base/images";
@import "base/lists";
@import "base/tables";
@import "base/forms";
/**
* Objects and abstractions
*
* Single-line comment (//) out any objects you do not need in your project.
*/
@import "objects/grids";
@import "objects/flexbox";
@import "objects/columns";
@import "objects/nav";
@import "objects/options";
@import "objects/pagination";
@import "objects/breadcrumb";
@import "objects/media";
@import "objects/marginalia";
@import "objects/island";
@import "objects/block-list";
@import "objects/matrix";
@import "objects/split";
// @import "example/unnecessary/file";
@import "objects/this-or-this";
@import "objects/link-complex";
@import "objects/flyout";
@import "objects/arrows";
@import "objects/sprite";
@import "objects/icon-text";
@import "objects/beautons";
@import "objects/lozenges";
@import "objects/rules";
@import "objects/stats";
@import "objects/greybox";
/**
* Style trumps; helper and brand classes
*/
@import "generic/widths";
@import "generic/push";
@import "generic/pull";
@import "generic/brand";
@import "generic/helper";
@import "generic/debug";