@progress/kendo-theme-utils 8.2.0 → 9.0.0-dev.0

package/scss/flex-grid/_align-items.scss

@@ -70,10 +70,16 @@
 /// @group align-items
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-align-items"));
+
 @mixin kendo-utils--flex-grid--align-items() {
+    @include module-render("utils-flex-grid-align-items") {
 
-    // Align items utility classes
-    $kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
-    @include generate-utils( align-items, align-items, $kendo-utils-align-items );
+        // Align items utility classes
+        $kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
+        @include generate-utils( align-items, align-items, $kendo-utils-align-items );
 
+    }
 }

package/scss/flex-grid/_align-self.scss

@@ -76,10 +76,16 @@
 /// @group align-self
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-align-self"));
+
 @mixin kendo-utils--flex-grid--align-self() {
+    @include module-render("utils-flex-grid-align-self") {
 
-    // Align self utility classes
-    $kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
-    @include generate-utils( align-self, align-self, $kendo-utils-align-self );
+        // Align self utility classes
+        $kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
+        @include generate-utils( align-self, align-self, $kendo-utils-align-self );
 
+    }
 }

package/scss/flex-grid/_flex-basis.scss

@@ -10,11 +10,17 @@
 /// @group flex-basis
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-flex-basis"));
+
 @mixin kendo-utils--flex-grid--flex-basis() {
+    @include module-render("utils-flex-grid-flex-basis") {
 
-    // Flex basis utility classes
-    $kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
-    @include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
-    @include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
+        // Flex basis utility classes
+        $kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
+        @include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
+        @include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
 
+    }
 }

package/scss/flex-grid/_flex-direction.scss

@@ -22,15 +22,29 @@
 /// @group flex-direction
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-flex-direction"));
+
 @mixin kendo-utils--flex-grid--flex-direction() {
+    @include module-render("utils-flex-grid-flex-direction") {
 
-    // Flex direction utility classes
-    $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
-    @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
+        // Flex direction utility classes
+        $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+        @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
 
 
-    // Legacy aliases
-    .#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; }
-    .#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; }
+        // Legacy aliases
+        .#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; }
+        .#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; }
+
+    }
+}
+
+@mixin kendo-utils--flex-grid--flex-direction--responsive($key) {
+
+    // Flex direction responsive utility classes
+    $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+    @include generate-utils( flex-#{$key}, flex-direction, $kendo-utils-flex-direction, $important: false );
 
 }

package/scss/flex-grid/_flex-grow.scss

@@ -10,11 +10,17 @@
 /// @group flex-grow
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-flex-grow"));
+
 @mixin kendo-utils--flex-grid--flex-grow() {
+    @include module-render("utils-flex-grid-flex-grow") {
 
-    // Flex grow utility classes
-    $kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
-    @include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
-    @include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
+        // Flex grow utility classes
+        $kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
+        @include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
+        @include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
 
+    }
 }

package/scss/flex-grid/_flex-shrink.scss

@@ -10,11 +10,17 @@
 /// @group flex-shrink
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-flex-shrink"));
+
 @mixin kendo-utils--flex-grid--flex-shrink() {
+    @include module-render("utils-flex-grid-flex-shrink") {
 
-    // Flex shrink utility classes
-    $kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
-    @include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
-    @include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
+        // Flex shrink utility classes
+        $kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
+        @include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
+        @include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
 
+    }
 }

package/scss/flex-grid/_flex-wrap.scss

@@ -16,10 +16,16 @@
 /// @group flex-wrap
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-flex-wrap"));
+
 @mixin kendo-utils--flex-grid--flex-wrap() {
+    @include module-render("utils-flex-grid-flex-wrap") {
 
-    // Flex wrap utility classes
-    $kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
-    @include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
+        // Flex wrap utility classes
+        $kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
+        @include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
 
+    }
 }

package/scss/flex-grid/_flex.scss

@@ -22,10 +22,16 @@
 /// @group flex
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-flex"));
+
 @mixin kendo-utils--flex-grid--flex() {
+    @include module-render("utils-flex-grid-flex") {
 
-    // Flex utility classes
-    $kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
-    @include generate-utils( flex, flex, $kendo-utils-flex );
+        // Flex utility classes
+        $kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
+        @include generate-utils( flex, flex, $kendo-utils-flex );
 
+    }
 }

package/scss/flex-grid/_gap.scss

@@ -178,12 +178,28 @@
 /// @group gap
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-gap"));
+
 @mixin kendo-utils--flex-grid--gap() {
+    @include module-render("utils-flex-grid-gap") {
+
+        // Gap utility classes
+        $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
+        @include generate-utils( gap, gap, $kendo-utils-gap, $css-var: "spacing" );
+        @include generate-utils( gap-x, column-gap, $kendo-utils-gap, $css-var: "spacing" );
+        @include generate-utils( gap-y, row-gap, $kendo-utils-gap, $css-var: "spacing" );
+
+    }
+}
+
+@mixin kendo-utils--flex-grid--gap--responsive($key) {
 
-    // Gap utility classes
+    // Gap responsive utility classes
     $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
-    @include generate-utils( gap, gap, $kendo-utils-gap, $css-var: "spacing" );
-    @include generate-utils( gap-x, column-gap, $kendo-utils-gap, $css-var: "spacing" );
-    @include generate-utils( gap-y, row-gap, $kendo-utils-gap, $css-var: "spacing" );
+    @include generate-utils( gap-#{$key}, gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
+    @include generate-utils( gap-x-#{$key}, column-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
+    @include generate-utils( gap-y-#{$key}, row-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
 
 }

package/scss/flex-grid/_grid-auto-columns.scss

@@ -22,10 +22,16 @@
 /// @group grid-auto-columns
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-grid-auto-columns"));
+
 @mixin kendo-utils--flex-grid--grid-auto-columns() {
+    @include module-render("utils-flex-grid-grid-auto-columns") {
 
-    // Grid auto columns utility classes
-    $kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
-    @include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );
+        // Grid auto columns utility classes
+        $kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
+        @include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );
 
+    }
 }

package/scss/flex-grid/_grid-auto-flow.scss

@@ -34,10 +34,16 @@
 /// @group grid-auto-flow
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-grid-auto-flow"));
+
 @mixin kendo-utils--flex-grid--grid-auto-flow() {
+    @include module-render("utils-flex-grid-grid-auto-flow") {
 
-    // Grid auto flow utility classes
-    $kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
-    @include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );
+        // Grid auto flow utility classes
+        $kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
+        @include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );
 
+    }
 }

package/scss/flex-grid/_grid-auto-rows.scss

@@ -22,10 +22,16 @@
 /// @group grid-auto-rows
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-grid-auto-rows"));
+
 @mixin kendo-utils--flex-grid--grid-auto-rows() {
+    @include module-render("utils-flex-grid-grid-auto-rows") {
 
-    // Grid auto rows utility classes
-    $kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
-    @include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );
+        // Grid auto rows utility classes
+        $kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
+        @include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );
 
+    }
 }

package/scss/flex-grid/_grid-column-start-end.scss

@@ -16,26 +16,46 @@
 /// @group grid-column-start
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-grid-column-start-end"));
+
 @mixin kendo-utils--flex-grid--grid-column-start-end() {
+    @include module-render("utils-flex-grid-grid-column-start-end") {
+
+    // Grid column span utility classes
+    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
+    @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
 
     // Grid column start utility classes
     $kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
     @include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
 
-
     // Grid column end utility classes
     $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
     @include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
 
 
-    // Grid column span utility classes
-    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
-    @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
-
-
     // Legacy aliases
     @include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
     .#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; }
     .\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; }
 
+    }
+}
+
+@mixin kendo-utils--flex-grid--grid-column-start-end--responsive($key) {
+
+    // Grid column span responsive utility classes
+    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
+    @include generate-utils( col-span-#{$key}, grid-column, $kendo-utils-grid-column-span, $important: false );
+
+    // Grid column start responsive utility classes
+    $kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
+    @include generate-utils( col-start-#{$key}, grid-column-start, $kendo-utils-grid-column-start, $important: false );
+
+    // Grid column end responsive utility classes
+    $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
+    @include generate-utils( col-end-#{$key}, grid-column-end, $kendo-utils-grid-column-end, $important: false );
+
 }

package/scss/flex-grid/_grid-row-start-end.scss

@@ -16,26 +16,44 @@
 /// @group grid-row-start
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-grid-row-start-end"));
+
 @mixin kendo-utils--flex-grid--grid-row-start-end() {
+    @include module-render("utils-flex-grid-grid-row-start-end") {
 
-    // Grid row start/end utility classes
-    $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
-    @include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
+        // Grid row start/end utility classes
+        $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+        @include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
 
 
-    // Grid row start/end utility classes
-    $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
-    @include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
+        // Grid row start/end utility classes
+        $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+        @include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
+
+
+        // Grid row span utility classes
+        $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
+        @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
 
 
-    // Grid row span utility classes
-    $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
-    @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
+        // Legacy aliases
+        @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
+        .#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; }
+        .\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; }
 
+    }
+}
+
+@mixin kendo-utils--flex-grid--grid-row-start-end--responsive($key) {
 
-    // Legacy aliases
-    @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
-    .#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; }
-    .\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; }
+    // Grid row start responsive utility classes
+    $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+    @include generate-utils( row-start-#{$key}, grid-row-start, $kendo-utils-grid-row-start, $important: false );
+
+    // Grid row end responsive utility classes
+    $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+    @include generate-utils( row-end-#{$key}, grid-row-end, $kendo-utils-grid-row-end, $important: false );
 
 }

package/scss/flex-grid/_grid-template-columns.scss

@@ -16,10 +16,24 @@
 /// @group grid-template-columns
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-grid-template-columns"));
+
 @mixin kendo-utils--flex-grid--grid-template-columns() {
+    @include module-render("utils-flex-grid-grid-template-columns") {
+
+        // Grid template columns utility classes
+        $kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
+        @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
+
+    }
+}
+
+@mixin kendo-utils--flex-grid--grid-template-columns--responsive($key) {
 
-    // Grid template columns utility classes
+    // Grid template columns responsive utility classes
     $kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
-    @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
+    @include generate-utils( grid-cols-#{$key}, grid-template-columns, $kendo-utils-grid-template-columns, $important: false );
 
 }

package/scss/flex-grid/_grid-template-rows.scss

@@ -16,10 +16,16 @@
 /// @group grid-template-rows
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-grid-template-rows"));
+
 @mixin kendo-utils--flex-grid--grid-template-rows() {
+    @include module-render("utils-flex-grid-grid-template-rows") {
 
-    // Grid template rows utility classes
-    $kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
-    @include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
+        // Grid template rows utility classes
+        $kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
+        @include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
 
+    }
 }

package/scss/flex-grid/_justify-content.scss

@@ -76,15 +76,21 @@
 /// @group justify-content
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-justify-content"));
+
 @mixin kendo-utils--flex-grid--justify-content() {
+    @include module-render("utils-flex-grid-justify-content") {
 
-    // Justify content utility classes
-    $kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
-    @include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
+        // Justify content utility classes
+        $kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
+        @include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
 
 
-    // Custom justify-content classes
-    .#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
-    .\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // stylelint-disable-line declaration-no-important
+        // Custom justify-content classes
+        .#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
+        .\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // stylelint-disable-line declaration-no-important
 
+    }
 }

package/scss/flex-grid/_justify-items.scss

@@ -82,10 +82,16 @@
 /// @group justify-items
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-justify-items"));
+
 @mixin kendo-utils--flex-grid--justify-items() {
+    @include module-render("utils-flex-grid-justify-items") {
 
-    // Justify items utility classes
-    $kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
-    @include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
+        // Justify items utility classes
+        $kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
+        @include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
 
+    }
 }

package/scss/flex-grid/_justify-self.scss

@@ -76,10 +76,16 @@
 /// @group justify-self
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-justify-self"));
+
 @mixin kendo-utils--flex-grid--justify-self() {
+    @include module-render("utils-flex-grid-justify-self") {
 
-    // Justify self utility classes
-    $kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
-    @include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
+        // Justify self utility classes
+        $kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
+        @include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
 
+    }
 }

package/scss/flex-grid/_order.scss

@@ -22,10 +22,16 @@
 /// @group order
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-order"));
+
 @mixin kendo-utils--flex-grid--order() {
+    @include module-render("utils-flex-grid-order") {
 
-    // Order utility classes
-    $kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
-    @include generate-utils( order, order, $kendo-utils-order );
+        // Order utility classes
+        $kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
+        @include generate-utils( order, order, $kendo-utils-order );
 
+    }
 }

package/scss/flex-grid/_place-content.scss

@@ -76,10 +76,16 @@
 /// @group place-content
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-place-content"));
+
 @mixin kendo-utils--flex-grid--place-content() {
+    @include module-render("utils-flex-grid-place-content") {
 
-    // Place content utility classes
-    $kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
-    @include generate-utils( place-content, place-content, $kendo-utils-place-content );
+        // Place content utility classes
+        $kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
+        @include generate-utils( place-content, place-content, $kendo-utils-place-content );
 
+    }
 }

package/scss/flex-grid/_place-items.scss

@@ -58,10 +58,16 @@
 /// @group place-items
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-place-items"));
+
 @mixin kendo-utils--flex-grid--place-items() {
+    @include module-render("utils-flex-grid-place-items") {
 
-    // Place items utility classes
-    $kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
-    @include generate-utils( place-items, place-items, $kendo-utils-place-items );
+        // Place items utility classes
+        $kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
+        @include generate-utils( place-items, place-items, $kendo-utils-place-items );
 
+    }
 }

package/scss/flex-grid/_place-self.scss

@@ -64,10 +64,16 @@
 /// @group place-self
 /// @contextType css
 
+// Register
+@import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
+@include module-register((name: "utils-flex-grid-place-self"));
+
 @mixin kendo-utils--flex-grid--place-self() {
+    @include module-render("utils-flex-grid-place-self") {
 
-    // Place self utility classes
-    $kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
-    @include generate-utils( place-self, place-self, $kendo-utils-place-self );
+        // Place self utility classes
+        $kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
+        @include generate-utils( place-self, place-self, $kendo-utils-place-self );
 
+    }
 }

package/scss/flex-grid/index.import.scss

@@ -50,3 +50,11 @@
     @include kendo-utils--flex-grid--place-items();
     @include kendo-utils--flex-grid--place-self();
 }
+
+@mixin kendo-utils--flex-grid--responsive($key) {
+    @include kendo-utils--flex-grid--flex-direction--responsive($key);
+    @include kendo-utils--flex-grid--gap--responsive($key);
+    @include kendo-utils--flex-grid--grid-column-start-end--responsive($key);
+    @include kendo-utils--flex-grid--grid-row-start-end--responsive($key);
+    @include kendo-utils--flex-grid--grid-template-columns--responsive($key);
+}

package/scss/index.import.scss

@@ -4,6 +4,7 @@
 
 @import "./accessibility/index.import.scss";
 @import "./layout/index.import.scss";
+@import "./responsive-layout/index.import.scss";
 @import "./flex-grid/index.import.scss";
 @import "./spacing/index.import.scss";
 @import "./sizing/index.import.scss";
@@ -25,6 +26,7 @@
 @mixin kendo-utils() {
     @include kendo-utils--accessibility();
     @include kendo-utils--layout();
+    @include kendo-utils--responsive-layout();
     @include kendo-utils--flex-grid();
     @include kendo-utils--spacing();
     @include kendo-utils--sizing();
@@ -39,4 +41,13 @@
     @include kendo-utils--svg();
 
     @include kendo-utils--elevation();
+
+    // Responsive utils
+    @each $key, $val in $kendo-breakpoints {
+        @include kendo-breakpoint-up($key) {
+            @include kendo-utils--layout--responsive($key);
+            @include kendo-utils--flex-grid--responsive($key);
+            @include kendo-utils--spacing--responsive($key);
+        }
+    }
 }