CSS has always had a clear purpose: describe how a document looks, not what it contains. Somewhere along the way, frameworks lost sight of that. Utility frameworks traded readable markup for granular control, leaving developers maintaining strings of dozens of single purpose classes on every element. Component frameworks went the other direction, shipping fully formed UI that was fast to start with and slow to make your own. Both approaches made the same mistake. They made decisions that belong to the developer.
Wisp starts from a different premise. A framework should give you structure, common patterns, and get out of the way. It should be modular enough that you can pull in a single object without inheriting an entire system, and extensible enough that nothing you add feels like you are working around it. Every module in Wisp is independent by design. Nothing assumes anything else is present except a tiny preflight file (1kb).
Wisp also ships without a settings file. That is not a limitation but a deliberate choice. Sensible defaults mean you can drop it into a project and start immediately without configuring anything. When you are ready to make it your own, every default is exposed as a CSS variable. Override what you need, where you need it, using the cascade the way it was always intended to be used. The framework does not need to know about your changes. That is the point.
Since there is no Sass, there is never a need to rebuild it.
Architecture
Preflight.css
Defines the order of these layers, box-sizing, and focus styles. There is nothing in here too opinionated.
Foundation.css
Defines a consistent vertical rhythm between elements and typography.
Objects
Layout primitives with no visual style, such as: containers, grid, media. These are your building blocks.
Behaviors
Unique to Wisp. Instead of mixing interaction patterns into components, behaviors are their own classes.
For Example:
b-press
Give elements additional click affordance through elevation. For example, a card.
b-tint
Gives elements additional click affordance through color tinting. For example, a tab.
b-transition
Gives elements animation capabilities in a safe manner
Etc.
Components
UI components with configurable visual styles, such as buttons and tables.
Utilities
Utilities are treated like how they should be treated: an escape hatch.
How It Looks
Buttons
Flat, pill, and raised buttons. By default, buttons and cards are flat until you add b-press.
<button class="c-button">
Flat
</button>
<button class="c-button c-button--pill">
Pill
</button>
<button class="c-button b-press">
Raised
</button>
Tabs
An inline layout with padded links and a tint behavior: tabs.
<div class="o-cluster">
<a class="o-link-block b-tint" href="#">Tab 1</a>
<a class="o-link-block b-tint" href="#">Tab 2</a>
<a class="o-link-block b-tint" href="#">Tab 3</a>
</div>
Sticky Header Bar
A sticky header bar with inline links.
<div class="c-box b-sticky u-color-primary">
<div class="o-cluster">
<a class="o-link-inline" href="#">Tab 1</a>
<a class="o-link-inline" href="#">Tab 2</a>
<a class="o-link-inline" href="#">Tab 3</a>
</div>
</div>
Find it Here
Let me know what you think.
Top comments (2)
You should go many levels deeper, I don't see any reason to use pure css on prod and no clear value
I'm not sure what you mean by "going many levels deeper"? Do you mean layers? It follows ITCSS layers, a well established approach to organizing CSS at scale pioneered by Harry Roberts. Cascade layers make the specificity contract that ITCSS describes explicit and enforceable by the browser itself rather than relying on file order and developer discipline. Please explain.
There is also no rule stating that it needs to be used as pure CSS. Unlike most other frameworks, it uses CSS custom properties instead of Sass variables, making it tooling agnostic and flexible enough to fit any workflow
For value, its modular and has a decoupled behaviors layer which is something you never see. It uses cascade layers and slotting for predictable specificity. There is no component, utility or modifier explosion. It also follows the most respected methodologies in CSS architecture, which is BEM + ITCSS.
Let me know what you mean by going deeper.