richie-education 2.30.0 → 2.30.1-dev1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.30.0",
+  "version": "2.30.1-dev1",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {

package/scss/components/templates/richie/section/_section.scss

@@ -1,3 +1,6 @@
+$r-section-grid-sizes: () !default;
+$r-section-grid-gutters: () !default;
+
 section {
   // Ensure caesura always takes full width with some space around
   // within flex grid
@@ -70,6 +73,9 @@ section {
       }
     }
   }
+
+  // Enable CSS grid
+  @include m-o-grid($r-section-grid-sizes, $r-section-grid-gutters);
 }
 
 //
@@ -127,6 +133,9 @@ section {
     }
   }
 
+  // Enable CSS grid
+  @include m-o-grid($r-section-grid-sizes, $r-section-grid-gutters);
+
   .category-glimpse {
     @include sv-flex(1, 0, calc(15% - 1rem));
     max-width: none;

package/scss/settings/_variables.scss

@@ -165,3 +165,20 @@ $r-search-filters-gutter: 0.2rem !default;
 $r-ease-in: cubic-bezier(0.5, 0, 0.75, 0) !default;
 $r-ease-out: cubic-bezier(0.25, 1, 0.5, 1) !default;
 $r-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1) !default;
+
+// Define the grid column template for Section grid
+// Each item will be a variant to allow on grid
+$r-section-grid-sizes: (
+  '50x50': 1fr 1fr,
+  '33x33x33': 1fr 1fr 1fr,
+  '25x75': 25% 2fr,
+  '75x25': 2fr 25%,
+);
+
+// Define gutter size to apply on Section grid
+// Each item is a breakpoint where to apply the gutter, breakpoint 'sm' is used as
+// the default gutter size for minimal breakpoint if defined
+$r-section-grid-gutters: (
+  'sm': 0.5rem,
+  'xl': 1rem,
+);

package/scss/tools/_grids.scss

@@ -0,0 +1,50 @@
+// Basic CSS grid
+
+// Define CSS grid rules for content
+@mixin m-o-grid($grid-sizes, $grid-gutters) {
+  // CSS grid definition
+  &__grid {
+    display: grid;
+    grid-template-columns: 100%;
+
+    // Neutralize and adapt some rules that for content items that can define some
+    // rules which conflict with expected section grid behaviors
+    & > * {
+      min-width: auto !important;
+      max-width: none !important;
+    }
+
+    // Adjust button caesura
+    & > .button-caesura {
+      display: block;
+    }
+
+    // Enable column size only for large screen and up
+    @include media-breakpoint-up(lg) {
+      @each $key, $value in $r-section-grid-sizes {
+        &--#{$key} {
+          grid-template-columns: $value;
+        }
+      }
+    }
+
+    // Variants with a gutter between content items
+    &--with-gutter {
+      @if map-get($r-section-grid-gutters, 'sm') {
+        column-gap: map-get($r-section-grid-gutters, 'sm');
+        row-gap: map-get($r-section-grid-gutters, 'sm');
+      }
+      @each $key, $value in $r-section-grid-gutters {
+        @include media-breakpoint-up($key) {
+          column-gap: $value;
+          row-gap: $value;
+        }
+      }
+
+      // Disable contents margin in profit of grid gutter
+      & > * {
+        margin: 0 !important;
+      }
+    }
+  }
+}

package/scss/tools/_index.scss

@@ -7,6 +7,7 @@
 @import './empty';
 @import './features';
 @import './flexbox';
+@import './grids';
 @import './hero';
 @import './keyframes';
 @import './list-group';