4.0 dev relative sizes

templates/cassiopeia/scss/_variables.scss

@@ -79,7 +79,7 @@ $cassiopeia-toolbar-line-height:         1.8rem;
 // Fonts
 $font-family-base:                   "Fira Sans", Arial, sans-serif;
 $cassiopeia-inverted-text-color:     $cassiopeia-template-color;
-$font-size-root:                     14px;
+$font-size-root:                     1em;
 $h1-font-size:                       1.857rem;
 $h2-font-size:                       1.571rem;
 $h3-font-size:                       1.286rem;
@@ -161,8 +161,36 @@ $modal-header-height:                46px;
 // Badges
 $badge-default-bg:                   #5e7082;
 
-// Gutter
-$grid-gutter-width:                  15px !default;
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+// Bootstrap 4 is set in PX. Cassiopeia uses relative sizes
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 36em,
+  md: 48em,
+  lg: 62em,
+  xl: 75em
+);
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 33.75em,
+  md: 45em,
+  lg: 60em,
+  xl: 71.25em
+);
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-gutter-width:                  1em !default;
 $cassiopeia-grid-gutter:             $grid-gutter-width;
 
 // Z-Index list

templates/cassiopeia/scss/blocks/_alerts.scss

@@ -1,7 +1,6 @@
 // Alerts
 
 .j-main-container {
-
   .alert {
     margin: 10px;
   }

templates/cassiopeia/scss/blocks/_css-grid.scss

@@ -14,7 +14,7 @@
       ". bot-b bot-b bot-b bot-b ."
       ". footer footer footer footer ."
       ". debug debug debug debug .";
-    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
+    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 16.875rem)) [main-end] minmax(0, 1fr) [full-end];
     grid-gap: 0 $cassiopeia-grid-gutter;
 
     > [class^="container-"],

templates/cassiopeia/scss/blocks/_demo-styling.scss

@@ -6,12 +6,12 @@ $inverted-color: rgba(255, 255, 255, .9);
   text-align: center;
 
   .demo-title {
-    font-size: 20px;
+    font-size: $h2-font-size;
     color: theme-color("primary");
   }
 
   .fa-joomla {
-    font-size: 32px;
+    font-size: $h1-font-size;
     color: theme-color("primary");
   }
 

templates/cassiopeia/scss/blocks/_form.scss

@@ -5,11 +5,11 @@
   background-color: $white-offset;
 
   &.input-xlarge {
-    max-width: 350px;
+    max-width: 21.875rem;
   }
 
   &.input-xxlarge {
-    max-width: 550px;
+    max-width: 34.375rem;
   }
 
   &.input-full {
@@ -19,7 +19,7 @@
 }
 
 .spacer hr {
-  width: 380px;
+  width: 23.75rem;
 }
 
 .custom-select {

templates/cassiopeia/scss/blocks/_header.scss

@@ -14,7 +14,7 @@
 
   header {
     width: 100%;
-    max-width: 1155px;
+    max-width: 72.1875rem;
     padding: 0 ($cassiopeia-grid-gutter / 2);
     margin: 0 auto;
 
@@ -43,8 +43,8 @@
     }
 
     img {
-      width: 290px;
-      min-width: 290px;
+      width: 18rem;
+      min-width: 18rem;
     }
 
     a {

templates/cassiopeia/scss/blocks/_layout.scss

@@ -3,7 +3,8 @@
 .grid-child {
   display: flex;
   width: 100%;
-  max-width: 1080px + ($cassiopeia-grid-gutter * 4);
+  //max-width: $cassiopeia-grid-max-width + ($cassiopeia-grid-gutter * 4);
+  max-width: max-width(xl);
   margin-right: auto;
   margin-left: auto;
 }
@@ -21,10 +22,6 @@
   }
 }
 
-header {
-  margin-bottom: 10px;
-}
-
 .container-banner {
   display: block;
   margin: 0 0 2rem;

templates/cassiopeia/scss/template.scss

@@ -5,8 +5,8 @@
 // Variables
 @import "variables";
 
-// Mixins
-@import "mixin";
+// Tools
+@import "tools/tools";
 
 // Bootstrap
 @import "../../../media/vendor/bootstrap/scss/variables";

templates/cassiopeia/scss/tools/_tools.scss

@@ -0,0 +1,6 @@
+
+// Functions
+@import "functions/max-width";
+
+// Mixins
+@import "mixins/margin";

templates/cassiopeia/scss/tools/functions/_max-width.scss

@@ -0,0 +1,4 @@
+// Retrieve the max-width
+@function max-width($key: "md") {
+  @return map-get($container-max-widths, $key);
+}

templates/cassiopeia/scss/vendor/choicesjs/choices.scss

@@ -3,8 +3,8 @@
 // Cassiopea Variables
 @import "../../variables";
 
-// Mixins
-@import "../../mixin";
+// Tools
+@import "../../tools/tools";
 
 @import "../../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../../media/vendor/bootstrap/scss/mixins";