Merge branch 'develop'

gplusmic · gplusmic · commit b12e376c1c77 · 2018-03-07T10:05:20.000+09:00
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 <em>"Why go in circles?"</em>
 <br>
 <br>
-<strong>CSS Companion for Front-end Developer</strong>
+<strong>SCSS Companion for Front-end Developer</strong>
 <br>
     <a href="https://oo-loop.github.io/" title="documentation">> Documentation</a>  
 </p>  
diff --git a/dist/loop.css b/dist/loop.css
@@ -2518,5 +2518,3 @@ ol.list-center {
 .wrapper-medium {
   padding: 2.4rem;
 }
-
-/*# sourceMappingURL=loop.css.map */
diff --git a/dist/loop.css.map b/dist/loop.css.map
diff --git a/dist/loop.min.css b/dist/loop.min.css
diff --git a/docs/dist/index.html b/docs/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"><meta name=decription content="CSS companion for Front-end Developer"><meta name=keywords content="css, sass, companion, framework, front-end, developer, loop, oo-loop"><title>Loop - CSS Companion</title><link rel=apple-touch-icon sizes=180x180 href=/static/assets/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/static/assets/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/static/assets/favicon-16x16.png><link rel=manifest href=/static/assets/site.webmanifest><link rel=mask-icon href=/static/assets/safari-pinned-tab.svg color=#6cd7f7><meta name=msapplication-TileColor content=#6cd7f7><meta name=theme-color content=#ffffff><link href=/static/css/app.3f2f4fd8c3d76eb3e5dc05d5f38b70d2.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.216c0ccbd0c16a601e11.js></script><script type=text/javascript src=/static/js/vendor.67fbabd8141a2f0bdedf.js></script><script type=text/javascript src=/static/js/app.8a77c4e435d817cf1d86.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"><meta name=decription content="SCSS companion for Front-end Developer"><meta name=keywords content="scss, sass, css, companion, framework, front-end, developer, loop, oo-loop"><title>Loop - SCSS Companion</title><link rel=apple-touch-icon sizes=180x180 href=/static/assets/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/static/assets/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/static/assets/favicon-16x16.png><link rel=manifest href=/static/assets/site.webmanifest><link rel=mask-icon href=/static/assets/safari-pinned-tab.svg color=#6cd7f7><meta name=msapplication-TileColor content=#6cd7f7><meta name=theme-color content=#ffffff><link href=/static/css/app.90230fee58c0cd7dde5621c42b704a14.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.708894458276953503ca.js></script><script type=text/javascript src=/static/js/vendor.67fbabd8141a2f0bdedf.js></script><script type=text/javascript src=/static/js/app.ff0bb16c066589c76fb8.js></script></body></html>
diff --git a/docs/index.html b/docs/index.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <meta name="decription" content="CSS companion for Front-end Developer">
-    <meta name="keywords" content="css, sass, companion, framework, front-end, developer, loop, oo-loop">
-    <title>Loop - CSS Companion</title>
+    <meta name="decription" content="SCSS companion for Front-end Developer">
+    <meta name="keywords" content="scss, sass, css, companion, framework, front-end, developer, loop, oo-loop">
+    <title>Loop - SCSS Companion</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/static/assets/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/assets/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/assets/favicon-16x16.png">
diff --git a/docs/src/App.vue b/docs/src/App.vue
@@ -7,7 +7,7 @@
 					<ul class="list-unstyle font-bold">
 						<li class="mb-10" v-for="(item, index) in listing">
 							<router-link :to="`${item.route}`">{{item.name}}</router-link>
-							<span 
+							<span
 								v-if="item.label"
 								class="text-tiny"
 								:class="item.labelClass ? item.labelClass : ''"
@@ -363,6 +363,7 @@ export default {
 	    'small': 1.6rem,
 	    'large': 4rem,
 	);
+	$columns-gutter-sizes-breakpoints-classes:(sm, md, lg);
 	$use-columns-self-adjustment-breakpoints: true;
 
 	@import '~loop/loop';
diff --git a/docs/src/components/documentation/column/code/gutter-responsive.html b/docs/src/components/documentation/column/code/gutter-responsive.html
@@ -0,0 +1,6 @@
+<!--  From less to large gutter -->
+<div oo-column="row gutter-less gutter-tiny@sm gutter-small@md gutter-large@lg v-gutter-less">
+  <div oo-column="col"><p class="cell">Responsive Gutter</p></div>
+  <div oo-column="col"><p class="cell">Responsive Gutter</p></div>
+  <div oo-column="col"><p class="cell">Responsive Gutter</p></div>
+</div>
diff --git a/docs/src/components/documentation/column/code/var-gutter-responsive.html b/docs/src/components/documentation/column/code/var-gutter-responsive.html
@@ -0,0 +1,2 @@
+/* Add the three default breakpoints */
+$columns-gutter-sizes-breakpoints-classes: (sm, md, lg);
diff --git a/docs/src/components/documentation/column/code/var-gutter.html b/docs/src/components/documentation/column/code/var-gutter.html
diff --git a/docs/src/components/documentation/column/index.vue b/docs/src/components/documentation/column/index.vue
@@ -59,7 +59,7 @@
 		Change the values at your convenience to only match your needs.<br>
 		The modifier <code class="color-secondary">v-gutter-less</code> will remove the vertical gutter.</p>
 
-		<pretty-code class="language-css" :code="html.gutterVariables"></pretty-code>
+		<pretty-code class="language-css" :code="html.varGutter"></pretty-code>
 
 		<div oo-column="row gutter-large v-gutter-less">
 		    <div oo-column="col"><p class="cell">large</p></div>
@@ -83,6 +83,16 @@
 		</div>
 		<pretty-code :code="html.gutter"></pretty-code>
 
+		<h4 class="h5">Responsive gutters</h4>
+		<p>Assign a list of needed breakpoints to <code class="color-info">$columns-gutter-sizes-breakpoints-classes</code> and generate modifiers such as <code class="color-secondary">gutter-{$gutterName}@{$breakpoint}</code>.</p>
+		<pretty-code class="language-css" :code="html.varGutterResponsive"></pretty-code>
+
+		<div oo-column="row gutter-less gutter-tiny@sm gutter-small@md gutter-large@lg v-gutter-less">
+		    <div oo-column="col"><p class="cell">Responsive Gutter</p></div>
+		    <div oo-column="col"><p class="cell">Responsive Gutter</p></div>
+		    <div oo-column="col"><p class="cell">Responsive Gutter</p></div>
+		</div>
+		<pretty-code :code="html.gutterResponsive"></pretty-code>
 
 		<h3 id="order"><a href="#order">#</a> Order</h3>
 		<p>Rearrange the order the columns through the properties <code class="color-secondary">order-0@{$breakpoint}</code> to <code class="color-secondary">order-12@{$breakpoint}</code> according to the size of the screen.</p>
@@ -191,7 +201,9 @@ export default {
 		html: {
 			column: require('./code/column.html'),
 			gutter: require('./code/gutter.html'),
-			gutterVariables: require('./code/gutter-variables.html'),
+			gutterResponsive: require('./code/gutter-responsive.html'),
+			varGutter: require('./code/var-gutter.html'),
+			varGutterResponsive: require('./code/var-gutter-responsive.html'),
 			selfAdjust: require('./code/self-adjust.html'),
 			selfAdjustResponsive: require('./code/self-adjust-responsive.html'),
 			clear: require('./code/clear.html'),
diff --git a/docs/src/components/documentation/introduction/index.vue b/docs/src/components/documentation/introduction/index.vue
@@ -5,7 +5,7 @@
     </transition>
     <h1 class="h2">Loop</h1>
     <p class="text-large font-italic">"Why go in circles?"</p>
-    <h2 class="h4 mb-20">CSS Companion for Front-end Developer</h2>
+    <h2 class="h4 mb-20">SCSS Companion for Front-end Developer</h2>
     <p><a href="https://github.com/oo-loop/loop" title="See on GitHub"><img src="/static/assets/github.png" height="20" alt="GitHub Page"></a>
     <a class="ml-10" href="https://www.npmjs.com/package/oo-loop" title="See on NPM"><img src="https://img.shields.io/npm/v/oo-loop.svg?style=flat-square" alt="Latest version on NPM"></a></p>
     <div oo-column="row align-center">
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oo-loop",
-  "version": "0.4.5",
-  "description": "CSS companion for Front-end Developer",
+  "version": "0.4.6",
+  "description": "SCSS companion for Front-end Developer",
   "style": "dist/loop.css",
   "sass": "scss/_loop.scss",
   "main": "dist/",
@@ -11,15 +11,17 @@
   "scripts": {
     "test": "npm run css",
     "css": "npm run css-compile",
-    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/_loop.scss dist/loop.css"
+    "css-compile": "node-sass --output-style expanded --precision 6 scss/_loop.scss dist/loop.css",
+    "css-compile-min": "node-sass --output-style compressed --precision 6 scss/_loop.scss dist/loop.min.css"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/oo-loop/loop.git"
   },
   "keywords": [
-    "css",
+    "scss",
     "sass",
+    "css",
     "front-end",
     "developer",
     "companion",
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -230,7 +230,8 @@ $text-sizes-is-important: true !default;
  $columns-gutter-sizes: (
     'less' : 0,
     'small': 1.6rem,
-) !default;
+ ) !default;
+ $columns-gutter-sizes-breakpoints-classes: () !default;
 
  $use-columns-order:          true !default;
  $use-columns-offset:         false !default;
diff --git a/scss/components/_columns.scss b/scss/components/_columns.scss
@@ -18,6 +18,7 @@ $columns-gutter-sizes: (
     'less' : 0,
     'small': 1.6rem,
 ) !default;
+$columns-gutter-sizes-breakpoints-classes: () !default;
 
 // row
 [#{$loop-component-prefix}-column~="row"] {
@@ -161,14 +162,20 @@ $columns-gutter-sizes: (
 
 
 // gutters
-@each $gutter-name, $gutter-size in $columns-gutter-sizes {
-    [#{$loop-component-prefix}-column~="gutter-#{$gutter-name}"] {
-        left: -#{$gutter-size};
-        margin-right: -#{$gutter-size};
-
-        > [#{$loop-component-prefix}-column*="col"] {
-            padding-bottom: $gutter-size;
-            padding-left: $gutter-size;
+$columns-gutter-sizes-breakpoints-classes: join('', $columns-gutter-sizes-breakpoints-classes);
+@each $class in $columns-gutter-sizes-breakpoints-classes {
+    @include breakpoint($class) {
+        $suffix: if(isEmpty($class), '', \@#{$class});
+        @each $gutter-name, $gutter-size in $columns-gutter-sizes {
+            [#{$loop-component-prefix}-column~="gutter-#{$gutter-name}#{$suffix}"] {
+                left: -#{$gutter-size};
+                margin-right: -#{$gutter-size};
+
+                > [#{$loop-component-prefix}-column*="col"] {
+                    padding-bottom: $gutter-size;
+                    padding-left: $gutter-size;
+                }
+            }
         }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -2518,5 +2518,3 @@ ol.list-center {`
`2518`	`2518`	`.wrapper-medium {`
`2519`	`2519`	`padding: 2.4rem;`
`2520`	`2520`	`}`
`2521`		`-`
`2522`		`-/# sourceMappingURL=loop.css.map /`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"><meta name=decription content="CSS companion for Front-end Developer"><meta name=keywords content="css, sass, companion, framework, front-end, developer, loop, oo-loop"><title>Loop - CSS Companion</title><link rel=apple-touch-icon sizes=180x180 href=/static/assets/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/static/assets/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/static/assets/favicon-16x16.png><link rel=manifest href=/static/assets/site.webmanifest><link rel=mask-icon href=/static/assets/safari-pinned-tab.svg color=#6cd7f7><meta name=msapplication-TileColor content=#6cd7f7><meta name=theme-color content=#ffffff><link href=/static/css/app.3f2f4fd8c3d76eb3e5dc05d5f38b70d2.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.216c0ccbd0c16a601e11.js></script><script type=text/javascript src=/static/js/vendor.67fbabd8141a2f0bdedf.js></script><script type=text/javascript src=/static/js/app.8a77c4e435d817cf1d86.js></script></body></html>
	`1`	+<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"><meta name=decription content="SCSS companion for Front-end Developer"><meta name=keywords content="scss, sass, css, companion, framework, front-end, developer, loop, oo-loop"><title>Loop - SCSS Companion</title><link rel=apple-touch-icon sizes=180x180 href=/static/assets/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/static/assets/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/static/assets/favicon-16x16.png><link rel=manifest href=/static/assets/site.webmanifest><link rel=mask-icon href=/static/assets/safari-pinned-tab.svg color=#6cd7f7><meta name=msapplication-TileColor content=#6cd7f7><meta name=theme-color content=#ffffff><link href=/static/css/app.90230fee58c0cd7dde5621c42b704a14.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.708894458276953503ca.js></script><script type=text/javascript src=/static/js/vendor.67fbabd8141a2f0bdedf.js></script><script type=text/javascript src=/static/js/app.ff0bb16c066589c76fb8.js></script></body></html>
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/* Add the three default breakpoints */`
	`2`	`+$columns-gutter-sizes-breakpoints-classes: (sm, md, lg);`