Built a CSS Framework Around an Idea Most Had Forgotten About

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 custom variables. 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.

Configure without needing 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

The basics. It is not Tailwind. :)

How It Looks

Buttons

Flat and raised buttons.

<button class="c-button"> 

    Normal

</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.

github.com/wispcode/wisp-css