From 635576847dfb8c6acb48923ac3d144318552a93d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 2 Jan 2020 15:32:45 +0100 Subject: [PATCH] Style setup --- src/style/_animations.scss | 31 +++++++++++ src/style/_base.scss | 44 ++++++++++++++++ src/style/_fonts.scss | 10 ++++ src/style/_variables.scss | 51 ++++++++++++++++++ src/style/layout/_footer.scss | 6 +++ src/style/layout/_header.scss | 6 +++ src/style/layout/_main.scss | 6 +++ src/style/layout/_nav.scss | 6 +++ src/style/layout/_responsive.scss | 5 ++ src/style/style.scss | 32 +++++++++++ src/style/tools/_functions.scss | 18 +++++++ src/style/tools/_helpers.scss | 28 ++++++++++ src/style/tools/_mixins.scss | 88 +++++++++++++++++++++++++++++++ 13 files changed, 331 insertions(+) create mode 100644 src/style/_animations.scss create mode 100644 src/style/_base.scss create mode 100644 src/style/_fonts.scss create mode 100644 src/style/_variables.scss create mode 100644 src/style/layout/_footer.scss create mode 100644 src/style/layout/_header.scss create mode 100644 src/style/layout/_main.scss create mode 100644 src/style/layout/_nav.scss create mode 100644 src/style/layout/_responsive.scss create mode 100644 src/style/style.scss create mode 100644 src/style/tools/_functions.scss create mode 100644 src/style/tools/_helpers.scss create mode 100644 src/style/tools/_mixins.scss diff --git a/src/style/_animations.scss b/src/style/_animations.scss new file mode 100644 index 0000000..0737336 --- /dev/null +++ b/src/style/_animations.scss @@ -0,0 +1,31 @@ +/* ========================================================================== + GLOBAL +========================================================================== */ + + + +/* ========================================================================== + KEYFRAMES ANIMATIONS +========================================================================== */ +// Keyframe +// @keyframes name { +// from {} +// to {} +// } + + + + + +/* ========================================================================== + HEADER +========================================================================== */ + + + + + + +/* ========================================================================== + MAIN +========================================================================== */ diff --git a/src/style/_base.scss b/src/style/_base.scss new file mode 100644 index 0000000..6a7a10a --- /dev/null +++ b/src/style/_base.scss @@ -0,0 +1,44 @@ +html { + font: #{$base-font-size}/24px "$font-text"; + color: $color-text; +} +body { + @include font-smooth; + background: $color-primary; + cursor: default; +} +*, *:before, *:after { + box-sizing: border-box; +} +strong { + font-family: "$font-bold"; + font-weight: normal; +} +em { + font-family: "$font-text_it"; + font-style: normal; +} +figure, p, dl, dt, dd, ul, li { + margin: 0; + padding: 0; +} +figure img { + display: block; +} + +// Selection +::selection { color: #fff; background: $color-primary; } +::-moz-selection { color: #fff; background: $color-primary; } + +// Images glitches fix +// img {backface-visibility: hidden;} + + + +/* Titles +========================================================================== */ +#{headings(1,6)} { + margin: 0; + font-weight: normal; + font-style: normal; +} diff --git a/src/style/_fonts.scss b/src/style/_fonts.scss new file mode 100644 index 0000000..6030f9c --- /dev/null +++ b/src/style/_fonts.scss @@ -0,0 +1,10 @@ +/* Fonts list +========================================================================== */ +$fonts: ( + // "font1", + // "font2", + // "font3" +); +@each $font in $fonts { + @include font-face($font); +} diff --git a/src/style/_variables.scss b/src/style/_variables.scss new file mode 100644 index 0000000..c00bcf8 --- /dev/null +++ b/src/style/_variables.scss @@ -0,0 +1,51 @@ +// Colors +$color-primary: #fff; +$color-secondary: #000; +$color-text: #333; + +// CSS Variables +:root { + // Colors + --primary: #{$color-primary}; + --secondary: #{$color-secondary}; + --text: #{$color-text}; +} + + +/* Fonts +========================================================================== */ +$base-font-size: 16px; + +// Families +$replacement: "Georgia, serif"; +$font-text: "font", #{$replacement}; + + +/* Sizes, margins and spacing +====================================================================== */ +// Blocks + + +/* Directories +========================================================================== */ +$dir-img: "../img"; +$dir-fonts: "../fonts"; +$dir-node: "../node-modules"; + + +/* Animation +========================================================================== */ +// Easing +$ease-cubic: cubic-bezier(0.785, 0.135, 0.15, 0.86); +$ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1); +$ease-inout: ease-in-out; + + +/* Responsive breakpoints +========================================================================== */ +$screen-mob: 450px; +$screen-xs: 767px; +$screen-sm: 768px; +$screen-md: 992px; +$screen-lg: 1200px; +$screen-xl: 1440px; diff --git a/src/style/layout/_footer.scss b/src/style/layout/_footer.scss new file mode 100644 index 0000000..545d255 --- /dev/null +++ b/src/style/layout/_footer.scss @@ -0,0 +1,6 @@ +/* ========================================================================== + FOOTER +========================================================================== */ +.footer { + +} diff --git a/src/style/layout/_header.scss b/src/style/layout/_header.scss new file mode 100644 index 0000000..586af10 --- /dev/null +++ b/src/style/layout/_header.scss @@ -0,0 +1,6 @@ +/* ========================================================================== + HEADER +========================================================================== */ +.header { + +} diff --git a/src/style/layout/_main.scss b/src/style/layout/_main.scss new file mode 100644 index 0000000..0cfdd03 --- /dev/null +++ b/src/style/layout/_main.scss @@ -0,0 +1,6 @@ +/* ========================================================================== + MAIN +========================================================================== */ +.main { + +} diff --git a/src/style/layout/_nav.scss b/src/style/layout/_nav.scss new file mode 100644 index 0000000..4eadf0f --- /dev/null +++ b/src/style/layout/_nav.scss @@ -0,0 +1,6 @@ +/* ========================================================================== + NAVIGATION +========================================================================== */ +.nav { + +} diff --git a/src/style/layout/_responsive.scss b/src/style/layout/_responsive.scss new file mode 100644 index 0000000..cc05f75 --- /dev/null +++ b/src/style/layout/_responsive.scss @@ -0,0 +1,5 @@ +/* RULE +========================================================================== */ +// @media only screen and (max-width: $screen-tab-port) { + +// } diff --git a/src/style/style.scss b/src/style/style.scss new file mode 100644 index 0000000..fd43275 --- /dev/null +++ b/src/style/style.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +// Tools +@import "../style/variables"; +@import "../style/tools/mixins"; +@import "../style/tools/functions"; +@import "../style/tools/helpers"; + +// Dependencies +@import "node_modules/normalize.css/normalize"; + +// Base +@import "../style/base"; +@import "../style/fonts"; + +// Layout +@import "../style/layout/header"; +@import "../style/layout/nav"; +@import "../style/layout/main"; +@import "../style/layout/footer"; + +// Modules +// @import "../style/modules/module"; + +// Components +// @import "../style/components/component"; + +// Animations +// @import "../style/../animations/animation"; + +// Responsive +// @import "../style/layout/responsive"; diff --git a/src/style/tools/_functions.scss b/src/style/tools/_functions.scss new file mode 100644 index 0000000..312b6bc --- /dev/null +++ b/src/style/tools/_functions.scss @@ -0,0 +1,18 @@ +/* PX to REM +========================================================================== */ +@function rem ($target, $context: $base-font-size) { + @if $target == 0 { @return 0 } + $size: $target / $context; + @return round($size * 1000) / 1000 + rem; +} + + +/* Headings +========================================================================== */ +@function headings ($from: 1, $to: 6) { + @if $from == $to { + @return "h#{$from}"; + } @else { + @return "h#{$from}," + headings($from + 1, $to); + } +} diff --git a/src/style/tools/_helpers.scss b/src/style/tools/_helpers.scss new file mode 100644 index 0000000..6beddf7 --- /dev/null +++ b/src/style/tools/_helpers.scss @@ -0,0 +1,28 @@ +/* Classes +========================================================================== */ +.clear { + @extend %clearfix; +} +%center { + margin: 0 auto; +} +%trbl { + top: 0; + right: 0; + bottom: 0; + left: 0; +} +%full-size { + width: 100%; + height: 100%; +} + + +/* Containers +========================================================================== */ +.container { + +} +.wrap { + +} diff --git a/src/style/tools/_mixins.scss b/src/style/tools/_mixins.scss new file mode 100644 index 0000000..bc46f12 --- /dev/null +++ b/src/style/tools/_mixins.scss @@ -0,0 +1,88 @@ +// Hide text +%hide-text { + overflow: hidden; + white-space: nowrap; + text-indent: 200%; +} + +// Clearfix +%clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +// Get REM font-size and line-height +@mixin fs-lh ($fontSize, $lineHeight) { + line-height: round(($fontSize / $lineHeight) * 1000) / 1000; + font-size: rem($fontSize); +} + +// Top-right-bottom-left +@mixin trbl ($value: 0) { + top: $value; right: $value; bottom: $value; left: $value; +} + +// Center vertically +@mixin center-y { + top: 50%; + transform: translate3d(0,-50%,0); +} + +// Center horizontally +@mixin center-x { + left: 50%; + transform: translate3d(-50%,0,0); +} + +// Center vertically and horizontally +@mixin center-xy { + top: 50%; left: 50%; + transform: translate3d(-50%,-50%,0); +} + +// Smooth fonts +@mixin font-smooth { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// Reponsive breakpoints +@mixin breakpoint ($size) { + @if ($size == m) { + @media (min-width: $screen-m) { @content; } + } + @else if ($size == xs) { + @media (max-width: $screen-xs) { @content; } + } + @else if ($size == sm) { + @media (min-width: $screen-sm) { @content; } + } + @else if ($size == md) { + @media (min-width: $screen-md) { @content; } + } + @else if ($size == lg) { + @media (min-width: $screen-lg) { @content; } + } + @else if ($size == xl) { + @media (min-width: $screen-xl) { @content; } + } + @else { + @media (min-width: $size) { @content; } + } +} + +// Font-face +@mixin font-face ($family) { + @font-face { + font-family: "#{$family}"; + font-style: normal; + font-weight: normal; + font-display: swap; + src: local("#{$family}"), + url("#{$dir-fonts}/#{$family}.woff2") format("woff2"), + url("#{$dir-fonts}/#{$family}.woff") format("woff"); + } +}