kni-cascade 1.0.0

package/scss/01-base/_layout.scss

@@ -0,0 +1,99 @@
+@use '../00-config' as *;
+
+// 🧩  Responsive Engine
+// -----------------------------------------------------------------------------
+// This is our magic "it just works" responsive engine but there are other
+// ways to set up a primary container. Todo: show examples
+// |--------------------|-------------------------------------------|-----------
+// |    Mobile (375)    |              Desktop (1440)               |  No scale
+// |--------------------|-------------------------------------------|-----------
+// | min:320    max:767 | min:768                          max:1800 |
+// |--------------------|-------------------------------------------|-----------
+
+// kill the wp-admin bar
+
+@include wp-admin-bar;
+
+// Primary Media Query
+@media (width >= 768px) {
+  :root {
+    --site-min: var(--desktop-min);
+    --site-basis: var(--desktop-basis);
+    --site-max: var(--desktop-max);
+  }
+}
+
+body {
+  min-height: 100vh;
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+
+  @include lg {
+    max-width: var(--container-size);
+  }
+
+  @include sm {
+    padding-left: var(--mobile-gutters);
+    padding-right: var(--mobile-gutters);
+  }
+}
+
+.desktop-only {
+  @include lg {
+    display: none;
+  }
+}
+
+.mobile-only {
+  @include sm {
+    display: none;
+  }
+}
+
+#breakpoints {
+  display: none;
+  position: relative;
+  z-index: 2;
+
+  @include sm {
+    z-index: 1;
+  }
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.abs-full {
+  @include abs-full;
+}
+
+.fit-photo {
+  position: relative;
+
+  &.absolute {
+    position: absolute;
+  }
+
+  > img,
+  > video {
+    @include abs-full;
+  }
+
+  &.cover > img,
+  &.cover > video {
+    object-fit: cover;
+  }
+
+  &.contain > img,
+  &.contain > video {
+    object-fit: contain;
+  }
+}

package/scss/01-base/_reset.scss

@@ -0,0 +1,83 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// 📄 _reset.scss
+// Fix all the browser inconsistencies and provide a clean slate
+// modified from https://piccalil.li/blog/a-modern-css-reset
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+
+// Box sizing rules - how is this not native yet?
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  // Preven font size inflation on mobile
+  text-size-adjust: none;
+
+  // Normalize text rendering
+  -webkit-font-smoothing: antialiased;
+  -webkit-overflow-scrolling: touch;
+}
+
+// Set core root defaults
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+// Remove default margin
+:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
+  margin: 0;
+}
+
+// Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
+:where(ul[role='list'], ol[role='list']) {
+  list-style: none;
+}
+
+// A elements that don't have a class get default styles
+:where(a:not([class])) {
+  text-decoration-skip-ink: auto;
+}
+
+// Make images easier to work with
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select,
+fieldset,
+legend {
+  font: inherit;
+}
+
+// make hr not ugly
+hr {
+  block-size: 1px;
+  inline-size: 100%;
+  border: none;
+  background-color: currentcolor;
+  margin-block: var(--type-margin); // todo: remove var?
+}
+
+// Remove all animations, transitions and smooth scroll for people that prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/scss/01-base/_typography.scss

@@ -0,0 +1,151 @@
+@use '../00-config' as *;
+
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// 📄 _typography.scss
+// Type system + custom styles
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+
+// Toggle fluid-type in settings.scss
+@if $enable-fluid-type {
+  @include fluid-type;
+}
+
+// Set top level rules
+html {
+  font-family: var(--font-family-system); // edit me
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
+  text-wrap: var(--text-wrap);
+}
+
+// Rules for all text elements
+:where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, figure) {
+  margin-block-end: var(--type-margin);
+}
+
+// Heading specific styles
+:where(h1, h2, h3, h4, h5, h6) {
+  line-height: 1.2;
+}
+
+// Make code look like code
+code, kbd, samp, pre, tt {
+  font-family: var(--font-family-monospace);
+}
+
+// Open up lineheight for longform reading
+.longform {
+  line-height: 1.5;
+}
+
+.caps {
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.2em;
+}
+
+// Typography classes correspond directly to design tokens in $type-scale.
+// Each class sets responsive font size via @include type-scale() and
+// can be safely overridden per component without side effects.
+
+.heading--xxl {
+  @include type-scale(heading-xxl);
+
+  // // note you can do overwrites here
+  // --font-min-clamp: 52px;
+  // --font-max-clamp: 68px;
+
+  line-height: 1.2; // edit me
+}
+
+.heading--xl  {
+  @include type-scale(heading-xl);
+
+  --font-min-clamp: 28px;
+}
+
+.heading--l  {
+  @include type-scale(heading-l);
+
+  --font-min-clamp: 24px;
+}
+
+.heading--m  {
+  @include type-scale(heading-m);
+
+  --font-min-clamp: 20px;
+}
+
+.heading--s {
+  @include type-scale(heading-s);
+
+  --font-min-clamp: 18px;
+}
+
+.heading--xs {
+  @include type-scale(heading-xs);
+
+  --font-min-clamp: 16px;
+}
+
+.body--l {
+  @include type-scale(body-l);
+
+  --font-min-clamp: 14px;
+}
+
+.body--m { @include type-scale(body-m); }
+
+.body--s { @include type-scale(body-s);}
+
+.body--xs {
+  @include type-scale(body-xs);
+}
+
+.body--xxs {
+  @include type-scale(body-xxs);
+}
+
+.body--xxxs {
+  @include type-scale(body-xxxs);
+}
+
+.w--300 {
+  font-weight: 300;
+}
+
+.w--400 {
+  font-weight: 400;
+}
+
+.w--500 {
+  font-weight: 500;
+}
+
+.w--600 {
+  font-weight: 600;
+}
+
+.w--700 {
+  font-weight: 700;
+}
+
+.w--800 {
+  font-weight: 800;
+}
+
+.wrap-pretty {
+  text-wrap: pretty;
+}
+
+.wrap-balance {
+  text-wrap: balance;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}

package/scss/01-base/utilities/_display.scss

@@ -0,0 +1,22 @@
+$white: #fff;
+$black: #000;
+
+.color {
+  &--white {
+    color: $white;
+  }
+
+  &--black {
+    color: $black;
+  }
+}
+
+.background {
+  &--white {
+    color: $white;
+  }
+
+  &--black {
+    color: $black;
+  }
+}

package/scss/01-base/utilities/_flex.scss

@@ -0,0 +1,124 @@
+@use '../../00-config' as *;
+
+.flex {
+  display: flex;
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.wrap-mobile {
+    @include sm {
+      flex-wrap: wrap;
+    }
+  }
+
+  &.inline {
+    display: inline-flex;
+  }
+
+  &.inline-mobile {
+    @include sm {
+      display: inline-flex;
+    }
+  }
+
+  &.center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.j-sb {
+    justify-content: space-between;
+  }
+
+  &.j-c {
+    justify-content: center;
+  }
+
+  &.j-start {
+    justify-content: flex-start;
+  }
+
+  &.j-end {
+    justify-content: flex-end;
+  }
+
+  &.a-c {
+    align-items: center;
+  }
+
+  &.a-start {
+    align-items: flex-start;
+  }
+
+  &.a-baseline {
+    align-items: baseline;
+  }
+
+  &.a-end {
+    align-items: flex-end;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.column-desktop {
+    @include lg {
+      flex-direction: column;
+    }
+  }
+
+  &.column-mobile {
+    @include sm {
+      flex-direction: column;
+    }
+  }
+
+  &.column-mobile-reverse {
+    @include sm {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &.row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  &.row-reverse-desktop {
+    @include lg {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &.a-c-desktop {
+    @include lg {
+      align-items: center;
+    }
+  }
+
+  &.a-start-desktop {
+    @include lg {
+      align-items: flex-start;
+    }
+  }
+
+  &.j-c-desktop {
+    @include lg {
+      justify-content: center;
+    }
+  }
+
+  &.j-sb-desktop {
+    @include lg {
+      justify-content: space-between;
+    }
+  }
+
+  &.j-end-desktop {
+    @include lg {
+      justify-content: flex-end;
+    }
+  }
+}

package/scss/01-base/utilities/_index.scss

@@ -0,0 +1,6 @@
+@forward 'dev';
+@forward 'display';
+@forward 'flex';
+@forward 'spacing';
+
+/* i'm utitlities */

package/scss/02-components/_index.scss

@@ -0,0 +1 @@
+/* this is components index */

package/scss/03-modules/_index.scss

@@ -0,0 +1 @@
+/* this is modules index */

package/scss/04-pages/_index.scss

@@ -0,0 +1 @@
+/* this is pages index */

package/scss/styles.scss

@@ -0,0 +1,5 @@
+@use './00-config' as *;
+@use './01-base' as *;
+@use './02-components' as *;
+@use './03-modules' as *;
+@use './04-pages' as *;

package/test/index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" type="image/ico" href="https://www.kurtnoble.com/img/favicon.ico" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>KNI CSS</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body class="test">
+    <div class="container">
+      <div id="width">
+        <span class="bp"></span>
+        <span class="currentWidth"></span>
+      </div>
+      <script>
+        const width = document.querySelector('#width span.currentWidth');
+
+        window.onload = function () {
+          width.innerHTML = window.innerWidth;
+        };
+        window.onresize = function () {
+          width.innerHTML = window.innerWidth;
+        };
+      </script>
+
+      <h1 class="heading--xxl">KNI-Cascade</h1>
+      <p>This is <a href="https://github.com/kni-labs/kni-cascade">how we CSS.</a></p>
+      <div class="box">I'm a cool box</div>
+      <main>
+        <section id="typography">
+          <h4>Typography</h4>
+          <hr />
+          <br />
+          <h1 class="heading--xxl">Fluid grids jump quickly when pixel boundaries fade</h1>
+          <p>here's a paragraph</p>
+          <h2 class="heading--xl">Bold layers of type mix sharp quartz and new glyphs</h2>
+          <p>here's a paragraph</p>
+          <h3 class="heading--l">Jazzy mockups bring quirky UX flow and crisp detail</h3>
+          <p>here's a paragraph</p>
+          <h4 class="heading--m">Quick designers juggle hazy fonts, warm color, and depth</h4>
+          <p>here's a paragraph</p>
+          <h5 class="heading--s">Twelve bright panels form a just-in-time CSS layout</h5>
+          <p>here's a paragraph</p>
+          <h6 class="heading--xs">Dynamic boxes flex through jumpy scroll and radiant hue</h6>
+          <p class="body-l">
+            Alex, Brianna, Charlie, Danielle, Elijah, Fiona, Gabriel, Harper, Isaac, Jasmine, Kieran, Lillian, Mateo,
+            Nadia, Oliver, Penelope, Quinn, Rafael, Sophia, Tristan, Ursula, Victor, Willow, Xavier, Yasmine, and Zachary
+            gathered in the quirky old library, flipping through dusty books while exchanging jokes.
+          </p>
+          <p class="body--l longform">
+            From the highest shelf, an ancient volume tumbled, making Jasmine yelp and Quinn laugh. “Unexpected surprises
+            keep things exciting!” Xavier quipped, adjusting his glasses, amazed by the bizarre discovery.
+          </p>
+          <p class="body--m">
+            The efficient officer shuffled swiftly through the artificial lights, affixing a final note to the affable
+            florist’s door. He studied an old encyclopædia and an œuvre on mediæval craftsmanship while enjoying a hors
+            d’œuvre on the café’s terrace in the straße
+          </p>
+          <p class="body--m longform">
+            AVoid wavy kerning! Typographers often fix TA, WA, To, and VA pairs while refining ‘tight’ and ‘loose’ spaces.
+            “It’s tricky!” Xavier joked, adjusting 7.9° of alignment.
+          </p>
+          <p class="body--s">
+            Mapping Cellular Networks for Microbiome Contributions to Neurodegeneration. The gut microbiome is
+            increasingly implicated in neurodegenerative diseases, with links to amyloid pathology, microglial activation,
+            neurodegeneration, motor impairments and cognitive decline in animal models. However, molecular and cellular
+            mechanisms underlying how the gut microbiota influences core symptoms of neurodegenerative disease remain
+            undefined.
+          </p>
+          <p class="body--xs">
+            Mapping Cellular Networks for Microbiome Contributions to Neurodegeneration. The gut microbiome is
+            increasingly implicated in neurodegenerative diseases, with links to amyloid pathology, microglial activation,
+            neurodegeneration, motor impairments and cognitive decline in animal models. However, molecular and cellular
+            mechanisms underlying how the gut microbiota influences core symptoms of neurodegenerative disease remain
+            undefined.
+          </p>
+          <p class="body--xxs">
+            Mapping Cellular Networks for Microbiome Contributions to Neurodegeneration. The gut microbiome is
+            increasingly implicated in neurodegenerative diseases, with links to amyloid pathology, microglial activation,
+            neurodegeneration, motor impairments and cognitive decline in animal models. However, molecular and cellular
+            mechanisms underlying how the gut microbiota influences core symptoms of neurodegenerative disease remain
+            undefined.
+          </p>
+          <p class="body--xxxs">
+            Mapping Cellular Networks for Microbiome Contributions to Neurodegeneration. The gut microbiome is
+            increasingly implicated in neurodegenerative diseases, with links to amyloid pathology, microglial activation,
+            neurodegeneration, motor impairments and cognitive decline in animal models. However, molecular and cellular
+            mechanisms underlying how the gut microbiota influences core symptoms of neurodegenerative disease remain
+            undefined.
+          </p>
+          <div class=" color-test body--s">
+            <p>asdfasdf</p>
+            <ul>
+              <li>asdfasdf</li>
+            </ul>
+          </div>
+          <p class="body--l caps">Harvard medical school</p>
+          <p class="body--m caps">Harvard medical school</p>
+          <p class="body--s caps">Harvard medical school</p>
+          <p class="body--xs caps">Harvard medical school</p>
+          <p class="body--xxs caps">Harvard medical school</p>
+          <p class="body--xxs caps">Harvard medical school</p>
+          <div>
+            <pre><code>this is some code</code></pre>
+          </div>
+          <button>i'm a button</button>
+
+          <div class="negative">i have a negative margin</div>
+          <div id="dev-config--width"></div>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>