Merge pull request #5 from nanogiants/feat/offset

Feature: Offset

Author: andrelmlins

README.md

@@ -88,18 +88,20 @@ An example of how to use the library:
 ```vue
 <template>
   <row container :gutter="12">
-    <column :xs="12" :md="4" :lg="3">
-      xs=12 md=4 lg=3
-    </column>
-    <column :xs="12" :md="4" :lg="3">
-      xs=12 md=4 lg=3
-    </column>
-    <column :xs="12" :md="4" :lg="3">
-      xs=12 md=4 lg=3
-    </column>
-    <column :xs="12" :md="4" :lg="3">
-      xs=12 md=4 lg=3
-    </column>
+    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
+    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
+    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
+    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
+  </row>
+</template>
+```
+
+An example how to use offset in addition with a columns:
+
+```vue
+<template>
+  <row container :gutter="12">
+    <column :md="8" :mdOffset="2" :lg="6" :lgOffset="3"> </column>
   </row>
 </template>
 ```
@@ -109,15 +111,9 @@ Using the hidden component:
 ```vue
 <template>
   <div>
-    <hidden :xs="true">
-      hidden xs
-    </hidden>
-    <hidden :md="true">
-      hidden md
-    </hidden>
-    <hidden :xl="true">
-      hidden xl
-    </hidden>
+    <hidden :xs="true"> hidden xs </hidden>
+    <hidden :md="true"> hidden md </hidden>
+    <hidden :xl="true"> hidden xl </hidden>
   </div>
 </template>
 ```
@@ -145,6 +141,8 @@ Component props:
 
 ### Column Component props
 
+#### Basic Size
+
 | Prop | Default | Type   | Description                |
 | ---- | ------- | ------ | -------------------------- |
 | xs   | -       | number | Size in extra small screen |
@@ -153,6 +151,16 @@ Component props:
 | lg   | -       | number | Size in large screen       |
 | xl   | -       | number | Size in extra large screen |
 
+#### Offset
+
+| Prop     | Default | Type   | Description                  |
+| -------- | ------- | ------ | ---------------------------- |
+| xsOffset | -       | number | Offset in extra small screen |
+| smOffset | -       | number | Offset in small screen       |
+| mdOffset | -       | number | Offset in medium screen      |
+| lgOffset | -       | number | Offset in large screen       |
+| xlOffset | -       | number | Offset in extra large screen |
+
 ### Hidden Component props
 
 | Prop | Default | Type    | Description                |

src/Column.vue

@@ -7,6 +7,33 @@
 <script>
 export default {
   name: 'Col',
+  props: {
+    xs: Number,
+    sm: Number,
+    md: Number,
+    lg: Number,
+    xl: Number,
+    xsOffset: {
+      required: false,
+      type: Number
+    },
+    smOffset: {
+      required: false,
+      type: Number
+    },
+    mdOffset: {
+      required: false,
+      type: Number
+    },
+    lgOffset: {
+      required: false,
+      type: Number
+    },
+    xlOffset: {
+      required: false,
+      type: Number
+    }
+  },
   data() {
     let styleGeneral = this.createStyleSize();
 
@@ -21,13 +48,6 @@ export default {
       styleGeneral
     };
   },
-  props: {
-    xs: Number,
-    sm: Number,
-    md: Number,
-    lg: Number,
-    xl: Number
-  },
   methods: {
     getValue(breakpoint) {
       const localColumns = this.$parent.columns;
@@ -38,18 +58,25 @@ export default {
       return breakpoint ? `${(breakpoint / localColumns) * 100}%` : false;
     },
     createClassSize() {
-      let newClass = 'colVGR-xs ';
+      let newClass = 'grid-column colVGR-xs ';
 
       newClass += this.sm ? 'colVGR-sm ' : '';
       newClass += this.md ? 'colVGR-md ' : '';
       newClass += this.lg ? 'colVGR-lg ' : '';
       newClass += this.xl ? 'colVGR-xl ' : '';
 
+      newClass += this.xsOffset ? 'colVGR-Offset-xs ' : '';
+      newClass += this.smOffset ? 'colVGR-Offset-sm ' : '';
+      newClass += this.mdOffset ? 'colVGR-Offset-md ' : '';
+      newClass += this.lgOffset ? 'colVGR-Offset-lg ' : '';
+      newClass += this.xlOffset ? 'colVGR-Offset-xl ' : '';
+
       return newClass;
     },
     createStyleSize() {
       let newStyle = '';
 
+      // Scale
       newStyle += this.xs
         ? `--xsWidthVGR:${this.getValue(this.xs)}; `
         : `--xsWidthVGR:100%; `;
@@ -58,6 +85,23 @@ export default {
       newStyle += this.lg ? `--lgWidthVGR:${this.getValue(this.lg)}; ` : '';
       newStyle += this.xl ? `--xlWidthVGR:${this.getValue(this.xl)}; ` : '';
 
+      // Offset
+      newStyle += this.xsOffset
+        ? `--xsOffset:${this.getValue(this.xsOffset)}; `
+        : ``;
+      newStyle += this.smOffset
+        ? `--smOffset:${this.getValue(this.smOffset)}; `
+        : '';
+      newStyle += this.mdOffset
+        ? `--mdOffset:${this.getValue(this.mdOffset)}; `
+        : '';
+      newStyle += this.lgOffset
+        ? `--lgOffset:${this.getValue(this.lgOffset)}; `
+        : '';
+      newStyle += this.xlOffset
+        ? `--xlOffset:${this.getValue(this.xlOffset)}; `
+        : '';
+
       return newStyle;
     }
   }
@@ -76,31 +120,47 @@ export default {
   max-width: var(--xsWidthVGR);
 }
 
+.colVGR-Offset-xs {
+  margin-left: var(--xsOffset);
+}
+
 @media (min-width: 576px) {
   .colVGR-sm {
     flex-basis: var(--smWidthVGR);
     max-width: var(--smWidthVGR);
   }
+  .colVGR-Offset-sm {
+    margin-left: var(--smOffset);
+  }
 }
 
 @media (min-width: 768px) {
   .colVGR-md {
     flex-basis: var(--mdWidthVGR);
     max-width: var(--mdWidthVGR);
   }
+  .colVGR-Offset-md {
+    margin-left: var(--mdOffset);
+  }
 }
 
 @media (min-width: 992px) {
   .colVGR-lg {
     flex-basis: var(--lgWidthVGR);
     max-width: var(--lgWidthVGR);
   }
+  .colVGR-Offset-lg {
+    margin-left: var(--lgOffset);
+  }
 }
 
 @media (min-width: 1200px) {
   .colVGR-xl {
     flex-basis: var(--xlWidthVGR);
     max-width: var(--xlWidthVGR);
   }
+  .colVGR-Offset-xl {
+    margin-left: var(--xlOffset);
+  }
 }
 </style>

src/Row.vue

@@ -1,24 +1,24 @@
 <template>
-  <div :style="styleGeneral" class="container">
+  <div :style="styleGeneral" class="grid-row">
     <slot />
   </div>
 </template>
 
 <script>
 export default {
   name: 'Row',
-  data() {
-    return {
-      styleGeneral: this.createGutter(this.gutter)
-    };
-  },
   props: {
     gutter: Number,
     columns: {
       type: Number,
       default: 12
     }
   },
+  data() {
+    return {
+      styleGeneral: this.createGutter(this.gutter)
+    };
+  },
   methods: {
     createGutter(gutter) {
       return gutter
@@ -30,7 +30,7 @@ export default {
 </script>
 
 <style scoped>
-.container {
+.grid-row {
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;