From 586b9b9ef35be6d5e2b4e231054ecd5999af6cff Mon Sep 17 00:00:00 2001 From: 0xfff <0xfff@protonmail.com> Date: Mon, 26 Sep 2016 14:34:58 +0200 Subject: [PATCH] (Refactor) Fonts / SCSS: Add Typography Mixins / Global Functions / Variables / Structure --- src/scss/_buttons.scss | 4 +- src/scss/_header.scss | 9 +- src/scss/_typography.scss | 68 ----------- src/scss/fonts/montserrat/_extralight.scss | 7 ++ src/scss/fonts/montserrat/_light.scss | 7 ++ src/scss/fonts/montserrat/_medium.scss | 7 ++ src/scss/fonts/montserrat/_montserrat.scss | 32 ------ src/scss/fonts/montserrat/_regular.scss | 8 ++ src/scss/{ => global}/_colors.scss | 0 src/scss/{ => global}/_directives.scss | 6 +- src/scss/global/_functions.scss | 20 ++++ src/scss/{ => global}/_mediaqueries.scss | 0 src/scss/global/_mixins.scss | 125 ++++++++++++++++++++ src/scss/{ => global}/_reset.scss | 0 src/scss/global/_typography.scss | 126 +++++++++++++++++++++ src/scss/{ => global}/_variables.scss | 1 + src/scss/main.scss | 16 +-- 17 files changed, 317 insertions(+), 119 deletions(-) delete mode 100644 src/scss/_typography.scss create mode 100644 src/scss/fonts/montserrat/_extralight.scss create mode 100644 src/scss/fonts/montserrat/_light.scss create mode 100644 src/scss/fonts/montserrat/_medium.scss delete mode 100644 src/scss/fonts/montserrat/_montserrat.scss create mode 100644 src/scss/fonts/montserrat/_regular.scss rename src/scss/{ => global}/_colors.scss (100%) rename src/scss/{ => global}/_directives.scss (52%) create mode 100644 src/scss/global/_functions.scss rename src/scss/{ => global}/_mediaqueries.scss (100%) create mode 100644 src/scss/global/_mixins.scss rename src/scss/{ => global}/_reset.scss (100%) create mode 100644 src/scss/global/_typography.scss rename src/scss/{ => global}/_variables.scss (77%) diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss index 2138d8f..8411ecd 100644 --- a/src/scss/_buttons.scss +++ b/src/scss/_buttons.scss @@ -3,10 +3,11 @@ border: 0px solid; padding: 5px 15px; margin-right: 10px; + margin-bottom: 10px; line-height: 30px; height: 40px; display: inline-block; - font-weight: 300; + @include font-base(); background-color: $color-blue; color: $color-white; box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 4px 6px 0px rgba(49,49,93,0.13); @@ -26,7 +27,6 @@ @extend .btn; border-color: $color-white; background-color: darken($color-white, 3); - margin-bottom: 10px; color: lighten($color-black, 5) !important; text-decoration: none; &:hover { diff --git a/src/scss/_header.scss b/src/scss/_header.scss index 7bc7a90..7fc7c1b 100644 --- a/src/scss/_header.scss +++ b/src/scss/_header.scss @@ -13,18 +13,13 @@ } &__title { + @include font-title-xxlarge(); margin-bottom: 15px; /*optical*/ - font-size: 80px; - line-height: 1.2; - font-weight: 200; - letter-spacing: -0.025em; margin-left: -7px; /*optical*/ } &__lead { - font-weight: 200; - font-size: 24px; - line-height: 1.25; + @include font-lead(); } &__text { diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss deleted file mode 100644 index f9da39a..0000000 --- a/src/scss/_typography.scss +++ /dev/null @@ -1,68 +0,0 @@ -// @import "fonts/worksans/bold"; -// @import "fonts/worksans/medium"; -// @import "fonts/open-sans/regular"; -// @import "fonts/open-sans/italic"; -@import "fonts/montserrat/montserrat"; - -$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif; -$font-family-heading: $font-family-body; - -$font-size-base: 17px; -$font-size-base-plus: 19px; -$font-size-medium: 24px; -$font-size-large: 30px; -$font-size-xlarge: 40px; -$font-size-xxlarge: 80px; - -$line-height-base: 1.5; -$line-height-heading: 1.1; - - - - -body { - font-family: $font-family-body; - font-size: ($font-size-base / 16px * 100%); - line-height: $line-height-base; - font-weight: 300; -} - -a { - color: $color-blue; - text-decoration: none; - &:hover, &:focus { - - } - &:active { - - } - &:visited { - color: $color-blue; - } -} - -h1, h2, h3 { - font-family: $font-family-heading; - line-height: $line-height-heading; - font-weight: 300; -} - -h1 { - font-size: $font-size-xlarge; - font-weight: 300; -} - -h2 { - font-size: $font-size-large; - color: $color-blue; -} - -h3 { - font-size: $font-size-medium; - color: $color-black; -} - -a { - text-decoration: none; - color: $color-blue; -} diff --git a/src/scss/fonts/montserrat/_extralight.scss b/src/scss/fonts/montserrat/_extralight.scss new file mode 100644 index 0000000..8f99db0 --- /dev/null +++ b/src/scss/fonts/montserrat/_extralight.scss @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Montserrat'; //extralight'; + src: url('../fonts/montserrat/montserrat-extralight-webfont.woff2') format('woff2'), + url('../fonts/montserrat/montserrat-extralight-webfont.woff') format('woff'); + font-weight: 200; + font-style: normal; +} diff --git a/src/scss/fonts/montserrat/_light.scss b/src/scss/fonts/montserrat/_light.scss new file mode 100644 index 0000000..0a67ec7 --- /dev/null +++ b/src/scss/fonts/montserrat/_light.scss @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Montserrat'; //light'; + src: url('../fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'), + url('../fonts/montserrat/montserrat-light-webfont.woff') format('woff'); + font-weight: 300; + font-style: normal; +} diff --git a/src/scss/fonts/montserrat/_medium.scss b/src/scss/fonts/montserrat/_medium.scss new file mode 100644 index 0000000..6fc2328 --- /dev/null +++ b/src/scss/fonts/montserrat/_medium.scss @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Montserrat'; //medium'; + src: url('../fonts/montserrat/montserrat-medium-webfont.woff2') format('woff2'), + url('../fonts/montserrat/montserrat-medium-webfont.woff') format('woff'); + font-weight: 500; + font-style: normal; +} diff --git a/src/scss/fonts/montserrat/_montserrat.scss b/src/scss/fonts/montserrat/_montserrat.scss deleted file mode 100644 index bc19f48..0000000 --- a/src/scss/fonts/montserrat/_montserrat.scss +++ /dev/null @@ -1,32 +0,0 @@ -@font-face { - font-family: 'Montserrat'; //extralight'; - src: url('../fonts/montserrat/montserrat-extralight-webfont.woff2') format('woff2'), - url('../fonts/montserrat/montserrat-extralight-webfont.woff') format('woff'); - font-weight: 200; - font-style: normal; -} - -@font-face { - font-family: 'Montserrat'; //light'; - src: url('../fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'), - url('../fonts/montserrat/montserrat-light-webfont.woff') format('woff'); - font-weight: 300; - font-style: normal; -} - -@font-face { - font-family: 'Montserrat'; //regular'; - src: url('../fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'), - url('../fonts/montserrat/montserrat-regular-webfont.woff') format('woff'); - font-weight: 400; - font-style: normal; - -} - -@font-face { - font-family: 'Montserrat'; //medium'; - src: url('../fonts/montserrat/montserrat-medium-webfont.woff2') format('woff2'), - url('../fonts/montserrat/montserrat-medium-webfont.woff') format('woff'); - font-weight: 500; - font-style: normal; -} diff --git a/src/scss/fonts/montserrat/_regular.scss b/src/scss/fonts/montserrat/_regular.scss new file mode 100644 index 0000000..959f502 --- /dev/null +++ b/src/scss/fonts/montserrat/_regular.scss @@ -0,0 +1,8 @@ +@font-face { + font-family: 'Montserrat'; //regular'; + src: url('../fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'), + url('../fonts/montserrat/montserrat-regular-webfont.woff') format('woff'); + font-weight: 400; + font-style: normal; + +} diff --git a/src/scss/_colors.scss b/src/scss/global/_colors.scss similarity index 100% rename from src/scss/_colors.scss rename to src/scss/global/_colors.scss diff --git a/src/scss/_directives.scss b/src/scss/global/_directives.scss similarity index 52% rename from src/scss/_directives.scss rename to src/scss/global/_directives.scss index 57b5f2c..baf30c3 100644 --- a/src/scss/_directives.scss +++ b/src/scss/global/_directives.scss @@ -1,6 +1,6 @@ -/* -This is for time-saving base classes that get @extend -ed -*/ +/** + * This is for time-saving base classes that get @extend -ed + */ %clearfix { &:after { diff --git a/src/scss/global/_functions.scss b/src/scss/global/_functions.scss new file mode 100644 index 0000000..95b3174 --- /dev/null +++ b/src/scss/global/_functions.scss @@ -0,0 +1,20 @@ +/** + * Helper Functions + */ + +@function pxToEm($px, $ref: $font-size-base) { + @return toEm(toPx($px) / toPx($ref)); +} +@function pxToRem($px) { + @return toRem(toPx($px) / toPx($font-size-base)); +} + +@function toEm($val) { + @return ($val + 0em); +} +@function toRem($val) { + @return ($val + 0rem); +} +@function toPx($val) { + @return ($val + 0px); +} diff --git a/src/scss/_mediaqueries.scss b/src/scss/global/_mediaqueries.scss similarity index 100% rename from src/scss/_mediaqueries.scss rename to src/scss/global/_mediaqueries.scss diff --git a/src/scss/global/_mixins.scss b/src/scss/global/_mixins.scss new file mode 100644 index 0000000..95a3f32 --- /dev/null +++ b/src/scss/global/_mixins.scss @@ -0,0 +1,125 @@ +/** + * Hide visually + * + * See http://snook.ca/archives/html_and_css/hiding-content-for-accessibility + * for discussion of different solutions + */ + +@mixin visuallyhidden() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +@mixin visuallyhiddenReset() { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +@mixin visuallyhiddenFocusable() { + @include visuallyhidden; + + &:focus, + &:active { + @include visuallyhiddenReset; + } +} + + +/** + * Contain floats with clearfix + * + * http://nicolasgallagher.com/micro-clearfix-hack/ + */ + +@mixin clearfix() { + *zoom: 1; // Only IE7 accepts css properties with an * at the start. + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } +} + + +/** + * Lists with layout purpose + */ + +@mixin resetList() { + list-style: none; + margin: 0; + padding: 0; +} + + +/** + * Replace text + */ + +@mixin replaceText() { + display: block; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; +} + + +/** + * Better font rendering (on OS X) + * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx + * + * Usage: + * + * .var_dark_on_light { + * @include fontSmoothing; + * } + * .var_light_on_dark { + * @include fontSmoothingReset; + * } + */ + +@mixin fontSmoothing() { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +@mixin fontSmoothingReset() { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + + +/** + * Placeholder in input fields + */ + +@mixin placeholder() { + + &::-webkit-input-placeholder { + @content; + } + &:-moz-placeholder { // Firefox 18- + @content; + } + &::-moz-placeholder { // Firefox 19+ + @content; + } + &:-ms-input-placeholder { + @content; + } +} diff --git a/src/scss/_reset.scss b/src/scss/global/_reset.scss similarity index 100% rename from src/scss/_reset.scss rename to src/scss/global/_reset.scss diff --git a/src/scss/global/_typography.scss b/src/scss/global/_typography.scss new file mode 100644 index 0000000..2f33e11 --- /dev/null +++ b/src/scss/global/_typography.scss @@ -0,0 +1,126 @@ +@import "../fonts/montserrat/extralight"; +@import "../fonts/montserrat/light"; +@import "../fonts/montserrat/regular"; +@import "../fonts/montserrat/medium"; + +$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif; +$font-family-heading: $font-family-body; + +$font-weight-xlight: 200; +$font-weight-light: 300; +$font-weight-regular: 400; +$font-weight-medium: 500; + +$font-size-base: $font-size-base; // This is stored in the _variables.scss because it is required earlier +$font-size-base-plus: 19px; +$font-size-medium: 24px; +$font-size-large: 30px; +$font-size-xlarge: 40px; +$font-size-xxlarge: 80px; + +$line-height-base: 1.5; +$line-height-heading: 1.2; + + +@mixin _addColor($color: false) { + @if ($color == true) { + color: $color-black + } @else if ($color != false) { + color: $color + } +} + +@mixin font-base() { + font-weight: $font-weight-light; + font-size: pxToRem($font-size-base); +} +@mixin font-lead() { + font-weight: $font-weight-light; + font-size: pxToRem($font-size-medium); +} +@mixin font-claim() { + font-weight: $font-weight-light; + font-size: pxToRem($font-size-medium); + letter-spacing: 0.017em; +} +@mixin font-title-small() { + font-weight: $font-weight-regular; + font-size: pxToRem($font-size-base-plus); + letter-spacing: 0.016em; +} +@mixin font-title-medium() { + font-weight: $font-weight-light; + font-size: pxToRem($font-size-medium); + letter-spacing: 0.016em; +} +@mixin font-title-large-subline() { + font-weight: $font-weight-xlight; + font-size: pxToRem($font-size-large); + line-height: $line-height-heading; + letter-spacing: 0; +} +@mixin font-title-large() { + font-weight: $font-weight-light; + font-size: pxToRem($font-size-large); + line-height: $line-height-heading; + letter-spacing: -0.007em; +} +@mixin font-title-xlarge-subline() { + font-weight: $font-weight-xlight; + font-size: pxToRem($font-size-xlarge); + line-height: $line-height-heading; + letter-spacing: -0.004em; +} +@mixin font-title-xlarge() { + font-weight: $font-weight-light; + font-size: pxToRem($font-size-xlarge); + line-height: $line-height-heading; + letter-spacing: -0.015em; +} +@mixin font-title-xxlarge() { + font-weight: $font-weight-xlight; + font-size: pxToRem($font-size-xxlarge); + line-height: $line-height-heading; + letter-spacing: -0.025em; +} + +@mixin link-style($link: $color-blue-highlight, $visited: lighten($color-blue,25), $hover: lighten($color-blue-highlight,2), $active: lighten($color-blue-highlight,2)) { + color: $link; + text-decoration: none; + &:visited { + color: $visited; + } + &:hover { + color: $hover; + } + &:active { + color: $active; + } +} + +html { + font-size: ($font-size-base / 16px * 100%); +} +body { + font-size: ($font-size-base / 16px * 100%); + font-family: $font-family-body; + line-height: $line-height-base; + font-weight: $font-weight-light; + @include fontSmoothing(); +} + +h1 { + @include font-title-xlarge(); +} + +h2 { + @include font-title-large(); +} + +h3 { + @include font-claim(); +} + +a { + @include link-style(); +} diff --git a/src/scss/_variables.scss b/src/scss/global/_variables.scss similarity index 77% rename from src/scss/_variables.scss rename to src/scss/global/_variables.scss index 5b12095..3fe2fa6 100644 --- a/src/scss/_variables.scss +++ b/src/scss/global/_variables.scss @@ -2,5 +2,6 @@ * Global Variables **/ +$font-size-base: 17px; $content-max-width: 1280px; $size-gutter: 20px; diff --git a/src/scss/main.scss b/src/scss/main.scss index 4fbf177..26cea39 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,12 +1,14 @@ // stuff every page really needs -@import "reset"; -@import "grid"; -@import "colors"; -@import "variables"; -@import "typography"; -@import "mediaqueries"; +@import "global/reset"; +@import "global/variables"; +@import "global/colors"; +@import "global/functions"; +@import "global/directives"; +@import "global/mixins"; +@import "global/mediaqueries"; +@import "global/typography"; @import "layout"; -@import "directives"; +@import "grid"; //stuff every page needss @import "nav";