From f37dd365d205c184e9164a80dd34227d37565597 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Tue, 26 Feb 2019 11:06:17 +0100 Subject: [PATCH] Add sass --- README.md | 1 + sass/abstracts/_functions.sass | 30 +++ sass/abstracts/_mixins.sass | 34 +++ sass/abstracts/_variables.sass | 71 +++++ sass/base/_base.sass | 35 +++ sass/base/_fonts.sass | 3 + sass/base/_helpers.sass | 55 ++++ sass/base/_typography.sass | 7 + sass/components/_button.sass | 3 + sass/layout/_footer.sass | 3 + sass/layout/_header.sass | 3 + sass/main.sass | 35 +++ sass/pages/_home.sass | 3 + sass/themes/_default.sass | 4 + sass/vendors/_normalize.sass | 461 +++++++++++++++++++++++++++++++++ 15 files changed, 748 insertions(+) create mode 100644 README.md create mode 100644 sass/abstracts/_functions.sass create mode 100644 sass/abstracts/_mixins.sass create mode 100644 sass/abstracts/_variables.sass create mode 100644 sass/base/_base.sass create mode 100644 sass/base/_fonts.sass create mode 100644 sass/base/_helpers.sass create mode 100644 sass/base/_typography.sass create mode 100644 sass/components/_button.sass create mode 100644 sass/layout/_footer.sass create mode 100644 sass/layout/_header.sass create mode 100644 sass/main.sass create mode 100644 sass/pages/_home.sass create mode 100644 sass/themes/_default.sass create mode 100644 sass/vendors/_normalize.sass diff --git a/README.md b/README.md new file mode 100644 index 0000000..f7d2f7e --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +https://github.com/HugoGiraudel/sass-boilerplate diff --git a/sass/abstracts/_functions.sass b/sass/abstracts/_functions.sass new file mode 100644 index 0000000..d6b794f --- /dev/null +++ b/sass/abstracts/_functions.sass @@ -0,0 +1,30 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass functions. +// ----------------------------------------------------------------------------- + +/// Native `url(..)` function wrapper +/// @param {String} $base - base URL for the asset +/// @param {String} $type - asset type folder (e.g. `fonts/`) +/// @param {String} $path - asset path +/// @return {Url} +@function asset($base, $type, $path) { + @return url($base + $type + $path); +} + +/// Returns URL to an image based on its path +/// @param {String} $path - image path +/// @param {String} $base [$base-url] - base URL +/// @return {Url} +/// @require $base-url +@function image($path, $base: $base-url) { + @return asset($base, 'images/', $path); +} + +/// Returns URL to a font based on its path +/// @param {String} $path - font path +/// @param {String} $base [$base-url] - base URL +/// @return {Url} +/// @require $base-url +@function font($path, $base: $base-url) { + @return asset($base, 'fonts/', $path); +} diff --git a/sass/abstracts/_mixins.sass b/sass/abstracts/_mixins.sass new file mode 100644 index 0000000..56a8b90 --- /dev/null +++ b/sass/abstracts/_mixins.sass @@ -0,0 +1,34 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass mixins. +// ----------------------------------------------------------------------------- + +/// Event wrapper +/// @author Harry Roberts +/// @param {Bool} $self [false] - Whether or not to include current selector +/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts +@mixin on-event($self: false) { + @if $self { + &, + &:hover, + &:active, + &:focus { + @content; + } + } @else { + &:hover, + &:active, + &:focus { + @content; + } + } +} + +/// Make a context based selector a little more friendly +/// @author Hugo Giraudel +/// @param {String} $context +@mixin when-inside($context) { + #{$context} & { + @content; + } +} + diff --git a/sass/abstracts/_variables.sass b/sass/abstracts/_variables.sass new file mode 100644 index 0000000..b384464 --- /dev/null +++ b/sass/abstracts/_variables.sass @@ -0,0 +1,71 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass variables. +// ----------------------------------------------------------------------------- + + + + + +/// Regular font family +/// @type List +$text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default; + +/// Code (monospace) font family +/// @type List +$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace !default; + + + + + +/// Copy text color +/// @type Color +$text-color: rgb(34, 34, 34) !default; + +/// Main brand color +/// @type Color +$brand-color: rgb(229, 0, 80) !default; + +/// Light grey +/// @type Color +$light-grey: rgb(237, 237, 237) !default; + +/// Medium grey +/// @type Color +$mid-grey: rgb(153, 153, 153) !default; + +/// Dark grey +/// @type Color +$dark-grey: rgb(68, 68, 68) !default; + + + + + +/// Container's maximum width +/// @type Length +$max-width: 1180px !default; + + + + + +/// Breakpoints map +/// @prop {String} keys - Keys are identifiers mapped to a given length +/// @prop {Map} values - Values are actual breakpoints expressed in pixels +$breakpoints: ( + 'small': 320px, + 'medium': 768px, + 'large': 1024px, +) !default; + + + + + + +/// Relative or absolute URL where all assets are served from +/// @type String +/// @example scss - When using a CDN +/// $base-url: 'http://cdn.example.com/assets/'; +$base-url: '/assets/' !default; diff --git a/sass/base/_base.sass b/sass/base/_base.sass new file mode 100644 index 0000000..a0759d8 --- /dev/null +++ b/sass/base/_base.sass @@ -0,0 +1,35 @@ +// ----------------------------------------------------------------------------- +// This file contains very basic styles. +// ----------------------------------------------------------------------------- + +/** + * Set up a decent box model on the root element + */ +html { + box-sizing: border-box; +} + +/** + * Make all elements from the DOM inherit from the parent box-sizing + * Since `*` has a specificity of 0, it does not override the `html` value + * making all elements inheriting from the root box-sizing value + * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ + */ +*, +*::before, +*::after { + box-sizing: inherit; +} + +/** + * Basic styles for links + */ +a { + color: $brand-color; + text-decoration: none; + + @include on-event { + color: $text-color; + text-decoration: underline; + } +} diff --git a/sass/base/_fonts.sass b/sass/base/_fonts.sass new file mode 100644 index 0000000..f8c445e --- /dev/null +++ b/sass/base/_fonts.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all @font-face declarations, if any. +// ----------------------------------------------------------------------------- diff --git a/sass/base/_helpers.sass b/sass/base/_helpers.sass new file mode 100644 index 0000000..18d57c0 --- /dev/null +++ b/sass/base/_helpers.sass @@ -0,0 +1,55 @@ +// ----------------------------------------------------------------------------- +// This file contains CSS helper classes. +// ----------------------------------------------------------------------------- + +/** + * Clear inner floats + */ +.clearfix::after { + clear: both; + content: ''; + display: table; +} + +/** + * Main content containers + * 1. Make the container full-width with a maximum width + * 2. Center it in the viewport + * 3. Leave some space on the edges, especially valuable on small screens + */ +.container { + max-width: $max-width; /* 1 */ + margin-left: auto; /* 2 */ + margin-right: auto; /* 2 */ + padding-left: 20px; /* 3 */ + padding-right: 20px; /* 3 */ + width: 100%; /* 1 */ + } + +/** + * Hide text while making it readable for screen readers + * 1. Needed in WebKit-based browsers because of an implementation bug; + * See: https://code.google.com/p/chromium/issues/detail?id=457146 + */ +.hide-text { + overflow: hidden; + padding: 0; /* 1 */ + text-indent: 101%; + white-space: nowrap; +} + +/** + * Hide element while making it readable for screen readers + * Shamelessly borrowed from HTML5Boilerplate: + * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133 + */ +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} diff --git a/sass/base/_typography.sass b/sass/base/_typography.sass new file mode 100644 index 0000000..3308593 --- /dev/null +++ b/sass/base/_typography.sass @@ -0,0 +1,7 @@ +/** + * Basic typography style for copy text + */ +body { + color: $text-color; + font: normal 125% / 1.4 $text-font-stack; +} diff --git a/sass/components/_button.sass b/sass/components/_button.sass new file mode 100644 index 0000000..170a2b4 --- /dev/null +++ b/sass/components/_button.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the button component. +// ----------------------------------------------------------------------------- diff --git a/sass/layout/_footer.sass b/sass/layout/_footer.sass new file mode 100644 index 0000000..7f45c71 --- /dev/null +++ b/sass/layout/_footer.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the footer of the site/application. +// ----------------------------------------------------------------------------- diff --git a/sass/layout/_header.sass b/sass/layout/_header.sass new file mode 100644 index 0000000..69c86bb --- /dev/null +++ b/sass/layout/_header.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the header of the site/application. +// ----------------------------------------------------------------------------- diff --git a/sass/main.sass b/sass/main.sass new file mode 100644 index 0000000..206757e --- /dev/null +++ b/sass/main.sass @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +// 1. Configuration and helpers +@import + 'abstracts/variables', + 'abstracts/functions', + 'abstracts/mixins'; + +// 2. Vendors +@import + 'vendors/normalize'; + +// 3. Base stuff +@import + 'base/base', + 'base/fonts', + 'base/typography', + 'base/helpers'; + +// 4. Layout-related sections +@import + 'layout/header', + 'layout/footer'; + +// 5. Components +@import + 'components/button'; + +// 6. Page-specific styles +@import + 'pages/home'; + +// 7. Themes +@import + 'themes/default'; diff --git a/sass/pages/_home.sass b/sass/pages/_home.sass new file mode 100644 index 0000000..53e07a7 --- /dev/null +++ b/sass/pages/_home.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the home page. +// ----------------------------------------------------------------------------- diff --git a/sass/themes/_default.sass b/sass/themes/_default.sass new file mode 100644 index 0000000..4be9bba --- /dev/null +++ b/sass/themes/_default.sass @@ -0,0 +1,4 @@ +// ----------------------------------------------------------------------------- +// When having several themes, this file contains everything related to the +// default one. +// ----------------------------------------------------------------------------- diff --git a/sass/vendors/_normalize.sass b/sass/vendors/_normalize.sass new file mode 100644 index 0000000..9b77e0e --- /dev/null +++ b/sass/vendors/_normalize.sass @@ -0,0 +1,461 @@ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +}