From b53c8aa75995103791c2fa7efc1643a6015cef19 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Mon, 2 Jan 2023 11:04:42 +0100 Subject: [PATCH] Add files via upload --- README.md | 86 +++++ index.html | 14 + sass/abstracts/_mixins.sass | 3 + sass/abstracts/_variables.sass | 14 + sass/base/_base.sass | 3 + sass/base/_fonts.sass | 3 + sass/base/_helpers.sass | 3 + sass/base/_typography.sass | 3 + sass/desktop.sass | 37 +++ sass/desktop/components/_alert.sass | 1 + sass/desktop/components/_button.sass | 3 + sass/desktop/layout/_footer.sass | 3 + sass/desktop/layout/_header.sass | 3 + sass/desktop/pages/_home.sass | 3 + sass/mobile.sass | 37 +++ sass/mobile/components/_alert.sass | 1 + sass/mobile/components/_button.sass | 3 + sass/mobile/layout/_footer.sass | 3 + sass/mobile/layout/_header.sass | 3 + sass/mobile/pages/_home.sass | 3 + sass/themes/_dark.sass | 1 + sass/themes/_light.sass | 1 + sass/vendors/_normalize.sass | 448 +++++++++++++++++++++++++++ 23 files changed, 679 insertions(+) create mode 100644 README.md create mode 100644 index.html 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/desktop.sass create mode 100644 sass/desktop/components/_alert.sass create mode 100644 sass/desktop/components/_button.sass create mode 100644 sass/desktop/layout/_footer.sass create mode 100644 sass/desktop/layout/_header.sass create mode 100644 sass/desktop/pages/_home.sass create mode 100644 sass/mobile.sass create mode 100644 sass/mobile/components/_alert.sass create mode 100644 sass/mobile/components/_button.sass create mode 100644 sass/mobile/layout/_footer.sass create mode 100644 sass/mobile/layout/_header.sass create mode 100644 sass/mobile/pages/_home.sass create mode 100644 sass/themes/_dark.sass create mode 100644 sass/themes/_light.sass create mode 100644 sass/vendors/_normalize.sass diff --git a/README.md b/README.md new file mode 100644 index 0000000..c0a6ba9 --- /dev/null +++ b/README.md @@ -0,0 +1,86 @@ +# Pattern Template 7-1 version with Split Media + +An extraordinarily neat architecture that any Web Designer can understand at a glance. Structure with the help of SASS and media queries. + +## SASS + +``` txt +sass/ +| +|– abstracts/ +| |– _mixins.sass +| |– _variables.sass +|– base/ +| |– _base.sass +| |– _fonts.sass +| |– _helpers.sass +| |– _typography.sass +|– mobile/ +| |– layout/ +| | |– _footer.sass +| | |– _header.sass +| |– components/ +| | |– _alert.sass +| | |– _button.sass +| | |– ... +| |– pages/ +| | |– _home.sass +| | |– _contact.sass +| | |– ... +|– desktop/ +| |– layout/ +| | |– _footer.sass +| | |– _header.sass +| |– components/ +| | |– _alert.sass +| | |– _button.sass +| | |– ... +| |– pages/ +| | |– _home.sass +| | |– _contact.sass +| | |– ... +|– themes/ +| |– _dark.sass +| |– _light.sass +|– vendors/ +| |– _normalize.sass +| |– _owl-carousel.sass +| ... +`– mobile.sass +`– desktop.sass +``` + +## HTML + +```html + + + + + + Split media + + + + + +

Gravida arcu ac tortor.

+ + +``` + + +# Compile SASS. + +## Install + +``` bash +yarn global add node-sass +``` + +## Run + +``` bash +node-sass --output-style compressed sass/mobile.sass css/mobile.css +node-sass --output-style compressed sass/desktop.sass css/desktop.css +``` diff --git a/index.html b/index.html new file mode 100644 index 0000000..467c16f --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + Split media + + + + + +

Gravida arcu ac tortor.

+ + + diff --git a/sass/abstracts/_mixins.sass b/sass/abstracts/_mixins.sass new file mode 100644 index 0000000..5071036 --- /dev/null +++ b/sass/abstracts/_mixins.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass mixins. +// ----------------------------------------------------------------------------- diff --git a/sass/abstracts/_variables.sass b/sass/abstracts/_variables.sass new file mode 100644 index 0000000..1e9c1d2 --- /dev/null +++ b/sass/abstracts/_variables.sass @@ -0,0 +1,14 @@ +// ----------------------------------------------------------------------------- +// This file contains all application-wide Sass variables. +// ----------------------------------------------------------------------------- + +// Sizes +/// @type Length +$max-width: 1180px !default +/// Breakpoints map +$breakpoints: ("small": 320px, "medium": 768px, "large": 1024px) !default +// @media all and (min-width: map-get($breakpoints, 'medium')) + +// Colours +$color-black: #000 +$color-white: #fff diff --git a/sass/base/_base.sass b/sass/base/_base.sass new file mode 100644 index 0000000..a82b12b --- /dev/null +++ b/sass/base/_base.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains very basic styles. +// ----------------------------------------------------------------------------- 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..ed302e5 --- /dev/null +++ b/sass/base/_helpers.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains CSS helper classes. +// ----------------------------------------------------------------------------- diff --git a/sass/base/_typography.sass b/sass/base/_typography.sass new file mode 100644 index 0000000..aa5c611 --- /dev/null +++ b/sass/base/_typography.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// Basic typography style for copy text +// ----------------------------------------------------------------------------- diff --git a/sass/desktop.sass b/sass/desktop.sass new file mode 100644 index 0000000..2368ca7 --- /dev/null +++ b/sass/desktop.sass @@ -0,0 +1,37 @@ +@charset "UTF-8" + +// 1. Configuration and helpers + +@import abstracts/variables +@import abstracts/mixins + +// 2. Vendors + +@import vendors/normalize + +// 3. Base stuff + +@import base/base +@import base/fonts +@import base/typography +@import base/helpers + +// 4. Layout-related sections + +@import desktop/layout/header +@import desktop/layout/footer + +// 5. Components + +@import desktop/components/alert +@import desktop/components/button + +// 6. Page-specific styles + +@import desktop/pages/home +@import desktop/pages/contact + +// 7. Themes + +@import themes/light +@import themes/dark diff --git a/sass/desktop/components/_alert.sass b/sass/desktop/components/_alert.sass new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/sass/desktop/components/_alert.sass @@ -0,0 +1 @@ + diff --git a/sass/desktop/components/_button.sass b/sass/desktop/components/_button.sass new file mode 100644 index 0000000..170a2b4 --- /dev/null +++ b/sass/desktop/components/_button.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the button component. +// ----------------------------------------------------------------------------- diff --git a/sass/desktop/layout/_footer.sass b/sass/desktop/layout/_footer.sass new file mode 100644 index 0000000..7f45c71 --- /dev/null +++ b/sass/desktop/layout/_footer.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the footer of the site/application. +// ----------------------------------------------------------------------------- diff --git a/sass/desktop/layout/_header.sass b/sass/desktop/layout/_header.sass new file mode 100644 index 0000000..69c86bb --- /dev/null +++ b/sass/desktop/layout/_header.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the header of the site/application. +// ----------------------------------------------------------------------------- diff --git a/sass/desktop/pages/_home.sass b/sass/desktop/pages/_home.sass new file mode 100644 index 0000000..53e07a7 --- /dev/null +++ b/sass/desktop/pages/_home.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the home page. +// ----------------------------------------------------------------------------- diff --git a/sass/mobile.sass b/sass/mobile.sass new file mode 100644 index 0000000..3e08b25 --- /dev/null +++ b/sass/mobile.sass @@ -0,0 +1,37 @@ +@charset "UTF-8" + +// 1. Configuration and helpers + +@import abstracts/variables +@import abstracts/mixins + +// 2. Vendors + +@import vendors/normalize + +// 3. Base stuff + +@import base/base +@import base/fonts +@import base/typography +@import base/helpers + +// 4. Layout-related sections + +@import mobile/layout/header +@import mobile/layout/footer + +// 5. Components + +@import mobile/components/alert +@import mobile/components/button + +// 6. Page-specific styles + +@import mobile/pages/home +@import mobile/pages/contact + +// 7. Themes + +@import themes/light +@import themes/dark diff --git a/sass/mobile/components/_alert.sass b/sass/mobile/components/_alert.sass new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/sass/mobile/components/_alert.sass @@ -0,0 +1 @@ + diff --git a/sass/mobile/components/_button.sass b/sass/mobile/components/_button.sass new file mode 100644 index 0000000..170a2b4 --- /dev/null +++ b/sass/mobile/components/_button.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the button component. +// ----------------------------------------------------------------------------- diff --git a/sass/mobile/layout/_footer.sass b/sass/mobile/layout/_footer.sass new file mode 100644 index 0000000..7f45c71 --- /dev/null +++ b/sass/mobile/layout/_footer.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the footer of the site/application. +// ----------------------------------------------------------------------------- diff --git a/sass/mobile/layout/_header.sass b/sass/mobile/layout/_header.sass new file mode 100644 index 0000000..69c86bb --- /dev/null +++ b/sass/mobile/layout/_header.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the header of the site/application. +// ----------------------------------------------------------------------------- diff --git a/sass/mobile/pages/_home.sass b/sass/mobile/pages/_home.sass new file mode 100644 index 0000000..53e07a7 --- /dev/null +++ b/sass/mobile/pages/_home.sass @@ -0,0 +1,3 @@ +// ----------------------------------------------------------------------------- +// This file contains styles that are specific to the home page. +// ----------------------------------------------------------------------------- diff --git a/sass/themes/_dark.sass b/sass/themes/_dark.sass new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/sass/themes/_dark.sass @@ -0,0 +1 @@ + diff --git a/sass/themes/_light.sass b/sass/themes/_light.sass new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/sass/themes/_light.sass @@ -0,0 +1 @@ + diff --git a/sass/vendors/_normalize.sass b/sass/vendors/_normalize.sass new file mode 100644 index 0000000..de987a8 --- /dev/null +++ b/sass/vendors/_normalize.sass @@ -0,0 +1,448 @@ +/*! 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"], +[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, +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