Base Styles

Base Styles is an evergreen CSS component library. One css file that you can add to your codebase to make building beautiful web apps easier and faster.

• Customizable: Tweak 6 CSS variables to change the entire look and feel of your app.
• Extendable: Want to add something not included with our defaults? Just create your own variant.
• Future Proof: Decades from now, your codebase can be opened, run and modified with no dependencies or build steps. Just clean, readable CSS.

Javascript Optional

In the year 2025, CSS is super powerful - animations and transitions are first class, and html elements are more stylable than ever. You don't need yarn, npm, typescript or any other tooling to achieve beautiful, accessible UI. For the small number of components that require interactivity, you can achieve the desired behaviour in about 20 lines of javascript.

This means you can port Base Styles to your framework-of-choice in less than an hour.

Component	Javascript
Button	No js required
Button Group	No js required
Forms	No js required
Floating Input Labels	No js required
Tooltips	No js required
Search Input	No js required
Eyebrow	No js required
Switch	No js required
Chip	No js required
Title Pair	No js required
Box	No js required
Shimmer	No js required
Styled Text	No js required
Table	No js required
Tabnav	Toggle .--active on the active item when clicked
Modal	Toggle .--visible on the modal container to open/close
Toast	Add .--animate-in and .--animate-out to a toast to show/hide it
Expander	Toggle .--expanded on the expander to open/close

Setup

• Check the current version here

<link rel="stylesheet" href="https://cdn.base-styles.com/versions/{VERSION}.css">

Examples

Buttons

<button class="ui-button">Basic Button</button>

Forms

<form class="ui-form">
  <input type=...>
</form>

Tooltips

<span class="ui-tooltip--top" aria-label="This is your tooltip">
  Tooltip Top
</span>

Demos & Docs

• Interactive Demos with code samples
• Documentation

Motivation

• Why are component libraries in 2025 primarily packaged and delivered with javascript/typescript?
• Why are library authors all rewriting the same components instead of reusing a common CSS base?

TODO

• Fix naming conventions for ui-tooltip (break apart the class).
• Add dropdown arrow that rotates on open to ui-select.
• Clean up variables for ui-styled-text.
• Add more variants for modals.
• Add CSS nesting polyfill (currently nesting only works in 87% of browsers).
• Use focus-within for floating labels (can be broken with password managers currently).

Running the docs site

• gem install sinatra rackup puma redcarpet

Developing

• Make changes to base-styles.css as you see fit.
• Run node utils/create-version.js when finished to create a new version file.
• Add notes to the changelog.