Base V5.1.0

- Added Base LESS - Updated package.json and version bump
getbase · May 8, 2020 · 8f4c84a · 8f4c84a
1 parent f63fe98
commit 8f4c84a
Show file tree

Hide file tree

Showing 25 changed files with 1,616 additions and 43 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,10 @@
 # Base Change Log
 
+## [5.1.0] - 2020-05-08
+### Base V5.1.0
+- Added Base LESS
+- Updated package.json and version bump
+
 ## [5.0.4] - 2020-05-07
 ### Base V5.0.4
 - Added missing horizontal spacers for large and extra large devices

diff --git a/gulpfile.js b/gulpfile.js
@@ -4,7 +4,8 @@ const browserSync = require('browser-sync');
 const cssnano = require('cssnano');
 const del = require('del');
 const postcss = require('gulp-postcss');
-const sass = require('gulp-sass');
+const gulpSass = require('gulp-sass');
+const gulpLess = require('gulp-less');
 
 // Watch HTML Files
 function html() {
@@ -15,8 +16,8 @@ function html() {
 // Compile SCSS/SASS to CSS
 function scss() {
   return src('./scss/index.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
     .pipe(browserSync.stream())
@@ -25,120 +26,235 @@ function scss() {
 // SCSS Modules
 function coreScss() {
   return src('./scss/core.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function typographyScss() {
   return src('./scss/typography.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function headingsScss() {
   return src('./scss/headings.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function tablesScss() {
   return src('./scss/tables.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function codeScss() {
   return src('./scss/code.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function formsScss() {
   return src('./scss/forms.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function containersScss() {
   return src('./scss/containers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function gridScss() {
   return src('./scss/grid.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function horizontalSpacersScss() {
   return src('./scss/horizontal-spacers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function verticalSpacersScss() {
   return src('./scss/vertical-spacers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function spacersScss() {
   return src('./scss/spacers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function displayHelpersScss() {
   return src('./scss/display-helpers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function flexHelpersScss() {
   return src('./scss/flex-helpers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function positionHelpersScss() {
   return src('./scss/position-helpers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
 
 function typographyHelpersScss() {
   return src('./scss/typography-helpers.scss')
-    .pipe(sass())
-    .on('error', sass.logError)
+    .pipe(gulpSass())
+    .on('error', gulpSass.logError)
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+// Compile LESS to CSS
+function less() {
+  return src('./less/index.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+    .pipe(browserSync.stream())
+}
+
+// LESS Modules
+function coreLess() {
+  return src('./less/core.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function typographyLess() {
+  return src('./less/typography.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function headingsLess() {
+  return src('./less/headings.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function tablesLess() {
+  return src('./less/tables.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function codeLess() {
+  return src('./less/code.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function formsLess() {
+  return src('./less/forms.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function containersLess() {
+  return src('./less/containers.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function gridLess() {
+  return src('./less/grid.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function horizontalSpacersLess() {
+  return src('./less/horizontal-spacers.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function verticalSpacersLess() {
+  return src('./less/vertical-spacers.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function spacersLess() {
+  return src('./less/spacers.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function displayHelpersLess() {
+  return src('./less/display-helpers.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function flexHelpersLess() {
+  return src('./less/flex-helpers.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function positionHelpersLess() {
+  return src('./less/position-helpers.less')
+    .pipe(gulpLess())
+    .pipe(postcss([autoprefixer(), cssnano()]))
+    .pipe(dest('./'))
+}
+
+function typographyHelpersLess() {
+  return src('./less/typography-helpers.less')
+    .pipe(gulpLess())
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(dest('./'))
 }
@@ -173,6 +289,7 @@ function server() {
     }
   });
   watch('./index.html', html);
+  watch('./less/**/*.less', less);
   watch('./scss/**/*.scss', scss);
 }
 
@@ -195,6 +312,23 @@ exports.compileScssModulesToCss = parallel(
   positionHelpersScss,
   typographyHelpersScss
 );
+exports.compileLessModulesToCss = parallel(
+  coreLess,
+  typographyLess,
+  headingsLess,
+  tablesLess,
+  codeLess,
+  formsLess,
+  containersLess,
+  gridLess,
+  horizontalSpacersLess,
+  verticalSpacersLess,
+  spacersLess,
+  displayHelpersLess,
+  flexHelpersLess,
+  positionHelpersLess,
+  typographyHelpersLess
+);
 exports.build = parallel(
   html,
   scss,
@@ -215,6 +349,7 @@ exports.build = parallel(
 );
 exports.default = parallel(
   html,
+  less,
   scss,
   server
 );
diff --git a/less/_mixins.less b/less/_mixins.less
@@ -0,0 +1,44 @@
+@breakpoint-m:  768px;
+@breakpoint-l:  980px;
+@breakpoint-xl: 1200px;
+
+@grid-gutter: 16px;
+
+// Mixins
+
+// Breakpoints
+// Example: .component { @include breakpoint(m) { background: red; } };
+// Output: .component { @media only screen and (min-width: 720px) { background: red; } }
+.breakpoint(@bp, @content) {
+  & when (@bp = xl) {
+    @media only screen and (min-width: @breakpoint-xl) {
+      @content();
+    }
+  }
+  & when (@bp = l) {
+    @media only screen and (min-width: @breakpoint-l) {
+      @content();
+    }
+  }
+  & when (@bp = m) {
+    @media only screen and (min-width: @breakpoint-m) {
+      @content();
+    }
+  }
+}
+
+// Background Color with Opacity
+// Example: .element { @include background-rgba(#000000, .5); }}
+// Output: .element { background: rgba(0, 0, 0, .5); }
+.background-rgba(@color, @alpha) {
+  background-color: @color;
+  background-color: rgba(@color, @alpha);
+}
+
+// Animations
+// Example: .fade { @mixin animate(1s); }
+// Output: .fade { animation-duration: 1s; animation-fill-mode: both; }
+.animate(@duration: 1s) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
diff --git a/less/code.less b/less/code.less
@@ -0,0 +1,7 @@
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1rem;
+}