gerillass 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Changelog
 _Change is the essence._
 
+## 1.2.0
+* Add Loadify: A new mixin to help page elements render more natural during the time of page loads.
+
+## 1.1.3
+* Add box-sizing property to Columnizer mixin.
+
+## 1.1.2
+* Uptade for security vulnerabilities.
+
+## 1.1.1
+* Bugfix for a comment.
+
 ## 1.1.0
 * Remove all the `gls-` prefixes from the mixin files under the `library` folder and make prefix usage optional (`gls-` prefix still can ben use).
 

package/README.md

@@ -16,6 +16,7 @@ Hope you’ll enjoy using it!
 
 - [Gerillass Website](https://gerillass.com)
 - [Gerillass Documentation](https://docs.gerillass.com)
+- [Gerillass Blog](https://medium.com/gerillass)
 - [Twitter](https://twitter.com/gerillass)
 
 ## Table of Contents
@@ -132,15 +133,15 @@ So, feel free to use any tool to support that. My suggestion is Autoprefixer. If
 
 ## Experimenting
 
-Experimentation with Gerillass is easy. You can [download the Gerillass library](https://github.com/selfishprimate/gerillass/archive/master.zip), include it in your project, or use [Gulpazan](https://github.com/selfishprimate/gulpazan). Gulpazan is a Gulp based workflow, and it comes with Gerillass and all the packages and configurations that you'll need to work with Sass. [Learn how you can install Gulpazan](https://github.com/selfishprimate/gulpazan).
+Experimentation with Gerillass is easy: If you're processing Sass files on your computer already, [download the Gerillass Sass library](https://github.com/selfishprimate/gerillass/archive/master.zip), include it in your project, and start using it. If not, use [Gerillass Play](https://github.com/selfishprimate/gerillass-play)! Gerillass Play is a Gulp based playground, built for you to get started with [Sass](https://sass-lang.com/) and [Gerillass](https://gerillass.com/) quickly.
 
-**Important Note**: Don't forget that you must have [Node.js](https://nodejs.org/en/) and [Gulp](https://gulpjs.com/docs/en/getting-started/quick-start) installed globally on your machine.
+**Important Note**: Don't forget that you must have [Node.js](https://nodejs.org/en/) and [Gulp CLI](https://gulpjs.com/docs/en/getting-started/quick-start) installed on your machine to work with Gerillass Play.
 
 ## Testing
 
 Gerillass comes with a unit-testing module named [True](https://github.com/oddbird/true), which makes Sass unit tests possible (endless thanks to the [OddBird Team](https://github.com/oddbird)).
 
-You can find two test examples under the test folder, take your time, examine the codes, and then write your unit tests. After that, run the following command to see if the tests pass.
+You can find two test examples under the `test` folder, take your time, examine the codes, and then write your unit tests. After that, run the following command to see if the tests pass.
 
     npm test
 

package/package.json

@@ -6,7 +6,7 @@
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
   "license": "Apache-2.0",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/selfishprimate/gerillass"

package/scss/_gerillass-prefix.scss

@@ -533,6 +533,7 @@
   $fill: false;
   display: flex;
   flex-wrap: wrap;
+  @include border-box;
   > * {
     @if length($params) == 1 {
       flex: 0 0 calc(100% / #{$columns});
@@ -796,6 +797,30 @@
 
 
 
+@mixin gls-loadify($params...) {
+  @if not & and length($params) == 0 {
+    @keyframes loadify {
+      to {
+        opacity: 1;
+      }
+    }
+  } @else if not & and length($params) > 0 {
+    @warn "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL THE MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
+  } @else if & and length($params) == 0 {
+    @warn "PLEASE PASS AN ARGUMENT TO SPECIFY HOW MANY SECONDS OR MILLISECONDS THE ELEMENTS WILL BE DELAYED! \A \A .element { \A   @incude loadify(0.2s); \A } \A ";
+  } @else if length($params) > 0 and length($params) < 3 {
+    opacity: 0;
+    animation-name: loadify;
+    animation-fill-mode: forwards;
+    animation-delay: nth($params, 1);
+    animation-duration: if(length($params) == 2, #{nth($params, 2)}, 0.5s);
+  } @else if length($params) > 2 {
+    @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
+  }
+}
+
+
+
 @mixin gls-only($params...) {
   @if length($params) == 0 {
     @error "Please pass an argument. The argument must be either a negative or positive number or list of numbers. Or pass one of the following predefined string values: 'first', 'last', 'odd', 'even'.";

package/scss/_gerillass.scss

@@ -63,6 +63,7 @@
 @import "library/font-face";
 @import "library/hide";
 @import "library/linear-gradient";
+@import "library/loadify";
 @import "library/only";
 @import "library/placeholder-shown";
 @import "library/placeholder";
@@ -89,6 +90,6 @@
 @import "library/text-stroke";
 @import "library/triangle";
 
-/* Import prefixed version of Gerillass */
+// Import prefixed version of Gerillass
 @import "gerillass-prefix";
 

package/scss/library/_columnizer.scss

@@ -6,6 +6,7 @@
   $fill: false;
   display: flex;
   flex-wrap: wrap;
+  @include border-box;
   > * {
     @if length($params) == 1 {
       flex: 0 0 calc(100% / #{$columns});

package/scss/library/_loadify.scss

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+@mixin loadify($params...) {
+  @if not & and length($params) == 0 {
+    @keyframes loadify {
+      to {
+        opacity: 1;
+        visibility: visible;
+        backface-visibility: visible;
+      }
+    }
+  } @else if not & and length($params) > 0 {
+    @error "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL LOADIFY MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
+  } @else if & and length($params) == 0 or length($params) < 3 {
+    opacity: 0;
+    visibility: hidden;
+    backface-visibility: hidden;
+    animation-name: loadify;
+    animation-fill-mode: forwards;
+    @if length($params) == 0 {
+      animation-delay: 0.2s;
+      animation-duration: 0.5s;
+    } @else if length($params) == 1 {
+      animation-delay: #{nth($params, 1)};
+      animation-duration: 0.5s;
+    } @else if length($params) == 2 {
+      animation-delay: #{nth($params, 1)};
+      animation-duration: #{nth($params, 2)};
+    }
+  } @else if length($params) > 2 {
+    @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
+  }
+}

package/gulpfile.js

@@ -1,34 +0,0 @@
-const { series, src, dest } = require("gulp");
-const concat = require("gulp-concat");
-const replace = require("gulp-replace");
-const header = require("gulp-header");
-
-function gather_mixins(done) {
-  return src(["scss/library/**/*.scss"])
-    .pipe(concat("_gerillass-prefix.scss"))
-    .pipe(dest("scss"));
-  done();
-}
-
-function del_charset(done) {
-  return src("scss/_gerillass-prefix.scss")
-    .pipe(replace('@charset "UTF-8";', ''))
-    .pipe(dest("scss"));
-  done();
-}
-
-function add_charset(done) {
-  return src("scss/_gerillass-prefix.scss")
-    .pipe(header('@charset "UTF-8";'))
-    .pipe(dest("scss"));
-  done();
-}
-
-function add_prefix(done) {
-  return src("scss/_gerillass-prefix.scss")
-    .pipe(replace('@mixin ', "@mixin gls-"))
-    .pipe(dest("scss"));
-  done();
-}
-
-exports.start = series(gather_mixins, del_charset, add_charset, add_prefix);