Feature - New Gridsystem core

gulpfile.babel.js

@@ -253,12 +253,12 @@ function initFavicons() {
 }
 
 async function initTheme(cb) {
-  let theme = { 
+  let theme = {
     [themeName]: {
       components: { default: { }, ie: { } }
     }
   };
-  let themeNoRefs = { 
+  let themeNoRefs = {
     [themeName]: {
       components: { default: { }, ie: { } }
     }

src/styles/_prefix.scss

@@ -0,0 +1,2 @@
+// Standardize prefixed using for different classes and css rules
+$prefix: '.sdds' !default;

src/styles/core/grid/_breakpoints.scss

@@ -0,0 +1,82 @@
+@import 'grid-vars';
+/* Grid breakpoints used for setting up every grid in different sizes
+ - All values most be added
+ - Contains gutterless grid breakpoints also
+*/
+
+//TODO: Add rem instead of px, map doesn't give correct rem value, need a converter
+$sdds-grid-breakpoints: (
+  sm: (
+    width: 320px,
+    columns: 4,
+    margin: 0,
+    padding: $spacing-layout-01,
+    gutter: $spacing-layout-04
+  ),
+  md: (
+    width: 672px,
+    columns: 8,
+    margin: $spacing-layout-02,
+    padding: $spacing-layout-01,
+    gutter: $spacing-layout-04
+  ),
+  lg: (
+    width: 1056px,
+    columns: 16,
+    margin: $spacing-layout-02,
+    padding: $spacing-layout-01,
+    gutter: $spacing-layout-04
+  ),
+  xlg: (
+    width: 1312px,
+    columns: 16,
+    margin: $spacing-layout-02,
+    padding: $spacing-layout-02,
+    gutter: $spacing-layout-04
+  ),
+  xxlg: (
+    width: 1584px,
+    columns: 16,
+    margin: $spacing-layout-03,
+    padding: $spacing-layout-02,
+    gutter: $spacing-layout-04
+  ),
+) !default;
+
+$sdds-grid-breakpoints-gutterless: (
+  sm: (
+    width: 320px,
+    columns: 4,
+    margin: 0,
+    padding: $spacing-layout-02,
+    gutter: 0
+  ),
+  md: (
+    width: 672px,
+    columns: 8,
+    margin: $spacing-layout-02,
+    padding: $spacing-layout-02,
+    gutter: 0
+  ),
+  lg: (
+    width: 1056px,
+    columns: 16,
+    margin: $spacing-layout-02,
+    padding: $spacing-layout-02,
+    gutter: 0
+  ),
+  xlg: (
+    width: 1312px,
+    columns: 16,
+    margin: $spacing-layout-02,
+    padding: $spacing-layout-02,
+    gutter: 0
+  ),
+  xxlg: (
+    width: 1584px,
+    columns: 16,
+    margin: $spacing-layout-03,
+    padding: $spacing-layout-02,
+    gutter: 0
+  ),
+) !default;

src/styles/core/grid/_grid-ie.scss

@@ -0,0 +1 @@
+//IE 11 support

src/styles/core/grid/_grid-mixins.scss

@@ -0,0 +1,158 @@
+@import '../../prefix';
+@import 'breakpoints';
+
+// Containers
+@mixin grid-container($prefix) {
+  #{$prefix}-container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    max-width: $screen-xxl;
+  }
+
+  #{$prefix}-container-fluid {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+}
+
+// Grid breakpoints
+@mixin grid-container-breakpoints($prefix, $breakpoints) {
+
+  @each $key, $values in $breakpoints {
+
+    $breakpoint-margin: map-get($values, 'margin');
+    $breakpoint-width: map-get($values, 'width');
+
+    @media (min-width:  $breakpoint-width ) {
+      #{$prefix}-container {
+          padding-right: $breakpoint-margin;
+          padding-left: $breakpoint-margin;
+      }
+    }
+
+    @include grid-container-full-width-breakpoints($prefix,$breakpoint-width,$breakpoint-margin);
+  }
+}
+
+// Grid breakpoints for full-width
+@mixin grid-container-full-width-breakpoints($prefix,$breakpoint-width,$breakpoint-margin) {
+  @media (min-width:  $breakpoint-width) {
+    #{$prefix}-container-fluid {
+        padding-right: $breakpoint-margin;
+        padding-left: $breakpoint-margin;
+    }
+  }
+}
+
+// Rows
+@mixin grid-row($prefix) {
+  #{$prefix}-row {
+    display:flex;
+    flex-wrap: wrap;
+  }
+}
+
+// Columns
+@mixin grid-make-col($breakpoints) {
+
+  // Size
+  @each $sizes, $values in $breakpoints {
+     $breakpoint-columns: map-get($values, 'columns');
+     $breakpoint-gutter: map-get($values, 'gutter');
+     $breakpoint-padding: map-get($values, 'padding');
+     $breakpoint-width: map-get($values, 'width');
+
+    //  Each column for everysize
+    @for $i from 1 through $breakpoint-columns {
+
+      @include grid-col-size-full-width($prefix, $sizes, $i);
+
+      @media (min-width:  $breakpoint-width ) {
+        #{$prefix}-col-#{$sizes}-#{$i} {
+          @include grid-col-size($breakpoint-columns, $i);
+          @include grid-gutters($breakpoint-gutter, $breakpoint-padding);
+
+        }
+      }
+    }
+  }
+}
+
+// Column size when it goes below it's breakpoint
+@mixin grid-col-size-full-width($prefix, $sizes, $i) {
+  #{$prefix}-col-#{$sizes}-#{$i} {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 100%;
+  }
+}
+
+// Column size calculation
+@mixin grid-col-size($columns, $i) {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  // Index divided by amount of the columns
+  flex-basis: percentage(($i / $columns));
+  max-width: percentage(($i / $columns));
+}
+
+// Gutters
+@mixin grid-gutters($gutter, $breakpoint-padding) {
+  $padding: $gutter / 2 + $breakpoint-padding;
+  padding: 0 $padding;
+}
+
+// Gutterless columns
+@mixin grid-gutterless-col($breakpoints) {
+
+  // Size
+  @each $sizes, $values in $breakpoints {
+    $breakpoint-columns: map-get($values, 'columns');
+    $breakpoint-gutter: map-get($values, 'gutter');
+    $breakpoint-padding: map-get($values, 'padding');
+    $breakpoint-width: map-get($values, 'width');
+
+   //  Each column for everysize
+    @for $i from 1 through $breakpoint-columns  {
+
+      @media (min-width:  $breakpoint-width ) {
+        #{$prefix}-col-#{$sizes}-#{$i}.gutterless {
+          @include grid-col-size($breakpoint-columns, $i);
+          @include grid-gutters($breakpoint-gutter, $breakpoint-padding);
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+// Column offset
+@mixin grid-offset-col($breakpoints) {
+
+  @each $sizes, $values in $breakpoints {
+    $breakpoint-columns: map-get($values, 'columns');
+    $breakpoint-gutter: map-get($values, 'gutter');
+    $breakpoint-padding: map-get($values, 'padding');
+    $breakpoint-width: map-get($values, 'width');
+
+   //  Each column for everysize
+    @for $i from 1 through $breakpoint-columns {
+
+      @media (min-width:  $breakpoint-width ) {
+        #{$prefix}-col-#{$sizes}-#{$i}-offset {
+          @include grid-offset($breakpoint-columns, $i);
+        }
+      }
+    }
+  }
+}
+
+// Offset calculation
+@mixin grid-offset($columns, $i) {
+  margin-left: percentage(($i / $columns));
+}

src/styles/core/grid/_grid-vars.scss

@@ -0,0 +1,33 @@
+/* 
+  Contains spacing variables for the layout
+*/
+
+// 1 rem = 4px;
+// Layout scale
+$spacing-layout-01: 2rem; // 8px
+$spacing-layout-02: 4rem; // 16px
+$spacing-layout-03: 6rem; // 24px
+$spacing-layout-04: 8rem; // 32px
+$spacing-layout-05: 12rem; // 48px
+$spacing-layout-06: 16rem; // 64px
+$spacing-layout-07: 24rem; // 96px
+$spacing-layout-08: 32rem; // 128px
+$spacing-layout-09: 40rem; // 160px
+
+// Element scale
+$spacing-element-01: 0.5rem; // 2px
+$spacing-element-02: 1rem; // 4px
+$spacing-element-03: 2rem; // 8px
+$spacing-element-04: 3rem; // 12px
+$spacing-element-05: 4rem; // 16px
+$spacing-element-06: 5rem; // 20px
+$spacing-element-07: 6rem; // 24px
+$spacing-element-08: 8rem; // 32px
+$spacing-element-09: 10rem; // 40px
+$spacing-element-10: 12rem;  // 48px
+
+$screen-s: 80rem; //320px
+$screen-md: 164rem; // 672px
+$screen-l: 264rem; //1056px
+$screen-xl: 328rem; //1312px
+$screen-xxl: 396rem; //1584px

src/styles/core/grid/_grid.scss

@@ -0,0 +1,26 @@
+@import '../../prefix';
+@import 'breakpoints';
+@import 'grid-mixins';
+
+/*
+Mixin file for create grid layout, container, rows and columns
+Setting up grid layout based on breakpoint maping
+*/
+
+// Container for the gridsystem
+@include grid-container($prefix);
+
+//Setup breakpoints for the container
+@include grid-container-breakpoints($prefix, $sdds-grid-breakpoints);
+
+// Row which columns are places
+@include grid-row($prefix);
+
+// Create columns
+@include grid-make-col($sdds-grid-breakpoints);
+
+//Creates gutterless columns
+@include grid-gutterless-col($sdds-grid-breakpoints-gutterless);
+
+// Adding offset classes for the grid
+@include grid-offset-col($sdds-grid-breakpoints);

src/styles/elements/c-global-style.scss

@@ -26,6 +26,10 @@
 @import '../utilities/loading.scss';
 @import '../utilities/typography.scss';
 
+
+//grid
+@import '../core/grid/grid';
+
 $components: badge, list-group-item;
 $componentsLight: alert, table;