sushi-base/example.main.scss at develop · onest-work/sushi-base · GitHub

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
/* ==========================================================================
   SUSHI BASE
 * ========================================================================== */

/**
 * Sushi Base, by @dogandpony
 */

/**
 * This is an example Sushi Base 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
 * Core.................Sushi’s core and setup settings.
 * Breakpoints..........Project-wide breakpoint definitions.
 *
 * TOOLS
 * Clearfix.............Micro clearfix mixin.
 * Hide.................Mixin for hiding elements.
 * Position.............Mixins for advanced element positioning.
 * Input Reset..........Mixin for resetting native inputs and buttons.
 * Sass MQ..............Sushi’s 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.
 * Base.................Base settings for page, typography, box-sizing etc.
 *
 * ELEMENTS
 * 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.
 * Media Valign.........Table-layout-based advancement on the Media object.
 * Media Stacked........Image-on-top-of-text object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Table................Classes for manipulating tables.
 * Pack.................Pack items into available horizontal space.
 *
 * COMPONENTS
 * Buttons..............An example button component, and how it fits into the
 *                      Sushi framework.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacing..............Padding/margin u-classes based on spacing settings.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Display..............Helper classes for display attributes including hidden.
 * Floats...............Helper classes for floating elements.
 * Position.............Helper classes for positioning elements.
 * Shadows..............Google material design shadows with depth values 1-6.
 * Typography...........Various helper classes for advanced typesetting.
 * Zindex...............Helper classes for consistent z-indexing levels.
 */


/* Settings
 * --------------------------- */

@import "settings/breakpoints";
@import "settings/typography";
@import "settings/core";


/* Tools
 * --------------------------- */

@import "tools/clearfix";
@import "tools/elevation";
@import "tools/hide";
@import "tools/inputReset";
@import "tools/position";
@import "node_modules/sass-mq/mq";


/* Generic
 * --------------------------- */

@import "generic/normalize";
@import "generic/reset";
@import "generic/backgroundImages";
@import "generic/boxSizing";
@import "generic/margins";
@import "generic/base";


/* Elements
 * --------------------------- */

@import "elements/headings";
@import "elements/images";
@import "elements/tables";


/* Objects
 * --------------------------- */

@import "objects/wrapper";
@import "objects/layout";

@import "objects/bareList";
@import "objects/box";
@import "objects/crop";
@import "objects/inlineList";
@import "objects/media";
@import "objects/pack";
@import "objects/ratio";
@import "objects/stackedMedia";
@import "objects/table";
@import "objects/vAlignMedia";


/* Components
 * --------------------------- */

@import "components/button";


/* Utilities
 * --------------------------- */

@import "utilities/align";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/elevation";
@import "utilities/float";
@import "utilities/flex";
@import "utilities/overflow";
@import "utilities/position";
@import "utilities/spacing";
@import "utilities/typography";
@import "utilities/widths";
@import "utilities/whiteSpace";
@import "utilities/zIndex";


/* Responsive Classes
 * --------------------------- */

@import "example._responsive";


/* Print Utilities
 * --------------------------- */

@import "utilities/print";