v0.3.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@numaxlab/atomic",
-    "version": "0.2.2",
+    "version": "0.3.0",
     "description": "Atomic is a CSS and SCSS framework based in Bootstrap",
     "repository": "https://github.com/numaxlab/atomic",
     "author": "Laboratorio NUMAX",

src/scss/atoms/_heading.scss

@@ -1,9 +1,12 @@
 .at-heading {
     @extend %heading;
 
-    @each $size, $value in $font-sizes {
+    @each $size, $map in $headings {
         &.is-#{$size} {
-            @include font-size($value);
+            @include font-size(map-get($map, font-size));
+            font-weight: map-get($map, font-weight);
+            line-height: map-get($map, line-height);
+            letter-spacing: map-get($map, letter-spacing);
         }
     }
 }

src/scss/atoms/_lead.scss

@@ -1,4 +1,5 @@
 .at-lead {
     @include font-size($lead-font-size);
+    line-height: $lead-line-height;
     font-weight: $lead-font-weight;
 }

src/scss/atoms/_small.scss

@@ -1,3 +1,4 @@
 .at-small {
     @include font-size($small-font-size);
+    line-height: $small-line-height;
 }

src/scss/base/_reset.scss

@@ -9,10 +9,22 @@ body {
     font-kerning: normal;
 }
 
+@each $size, $map in $headings {
+    h#{$size} {
+        font-weight: map-get($map, font-weight);
+        line-height: map-get($map, line-height);
+        letter-spacing: map-get($map, letter-spacing);
+    }
+}
+
 img {
     @include img-fluid;
 }
 
 ul {
     list-style-type: disc;
 }
+
+[x-cloak] {
+    display: none !important;
+}

src/scss/mixins/_generic.scss

@@ -1,10 +1,13 @@
-@mixin undo-sr-only {
-    position: static;
-    width: auto;
-    height: auto;
-    padding: 0;
-    overflow: visible;
-    clip: auto;
-    white-space: normal;
-    border: 0;
+// Check: @bootstrap/mixins/visually-hidden
+@mixin undo-visually-hidden {
+    width: auto !important;
+    height: auto !important;
+    margin: auto !important;
+    overflow: auto !important;
+    clip: auto !important;
+    white-space: normal !important;
+
+    &:not(caption) {
+        position: static !important;
+    }
 }

src/scss/mixins/_module.scss → src/scss/mixins/_wall-brick.scss

@@ -1,4 +1,4 @@
-@mixin module {
+@mixin wall-brick {
     &.is-xl {
         min-height: 20rem;
 

src/scss/molecules/_banner.scss

@@ -3,7 +3,7 @@
 $banner-padding: 1.875rem;
 
 .ml-banner {
-    @include module;
+    @include wall-brick;
 
     position: relative;
     background-color: $gray;
@@ -32,11 +32,12 @@ $banner-padding: 1.875rem;
     .banner-content {
         position: relative;
         width: 100%;
+        height: 100%;
         padding: $banner-padding;
         z-index: 3;
     }
 
-    .at-title {
+    .at-heading {
         margin-bottom: $spacer;
     }
 
@@ -45,7 +46,7 @@ $banner-padding: 1.875rem;
     }
 
     &.is-xl {
-        .at-title {
+        .at-heading {
             @include font-size($h1-font-size);
         }
 
@@ -57,19 +58,19 @@ $banner-padding: 1.875rem;
     }
 
     &.is-l {
-        .at-title {
+        .at-heading {
             @include font-size($h2-font-size);
         }
     }
 
     &.is-m {
-        .at-title {
+        .at-heading {
             @include font-size($h3-font-size);
         }
     }
 
     &.is-s {
-        .at-title {
+        .at-heading {
             @include font-size($h4-font-size);
         }
     }

src/scss/molecules/_pagination.scss

@@ -1,5 +1,5 @@
 @import "bootstrap/scss/pagination";
 
 .ml-pagination {
-
+    @extend .pagination;
 }

src/scss/molecules/_summary.scss

@@ -6,7 +6,7 @@
         margin-bottom: map-get($spacers, 1);
     }
 
-    .at-title {
+    .at-heading {
         @include font-size($h4-font-size);
         margin-bottom: map-get($spacers, 1);
     }

src/scss/organisms/_modules-container.scss → src/scss/organisms/_wall.scss

@@ -1,11 +1,13 @@
-.org-modules-container {
+.org-wall {
+    --#{$prefix}wall-gap: #{$wall-gap};
+
     > * {
-        margin-bottom: $grid-gutter-width;
+        margin-bottom: var(--#{$prefix}wall-gap);
     }
 
     @include media-breakpoint-up(md) {
         display: grid;
-        grid-gap: $grid-gutter-width;
+        grid-gap: var(--#{$prefix}wall-gap);
         grid-auto-flow: row;
         grid-template-columns: repeat(6, 1fr);
 
@@ -21,6 +23,16 @@
 
     // Modifiers
 
+    &.has-no-gap {
+        > * {
+            margin-bottom: 0;
+        }
+
+        @include media-breakpoint-up(md) {
+            grid-gap: 0;
+        }
+    }
+
     &.is-half {
         @include media-breakpoint-up(lg) {
             grid-template-columns: repeat(6, 1fr);

src/scss/style.scss

@@ -34,7 +34,8 @@
 @import "organisms/site-footer";
 @import "organisms/tabs";
 @import "organisms/tier";
-@import "organisms/modules-container";
-
+@import "organisms/wall";
 
 // Templates
+@import "templates/center-body";
+@import "templates/grid";

src/scss/templates/_center-body.scss

@@ -0,0 +1,16 @@
+.tpl-centered-body {
+    --max-width: 500px;
+    --margin-inline: 2rem;
+    --margin-block: 2rem;
+
+    .centered-body-wrapper {
+        box-sizing: border-box;
+        min-height: calc(100lvh - var(--margin-block) * 2);
+        margin-block: var(--margin-block);
+        margin-inline: var(--margin-inline);
+        display: grid;
+        grid-template-columns: minmax(0, var(--max-width));
+        justify-content: center;
+        align-content: center;
+    }
+}

src/scss/templates/_grid.scss

@@ -0,0 +1,18 @@
+.tpl-grid {
+    --column-gap: 1em;
+    --row-gap: 1em;
+    --item-min-width: 100px;
+    --item-max-width: 1fr;
+
+    .grid-wrapper {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--item-min-width)), var(--item-max-width)));
+        column-gap: var(--column-gap);
+        row-gap: var(--row-gap);
+
+        &:where(ul, ol) {
+            list-style-type: ""; /* Remove list style without removing the role=list in Safari */
+            padding-left: 0;
+        }
+    }
+}

src/scss/utilities/_init.scss

@@ -11,7 +11,5 @@
 
 // Project mixins
 @import "../mixins/generic";
-@import "../mixins/title";
-@import "../mixins/text";
 @import "../mixins/buttons";
-@import "../mixins/module";
+@import "../mixins/wall-brick";

src/scss/utilities/variables/_components.scss

@@ -0,0 +1,25 @@
+// Define common padding and border radius sizes and more.
+
+$border-width: 1px !default;
+$border-widths: (
+        1: 1px,
+        2: 2px,
+        3: 3px,
+        4: 4px,
+        5: 5px
+) !default;
+$border-style: solid !default;
+$border-color: $gray-400 !default;
+
+$border-radius: 0 !default;
+
+$breadcrumb-separator: '/' !default;
+
+$aspect-ratios: (
+        "1x1": 100%,
+        "4x3": calc(3 / 4 * 100%),
+        "16x9": calc(9 / 16 * 100%),
+        "21x9": calc(9 / 21 * 100%)
+) !default;
+
+$wall-gap: $grid-gutter-width !default;

src/scss/utilities/variables/_main.scss

@@ -155,32 +155,6 @@ $grid-row-columns: 6 !default;
 
 $container-padding-x: $grid-gutter-width !default;
 
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$border-width: 1px !default;
-$border-widths: (
-        1: 1px,
-        2: 2px,
-        3: 3px,
-        4: 4px,
-        5: 5px
-) !default;
-$border-style: solid !default;
-$border-color: $gray-400 !default;
-
-$border-radius: 0 !default;
-
-$breadcrumb-separator: '/' !default;
-
-$aspect-ratios: (
-        "1x1": 100%,
-        "4x3": calc(3 / 4 * 100%),
-        "16x9": calc(9 / 16 * 100%),
-        "21x9": calc(9 / 21 * 100%)
-) !default;
-
 @import "typography";
-@import "forms";
+@import "forms";
+@import "components";