Browse Source

bootstrap removal phase 4a: hand-rolled flex grid (drop grid+containers)

Replaced bootstrap/grid + bootstrap/containers with a compact 12-col flexbox
grid (row + gutters, col, col-1..12, col-{sm,md,lg}-*, offset-md-1/lg-1) and a
.container-fluid rule. .container widths stay custom in style.css. Verified the
footer (col-lg-5/6 + offset-lg-1 + inner col-4) and front-page card unchanged.
v4-style.min.css 123,246 -> 114,398 bytes.
windhamdavid 1 week ago
parent
commit
bd0da7965d
2 changed files with 44 additions and 2 deletions
  1. 44 2
      css/styles.scss
  2. 0 0
      v4-style.min.css

+ 44 - 2
css/styles.scss

@@ -70,8 +70,6 @@ $enable-negative-margins: true;
 @import '../node_modules/bootstrap/scss/root';
 @import '../node_modules/bootstrap/scss/root';
 @import '../node_modules/bootstrap/scss/reboot';
 @import '../node_modules/bootstrap/scss/reboot';
 @import '../node_modules/bootstrap/scss/type';
 @import '../node_modules/bootstrap/scss/type';
-@import '../node_modules/bootstrap/scss/containers';
-@import '../node_modules/bootstrap/scss/grid';
 @import '../node_modules/bootstrap/scss/forms';
 @import '../node_modules/bootstrap/scss/forms';
 @import '../node_modules/bootstrap/scss/buttons';
 @import '../node_modules/bootstrap/scss/buttons';
 @import '../node_modules/bootstrap/scss/transitions';
 @import '../node_modules/bootstrap/scss/transitions';
@@ -180,6 +178,50 @@ $enable-negative-margins: true;
   .fs-2 { font-size: 2rem !important; }
   .fs-2 { font-size: 2rem !important; }
 }
 }
 
 
+// ---- grid (hand-rolled 12-col flexbox; replaces bootstrap/grid + containers) ----
+// .container base widths/padding are custom in style.css (fixed per breakpoint);
+// only .container-fluid (full-width bands) + the flex grid live here.
+.container-fluid {
+  width: 100%;
+  padding-right: .75rem;
+  padding-left: .75rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+.row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-.5 * var(--bs-gutter-x));
+  margin-left: calc(-.5 * var(--bs-gutter-x));
+}
+.row > * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * .5);
+  padding-left: calc(var(--bs-gutter-x) * .5);
+  margin-top: var(--bs-gutter-y);
+}
+$dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 66.666667%, 75%, 83.333333%, 91.666667%, 100%;
+.col { flex: 1 0 0%; }
+@for $i from 1 through 12 {
+  .col-#{$i} { flex: 0 0 auto; width: nth($dw-cols, $i); }
+}
+@each $bp, $w in (sm: 576px, md: 768px, lg: 992px) {
+  @media (min-width: $w) {
+    .col-#{$bp} { flex: 1 0 0%; }
+    @for $i from 1 through 12 {
+      .col-#{$bp}-#{$i} { flex: 0 0 auto; width: nth($dw-cols, $i); }
+    }
+  }
+}
+@media (min-width: 768px) { .offset-md-1 { margin-left: 8.333333%; } }
+@media (min-width: 992px) { .offset-lg-1 { margin-left: 8.333333%; } }
+
 /* Bootstrap Icons font dropped (2026-06-19): the header's 8 nav icons are now
 /* Bootstrap Icons font dropped (2026-06-19): the header's 8 nav icons are now
    inline SVG in parts/header.html, so the full icon font + its ~2000 CSS rules
    inline SVG in parts/header.html, so the full icon font + its ~2000 CSS rules
    are no longer imported. */
    are no longer imported. */

File diff suppressed because it is too large
+ 0 - 0
v4-style.min.css


Some files were not shown because too many files changed in this diff