KNI Cascade

A modern front-end architecture creating a single source of truth for all our CSS — across WordPress, React, static, or any future builds.

KNI Cascade unifies structure, tooling, and logic into a maintainable, portable system for all front-end projects.
It’s designed for clarity, scalability, and minimal friction — a single shared foundation that powers every KNI build.

What We Package

Category	Description
SCSS Boilerplate	Modern, layered structure that fixes inheritance issues Clear separation of responsibility → 00-sass → 01-base → 02-components → 03-modules → 04-pages Config-first system — tokens, mixins, and primitives power everything downstream
Sass (SCSS)	Clean, familiar syntax and developer experience Zero CSS output from config layer ensures predictable, isolated overrides
PostCSS PXV	Our custom viewport unit plugin
Stylelint config	Centralized configs for Stylelint

Folder Structure

scss/
├── 00-sass/        # Settings, Sass vars, mixins, functions, no CSS output
├── 01-base/        # Resets, type, layout, and core utilities
├── 02-components/  # Globally-available UI elements (header, footer, buttons, etc.)
├── 03-modules/     # Page body building blocks
├── 04-pages/       # Template- and page-specific styles, intended to imported only into the relevant file
└── styles.scss     # Public entry file for global CSS build

---

🧩 Core Features

• Fluid Typography – Scales seamlessly across breakpoints using $type-scale maps
• Viewport-Based Units (pxv) – Uniform responsive sizing with fallback support
• Token-Driven Architecture – Edit _settings.scss to update a project globally
• Predictable Cascade – Each layer builds safely on the one before it
• Framework-Agnostic – Single source of truth across any kni boilerplate

---

⚙️ Local Build Setup

# install dependencies
npm install

# run local dev build
npx gulp

By default, Gulp runs:

• sass → compile SCSS → CSS
• postcss → apply pxv
• stylelint → lint & auto-fix code style
• browsersync → live-reload for local development

---

Design Principles

1. No CSS output in 00-sass – Logic, not styling.
2. Small overrides > big rewrites – The cascade should always work with you.
3. Readable by default – Comments are documentation.

---

🧰 Requirements

• Node v18+
• npm or pnpm
• Gulp CLI (global)

---

🧑‍💻 Contributing

1. Clone this repo
2. Create a new branch
3. Run npx gulp and make your changes
4. Submit a PR with a clear summary

---

🪄 Quick Philosophy

If it defines how the system works is a Sass function, mixin or variable, it lives in sass. If it’s a globally-used reset, type, or layout rule, it lives in base. If it’s a globally-used element, it lives in components. If it's a page body building block, it lives in modules. If it’s page-specific, it lives in pages.