Skip to content

reallygoodsoftware/base-styles

Repository files navigation

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

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.

About

CSS Only Component Library

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages