├── .scss-lint.yml
├── LICENSE
├── README.md
└── stylesheets
├── README.md
├── abstracts
├── README.md
├── _functions.scss
├── _index.scss
├── _mixins.scss
└── _variables.scss
├── base
├── README.md
├── _base.scss
├── _fonts.scss
├── _helpers.scss
└── _typography.scss
├── components
├── README.md
└── _button.scss
├── layout
├── README.md
├── _footer.scss
└── _header.scss
├── main.scss
├── pages
├── README.md
└── _home.scss
├── themes
├── README.md
└── _default.scss
└── vendors
├── README.md
└── _normalize.scss
/.scss-lint.yml:
--------------------------------------------------------------------------------
1 | exclude: 'stylesheets/vendors/**'
2 |
3 | linters:
4 |
5 | BangFormat:
6 | enabled: true
7 | space_before_bang: true
8 | space_after_bang: false
9 |
10 | BemDepth:
11 | enabled: true
12 | max_elements: 1
13 |
14 | BorderZero:
15 | enabled: true
16 | convention: zero
17 |
18 | ChainedClasses:
19 | enabled: false
20 |
21 | ColorKeyword:
22 | enabled: true
23 |
24 | ColorVariable:
25 | enabled: false
26 |
27 | Comment:
28 | enabled: false
29 |
30 | DebugStatement:
31 | enabled: true
32 |
33 | DeclarationOrder:
34 | enabled: true
35 |
36 | DisableLinterReason:
37 | enabled: true
38 |
39 | DuplicateProperty:
40 | enabled: false
41 |
42 | ElsePlacement:
43 | enabled: true
44 | style: same_line
45 |
46 | EmptyLineBetweenBlocks:
47 | enabled: true
48 | ignore_single_line_blocks: true
49 |
50 | EmptyRule:
51 | enabled: true
52 |
53 | ExtendDirective:
54 | enabled: false
55 |
56 | FinalNewline:
57 | enabled: true
58 | present: true
59 |
60 | HexLength:
61 | enabled: true
62 | style: short
63 |
64 | HexNotation:
65 | enabled: true
66 | style: lowercase
67 |
68 | HexValidation:
69 | enabled: true
70 |
71 | IdSelector:
72 | enabled: true
73 |
74 | ImportantRule:
75 | enabled: false
76 |
77 | ImportPath:
78 | enabled: true
79 | leading_underscore: false
80 | filename_extension: false
81 |
82 | Indentation:
83 | enabled: true
84 | allow_non_nested_indentation: true
85 | character: space
86 | width: 2
87 |
88 | LeadingZero:
89 | enabled: true
90 | style: include_zero
91 |
92 | MergeableSelector:
93 | enabled: false
94 | force_nesting: false
95 |
96 | NameFormat:
97 | enabled: true
98 | convention: hyphenated_lowercase
99 | allow_leading_underscore: true
100 |
101 | NestingDepth:
102 | enabled: true
103 | max_depth: 1
104 |
105 | PlaceholderInExtend:
106 | enabled: true
107 |
108 | PrivateNamingConvention:
109 | enabled: true
110 | prefix: _
111 |
112 | PropertyCount:
113 | enabled: false
114 |
115 | PropertySortOrder:
116 | enabled: false
117 |
118 | PropertySpelling:
119 | enabled: true
120 | extra_properties: []
121 |
122 | PropertyUnits:
123 | enabled: false
124 |
125 | PseudoElement:
126 | enabled: true
127 |
128 | QualifyingElement:
129 | enabled: true
130 | allow_element_with_attribute: false
131 | allow_element_with_class: false
132 | allow_element_with_id: false
133 |
134 | SelectorDepth:
135 | enabled: true
136 | max_depth: 3
137 |
138 | SelectorFormat:
139 | enabled: true
140 | convention: 'hyphenated_BEM'
141 |
142 | Shorthand:
143 | enabled: true
144 |
145 | SingleLinePerProperty:
146 | enabled: true
147 | allow_single_line_rule_sets: false
148 |
149 | SingleLinePerSelector:
150 | enabled: true
151 |
152 | SpaceAfterComma:
153 | enabled: true
154 |
155 | SpaceAfterPropertyColon:
156 | enabled: true
157 | style: one_space
158 |
159 | SpaceAfterPropertyName:
160 | enabled: true
161 |
162 | SpaceAfterVariableColon:
163 | enabled: true
164 | style: at_least_one_space
165 |
166 | SpaceAfterVariableName:
167 | enabled: true
168 |
169 | SpaceAroundOperator:
170 | enabled: true
171 | style: one_space
172 |
173 | SpaceBeforeBrace:
174 | enabled: true
175 | style: space
176 | allow_single_line_padding: true
177 |
178 | SpaceBetweenParens:
179 | enabled: true
180 | spaces: 0
181 |
182 | StringQuotes:
183 | enabled: true
184 | style: single_quotes
185 |
186 | TrailingSemicolon:
187 | enabled: true
188 |
189 | TrailingZero:
190 | enabled: true
191 |
192 | TransitionAll:
193 | enabled: false
194 |
195 | UnnecessaryMantissa:
196 | enabled: true
197 |
198 | UnnecessaryParentReference:
199 | enabled: true
200 |
201 | UrlFormat:
202 | enabled: false
203 |
204 | UrlQuotes:
205 | enabled: true
206 |
207 | VariableForProperty:
208 | enabled: false
209 |
210 | VendorPrefixes:
211 | enabled: true
212 | identifier_list: base
213 | include: []
214 | exclude: []
215 |
216 | ZeroUnit:
217 | enabled: true
218 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Kitty Giraudel
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Sass Boilerplate
2 |
3 | This is a sample project using the [7-1 architecture pattern](https://sass-guidelin.es/#architecture) and sticking to [Sass Guidelines](https://sass-guidelin.es) writing conventions.
4 |
5 | Each folder of this project has its own `README.md` file to explain the purpose and add extra information. Be sure to browse the repository to see how it works.
6 |
7 | ## Using the indented syntax
8 |
9 | ### Sass conversion
10 |
11 | This boilerplate does not provide a `.sass` version as it would be painful to maintain both versions without an appropriate build process. However, it is very easy to convert this boilerplate to Sass indented syntax.
12 |
13 | Clone it, head into the project and then run:
14 |
15 | ```
16 | sass-convert -F scss -T sass -i -R ./ && find . -iname “*.scss” -exec bash -c 'mv "$0" “${0%\.scss}.sass"' {} \;
17 | ```
18 |
19 | ### Use with Sass
20 |
21 | When using `sass` - in order to build that boilerplate, one needs to:
22 |
23 | - install `sass` if not yet installed:
24 |
25 | ```bash
26 | npm install -g sass
27 | ```
28 |
29 | - run build command from command line:
30 |
31 | ```bash
32 | sass stylesheets/main.scss dist/main.css
33 | ```
34 |
--------------------------------------------------------------------------------
/stylesheets/README.md:
--------------------------------------------------------------------------------
1 | # Main file
2 |
3 | The main file (usually labelled `main.scss`) should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but `@use` and comments.
4 |
5 | _Note: when using [Eyeglass](https://github.com/sass-eyeglass/eyeglass) for distribution, it might be a fine idea to name this file `index.scss` rather than `main.scss` in order to stick to [Eyeglass modules specifications](https://github.com/sass-eyeglass/eyeglass#writing-an-eyeglass-module-with-sass-files). See [#21](https://github.com/KittyGiraudel/sass-boilerplate/issues/21) for reference._
6 |
7 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Main file](https://sass-guidelin.es/#main-file)
8 |
--------------------------------------------------------------------------------
/stylesheets/abstracts/README.md:
--------------------------------------------------------------------------------
1 | # Abstracts
2 |
3 | The `abstracts/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
4 |
5 | The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
6 |
7 | ## \_index.scss
8 |
9 | With the deprecation of the `@import` keyword, we now use the `@use` and `@forward` keywords. Unlike with `@import`, adding abstracts with `@use` at the top of the `main.scss` file does not make them globally accessible to eveything else coming afterwards.
10 |
11 | Because of that we need to import those abstracts using `@use` keyword each time we need them inside the individual files, similar to how we would import utilities in the JavaScript world for that matter.
12 |
13 | This is where we need the `@forward` keyword.
14 |
15 | We can create an `_index.scss` file. In this file, we can collect all the abstract partials with the `@forward` keyword and re-export all abstract modules when we need them as a singular entry.
16 |
17 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Abstracts folder](https://sass-guidelin.es/#abstracts-folder)
18 |
--------------------------------------------------------------------------------
/stylesheets/abstracts/_functions.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all application-wide Sass functions.
3 | // -----------------------------------------------------------------------------
4 |
5 | /// Native `url(..)` function wrapper
6 | /// @param {String} $base - base URL for the asset
7 | /// @param {String} $type - asset type folder (e.g. `fonts/`)
8 | /// @param {String} $path - asset path
9 | /// @return {Url}
10 | @function asset($base, $type, $path) {
11 | @return url($base + $type + $path);
12 | }
13 |
14 | /// Returns URL to an image based on its path
15 | /// @param {String} $path - image path
16 | /// @param {String} $base [$base-url] - base URL
17 | /// @return {Url}
18 | /// @require $base-url
19 | @function image($path, $base: $base-url) {
20 | @return asset($base, 'images/', $path);
21 | }
22 |
23 | /// Returns URL to a font based on its path
24 | /// @param {String} $path - font path
25 | /// @param {String} $base [$base-url] - base URL
26 | /// @return {Url}
27 | /// @require $base-url
28 | @function font($path, $base: $base-url) {
29 | @return asset($base, 'fonts/', $path);
30 | }
31 |
--------------------------------------------------------------------------------
/stylesheets/abstracts/_index.scss:
--------------------------------------------------------------------------------
1 | @forward '../abstracts/functions';
2 | @forward '../abstracts/mixins';
3 | @forward '../abstracts/variables';
4 |
--------------------------------------------------------------------------------
/stylesheets/abstracts/_mixins.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all application-wide Sass mixins.
3 | // -----------------------------------------------------------------------------
4 |
5 | /// Event wrapper
6 | /// @author Harry Roberts
7 | /// @param {Bool} $self [false] - Whether or not to include current selector
8 | /// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
9 | @mixin on-event($self: false) {
10 | @if $self {
11 | &,
12 | &:hover,
13 | &:active,
14 | &:focus,
15 | &:focus-within {
16 | @content;
17 | }
18 | } @else {
19 | &:hover,
20 | &:active,
21 | &:focus,
22 | &:focus-within {
23 | @content;
24 | }
25 | }
26 | }
27 |
28 | /// Make a context based selector a little more friendly
29 | /// @author Kitty Giraudel
30 | /// @param {String} $context
31 | @mixin when-inside($context) {
32 | #{$context} & {
33 | @content;
34 | }
35 | }
36 |
37 |
--------------------------------------------------------------------------------
/stylesheets/abstracts/_variables.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all application-wide Sass variables.
3 | // -----------------------------------------------------------------------------
4 |
5 |
6 |
7 |
8 |
9 | /// Regular font family
10 | /// @type List
11 | $text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
12 |
13 | /// Code (monospace) font family
14 | /// @type List
15 | $code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace !default;
16 |
17 |
18 |
19 |
20 |
21 | /// Copy text color
22 | /// @type Color
23 | $text-color: rgb(34, 34, 34) !default;
24 |
25 | /// Main brand color
26 | /// @type Color
27 | $brand-color: rgb(229, 0, 80) !default;
28 |
29 | /// Light grey
30 | /// @type Color
31 | $light-grey: rgb(237, 237, 237) !default;
32 |
33 | /// Medium grey
34 | /// @type Color
35 | $mid-grey: rgb(153, 153, 153) !default;
36 |
37 | /// Dark grey
38 | /// @type Color
39 | $dark-grey: rgb(68, 68, 68) !default;
40 |
41 |
42 |
43 |
44 |
45 | /// Container's maximum width
46 | /// @type Length
47 | $max-width: 1180px !default;
48 |
49 |
50 |
51 |
52 |
53 | /// Breakpoints map
54 | /// @prop {String} keys - Keys are identifiers mapped to a given length
55 | /// @prop {Map} values - Values are actual breakpoints expressed in pixels
56 | $breakpoints: (
57 | 'small': 320px,
58 | 'medium': 768px,
59 | 'large': 1024px,
60 | ) !default;
61 |
62 |
63 |
64 |
65 |
66 |
67 | /// Relative or absolute URL where all assets are served from
68 | /// @type String
69 | /// @example scss - When using a CDN
70 | /// $base-url: 'https://cdn.example.com/assets/';
71 | $base-url: '/assets/' !default;
72 |
--------------------------------------------------------------------------------
/stylesheets/base/README.md:
--------------------------------------------------------------------------------
1 | # Base
2 |
3 | The `base/` folder holds what we might call the boilerplate code for the project. In there, you might find some typographic rules, and probably a stylesheet (that I’m used to calling `_base.scss`), defining some standard styles for commonly used HTML elements.
4 |
5 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Base folder](https://sass-guidelin.es/#base-folder)
6 |
--------------------------------------------------------------------------------
/stylesheets/base/_base.scss:
--------------------------------------------------------------------------------
1 | @use '../abstracts';
2 |
3 | // -----------------------------------------------------------------------------
4 | // This file contains very basic styles.
5 | // -----------------------------------------------------------------------------
6 |
7 | /**
8 | * Set up a decent box model on the root element
9 | */
10 | html {
11 | box-sizing: border-box;
12 | }
13 |
14 | /**
15 | * Make all elements from the DOM inherit from the parent box-sizing
16 | * Since `*` has a specificity of 0, it does not override the `html` value
17 | * making all elements inheriting from the root box-sizing value
18 | * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
19 | */
20 | *,
21 | *::before,
22 | *::after {
23 | box-sizing: inherit;
24 | }
25 |
26 | /**
27 | * Basic styles for links
28 | */
29 | a {
30 | color: abstracts.$brand-color;
31 | text-decoration: none;
32 |
33 | @include abstracts.on-event {
34 | color: abstracts.$text-color;
35 | text-decoration: underline;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/stylesheets/base/_fonts.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all @font-face declarations, if any.
3 | // -----------------------------------------------------------------------------
4 |
--------------------------------------------------------------------------------
/stylesheets/base/_helpers.scss:
--------------------------------------------------------------------------------
1 | @use '../abstracts';
2 |
3 | // -----------------------------------------------------------------------------
4 | // This file contains CSS helper classes.
5 | // -----------------------------------------------------------------------------
6 |
7 | /**
8 | * Clear inner floats
9 | */
10 | .clearfix::after {
11 | clear: both;
12 | content: '';
13 | display: table;
14 | }
15 |
16 | /**
17 | * Main content containers
18 | * 1. Make the container full-width with a maximum width
19 | * 2. Center it in the viewport
20 | * 3. Leave some space on the edges, especially valuable on small screens
21 | */
22 | .container {
23 | max-width: abstracts.$max-width; /* 1 */
24 | margin-left: auto; /* 2 */
25 | margin-right: auto; /* 2 */
26 | padding-left: 20px; /* 3 */
27 | padding-right: 20px; /* 3 */
28 | width: 100%; /* 1 */
29 | }
30 |
31 | /**
32 | * Hide text while making it readable for screen readers
33 | * 1. Needed in WebKit-based browsers because of an implementation bug;
34 | * See: https://code.google.com/p/chromium/issues/detail?id=457146
35 | */
36 | .hide-text {
37 | overflow: hidden;
38 | padding: 0; /* 1 */
39 | text-indent: 101%;
40 | white-space: nowrap;
41 | }
42 |
43 | /**
44 | * Hide element while making it readable for screen readers
45 | * Shamelessly borrowed from HTML5Boilerplate:
46 | * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
47 | */
48 | .visually-hidden {
49 | border: 0;
50 | clip: rect(0 0 0 0);
51 | height: 1px;
52 | margin: -1px;
53 | overflow: hidden;
54 | padding: 0;
55 | position: absolute;
56 | width: 1px;
57 | }
58 |
--------------------------------------------------------------------------------
/stylesheets/base/_typography.scss:
--------------------------------------------------------------------------------
1 | @use '../abstracts';
2 |
3 | /**
4 | * Basic typography style for copy text
5 | */
6 | body {
7 | color: abstracts.$text-color;
8 | font: normal 125% / 1.4 abstracts.$text-font-stack;
9 | }
10 |
--------------------------------------------------------------------------------
/stylesheets/components/README.md:
--------------------------------------------------------------------------------
1 | # Components
2 |
3 | For small components, there is the `components/` folder. While `layout/` is macro (defining the global wireframe), `components/` is more focused on widgets. It contains all kind of specific modules like a slider, a loader, a widget, and basically anything along those lines. There are usually a lot of files in components/ since the whole site/application should be mostly composed of tiny modules.
4 |
5 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Components folder](https://sass-guidelin.es/#components-folder)
6 |
--------------------------------------------------------------------------------
/stylesheets/components/_button.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all styles related to the button component.
3 | // -----------------------------------------------------------------------------
4 |
--------------------------------------------------------------------------------
/stylesheets/layout/README.md:
--------------------------------------------------------------------------------
1 | # Layout
2 |
3 | The `layout/` folder contains everything that takes part in laying out the site or application. This folder could have stylesheets for the main parts of the site (header, footer, navigation, sidebar…), the grid system or even CSS styles for all the forms.
4 |
5 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Layout folder](https://sass-guidelin.es/#layout-folder)
6 |
--------------------------------------------------------------------------------
/stylesheets/layout/_footer.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all styles related to the footer of the site/application.
3 | // -----------------------------------------------------------------------------
4 |
--------------------------------------------------------------------------------
/stylesheets/layout/_header.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all styles related to the header of the site/application.
3 | // -----------------------------------------------------------------------------
4 |
--------------------------------------------------------------------------------
/stylesheets/main.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | // 1. Vendors
4 | @use 'vendors/normalize';
5 |
6 | // 2. Base stuff
7 | @use 'base/base';
8 | @use 'base/fonts';
9 | @use 'base/helpers';
10 | @use 'base/typography';
11 |
12 | // 3. Layout-related sections
13 | @use 'layout/footer';
14 | @use 'layout/header';
15 |
16 | // 4. Components
17 | @use 'components/button';
18 |
19 | // 5. Pages
20 | @use 'pages/home';
21 |
22 | // 6. Themes
23 | @use 'themes/default';
24 |
--------------------------------------------------------------------------------
/stylesheets/pages/README.md:
--------------------------------------------------------------------------------
1 | # Pages
2 |
3 | If you have page-specific styles, it is better to put them in a `pages/` folder, in a file named after the page. For instance, it’s not uncommon to have very specific styles for the home page hence the need for a `_home.scss` file in `pages/`.
4 |
5 | *Note — Depending on your deployment process, these files could be called on their own to avoid merging them with the others in the resulting stylesheet. It is really up to you.*
6 |
7 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Pages folder](https://sass-guidelin.es/#pages-folder)
8 |
--------------------------------------------------------------------------------
/stylesheets/pages/_home.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains styles that are specific to the home page.
3 | // -----------------------------------------------------------------------------
4 |
--------------------------------------------------------------------------------
/stylesheets/themes/README.md:
--------------------------------------------------------------------------------
1 | # Theme
2 |
3 | On large sites and applications, it is not unusual to have different themes. There are certainly different ways of dealing with themes but I personally like having them all in a `themes/` folder.
4 |
5 | *Note — This is very project-specific and is likely to be non-existent on many projects.*
6 |
7 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Themes folder](https://sass-guidelin.es/#themes-folder)
8 |
--------------------------------------------------------------------------------
/stylesheets/themes/_default.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // When having several themes, this file contains everything related to the
3 | // default one.
4 | // -----------------------------------------------------------------------------
5 |
--------------------------------------------------------------------------------
/stylesheets/vendors/README.md:
--------------------------------------------------------------------------------
1 | # Vendors
2 |
3 | Most projects will have a `vendors/` folder containing all the CSS files from external libraries and frameworks – Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered, and so on. Putting those aside in the same folder is a good way to say “Hey, this is not from me, not my code, not my responsibility”.
4 |
5 | If you have to override a section of any vendor, I recommend you have an 8th folder called `vendors-extensions/` in which you may have files named exactly after the vendors they overwrite. For instance, `vendors-extensions/_bootstrap.scss` is a file containing all CSS rules intended to re-declare some of Bootstrap’s default CSS. This is to avoid editing the vendor files themselves, which is generally not a good idea.
6 |
7 | Reference: [Sass Guidelines](https://sass-guidelin.es/) > [Architecture](https://sass-guidelin.es/#architecture) > [Vendors folder](https://sass-guidelin.es/#vendors-folder)
8 |
--------------------------------------------------------------------------------
/stylesheets/vendors/_normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input { /* 1 */
178 | overflow: visible;
179 | }
180 |
181 | /**
182 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 | * 1. Remove the inheritance of text transform in Firefox.
184 | */
185 |
186 | button,
187 | select { /* 1 */
188 | text-transform: none;
189 | }
190 |
191 | /**
192 | * Correct the inability to style clickable types in iOS and Safari.
193 | */
194 |
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 | -webkit-appearance: button;
200 | }
201 |
202 | /**
203 | * Remove the inner border and padding in Firefox.
204 | */
205 |
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 | border-style: none;
211 | padding: 0;
212 | }
213 |
214 | /**
215 | * Restore the focus styles unset by the previous rule.
216 | */
217 |
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 | outline: 1px dotted ButtonText;
223 | }
224 |
225 | /**
226 | * Correct the padding in Firefox.
227 | */
228 |
229 | fieldset {
230 | padding: 0.35em 0.75em 0.625em;
231 | }
232 |
233 | /**
234 | * 1. Correct the text wrapping in Edge and IE.
235 | * 2. Correct the color inheritance from `fieldset` elements in IE.
236 | * 3. Remove the padding so developers are not caught out when they zero out
237 | * `fieldset` elements in all browsers.
238 | */
239 |
240 | legend {
241 | box-sizing: border-box; /* 1 */
242 | color: inherit; /* 2 */
243 | display: table; /* 1 */
244 | max-width: 100%; /* 1 */
245 | padding: 0; /* 3 */
246 | white-space: normal; /* 1 */
247 | }
248 |
249 | /**
250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 | */
252 |
253 | progress {
254 | vertical-align: baseline;
255 | }
256 |
257 | /**
258 | * Remove the default vertical scrollbar in IE 10+.
259 | */
260 |
261 | textarea {
262 | overflow: auto;
263 | }
264 |
265 | /**
266 | * 1. Add the correct box sizing in IE 10.
267 | * 2. Remove the padding in IE 10.
268 | */
269 |
270 | [type="checkbox"],
271 | [type="radio"] {
272 | box-sizing: border-box; /* 1 */
273 | padding: 0; /* 2 */
274 | }
275 |
276 | /**
277 | * Correct the cursor style of increment and decrement buttons in Chrome.
278 | */
279 |
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 | height: auto;
283 | }
284 |
285 | /**
286 | * 1. Correct the odd appearance in Chrome and Safari.
287 | * 2. Correct the outline style in Safari.
288 | */
289 |
290 | [type="search"] {
291 | -webkit-appearance: textfield; /* 1 */
292 | outline-offset: -2px; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner padding in Chrome and Safari on macOS.
297 | */
298 |
299 | [type="search"]::-webkit-search-decoration {
300 | -webkit-appearance: none;
301 | }
302 |
303 | /**
304 | * 1. Correct the inability to style clickable types in iOS and Safari.
305 | * 2. Change font properties to `inherit` in Safari.
306 | */
307 |
308 | ::-webkit-file-upload-button {
309 | -webkit-appearance: button; /* 1 */
310 | font: inherit; /* 2 */
311 | }
312 |
313 | /* Interactive
314 | ========================================================================== */
315 |
316 | /*
317 | * Add the correct display in Edge, IE 10+, and Firefox.
318 | */
319 |
320 | details {
321 | display: block;
322 | }
323 |
324 | /*
325 | * Add the correct display in all browsers.
326 | */
327 |
328 | summary {
329 | display: list-item;
330 | }
331 |
332 | /* Misc
333 | ========================================================================== */
334 |
335 | /**
336 | * Add the correct display in IE 10+.
337 | */
338 |
339 | template {
340 | display: none;
341 | }
342 |
343 | /**
344 | * Add the correct display in IE 10.
345 | */
346 |
347 | [hidden] {
348 | display: none;
349 | }
--------------------------------------------------------------------------------