grid-justify+display

src/styles/README.md

@@ -23,33 +23,18 @@ This grid system is a lightweight alternative to Bootstrap's grid, providing ess
 
 ## Mixins
 
-### `media-breakpoint-up($breakpoint)`
+- `media-breakpoint-{up|down}($breakpoint)` - Applies styles at a minimum or maximum width of the specified breakpoint
+- `media-breakpoint-between($lower, $upper)` - Applies styles between two breakpoints.
 
-Applies styles at a minimum width of the specified breakpoint.
+### Justify Content
+- `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`
 
-### `media-breakpoint-down($breakpoint)`
+### Display
+- `.d-{breakpoint}-{none|inline|inline-block|block|table|table-row|table-cell|flex|inline-flex}`
+- `.d-print-{none|inline|inline-block|block|table|table-row|table-cell|flex|inline-flex}`
 
-Applies styles at a maximum width of the specified breakpoint.
+`{breakpoint}` can be `xs`, `sm`, `md`, `lg`, `xl` or `xxl`.
 
-### `media-breakpoint-between($lower, $upper)`
-
-Applies styles between two breakpoints.
-
-### `make-container($max-widths, $gutter)`
-
-Creates a container with specified maximum widths and gutter.
-
-### `make-row($gutter)`
-
-Creates a flexbox row with specified gutter.
-
-### `make-col($size, $columns)`
-
-Defines a column with a specific size and total number of columns.
-
-### `make-col-offset($size, $columns)`
-
-Offsets a column by a specific size.
 
 ### `row-cols($count)`
 
@@ -63,3 +48,5 @@ You can customize the grid system by modifying the variables in `_globals.scss`:
 - **`$grid-gutter-width`**: Width of the gutter between columns.
 - **`$grid-breakpoints`**: Map of breakpoints for responsive design.
 - **`$container-max-widths`**: Maximum widths for containers at each breakpoint.
+- **`$container-padding-x`**: Padding for containers.
+- **`$prefix`**: Prefix for classes.

src/styles/_grid.scss

@@ -1,5 +1,8 @@
 @import 'vars';
 
+// Определяем $displays в начале файла
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex;
+
 // Миксин для media-breakpoint-up
 @mixin media-breakpoint-up($breakpoint, $breakpoints: $grid-breakpoints) {
   $min-width: map-get($breakpoints, $breakpoint);
@@ -43,14 +46,16 @@
 // Миксин make-container
 @mixin make-container($max-widths: $container-max-widths, $gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: $gutter;
+  padding-right: $container-padding-x;
-  padding-left: $gutter;
+  padding-left: $container-padding-x;
   margin-right: auto;
   margin-left: auto;
 
   @each $breakpoint, $max-width in $max-widths {
     @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      max-width: #{$max-width};
+      @if $max-width {
+        max-width: $max-width;
+      }
     }
   }
 }
@@ -112,16 +117,21 @@
 
 // Миксин make-grid-columns
 @mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint, $value in $breakpoints {
+  @each $breakpoint in map-keys($breakpoints) {
     $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Добавляем класс col-auto
+      .#{$prefix}col#{$infix}-auto {
+        @include make-col-auto();
+      }
+
       @for $i from 1 through $columns {
-        .col#{$infix}-#{$i} {
+        .#{$prefix}col#{$infix}-#{$i} {
           @include make-col($i, $columns);
         }
 
-        .offset#{$infix}-#{$i} {
+        .#{$prefix}offset#{$infix}-#{$i} {
           @include make-col-offset($i, $columns);
         }
       }
@@ -129,6 +139,49 @@
   }
 }
 
+// Добавляем функцию breakpoint-infix
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(map-get($breakpoints, $name) == null, "", "-#{$name}");
+}
+
+// Обновляем миксин make-justify-content
+@mixin make-justify-content($breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+      .#{$prefix}justify-content#{$infix}-start   { justify-content: flex-start !important; }
+      .#{$prefix}justify-content#{$infix}-end     { justify-content: flex-end !important; }
+      .#{$prefix}justify-content#{$infix}-center  { justify-content: center !important; }
+      .#{$prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
+      .#{$prefix}justify-content#{$infix}-around  { justify-content: space-around !important; }
+      .#{$prefix}justify-content#{$infix}-evenly  { justify-content: space-evenly !important; }
+    }
+  }
+}
+
+// Обновляем миксин make-display-classes
+@mixin make-display-classes($breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+      @each $value in $displays {
+        .#{$prefix}d#{$infix}-#{$value} { display: $value !important; }
+      }
+    }
+  }
+}
+
+// Дополнительный миксин для классов d-print-*
+@mixin make-print-display-classes() {
+  @media print {
+    @each $value in $displays {
+      .#{$prefix}d-print-#{$value} { display: $value !important; }
+    }
+  }
+}
+
 // Генерация классов контейнера и ряда
 .container,
 .container-fluid {
@@ -143,5 +196,7 @@
   }
 }
 
-// Генерация классов столбцов и смещений
 @include make-grid-columns($grid-columns, $grid-breakpoints);
+@include make-display-classes();
+@include make-print-display-classes();
+@include make-justify-content();