feat(Initial setup): Initial foundation for the sass-boilerplate repo

.editorconfig

@@ -0,0 +1,12 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.scss]
+quote_type = double

.gitignore

@@ -0,0 +1,5 @@
+/dist/
+/node_modules
+.npmrc
+npmrc.png
+yarn.lock

.sass-lint.yml

@@ -0,0 +1,81 @@
+options:
+  formatter: stylish
+files:
+  include: '**/*.s+(a|c)ss'
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-color-keywords: 1
+  no-color-literals: 1
+  no-css-comments: 1
+  no-debug: 1
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 1
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-url-protocols: 1
+  no-vendor-prefixes: 1
+  no-warn: 1
+
+  # Nesting
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  function-name-format: 1
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format:
+    - 1
+    -
+      allow-leading-underscore: false
+
+  # Style Guide
+  border-zero: 1
+  brace-style: 1
+  clean-import-paths: 1
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 1
+  nesting-depth: 1
+  property-sort-order: 1
+  quotes: 1
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 1
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1

.travis.yml

@@ -0,0 +1,20 @@
+language: node_js
+node_js:
+  - "8"
+cache:
+  yarn: true
+  directories:
+    - "node_modules"
+before_install:
+    - yarn global add gulp
+cache:
+  directories:
+    - "node_modules"
+script:
+    - yarn run build
+deploy:
+  provider: npm
+  email: $NPM_EMAIL
+  api_key: $NPM_TOKEN
+  on:
+    tags: true

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

gulpfile.js

@@ -0,0 +1,20 @@
+const gulp = require('gulp')
+const sass = require('gulp-sass')
+const sassLint = require('gulp-sass-lint')
+
+gulp.task('[SASS] Compile', function () {
+  return gulp.src('./src/sass-boilerplate.scss')
+    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+    .pipe(gulp.dest('./dist'))
+})
+
+gulp.task('[SASS] Lint', function () {
+  return gulp.src('dist/**/*.scss')
+    .pipe(sassLint({
+      configFile: '.sass-lint.yml'
+    }))
+    .pipe(sassLint.format())
+    .pipe(sassLint.failOnError())
+})
+
+gulp.task('default', ['[SASS] Compile', '[SASS] Lint'])

package.json

@@ -1,17 +1,24 @@
 {
-  "name": "sass-boilerplate",
-  "version": "1.0.1",
+  "name": "sass-ultimate-boilerplate",
+  "version": "1.0.0",
   "description": "Sass boilerplate which is useful when starting a new web project. Includes: variables, functions, mixins, animations and other useful bits!",
   "main": "index.js",
-  "repository": "https://github.com/SlimDogs/sass-boilerplate.git",
+  "repository": "https://github.com/SlimDogs/sass-ultimate-boilerplate.git",
   "author": "Tautvydas Derzinskas <[email protected]>",
   "license": "MIT",
   "private": false,
   "scripts": {
-    "build": "gulp",
-    "publish": "cd src && npm version patch && npm publish"
+    "build": "gulp"
   },
-  "dependencies": {
-    "gulp": "^3.9.1"
+  "devDependencies": {
+    "gulp": "3.9.1",
+    "gulp-sass": "3.1.0",
+    "gulp-sass-lint": "1.3.4",
+    "cz-conventional-changelog": "2.1.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

src/_animations.scss

@@ -0,0 +1,3 @@
+@import "animations/float";
+@import "animations/pulse";
+@import "animations/spin";

src/_functions.scss

@@ -0,0 +1,2 @@
+@import "functions/pxToRem";
+@import "functions/z-index";

src/_mixins.scss

@@ -0,0 +1,12 @@
+@import "mixins/absolute";
+@import "mixins/blur";
+@import "mixins/border-radius";
+@import "mixins/box-shadow";
+@import "mixins/flex-order";
+@import "mixins/gradient";
+@import "mixins/keyframes";
+@import "mixins/opacity";
+@import "mixins/parallax-background";
+@import "mixins/placeholder";
+@import "mixins/prefix";
+@import "mixins/transitions";

src/_variables.scss

@@ -0,0 +1 @@
+$sass-boilerplate-custom-variables: true;

src/animations/_float.scss

@@ -0,0 +1,39 @@
+$flaot-animation-speed: 4s;
+
+@keyframes float {
+	0% {
+		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
+		transform: translatey(0px);
+	}
+	50% {
+		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.1);
+		transform: translatey(-20px);
+	}
+	100% {
+		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
+		transform: translatey(0px);
+	}
+}
+
+%animation-float {
+  -webkit-animation: float $flaot-animation-speed ease-in-out infinite;
+  -moz-animation: float $flaot-animation-speed ease-in-out infinite;
+  -ms-animation: float $flaot-animation-speed ease-in-out infinite;
+  -o-animation: float $flaot-animation-speed ease-in-out infinite;
+  animation: float $flaot-animation-speed ease-in-out infinite;
+}
+
+.msm-animation-float {
+  @extend %animation-float;
+}
+
+/*
+
+  Usage (Sass):
+  div {
+    @extend %animation-float;
+  }
+
+  (CSS)
+  class="msm-animation-float"
+*/

src/animations/_pulse.scss

@@ -0,0 +1,53 @@
+@import "../variables";
+
+%pulse {
+  animation: pulse 2s infinite;
+
+  &:hover {
+    animation: none;
+  }
+}
+
+.msm-animation-pulse {
+  @extend %pulse;
+}
+
+$pulse-primary-color: rgba(38, 166, 154, 0.4);
+$pulse-secondary-color: rgba(38, 166, 154, 0);
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-box-shadow: $pulse-primary-color;
+  }
+  70% {
+      -webkit-box-shadow: $pulse-secondary-color;
+  }
+  100% {
+      -webkit-box-shadow: $pulse-secondary-color;
+  }
+}
+@keyframes pulse {
+  0% {
+    -moz-box-shadow: 0 0 0 0 $pulse-primary-color;
+    box-shadow: 0 0 0 0 $pulse-primary-color;
+  }
+  70% {
+      -moz-box-shadow: 0 0 0 10px $pulse-secondary-color;
+      box-shadow: 0 0 0 10px $pulse-secondary-color;
+  }
+  100% {
+      -moz-box-shadow: 0 0 0 0 $pulse-secondary-color;
+      box-shadow: 0 0 0 0 $pulse-secondary-color;
+  }
+}
+
+/*
+
+  Usage (Sass):
+  div {
+    @extend %pulse;
+  }
+
+  (CSS)
+  class="msm-animation-pulse"
+*/

src/animations/_spin.scss

@@ -0,0 +1,38 @@
+$spin-animation-speed: 0.5s;
+
+@-webkit-keyframes rotating /* Safari and Chrome */ {
+  from {
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.animate--spin {
+  display: inline-block;
+  -webkit-animation: rotating $spin-animation-speed linear infinite;
+  -moz-animation: rotating $spin-animation-speed linear infinite;
+  -ms-animation: rotating $spin-animation-speed linear infinite;
+  -o-animation: rotating $spin-animation-speed linear infinite;
+  animation: rotating $spin-animation-speed linear infinite;
+}

src/functions/_pxToRem.scss

@@ -0,0 +1,14 @@
+@function pxToRem($size, $fn-font-base: null) {
+  $base: $size;
+
+  @if ($fn-font-base != null) {
+    $base: $fn-font-base;
+  }
+  @else if ($font-base != null) {
+    $base: $font-base;
+  }
+
+  $remSize: $size / $base * 1rem;
+
+  @return #{$remSize};
+}

src/functions/_z-index.scss

@@ -0,0 +1,25 @@
+/*
+  Usage:
+
+  .site-header {
+    z-index: z('site-header');
+  }
+*/
+
+
+$z-indexes: (
+  "outdated-browser",
+  "modal",
+  "site-header",
+  "page-wrapper",
+  "site-footer"
+);
+
+@function z($name) {
+  @if index($z-indexes, $name) {
+      @return (length($z-indexes) - index($z-indexes, $name)) + 1;
+  } @else {
+      @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
+      @return null;
+  }
+}