-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.scss
143 lines (119 loc) · 6.42 KB
/
style.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
/*------------------------------------*\
Aleut is a fork of [inuit.css](http://inuitcss.com/)
This is starter where we import all the packages from aleut into this style-sheet.
These files we can not change. However these are heavily based on SCSS variables, so we can change
these by supplying the specific SCSS-variable before we import each SCSS-file.
By default most of aleut is turned off, so we need to turn on each class via variables before importing.
We have structured the CSS in a specific way to avoid specificity-problems.
Basically we are first targetting elements without class-names etc,
then we are applying abstract patterns before we apply most of our own styles and
in the end helper-classes and layouts that should overwrite everything else..
All classes are also have namespaces. This means that you by looking at the prefix-of the class can
see where it is located and whether you can modify the file or not.
Read http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/ for more information
\*------------------------------------*/
/*------------------------------------*\
#SETTINGS
Global variables, site-wide settings, config switches, etc.
These are just for SCSS – nothing here gets compiled to CSS directly
\*------------------------------------*/
@import "scss/_settings.vars.scss"; //here we override some of the variables down the line
@import "node_modules/aleut.settings.defaults/_settings.defaults.scss";
@import "node_modules/aleut.settings.responsive/_settings.responsive.scss";
//@import "scss/_settings.fonts.scss";
//++ our own remaps of inuits variables
/*------------------------------------*\
#TOOLS
Site-wide mixins and functions.
These are just for SCSS - nothing here gets directly compiled to CSS.
\*------------------------------------*/
@import "node_modules/aleut.tools.functions/_tools.functions.scss";
@import "node_modules/aleut.tools.mixins/_tools.mixins.scss";
@import "node_modules/aleut.tools.responsive/_tools.responsive.scss";
@import "node_modules/aleut.tools.widths/_tools.widths.scss";
@import "node_modules/aleut.tools.clearfix/_tools.clearfix.scss";
@import "scss/_tools.mixins.scss"; //++ Our additional mixins
//++ Our additional functions
/*------------------------------------*\
#GENERIC
Low-specificity, far-reaching rulesets (e.g. resets).
Here we have our basic resets
\*------------------------------------*/
@import "node_modules/aleut.generic.normalize/_generic.normalize.scss";
@import "node_modules/aleut.generic.reset/_generic.reset.scss";
@import "node_modules/aleut.generic.box-sizing/_generic.box-sizing.scss";
//@import "node_modules/aleut.generic.shared/_generic.shared.scss";
/*------------------------------------*\
#BASE
Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).
Here we style all our HTML-elements with the basic styling we want.
https://github.com/aleutcss?query=base
\*------------------------------------*/
@import "node_modules/aleut.base.page/_base.page.scss";
@import "node_modules/aleut.base.images/_base.images.scss";
@import "node_modules/aleut.base.lists/_base.lists.scss";
@import "node_modules/aleut.base.headings/_base.headings.scss";
//@import "scss/_base.page.scss"; //our own variation of base.page
/*------------------------------------*\
#OBJECTS (o-prefix)
Objects, abstractions, and design patterns (e.g. .o-media {}).
Here we import abstractions without styling etc.
Missing some abstractions? Read trough the SCSS-files imported to turn
on variables or get new ones from here:
https://github.com/aleutcss?query=objects.
\*------------------------------------*/
//@import "node_modules/aleut.objects.block/_objects.block.scss";
//@import "node_modules/aleut.objects.box/_objects.box.scss";
//@import "node_modules/aleut.objects.buttons/_objects.buttons.scss";
//@import "node_modules/aleut.objects.flag/_objects.flag.scss";
$o-layout--tiny: false !default;
$o-layout--small: false !default;
$o-layout--large: false !default;
$o-layout--huge: false !default;
$o-layout--flush: false !default;
$o-layout--rev: false !default;
$o-layout--middle: false !default;
$o-layout--bottom: false !default;
$o-layout--right: false !default;
$o-layout--center: false !default;
$o-layout--auto: false !default;
//@import "node_modules/aleut.objects.layout/_objects.layout.scss";
//@import "node_modules/aleut.objects.list-bare/_objects.list-bare";
//@import "node_modules/aleut.objects.list-block/_objects.list-block";
//@import "node_modules/aleut.objects.list-inline/_objects.list-inline";
//@import "node_modules/aleut.objects.list-ui/_objects.list-ui";
//@import "node_modules/aleut.objects.media/_objects.media";
//@import "node_modules/aleut.objects.pack/_objects.pack.scss";
//@import "node_modules/aleut.objects.tables/_objects.tables.scss";
//@import "node_modules/aleut.objects.tabs/_objects.tabs.scss";
/*------------------------------------*\
#VENDOR
Third party CSS for plugins etc.
\*------------------------------------*/
//@import "_vendor.[something].scss";
/*------------------------------------*\
#COMPONENTS (c-prefix)
Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
This is the one layer that aleutcss doesn’t get involved with.
Here you place your own visual styling.
\*------------------------------------*/
//@import "scss/components/_components.header.scss";
//@import "scss/components/_components.hero.scss";
//@import "scss/components/_components.footer.scss";
//++
/*------------------------------------*\
#Utilities (u-prefix)
High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-hidden {})
Helpers and layout-classes
https://github.com/aleutcss?query=utilities
\*------------------------------------*/
@import "node_modules/aleut.utilities.clearfix/_utilities.clearfix.scss";
@import "node_modules/aleut.utilities.headings/_utilities.headings.scss";
@import "node_modules/aleut.utilities.print/_utilities.print.scss";
$u-p: true;
@import "node_modules/aleut.utilities.spacing/_utilities.spacing.scss";
@import "node_modules/aleut.utilities.spacing-responsive/_utilities.spacing-responsive.scss";
@import "node_modules/aleut.utilities.widths/_utilities.widths.scss";
@import "node_modules/aleut.utilities.widths-responsive/_utilities.widths-responsive.scss";
@import "scss/_utilities.helpers.scss";
//++ shame.scss (http://csswizardry.com/2013/04/shame-css/)