forked from inuitcss/inuitcss
-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.main.scss
157 lines (122 loc) · 4.79 KB
/
example.main.scss
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
/* ==========================================================================
INUITCSS
========================================================================== */
/**
* inuitcss, by @csswizardry
*
* github.com/inuitcss | inuitcss.com
*/
/**
* This is an example inuitcss manifest file. DO NOT MODIFY THIS FILE DIRECTLY.
* Instead, copy and paste it into your own CSS directory and make additions,
* extensions, and modifications there.
*/
/**
* CONTENTS
*
* SETTINGS
* Config...............Project-level configuration and feature switches.
* Core.................inuitcss’ core and setup settings.
* Global...............Project-wide variables and settings.
*
* TOOLS
* Font-size............A mixin which guarantees baseline-friendly line-heights.
* Clearfix.............Micro clearfix mixin.
* Hidden...............Mixin for hiding elements.
* Sass MQ..............inuitcss’ default media query manager.
*
* GENERIC
* Box-sizing...........Better default `box-sizing`.
* Normalize.css........A level playing field using @necolas’ Normalize.css.
* Reset................A tiny reset to complement Normalize.css.
* Shared...............Sensibly and tersely share some global commonalities
* (particularly useful when managing vertical rhythm).
*
* ELEMENTS
* Page.................Set up our document’s default `font-size` and
* `line-height`.
* Headings.............Very minimal (i.e. only font-size information) for
* headings 1 through 6.
* Images...............Base image styles.
* Tables...............Simple table styles.
*
* OBJECTS
* Wrapper..............Page constraint object.
* Layout...............Generic layout module.
* Media................Image- and text-like content side by side. The
* poster-child of OOCSS.
* Flag.................Table-layout-based advancement on the Media object.
* List-bare............Lists with no bullets or indents.
* List-inline..........A list whose items all site in a line.
* Box..................Simple boxing abstraction.
* Block................Image-on-top-of-text object.
* Ratio................A container for maintaining aspect ratio of content.
* Crop.................Provide a cropping context for media (images, etc.).
* Table................Classes for manipulating `table`s.
* Pack.................Pack items into available horizontal space.
*
* COMPONENTS
* Buttons..............An example button component, and how it fits into the
* inuitcss framework.
*
* UTILITIES
* Clearfix.............Bind our clearfix onto a utility class.
* Widths...............Simple width helper classes.
* Headings.............Reassigning our heading styles to helper classes.
* Spacings.............Nudge bits of the DOM around with these spacing
* classes.
* Responsive-Spacings..Enhances the function of normal spacings for
* responsive usage.
* Print................Reset-like styles taken from the HTML5 Boilerplate.
* Hide.................Helper classes to hide content
*/
// SETTINGS
@import "settings/example.settings.config";
@import "settings/settings.core";
@import "settings/example.settings.global";
// TOOLS
@import "tools/tools.font-size";
@import "tools/tools.clearfix";
@import "tools/tools.hidden";
@import "node_modules/sass-mq/mq";
// GENERIC
@import "generic/generic.box-sizing";
@import "generic/generic.normalize";
@import "generic/generic.reset";
@import "generic/generic.shared";
// ELEMENTS
@import "elements/elements.page";
@import "elements/elements.headings";
@import "elements/elements.images";
@import "elements/elements.tables";
// OBJECTS
//
// Uncomment and add to this section as necessary.
@import "objects/objects.wrapper";
@import "objects/objects.layout";
@import "objects/objects.media";
@import "objects/objects.flag";
@import "objects/objects.list-bare";
@import "objects/objects.list-inline";
@import "objects/objects.box";
@import "objects/objects.block";
@import "objects/objects.ratio";
@import "objects/objects.crop";
@import "objects/objects.table";
@import "objects/objects.pack";
// COMPONENTS
//
// Build and include your project’s UI components here.
@import "components/example.components.buttons";
// UTILITIES
@import "utilities/utilities.clearfix";
// Be aware that enabling offsets produces a large chunk of classes which might
// bloat your CSS, depending on the amount of breakpoints you defined.
// Only set this to `true` if you are absolutely sure about what you are doing.
$inuit-offsets: true;
@import "utilities/utilities.widths";
@import "utilities/utilities.headings";
@import "utilities/utilities.spacings";
@import "utilities/utilities.responsive-spacings";
@import "utilities/utilities.print";
@import "utilities/utilities.hide";