Add files via upload

2023-01-02 11:04:42 +01:00 · 2023-01-02 11:04:42 +01:00 · b53c8aa759
commit b53c8aa759
23 changed files with 679 additions and 0 deletions
--- a/README.md
+++ 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
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Split media</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
+        <link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
+        <link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
+    </head>
+    <body>
+        <h1>Gravida arcu ac tortor.</h1>
+    </body>
+</html>
+```
+
+
+# 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
+```
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Split media</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
+        <link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
+        <link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
+    </head>
+    <body>
+        <h1>Gravida arcu ac tortor.</h1>
+    </body>
+</html>
+
--- a/sass/abstracts/_mixins.sass
+++ b/sass/abstracts/_mixins.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass mixins.
+// -----------------------------------------------------------------------------
--- a/sass/abstracts/_variables.sass
+++ 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
--- a/sass/base/_base.sass
+++ b/sass/base/_base.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains very basic styles.
+// -----------------------------------------------------------------------------
--- a/sass/base/_fonts.sass
+++ b/sass/base/_fonts.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all @font-face declarations, if any.
+// -----------------------------------------------------------------------------
--- a/sass/base/_helpers.sass
+++ b/sass/base/_helpers.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains CSS helper classes.
+// -----------------------------------------------------------------------------
--- a/sass/base/_typography.sass
+++ b/sass/base/_typography.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// Basic typography style for copy text
+// -----------------------------------------------------------------------------
--- a/sass/desktop.sass
+++ 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
--- a/sass/desktop/components/_alert.sass
+++ b/sass/desktop/components/_alert.sass
@ -0,0 +1 @@
+
--- a/sass/desktop/components/_button.sass
+++ b/sass/desktop/components/_button.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------
--- a/sass/desktop/layout/_footer.sass
+++ b/sass/desktop/layout/_footer.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the footer of the site/application.
+// -----------------------------------------------------------------------------
--- a/sass/desktop/layout/_header.sass
+++ b/sass/desktop/layout/_header.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the header of the site/application.
+// -----------------------------------------------------------------------------
--- a/sass/desktop/pages/_home.sass
+++ b/sass/desktop/pages/_home.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains styles that are specific to the home page.
+// -----------------------------------------------------------------------------
--- a/sass/mobile.sass
+++ 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
--- a/sass/mobile/components/_alert.sass
+++ b/sass/mobile/components/_alert.sass
@ -0,0 +1 @@
+
--- a/sass/mobile/components/_button.sass
+++ b/sass/mobile/components/_button.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------
--- a/sass/mobile/layout/_footer.sass
+++ b/sass/mobile/layout/_footer.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the footer of the site/application.
+// -----------------------------------------------------------------------------
--- a/sass/mobile/layout/_header.sass
+++ b/sass/mobile/layout/_header.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the header of the site/application.
+// -----------------------------------------------------------------------------
--- a/sass/mobile/pages/_home.sass
+++ b/sass/mobile/pages/_home.sass
@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains styles that are specific to the home page.
+// -----------------------------------------------------------------------------
--- a/sass/themes/_dark.sass
+++ b/sass/themes/_dark.sass
@ -0,0 +1 @@
+
--- a/sass/themes/_light.sass
+++ b/sass/themes/_light.sass
@ -0,0 +1 @@
+
--- a/sass/vendors/_normalize.sass
+++ 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