Style setup

src/style/_animations.scss

@@ -0,0 +1,31 @@
+/* ==========================================================================
+   GLOBAL
+========================================================================== */
+
+
+
+/* ==========================================================================
+   KEYFRAMES ANIMATIONS
+========================================================================== */
+// Keyframe
+// @keyframes name {
+//    from {}
+//    to {}
+// }
+
+
+
+
+
+/* ==========================================================================
+   HEADER
+========================================================================== */
+
+
+
+
+
+
+/* ==========================================================================
+   MAIN
+========================================================================== */

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;
+}

src/style/_fonts.scss

@@ -0,0 +1,10 @@
+/* Fonts list
+========================================================================== */
+$fonts: (
+    // "font1",
+    // "font2",
+    // "font3"
+);
+@each $font in $fonts {
+    @include font-face($font);
+}

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;

src/style/layout/_footer.scss

@@ -0,0 +1,6 @@
+/* ==========================================================================
+   FOOTER
+========================================================================== */
+.footer {
+
+}

src/style/layout/_header.scss

@@ -0,0 +1,6 @@
+/* ==========================================================================
+   HEADER
+========================================================================== */
+.header {
+
+}

src/style/layout/_main.scss

@@ -0,0 +1,6 @@
+/* ==========================================================================
+   MAIN
+========================================================================== */
+.main {
+
+}

src/style/layout/_nav.scss

@@ -0,0 +1,6 @@
+/* ==========================================================================
+   NAVIGATION
+========================================================================== */
+.nav {
+
+}

src/style/layout/_responsive.scss

@@ -0,0 +1,5 @@
+/* RULE
+========================================================================== */
+// @media only screen and (max-width: $screen-tab-port) {
+
+// }

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";

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);
+    }
+}

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 {
+
+}

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");
+    }
+}