Codebase is a business class CSS style library for the modern web
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.
Launching this project with 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
- Heading size formats
- Font weights: lighter, normal, semi-bold, bold, heavy
- 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
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.