#9, #19 - udpated file structure and added comments to site-styles.scss

Author: linasmatakas

starter-template/gulp/gulp.config.js

@@ -9,7 +9,7 @@ module.exports = function () {
             cssFolder: 'content/styles/'
         },
         svg: {
-            sourceFolder: 'scss/sprites/svg/',
+            sourceFolder: 'scss/assets/icons/',
             spriteFolder: 'content/styles/images/',
             scssMapFolder: 'scss/core/',
             pngFallback: false

…er-template/scss/sprites/svg/db-logo.svg …r-template/scss/assets/icons/db-logo.svgstarter-template/scss/sprites/svg/db-logo.svg renamed to starter-template/scss/assets/icons/db-logo.svg starter-template/scss/sprites/svg/db-logo.svg renamed to starter-template/scss/assets/icons/db-logo.svg

@@ -15,4 +15,67 @@
     vertical-align: $align;
 }
 
+// Mixin for removing white spaces of inline-block
+@mixin remove-whitespace($apply-to: none, $setsize: $base-font-size) {
+    @if ($apply-to == none) {
+        font-size: 0;
+    } @else if ($apply-to == all) {
+        font-size: 0;
 
+        > * {
+            font-size: $setsize;
+        }
+    } @else {
+        font-size: 0;
+
+        #{$apply-to} {
+            font-size: $setsize;
+        }
+    }
+}
+
+@mixin clearfix($extend: true) {
+    @if $extend {
+        @extend %clearfix;
+    } @else {
+        &:after {
+            clear: both;
+            content: '';
+            display: table;
+            height: 0;
+        }
+    }
+}
+
+%clearfix {
+    @include clearfix($extend: false);
+}
+
+%hidden {
+    display: none;
+    visibility: hidden;
+}
+
+%visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+
+    // Extends the .visuallyhidden class to allow the element to be focusable
+    // when navigated to via the keyboard: h5bp.com/p
+
+    &.focusable:active,
+    &.focusable:focus {
+        clip: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        position: static;
+        width: auto;
+    }
+}

starter-template/scss/core/_functions.scss

@@ -1,17 +1,5 @@
-// Global Variables
-$disable-warnings: true;
-$border-box-sizing: false !default;
-
 //module TYPOGRAPHY
 $base-line-height: 1.5;
 $base-font-size: 16px;
 
-//For naming colors variables, we recommend use http://chir.ag/projects/name-that-color/
-
-//module MAIN COLOR PALETTE
-
-//module COMMON COLORS
-
-//module LINK COLORS
-
-//module SELECTION COLORS
+//widths, heights, sizes, timings, settings

starter-template/scss/core/_mixins.scss

@@ -24,21 +24,21 @@ $opacity-not-active: .25;
 
 
 @function slick-image-url($url) {
-  @if function-exists(image-url) {
-    @return image-url($url, false, false);
-  }
-  @else  {
-    @return url($slick-loader-path + $url);
-  }
+    @if function-exists(image-url) {
+        @return image-url($url, false, false);
+    }
+    @else  {
+        @return url($slick-loader-path + $url);
+    }
 }
 
 @function slick-font-url($url) {
-  @if function-exists(font-url) {
-    @return font-url($url);
-  }
-  @else  {
-    @return url($slick-font-path + $url);
-  }
+    @if function-exists(font-url) {
+        @return font-url($url);
+    }
+    @else  {
+        @return url($slick-font-path + $url);
+    }
 }
 
 /* Slider */
@@ -145,16 +145,16 @@ $opacity-not-active: .25;
 
 /* Icons */
 @if $slick-font-family == "slick" {
-  @font-face {
-      font-family:"slick";
-      src:    slick-font-url("slick.eot");
-      src:    slick-font-url("slick.eot?#iefix") format("embedded-opentype"),
-              slick-font-url("slick.woff") format("woff"),
-              slick-font-url("slick.ttf") format("truetype"),
-              slick-font-url("slick.svg#slick") format("svg");
-      font-weight: normal;
-      font-style: normal;
-  }
+    @font-face {
+        font-family:"slick";
+        src:    slick-font-url("slick.eot");
+        src:    slick-font-url("slick.eot?#iefix") format("embedded-opentype"),
+        slick-font-url("slick.woff") format("woff"),
+        slick-font-url("slick.ttf") format("truetype"),
+        slick-font-url("slick.svg#slick") format("svg");
+        font-weight: normal;
+        font-style: normal;
+    }
 }
 
 /* Arrows */
@@ -176,12 +176,12 @@ $opacity-not-active: .25;
     border: none;
     outline: none;
     &:hover, &:focus {
-      outline: none;
-      background: transparent;
-      color: transparent;
-      &:before {
-        opacity: $opacity-on-hover;
-      }
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: $opacity-on-hover;
+        }
     }
     &.slick-disabled:before {
         opacity: $opacity-not-active;
@@ -261,7 +261,7 @@ $opacity-not-active: .25;
             &:hover, &:focus {
                 outline: none;
                 &:before {
-                  opacity: $opacity-on-hover;
+                    opacity: $opacity-on-hover;
                 }
             }