zenkit-css 1.0.0

package/scss/layout/_container.scss

@@ -0,0 +1,71 @@
+// ========================================
+// ZenKit - Container
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Container Base
+// ----------------------------------------
+.container {
+  @include make-container;
+
+  @each $breakpoint, $max-width in $container-max-widths {
+    @include breakpoint-up($breakpoint) {
+      max-width: $max-width;
+    }
+  }
+}
+
+// Fluid container - full width with padding
+.container-fluid {
+  @include make-container;
+  max-width: 100%;
+}
+
+// Responsive containers - max-width at specific breakpoint
+@each $breakpoint, $max-width in $container-max-widths {
+  .container-#{$breakpoint} {
+    @include make-container;
+
+    @include breakpoint-up($breakpoint) {
+      max-width: $max-width;
+    }
+  }
+}
+
+// ----------------------------------------
+// Section
+// ----------------------------------------
+.section {
+  padding: var(--space-12) 0;
+
+  @include md {
+    padding: var(--space-16) 0;
+  }
+
+  @include lg {
+    padding: var(--space-20) 0;
+  }
+}
+
+.section-sm {
+  padding: var(--space-8) 0;
+
+  @include md {
+    padding: var(--space-10) 0;
+  }
+}
+
+.section-lg {
+  padding: var(--space-16) 0;
+
+  @include md {
+    padding: var(--space-20) 0;
+  }
+
+  @include lg {
+    padding: var(--space-24) 0;
+  }
+}

package/scss/layout/_grid.scss

@@ -0,0 +1,258 @@
+// ========================================
+// ZenKit - Grid System (12-column)
+// ========================================
+
+@use 'sass:math';
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Row
+// ----------------------------------------
+.row {
+  @include make-row;
+}
+
+// No gutters
+.row-no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+// ----------------------------------------
+// Columns Base
+// ----------------------------------------
+.col {
+  flex: 1 0 0%;
+  padding-right: calc($grid-gutter / 2);
+  padding-left: calc($grid-gutter / 2);
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+  padding-right: calc($grid-gutter / 2);
+  padding-left: calc($grid-gutter / 2);
+}
+
+// ----------------------------------------
+// Column Sizes (Default - Mobile First)
+// ----------------------------------------
+@for $i from 1 through $grid-columns {
+  .col-#{$i} {
+    @include make-col($i);
+  }
+}
+
+// ----------------------------------------
+// Responsive Columns
+// ----------------------------------------
+
+// Small (sm)
+@include sm {
+  .col-sm {
+    flex: 1 0 0%;
+    padding-right: calc($grid-gutter / 2);
+    padding-left: calc($grid-gutter / 2);
+  }
+
+  .col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+
+  @for $i from 1 through $grid-columns {
+    .col-sm-#{$i} {
+      @include make-col($i);
+    }
+  }
+}
+
+// Medium (md)
+@include md {
+  .col-md {
+    flex: 1 0 0%;
+    padding-right: calc($grid-gutter / 2);
+    padding-left: calc($grid-gutter / 2);
+  }
+
+  .col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+
+  @for $i from 1 through $grid-columns {
+    .col-md-#{$i} {
+      @include make-col($i);
+    }
+  }
+}
+
+// Large (lg)
+@include lg {
+  .col-lg {
+    flex: 1 0 0%;
+    padding-right: calc($grid-gutter / 2);
+    padding-left: calc($grid-gutter / 2);
+  }
+
+  .col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+
+  @for $i from 1 through $grid-columns {
+    .col-lg-#{$i} {
+      @include make-col($i);
+    }
+  }
+}
+
+// Extra Large (xl)
+@include xl {
+  .col-xl {
+    flex: 1 0 0%;
+    padding-right: calc($grid-gutter / 2);
+    padding-left: calc($grid-gutter / 2);
+  }
+
+  .col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+
+  @for $i from 1 through $grid-columns {
+    .col-xl-#{$i} {
+      @include make-col($i);
+    }
+  }
+}
+
+// 2XL
+@include xxl {
+  .col-2xl {
+    flex: 1 0 0%;
+    padding-right: calc($grid-gutter / 2);
+    padding-left: calc($grid-gutter / 2);
+  }
+
+  .col-2xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+
+  @for $i from 1 through $grid-columns {
+    .col-2xl-#{$i} {
+      @include make-col($i);
+    }
+  }
+}
+
+// ----------------------------------------
+// Offset Classes
+// ----------------------------------------
+@for $i from 0 through ($grid-columns - 1) {
+  .offset-#{$i} {
+    margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+  }
+}
+
+@include sm {
+  @for $i from 0 through ($grid-columns - 1) {
+    .offset-sm-#{$i} {
+      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+    }
+  }
+}
+
+@include md {
+  @for $i from 0 through ($grid-columns - 1) {
+    .offset-md-#{$i} {
+      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+    }
+  }
+}
+
+@include lg {
+  @for $i from 0 through ($grid-columns - 1) {
+    .offset-lg-#{$i} {
+      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+    }
+  }
+}
+
+@include xl {
+  @for $i from 0 through ($grid-columns - 1) {
+    .offset-xl-#{$i} {
+      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+    }
+  }
+}
+
+// ----------------------------------------
+// Order Classes
+// ----------------------------------------
+.order-first {
+  order: -1;
+}
+
+.order-last {
+  order: $grid-columns + 1;
+}
+
+@for $i from 0 through $grid-columns {
+  .order-#{$i} {
+    order: $i;
+  }
+}
+
+@include sm {
+  .order-sm-first { order: -1; }
+  .order-sm-last { order: $grid-columns + 1; }
+
+  @for $i from 0 through $grid-columns {
+    .order-sm-#{$i} { order: $i; }
+  }
+}
+
+@include md {
+  .order-md-first { order: -1; }
+  .order-md-last { order: $grid-columns + 1; }
+
+  @for $i from 0 through $grid-columns {
+    .order-md-#{$i} { order: $i; }
+  }
+}
+
+@include lg {
+  .order-lg-first { order: -1; }
+  .order-lg-last { order: $grid-columns + 1; }
+
+  @for $i from 0 through $grid-columns {
+    .order-lg-#{$i} { order: $i; }
+  }
+}
+
+// ----------------------------------------
+// Gap Utilities for Row
+// ----------------------------------------
+.row-gap-0 { row-gap: 0; }
+.row-gap-1 { row-gap: var(--space-1); }
+.row-gap-2 { row-gap: var(--space-2); }
+.row-gap-3 { row-gap: var(--space-3); }
+.row-gap-4 { row-gap: var(--space-4); }
+.row-gap-5 { row-gap: var(--space-5); }
+.row-gap-6 { row-gap: var(--space-6); }
+.row-gap-8 { row-gap: var(--space-8); }