@weni/unnnic-system 1.16.17 → 1.16.19-develop.0

package/.eslintrc.js

@@ -1,20 +1,20 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: ['plugin:vue/essential', '@vue/airbnb', 'plugin:storybook/recommended'],
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-  },
-  overrides: [{
-    files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
-    env: {
-      jest: true,
-    },
-  }],
-};
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/essential', '@vue/airbnb', 'plugin:storybook/recommended'],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+  overrides: [{
+    files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+    env: {
+      jest: true,
+    },
+  }],
+};

package/README.md

@@ -1,2 +1,2 @@
-# unnnic
-Design system
+# unnnic
+Design system

package/babel.config.js

@@ -1,16 +1,16 @@
-module.exports = {
-  presets: [
-    [
-      '@vue/cli-plugin-babel/preset',
-      {
-        targets: {
-          chrome: '87.0.0',
-          edge: '87.0.0',
-          firefox: '84.0.0',
-          ios: '13.3.0',
-          safari: '13.1.0',
-        },
-      },
-    ],
-  ],
-};
+module.exports = {
+  presets: [
+    [
+      '@vue/cli-plugin-babel/preset',
+      {
+        targets: {
+          chrome: '87.0.0',
+          edge: '87.0.0',
+          firefox: '84.0.0',
+          ios: '13.3.0',
+          safari: '13.1.0',
+        },
+      },
+    ],
+  ],
+};

package/dist/scss/colors.scss

@@ -1,121 +1,121 @@
-/* Background */
-$unnnic-color-background-solo: #E8F4F4;
-$unnnic-color-background-sky: #F4F6F8;
-$unnnic-color-background-grass: #F5F6F6;
-$unnnic-color-background-carpet: #F9F9F9;
-$unnnic-color-background-snow: #FFFFFF;
-
-/* Neutral */
-$unnnic-color-neutral-black: #272B33;
-$unnnic-color-neutral-darkest: #3B414D;
-$unnnic-color-neutral-dark: #4E5666;
-$unnnic-color-neutral-cloudy: #67738B;
-$unnnic-color-neutral-cleanest: #9CACCC;
-$unnnic-color-neutral-clean: #D0D3D9;
-$unnnic-color-neutral-soft: #E2E6ED;
-$unnnic-color-neutral-lightest: #F4F6F8;
-$unnnic-color-neutral-light: #F9F9F9;
-$unnnic-color-neutral-snow: #FFFFFF;
-
-/* Feedback colors */
-$unnnic-color-feedback-red: #FF4545;
-$unnnic-color-feedback-green: #47D66F;
-$unnnic-color-feedback-yellow: #FDBA38;
-$unnnic-color-feedback-blue: #2856FC;
-$unnnic-color-feedback-grey: #ECECEC;
-
-/* Auxiliary colors */
-$unnnic-color-aux-blue: #00DED3;
-$unnnic-color-aux-purple: #8416DE;
-$unnnic-color-aux-orange: #F4691F;
-$unnnic-color-aux-lemon: #CCDE0B;
-$unnnic-color-aux-pink: #DE16BA;
-
-$unnnic-color-aux-baby-blue: #8EDEF5;
-$unnnic-color-aux-baby-yellow: #FBF391;
-$unnnic-color-aux-baby-red: #F48E8E;
-$unnnic-color-aux-baby-green: #B2FCA6;
-$unnnic-color-aux-baby-pink: #FFCBF6;
-
-/* Brand */
-$unnnic-color-brand-weni: #00DED2;
-$unnnic-color-brand-weni-dark: #005E5A;
-$unnnic-color-brand-weni-soft: #009E96;
-$unnnic-color-brand-sec-dark: #262626;
-$unnnic-color-brand-sec-soft: #808080;
-$unnnic-color-brand-sec: #CCCCCC;
-
-:export{
-    unnnicColorBackgroundSolo: $unnnic-color-background-solo;
-}
-
-$scheme-colors:
-  "background-solo" $unnnic-color-background-solo,
-  "background-sky" $unnnic-color-background-sky,
-  "background-grass" $unnnic-color-background-grass,
-  "background-carpet" $unnnic-color-background-carpet,
-  "background-snow" $unnnic-color-background-snow,
-
-  /* Neutral */
-  "neutral-black" $unnnic-color-neutral-black,
-  "neutral-darkest" $unnnic-color-neutral-darkest,
-  "neutral-dark" $unnnic-color-neutral-dark,
-  "neutral-cloudy" $unnnic-color-neutral-cloudy,
-  "neutral-cleanest" $unnnic-color-neutral-cleanest,
-  "neutral-clean" $unnnic-color-neutral-clean,
-  "neutral-soft" $unnnic-color-neutral-soft,
-  "neutral-lightest" $unnnic-color-neutral-lightest,
-  "neutral-light" $unnnic-color-neutral-light,
-  "neutral-snow" $unnnic-color-neutral-snow,
-
-  /* Feedback colors */
-  "feedback-red" $unnnic-color-feedback-red,
-  "feedback-green" $unnnic-color-feedback-green,
-  "feedback-yellow" $unnnic-color-feedback-yellow,
-  "feedback-blue" $unnnic-color-feedback-blue,
-  "feedback-grey" $unnnic-color-feedback-grey,
-
-  /* Auxiliary colors */
-  "aux-blue" $unnnic-color-aux-blue,
-  "aux-purple" $unnnic-color-aux-purple,
-  "aux-orange" $unnnic-color-aux-orange,
-  "aux-lemon" $unnnic-color-aux-lemon,
-  "aux-pink" $unnnic-color-aux-pink,
-
-  "aux-baby-blue" $unnnic-color-aux-baby-blue,
-  "aux-baby-yellow" $unnnic-color-aux-baby-yellow,
-  "aux-baby-red" $unnnic-color-aux-baby-red,
-  "aux-baby-green" $unnnic-color-aux-baby-green,
-  "aux-baby-pink" $unnnic-color-aux-baby-pink,
-
-  /* Brand */
-  "brand-weni" $unnnic-color-brand-weni,
-  "brand-weni-dark" $unnnic-color-brand-weni-dark,
-  "brand-weni-soft" $unnnic-color-brand-weni-soft,
-  "brand-sec-dark" $unnnic-color-brand-sec-dark,
-  "brand-sec-soft" $unnnic-color-brand-sec-soft,
-  "brand-sec" $unnnic-color-brand-sec;
-
-
-@each $name, $color in $scheme-colors {
-  .color-#{$name} {
-    color: $color;
-  }
-
-  .bg-#{$name} {
-    background-color: $color;
-  }
-}
-
-
-.u {
-  @each $name, $color in $scheme-colors {
-    &.color-#{$name} {
-      color: $color;
-    }
-  
-    &.bg-#{$name} {
-      background-color: $color;
-    }
-  }
-}
+/* Background */
+$unnnic-color-background-solo: #E8F4F4;
+$unnnic-color-background-sky: #F4F6F8;
+$unnnic-color-background-grass: #F5F6F6;
+$unnnic-color-background-carpet: #F9F9F9;
+$unnnic-color-background-snow: #FFFFFF;
+
+/* Neutral */
+$unnnic-color-neutral-black: #272B33;
+$unnnic-color-neutral-darkest: #3B414D;
+$unnnic-color-neutral-dark: #4E5666;
+$unnnic-color-neutral-cloudy: #67738B;
+$unnnic-color-neutral-cleanest: #9CACCC;
+$unnnic-color-neutral-clean: #D0D3D9;
+$unnnic-color-neutral-soft: #E2E6ED;
+$unnnic-color-neutral-lightest: #F4F6F8;
+$unnnic-color-neutral-light: #F9F9F9;
+$unnnic-color-neutral-snow: #FFFFFF;
+
+/* Feedback colors */
+$unnnic-color-feedback-red: #FF4545;
+$unnnic-color-feedback-green: #47D66F;
+$unnnic-color-feedback-yellow: #FDBA38;
+$unnnic-color-feedback-blue: #2856FC;
+$unnnic-color-feedback-grey: #ECECEC;
+
+/* Auxiliary colors */
+$unnnic-color-aux-blue: #00DED3;
+$unnnic-color-aux-purple: #8416DE;
+$unnnic-color-aux-orange: #F4691F;
+$unnnic-color-aux-lemon: #CCDE0B;
+$unnnic-color-aux-pink: #DE16BA;
+
+$unnnic-color-aux-baby-blue: #8EDEF5;
+$unnnic-color-aux-baby-yellow: #FBF391;
+$unnnic-color-aux-baby-red: #F48E8E;
+$unnnic-color-aux-baby-green: #B2FCA6;
+$unnnic-color-aux-baby-pink: #FFCBF6;
+
+/* Brand */
+$unnnic-color-brand-weni: #00DED2;
+$unnnic-color-brand-weni-dark: #005E5A;
+$unnnic-color-brand-weni-soft: #009E96;
+$unnnic-color-brand-sec-dark: #262626;
+$unnnic-color-brand-sec-soft: #808080;
+$unnnic-color-brand-sec: #CCCCCC;
+
+:export{
+    unnnicColorBackgroundSolo: $unnnic-color-background-solo;
+}
+
+$scheme-colors:
+  "background-solo" $unnnic-color-background-solo,
+  "background-sky" $unnnic-color-background-sky,
+  "background-grass" $unnnic-color-background-grass,
+  "background-carpet" $unnnic-color-background-carpet,
+  "background-snow" $unnnic-color-background-snow,
+
+  /* Neutral */
+  "neutral-black" $unnnic-color-neutral-black,
+  "neutral-darkest" $unnnic-color-neutral-darkest,
+  "neutral-dark" $unnnic-color-neutral-dark,
+  "neutral-cloudy" $unnnic-color-neutral-cloudy,
+  "neutral-cleanest" $unnnic-color-neutral-cleanest,
+  "neutral-clean" $unnnic-color-neutral-clean,
+  "neutral-soft" $unnnic-color-neutral-soft,
+  "neutral-lightest" $unnnic-color-neutral-lightest,
+  "neutral-light" $unnnic-color-neutral-light,
+  "neutral-snow" $unnnic-color-neutral-snow,
+
+  /* Feedback colors */
+  "feedback-red" $unnnic-color-feedback-red,
+  "feedback-green" $unnnic-color-feedback-green,
+  "feedback-yellow" $unnnic-color-feedback-yellow,
+  "feedback-blue" $unnnic-color-feedback-blue,
+  "feedback-grey" $unnnic-color-feedback-grey,
+
+  /* Auxiliary colors */
+  "aux-blue" $unnnic-color-aux-blue,
+  "aux-purple" $unnnic-color-aux-purple,
+  "aux-orange" $unnnic-color-aux-orange,
+  "aux-lemon" $unnnic-color-aux-lemon,
+  "aux-pink" $unnnic-color-aux-pink,
+
+  "aux-baby-blue" $unnnic-color-aux-baby-blue,
+  "aux-baby-yellow" $unnnic-color-aux-baby-yellow,
+  "aux-baby-red" $unnnic-color-aux-baby-red,
+  "aux-baby-green" $unnnic-color-aux-baby-green,
+  "aux-baby-pink" $unnnic-color-aux-baby-pink,
+
+  /* Brand */
+  "brand-weni" $unnnic-color-brand-weni,
+  "brand-weni-dark" $unnnic-color-brand-weni-dark,
+  "brand-weni-soft" $unnnic-color-brand-weni-soft,
+  "brand-sec-dark" $unnnic-color-brand-sec-dark,
+  "brand-sec-soft" $unnnic-color-brand-sec-soft,
+  "brand-sec" $unnnic-color-brand-sec;
+
+
+@each $name, $color in $scheme-colors {
+  .color-#{$name} {
+    color: $color;
+  }
+
+  .bg-#{$name} {
+    background-color: $color;
+  }
+}
+
+
+.u {
+  @each $name, $color in $scheme-colors {
+    &.color-#{$name} {
+      color: $color;
+    }
+  
+    &.bg-#{$name} {
+      background-color: $color;
+    }
+  }
+}

package/dist/scss/fonts.scss

@@ -1,123 +1,123 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-
-$unnnic-font-size: 16px;
-
-// Font family
-$unnnic-font-family-primary: 'Aleo', serif;
-$unnnic-font-family-secondary: Lato;
-
-// Font weight
-$unnnic-font-weight-black: 900;
-$unnnic-font-weight-bold: 700;
-$unnnic-font-weight-regular: 400;
-$unnnic-font-weight-light: 300;
-
-// Font size
-$unnnic-font-size-body-sm: 0.5 * $unnnic-font-size;
-$unnnic-font-size-body-md: 0.75 * $unnnic-font-size;
-$unnnic-font-size-body-gt: 0.875 * $unnnic-font-size;
-$unnnic-font-size-body-lg: 1 * $unnnic-font-size;
-
-$unnnic-font-size-title-sm: 1.25 * $unnnic-font-size;
-$unnnic-font-size-title-md: 1.5 * $unnnic-font-size;
-$unnnic-font-size-title-lg: 2 * $unnnic-font-size;
-
-$unnnic-font-size-h4: 2.5 * $unnnic-font-size;
-$unnnic-font-size-h3: 3 * $unnnic-font-size;
-$unnnic-font-size-h2: 3.5 * $unnnic-font-size;
-$unnnic-font-size-h1: 4.5 * $unnnic-font-size;
-
-// Line height
-// Add this to font size when using
-$unnnic-line-height-small: 0.25 * $unnnic-font-size;
-$unnnic-line-height-medium: 0.5 * $unnnic-font-size;
-$unnnic-line-height-md: $unnnic-line-height-medium;
-$unnnic-line-height-large: 1 * $unnnic-font-size;
-
-.unnnic-font {
-  font-weight: $unnnic-font-weight-regular;
-  font-family: $unnnic-font-family-primary;
-
-  $font-sizes:
-    "body-sm" $unnnic-font-size-body-sm,
-    "body-md" $unnnic-font-size-body-md,
-    "body-gt" $unnnic-font-size-body-gt,
-    "body-lg" $unnnic-font-size-body-lg,
-
-    "title-sm" $unnnic-font-size-title-sm,
-    "title-md" $unnnic-font-size-title-md,
-    "title-lg" $unnnic-font-size-title-lg,
-
-    "h4" $unnnic-font-size-h4,
-    "h3" $unnnic-font-size-h3,
-    "h2" $unnnic-font-size-h2,
-    "h1" $unnnic-font-size-h1;
-
-  $font-weights:
-    "black" $unnnic-font-weight-black,
-    "bold" $unnnic-font-weight-bold,
-    "light" $unnnic-font-weight-light;
-
-  &.secondary {
-    font-family: $unnnic-font-family-secondary;
-  }
-
-  @each $name, $size in $font-sizes {
-    &.#{$name} {
-      font-size: $size;
-      line-height: $size + $unnnic-line-height-md;
-    }
-  }
-
-  @each $name, $weight in $font-weights {
-    &.#{$name} {
-      font-weight: $weight;
-    }
-  }
-}
-
-
-.u {
-  &.font {
-    font-weight: $unnnic-font-weight-regular;
-    font-family: $unnnic-font-family-primary;
-
-    $font-sizes:
-      "body-sm" $unnnic-font-size-body-sm,
-      "body-md" $unnnic-font-size-body-md,
-      "body-gt" $unnnic-font-size-body-gt,
-      "body-lg" $unnnic-font-size-body-lg,
-
-      "title-sm" $unnnic-font-size-title-sm,
-      "title-md" $unnnic-font-size-title-md,
-      "title-lg" $unnnic-font-size-title-lg,
-
-      "h4" $unnnic-font-size-h4,
-      "h3" $unnnic-font-size-h3,
-      "h2" $unnnic-font-size-h2,
-      "h1" $unnnic-font-size-h1;
-
-    $font-weights:
-      "black" $unnnic-font-weight-black,
-      "bold" $unnnic-font-weight-bold,
-      "light" $unnnic-font-weight-light;
-
-    &.secondary {
-      font-family: $unnnic-font-family-secondary;
-    }
-
-    @each $name, $size in $font-sizes {
-      &.#{$name} {
-        font-size: $size;
-        line-height: $size + $unnnic-line-height-md;
-      }
-    }
-
-    @each $name, $weight in $font-weights {
-      &.#{$name} {
-        font-weight: $weight;
-      }
-    }
-  }
-}
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+$unnnic-font-size: 16px;
+
+// Font family
+$unnnic-font-family-primary: 'Aleo', serif;
+$unnnic-font-family-secondary: Lato;
+
+// Font weight
+$unnnic-font-weight-black: 900;
+$unnnic-font-weight-bold: 700;
+$unnnic-font-weight-regular: 400;
+$unnnic-font-weight-light: 300;
+
+// Font size
+$unnnic-font-size-body-sm: 0.5 * $unnnic-font-size;
+$unnnic-font-size-body-md: 0.75 * $unnnic-font-size;
+$unnnic-font-size-body-gt: 0.875 * $unnnic-font-size;
+$unnnic-font-size-body-lg: 1 * $unnnic-font-size;
+
+$unnnic-font-size-title-sm: 1.25 * $unnnic-font-size;
+$unnnic-font-size-title-md: 1.5 * $unnnic-font-size;
+$unnnic-font-size-title-lg: 2 * $unnnic-font-size;
+
+$unnnic-font-size-h4: 2.5 * $unnnic-font-size;
+$unnnic-font-size-h3: 3 * $unnnic-font-size;
+$unnnic-font-size-h2: 3.5 * $unnnic-font-size;
+$unnnic-font-size-h1: 4.5 * $unnnic-font-size;
+
+// Line height
+// Add this to font size when using
+$unnnic-line-height-small: 0.25 * $unnnic-font-size;
+$unnnic-line-height-medium: 0.5 * $unnnic-font-size;
+$unnnic-line-height-md: $unnnic-line-height-medium;
+$unnnic-line-height-large: 1 * $unnnic-font-size;
+
+.unnnic-font {
+  font-weight: $unnnic-font-weight-regular;
+  font-family: $unnnic-font-family-primary;
+
+  $font-sizes:
+    "body-sm" $unnnic-font-size-body-sm,
+    "body-md" $unnnic-font-size-body-md,
+    "body-gt" $unnnic-font-size-body-gt,
+    "body-lg" $unnnic-font-size-body-lg,
+
+    "title-sm" $unnnic-font-size-title-sm,
+    "title-md" $unnnic-font-size-title-md,
+    "title-lg" $unnnic-font-size-title-lg,
+
+    "h4" $unnnic-font-size-h4,
+    "h3" $unnnic-font-size-h3,
+    "h2" $unnnic-font-size-h2,
+    "h1" $unnnic-font-size-h1;
+
+  $font-weights:
+    "black" $unnnic-font-weight-black,
+    "bold" $unnnic-font-weight-bold,
+    "light" $unnnic-font-weight-light;
+
+  &.secondary {
+    font-family: $unnnic-font-family-secondary;
+  }
+
+  @each $name, $size in $font-sizes {
+    &.#{$name} {
+      font-size: $size;
+      line-height: $size + $unnnic-line-height-md;
+    }
+  }
+
+  @each $name, $weight in $font-weights {
+    &.#{$name} {
+      font-weight: $weight;
+    }
+  }
+}
+
+
+.u {
+  &.font {
+    font-weight: $unnnic-font-weight-regular;
+    font-family: $unnnic-font-family-primary;
+
+    $font-sizes:
+      "body-sm" $unnnic-font-size-body-sm,
+      "body-md" $unnnic-font-size-body-md,
+      "body-gt" $unnnic-font-size-body-gt,
+      "body-lg" $unnnic-font-size-body-lg,
+
+      "title-sm" $unnnic-font-size-title-sm,
+      "title-md" $unnnic-font-size-title-md,
+      "title-lg" $unnnic-font-size-title-lg,
+
+      "h4" $unnnic-font-size-h4,
+      "h3" $unnnic-font-size-h3,
+      "h2" $unnnic-font-size-h2,
+      "h1" $unnnic-font-size-h1;
+
+    $font-weights:
+      "black" $unnnic-font-weight-black,
+      "bold" $unnnic-font-weight-bold,
+      "light" $unnnic-font-weight-light;
+
+    &.secondary {
+      font-family: $unnnic-font-family-secondary;
+    }
+
+    @each $name, $size in $font-sizes {
+      &.#{$name} {
+        font-size: $size;
+        line-height: $size + $unnnic-line-height-md;
+      }
+    }
+
+    @each $name, $weight in $font-weights {
+      &.#{$name} {
+        font-weight: $weight;
+      }
+    }
+  }
+}

package/dist/scss/grid.scss

@@ -1,52 +1,52 @@
-.unnnic-grid-xs {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-}
-
-.unnnic-grid-sm {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-md {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
-    padding: 0 48px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-lg {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 64px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-xl {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 176px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-giant {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 24px;
-    box-sizing: border-box;
-}
-
-@for $i from 1 to 13 {
-    .unnnic-grid-span-#{$i} {
-        grid-column: span #{$i};
-    }
+.unnnic-grid-xs {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+}
+
+.unnnic-grid-sm {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-md {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
+    padding: 0 48px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-lg {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 64px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-xl {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 176px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-giant {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 24px;
+    box-sizing: border-box;
+}
+
+@for $i from 1 to 13 {
+    .unnnic-grid-span-#{$i} {
+        grid-column: span #{$i};
+    }
 }