maverick-wave 4.6.0 → 4.8.0

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "maverick-wave",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "config": {
-    "version_short": "4.6"
+    "version_short": "4.8"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",
   "style": "src/scss/main.scss",
   "scripts": {
     "clean": "gulp clean",
-    "format": "prettier --write \"**/*.{scss,js,json,html,md}\"",
-    "format:check": "prettier --check \"**/*.{scss,js,json,html,md}\"",
+    "format": "prettier --check \"**/*.{scss,js,json,html,md}\"",
+    "format:fix": "prettier --write \"**/*.{scss,js,json,html,md}\"",
     "showcase": "http-server -c-1 -p 8888 dist",
     "start": "gulp",
     "build": "gulp clean && gulp build",
@@ -38,9 +38,9 @@
   ],
   "devDependencies": {
     "autoprefixer": "^10.4.21",
+    "cssnano": "^8.0.7",
     "del": "^8.0.1",
     "gulp": "^5.0.0",
-    "gulp-clean-css": "^4.3.0",
     "gulp-file-include": "^2.3.0",
     "gulp-postcss": "^10.0.0",
     "gulp-rename": "^2.1.0",

package/src/partials/cards-container.html

@@ -390,7 +390,8 @@
 
 <h3 class="mw-mb-4 mw-mt-6">Additional Cards</h3>
 <p class="mw-text-muted">
-  You can also use badges or ribbons on top of a card.
+  You can also use badges or ribbons on top of a card, or wrap the one card that
+  should stand out in a feature frame.
 </p>
 
 <div class="mw-grid-1">
@@ -553,4 +554,84 @@
       </div>
     </div>
   </div>
+  <!-- Feature frame column -->
+  <div class="mw-p-2">
+    <h3 class="mw-card-title mw-mb-10">Feature Frame</h3>
+    <div class="mw-grid-3-lg">
+      <div class="mw-card">
+        <div class="mw-card-body">
+          <h3 class="mw-card-title">Starter</h3>
+          <hr class="mw-card-title-divider" />
+          <p class="mw-card-text">The basics to get going, billed monthly.</p>
+          <div class="mw-card-footer">
+            <button type="button" class="mw-btn mw-btn-outline">Choose</button>
+          </div>
+        </div>
+      </div>
+      <div class="mw-card-feature">
+        <p class="mw-card-feature-label">Most booked</p>
+        <div class="mw-card">
+          <div class="mw-card-body">
+            <h3 class="mw-card-title">Standard</h3>
+            <hr class="mw-card-title-divider" />
+            <p class="mw-card-text">
+              Everything from Starter plus the features most people ask for.
+            </p>
+            <div class="mw-card-footer">
+              <button type="button" class="mw-btn mw-btn-primary">
+                Choose
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mw-card">
+        <div class="mw-card-body">
+          <h3 class="mw-card-title">Premium</h3>
+          <hr class="mw-card-title-divider" />
+          <p class="mw-card-text">
+            The full set, with priority support on top.
+          </p>
+          <div class="mw-card-footer">
+            <button type="button" class="mw-btn mw-btn-outline">Choose</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="mw-text-muted mw-mt-6">
+      The frame is primary by default, secondary and info are one class away.
+    </p>
+    <div class="mw-grid-3-lg mw-mt-10">
+      <div class="mw-card-feature">
+        <p class="mw-card-feature-label">Primary</p>
+        <div class="mw-card">
+          <div class="mw-card-body">
+            <h3 class="mw-card-title">Standard</h3>
+            <hr class="mw-card-title-divider" />
+            <p class="mw-card-text">The one most people end up picking.</p>
+          </div>
+        </div>
+      </div>
+      <div class="mw-card-feature mw-card-feature-secondary">
+        <p class="mw-card-feature-label">Secondary</p>
+        <div class="mw-card">
+          <div class="mw-card-body">
+            <h3 class="mw-card-title">Team</h3>
+            <hr class="mw-card-title-divider" />
+            <p class="mw-card-text">Seats for everyone, billed per head.</p>
+          </div>
+        </div>
+      </div>
+      <div class="mw-card-feature mw-card-feature-info">
+        <p class="mw-card-feature-label">Info</p>
+        <div class="mw-card">
+          <div class="mw-card-body">
+            <h3 class="mw-card-title">Trial</h3>
+            <hr class="mw-card-title-divider" />
+            <p class="mw-card-text">Free for 30 days, no card needed.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

package/src/partials/tables-container.html

@@ -5,43 +5,46 @@
     <h4 class="mw-mb-2">Basic Table</h4>
     <p class="mw-text-muted">
       This is the basic table that supports all functions except the complete
-      responsive feeling with the cards
+      responsive feeling with the cards - five columns do not fit a phone, so it
+      sits in a <code>mw-table-responsive</code> wrapper
     </p>
 
-    <table class="mw-table">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Name</th>
-          <th>Position</th>
-          <th>Location</th>
-          <th class="mw-text-currency">Budget</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>John Doe</td>
-          <td>Developer</td>
-          <td>New York</td>
-          <td class="mw-text-currency">1,204.50</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>Jane Smith</td>
-          <td>Designer</td>
-          <td>London</td>
-          <td class="mw-text-currency">87.00</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Bob Johnson</td>
-          <td>Manager</td>
-          <td>Berlin</td>
-          <td class="mw-text-currency">15,930.25</td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="mw-table-responsive">
+      <table class="mw-table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Name</th>
+            <th>Position</th>
+            <th>Location</th>
+            <th class="mw-text-currency">Budget</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>John Doe</td>
+            <td>Developer</td>
+            <td>New York</td>
+            <td class="mw-text-currency">1,204.50</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jane Smith</td>
+            <td>Designer</td>
+            <td>London</td>
+            <td class="mw-text-currency">87.00</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Bob Johnson</td>
+            <td>Manager</td>
+            <td>Berlin</td>
+            <td class="mw-text-currency">15,930.25</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
     <p class="mw-text-muted mw-mt-3">
       The <strong>Budget</strong> column uses
       <strong>mw-text-currency</strong> - right-aligned with tabular, lining

package/src/scss/base/_base.scss

@@ -51,11 +51,27 @@ $_active-prefix: 'dark';
   // Layout knobs. A good default is not enough here: what reads as generous on
   // a landing page costs visible content in an application with a sticky
   // header. Same framework, two different right answers.
-  --mw-container-width: min(1200px, 89%);
-  // Below 'sm' the percentage turns into wasted margin - 89% of a 375px screen
-  // leaves 41px of nothing on a card that has to fit amount, status and two
-  // labels into one row. A fixed gutter uses the width instead.
-  --mw-container-width-sm: calc(100% - #{spacing('5')} * 2);
+  //
+  // The page gutter is fluid rather than stepped. A plain percentage keeps too
+  // little on a phone and throws away too much on a desktop; a fixed gutter
+  // does the reverse - Bootstrap ships 12px at every width, Bulma 32px, and
+  // Material asks for 16dp on a phone and more as the screen grows. The ramp
+  // below lands on ~24px at 375px, ~32px at 576px, ~40px on a tablet and tops
+  // out at 64px, where the 1200px cap takes over. Stepping it at a breakpoint
+  // instead would make the container jump *backwards* at the step, because the
+  // gutter grows faster there than the viewport does.
+  //
+  // max() against the safe-area insets, so a notched phone in landscape pushes
+  // the content clear of the cutout instead of running underneath it.
+  --mw-container-gutter: max(
+    clamp(1rem, 4.2vw + 0.5rem, 4rem),
+    env(safe-area-inset-left, 0px),
+    env(safe-area-inset-right, 0px)
+  );
+  --mw-container-width: min(
+    1200px,
+    calc(100% - 2 * var(--mw-container-gutter))
+  );
   --mw-section-padding-block: #{spacing('7')};
 
   // Active theme - aliases onto the dark or light set above

package/src/scss/base/_reset.scss

@@ -10,7 +10,7 @@
 
 html {
   scroll-behavior: smooth;
-  min-width: 375px;
+  min-width: 320px;
   // Keeps anchor targets clear of the fixed header, plus a bit of breathing room
   scroll-padding-top: calc(var(--mw-header-height) + #{spacing('4')});
   -webkit-text-size-adjust: 100%;

package/src/scss/base/_typography.scss

@@ -27,9 +27,16 @@ h6 {
   font-weight: font-weight('bold');
 }
 
+// Two steps, not one. With the single jump at 576px, everything between there
+// and a tablet kept the full desktop headline - 3rem of h1 across a 690px
+// column is a third of the screen before the first line of copy.
 h1 {
   font-size: font-size('5xl');
 
+  @include media-down('md') {
+    font-size: font-size('4xl');
+  }
+
   @include media-down('sm') {
     font-size: font-size('3xl');
   }
@@ -38,6 +45,10 @@ h1 {
 h2 {
   font-size: font-size('4xl');
 
+  @include media-down('md') {
+    font-size: font-size('3xl');
+  }
+
   @include media-down('sm') {
     font-size: font-size('2xl');
   }

package/src/scss/components/_blog-post.scss

@@ -1,6 +1,7 @@
 @use '../abstracts' as *;
 
 .mw-blog-post {
+  position: relative;
   margin: spacing('2');
   padding: spacing('4') spacing('7');
   animation: pageReveal 1.6s ease-out forwards;
@@ -22,6 +23,11 @@
     }
   }
 
+  @include media-down('sm') {
+    margin: spacing('1');
+    padding: spacing('4') spacing('5');
+  }
+
   // Book-like left border
   &::before {
     content: '';
@@ -48,7 +54,8 @@
       position: absolute;
       bottom: spacing('-2');
       left: spacing('0');
-      width: 200px;
+      // Never wider than the title it underlines
+      width: min(200px, 100%);
       height: 5px;
       background: var(--mw-primary-text-color);
     }

package/src/scss/components/_cards.scss

@@ -1,5 +1,8 @@
 @use '../abstracts' as *;
 
+// Card width at which the footer stops being a row
+$_mw-card-narrow: 360px;
+
 $_mw-card-addon-colors: (
   primary: var(--mw-primary-color),
   secondary: var(--mw-secondary-color),
@@ -43,6 +46,19 @@ $_mw-card-addon-colors: (
     overflow: hidden;
   }
 
+  // Query container for the footer below. Named, so the query cannot resolve to
+  // a project's own container further up the tree.
+  //
+  // Only cards that have a footer, and they claim their slot: inline-size
+  // containment computes the card's own width as if it were empty, so a card
+  // that takes its width from its content - a flex row, `mw-grid-stack`, a
+  // timeline wrapper - would collapse to its border. Filling the slot keeps the
+  // width external, which is what makes it queryable in the first place.
+  &:has(.mw-card-footer) {
+    width: 100%;
+    container: mw-card / inline-size;
+  }
+
   &:hover {
     transform: translateY(-2px);
     box-shadow: 0 7px 15px var(--mw-shadow);
@@ -120,13 +136,17 @@ $_mw-card-addon-colors: (
 
   &-lg {
     --mw-card-img-height: 340px;
+
+    @include media-down('sm') {
+      --mw-card-img-height: 260px;
+    }
   }
 
   &-xl {
     --mw-card-img-height: 480px;
 
     @include media-down('sm') {
-      --mw-card-img-height: 440px;
+      --mw-card-img-height: 340px;
     }
   }
 
@@ -191,6 +211,9 @@ $_mw-card-addon-colors: (
     // centered, so plain text next to a button sits on the button's centre
     // line instead of being stretched to its height and starting at the top
     align-items: center;
+    // Buttons do not shrink, so two that no longer fit have to wrap - without
+    // this they leave the card sideways
+    flex-wrap: wrap;
     gap: spacing('3');
     flex-shrink: 0;
     text-wrap: balance;
@@ -206,11 +229,27 @@ $_mw-card-addon-colors: (
       flex-shrink: 0;
     }
 
-    @include media-down('lg') {
+    // Stacked once the card is narrow, not once the window is - a card in a
+    // three-column grid on a wide desktop is as narrow as the same card on a
+    // phone and used to keep its actions in a cramped row anyway.
+    @container mw-card (max-width: #{$_mw-card-narrow}) {
       flex-direction: column;
       align-items: stretch;
       gap: spacing('2');
 
+      // `flex: 1 0 100%` on the note is 100% of the *height* in a column: it
+      // fills the column and the buttons wrap out of the card sideways
+      &:has(.mw-actions-note),
+      &:has(.mw-form-actions-hint) {
+        flex-wrap: nowrap;
+      }
+
+      .mw-actions-note,
+      .mw-form-actions-hint {
+        flex: 0 0 auto;
+        text-align: left;
+      }
+
       > * {
         width: 100%;
       }
@@ -288,6 +327,77 @@ $_mw-card-addon-colors: (
   }
 }
 
+// Frame with a bar on top, wrapped around a card - for the one variant in a
+// grid that should stand out.
+//
+// `mw-card-badge` sits inside the card body and overlaps the title on narrow
+// cards. This one wraps around the card instead, and grows outwards: the card
+// keeps the width, height and look of its neighbours, frame and bar reach into
+// the grid gap.
+//
+//   <div class="mw-card-feature">
+//     <p class="mw-card-feature-label">Most booked</p>
+//     <div class="mw-card">…</div>
+//   </div>
+//
+// Primary out of the box, `mw-card-feature-secondary` and
+// `mw-card-feature-info` swap the colour.
+//
+// Geometry: 22px bar, 6px gap between frame and card, 1px border. The bar
+// height is fixed and the margins count on it - a two-line label needs the
+// margin and the padding raised with it. It is kept low on purpose: every
+// pixel of bar is a pixel the grid below has to add to its row gap.
+.mw-card-feature {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: -29px -7px -7px;
+  padding: 28px 6px 6px;
+  border: 1px solid var(--mw-primary-color);
+  border-radius: 12px 27px 12px 27px;
+
+  &-label {
+    position: absolute;
+    inset: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 22px;
+    margin: 0;
+    padding-inline: spacing('4');
+    border-radius: 11px 26px 0 0;
+    background: var(--mw-primary-color);
+    color: var(--mw-primary-accent-text-color);
+    font-size: font-size('2xs');
+    font-weight: font-weight('bold');
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > .mw-card {
+    flex: 1;
+  }
+}
+
+[class*='mw-grid-']:has(> .mw-card-feature) {
+  row-gap: 48px;
+}
+
+// Colour variants - primary is the default above, these two override it
+@each $name in ('secondary', 'info') {
+  .mw-card-feature-#{$name} {
+    border-color: var(--mw-#{$name}-color);
+
+    > .mw-card-feature-label {
+      background: var(--mw-#{$name}-color);
+      color: var(--mw-#{$name}-accent-text-color);
+    }
+  }
+}
+
 @each $name, $col in $_mw-card-addon-colors {
   .mw-card-addon-#{$name} {
     --mw-card-addon-color: #{$col};

package/src/scss/components/_meta-info.scss

@@ -10,6 +10,12 @@
     align-items: center;
     justify-content: flex-end;
     row-gap: spacing('1');
+
+    @include media-down('sm') {
+      justify-content: flex-start;
+      column-gap: spacing('6');
+      row-gap: spacing('2');
+    }
   }
 
   &-item {
@@ -19,6 +25,10 @@
     gap: spacing('2');
     &:not(:first-child) {
       margin-left: spacing('9');
+
+      @include media-down('sm') {
+        margin-left: spacing('0');
+      }
     }
     font-size: font-size('md');
 

package/src/scss/components/_modals.scss

@@ -13,7 +13,7 @@
   display: none;
   align-items: center;
   justify-content: center;
-  padding: spacing('3');
+  padding: spacing('7');
   opacity: 0;
   transition: opacity 0.4s ease;
 
@@ -58,6 +58,21 @@
   }
 }
 
+@include media-down('sm') {
+  .mw-modal-overlay {
+    padding: spacing('5');
+  }
+
+  .mw-modal-header,
+  .mw-modal-footer {
+    padding: spacing('3') spacing('4');
+  }
+
+  .mw-modal-body {
+    padding: spacing('4');
+  }
+}
+
 // Modal sections
 .mw-modal-header {
   padding: spacing('3') spacing('5');
@@ -92,6 +107,9 @@
   padding: spacing('3') spacing('5');
   border-top: 1px solid var(--mw-border-accent);
   display: flex;
+  // Three actions do not fit one line inside a phone-width dialog, and a row
+  // that cannot wrap pushes the last one out through the border
+  flex-wrap: wrap;
   gap: spacing('2');
   justify-content: flex-end;
 }

package/src/scss/components/_tables.scss

@@ -35,6 +35,9 @@
   }
 
   @include media-down('sm') {
+    width: 100%;
+    margin-inline: spacing('0');
+
     th,
     td {
       padding: spacing('1') spacing('2');

package/src/scss/components/_tiles.scss

@@ -15,7 +15,8 @@
 
   @include media-down('sm') {
     grid-template-columns: 1fr;
-    width: 90%;
+    width: 100%;
+    padding: spacing('0');
     gap: spacing('4');
   }
 
@@ -34,7 +35,10 @@
 
     @include media-down('sm') {
       grid-template-columns: 1fr;
-      width: 90%;
+      // Full width from here on - the page gutter is the container's job,
+      // a second inset only narrows the tile
+      width: 100%;
+      padding: spacing('0');
       gap: spacing('4');
     }
   }
@@ -46,7 +50,10 @@
 
     @include media-down('sm') {
       grid-template-columns: 1fr;
-      width: 90%;
+      // Full width from here on - the page gutter is the container's job,
+      // a second inset only narrows the tile
+      width: 100%;
+      padding: spacing('0');
       gap: spacing('4');
     }
   }

package/src/scss/components/_timelines.scss

@@ -193,6 +193,8 @@ $_simple-date-width: 110px;
   }
 
   @include media-down('sm') {
+    width: 100%;
+
     // Line moves to the left
     &::before {
       left: 0;
@@ -317,6 +319,8 @@ $_simple-date-width: 110px;
   }
 
   @include media-down('sm') {
+    width: 100%;
+
     &::before {
       left: 0;
       transform: none;

package/src/scss/form-elements/_form.scss

@@ -53,6 +53,18 @@
     // full-width stacked
     &-full-width {
       flex-direction: column;
+
+      &:has(.mw-actions-note),
+      &:has(.mw-form-actions-hint) {
+        flex-wrap: nowrap;
+      }
+
+      .mw-actions-note,
+      .mw-form-actions-hint {
+        flex: 0 0 auto;
+        text-align: left;
+      }
+
       > * {
         width: 100%;
       }

package/src/scss/form-elements/_login.scss

@@ -15,6 +15,10 @@
   flex-direction: column;
   align-items: stretch;
 
+  @include media-down('sm') {
+    width: min(340px, 100%);
+  }
+
   @include media-down('xs') {
     padding: spacing('7') spacing('4');
   }