Codebase is a business class style library for the modern web

Version: 5.3.2
Documentation
GitHub Repository
CSS (minified) (94 KB)
Licence: MIT
Developer: Simon Padbury

Designed to work with static site generators and content management systems, Codebase is a package of lessons learned from semantic component frameworks and utility libraries, with new techniques such as CSS grid, clamp(), and var(). Plus, Codebase collaborates well with AlpineJS.

Starting from a beautifully minimalist set of classless HTML tag styles for cross-browser compatibility, Codebase brings you a “utility first” approach to all this and more...

Typography

  • Serif, sans-serif, and monospaced font stacks
  • Font weights: thin, normal, semibold, bold, heavy
  • Heading size also as utility classes
  • Large display text for headings and landing pages
  • Comfortable long-read font sizes controlled by CSS clamp
  • Other text utilities incuding alignments, list formats, etc.

Responsive layouts

  • A range of centered container, width, and height utilities
  • Real two-dimensional CSS grid layouts for templating
  • Flexbox layouts for components
  • Fixed and sticky positioning
  • Aspect-ratio controlled squared tiles
  • Edge positioning
  • Responsive invisibility classes

Decoration

  • Color swatches for borders, text, and backgrounds (with hover states)
  • Box-model spacing and borders
  • 4 levels of rounded corners
  • Box shadows for layering

Image handling

  • Responsive images
  • Cover images and positioning
  • A wide range of aspect ratios — for traditional image sizes and squared tiles
  • Image filters and opacities
  • Glassmorphic overlays

Simple components (no JavaScript)

Examples:

  • Buttons
  • Badges
  • Labels
  • Heros
  • Tables
  • Media objects
  • Cards

Alpine.JS powered components

Examples:

  • Collapse (slide reveal)
  • Dropdowns
  • Modals and lightboxes
  • Offcanvas panels
  • Tab systems
  • Simple manual carousel
  • Langing page animations

Get started

Codebase and its documentation is developed in the Eleventy static website generator, with NPM modules for preprocessing SCSS.

AlpineJS and its plugins are provided from the CDN recommended in the AlpineJS.dev docs.

Other than the Codebase logo, docs icons are from Phosphor Icons.

Placeholder images are from Pexels.