KNI Cascade — an opinionated SCSS engine and single source of truth for design scaling.
npm install kni-cascadeA 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.
| Category | Description |
|---|---|
| SCSS Boilerplate |
|
| Sass (SCSS) |
|
| PostCSS PXV | Our custom viewport unit plugin |
| Stylelint config | Centralized configs for Stylelint |
``plaintext`
scss/
├── 00-config/ # Tokens, mixins, functions, no CSS output
├── 01-base/ # Resets, type, layout, and core utilities
├── 02-components/ # Reusable UI building blocks
├── 03-modules/ # Larger composite regions (header, hero, footer)
├── 04-pages/ # Page-specific overrides
└── styles.scss # Public entry file for final CSS build
---
- Fluid Typography – Scales seamlessly across breakpoints using $type-scale mapspxv
- Viewport-Based Units () – Uniform responsive sizing with fallback support_settings.scss
- Token-Driven Architecture – Edit 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
---
`bashinstall dependencies
npm install
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. Settings-first – All editable project values live in
_settings.scss.
2. No CSS output in config – Logic, not styling.
3. Token inheritance – Everything flows from primitives to components.
4. Small overrides > big rewrites – The cascade should always work with you.
5. 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---
> _“If it’s visual, it lives in base.
> If it’s reusable, it lives in components.
> If it’s page-specific, it lives in pages.
> And if it defines how the system works — it lives in config.”_