Search pages
Search all CSS Showcase pages by name
CSS Frameworks
Compare popular frameworks and decide when to use them versus vanilla CSS. From utility-first to component libraries, CSS-in-JS to naming methodologies.
Utility-First Frameworks
Build designs directly in your HTML using pre-defined utility classes.
Tailwind CSS
A utility-first CSS framework packed with classes like flex, pt-4, and text-center that can be composed to build any design.
- Highly customisable design tokens
- JIT compiler for tiny bundles
- Built-in dark mode support
- Extensive plugin ecosystem
UnoCSS
The instant atomic CSS engine. Highly customisable and compatible with Tailwind, Windi, and Tachyons presets.
- Instant on-demand generation
- Pure CSS icons
- Variant groups
- Attributify mode
Open Props
Supercharged CSS variables for design systems. Not a framework but a collection of design tokens as CSS custom properties.
- Just CSS custom properties
- Framework agnostic
- Adaptive colour schemes
- No build step required
Component Frameworks
Pre-built components and design systems for rapid prototyping and production.
Bootstrap
The most popular HTML, CSS, and JS framework in the world. Comprehensive component library with extensive documentation.
- Responsive grid system
- Pre-built components
- JavaScript plugins
- Sass customisation
Bulma
A free, open source CSS framework based on Flexbox. No JavaScript, just pure CSS with modular Sass files.
- 100% CSS, no JS
- Flexbox-based grid
- Modular architecture
- Easy to customise
daisyUI
The most popular component library for Tailwind CSS. Adds semantic class names for common UI components.
- Tailwind CSS plugin
- Semantic class names
- 29 built-in themes
- Fully customisable
CSS Methodologies
Approaches and conventions for writing maintainable, scalable CSS.
BEM
Block Element Modifier is a naming convention that makes CSS easier to read, understand, and scale in large projects.
- Clear naming convention
- Avoids specificity wars
- Self-documenting classes
- Works with any framework
CSS Modules
Locally scoped CSS by default. Class names are unique, so you never have to worry about naming collisions.
- Automatic scoping
- Composition of styles
- Works with React, Vue, etc.
- Explicit dependencies
CUBE CSS
Composition Utility Block Exception. A CSS methodology that embraces the cascade and encourages pragmatic CSS.
- Embraces the cascade
- Focuses on composition
- Progressive enhancement
- Framework agnostic
CSS-in-JS
Write CSS directly in JavaScript for component-based architectures.
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.
- Automatic critical CSS
- No class name bugs
- Dynamic styling
- Server-side rendering
Emotion
A performant and flexible CSS-in-JS library. Supports both string and object styles with a powerful composition model.
- Source maps support
- Framework agnostic core
- Powerful composition
- Excellent performance
Vanilla Extract
Zero-runtime CSS-in-TypeScript. Write type-safe styles in TypeScript that compile to static CSS at build time.
- Zero runtime overhead
- Type-safe styles
- Static CSS extraction
- Theming support
Framework vs Vanilla CSS
Understanding when to use a framework versus writing custom CSS.
Use Frameworks When
Frameworks excel in certain scenarios and can significantly speed up development while maintaining consistency.
- Rapid prototyping needed
- Large team, needs consistency
- Tight deadlines
- Standard UI patterns used
Use Vanilla CSS When
Custom CSS shines when you need full control, unique designs, or want to keep your bundle size minimal.
- Unique, custom designs
- Performance is critical
- Learning CSS deeply
- Small projects or sites
Hybrid Approach
Many teams combine frameworks with custom CSS, using the best of both worlds for optimal results.
- Framework for utilities
- Custom CSS for unique parts
- Design tokens shared
- Gradual adoption possible
Continue Exploring
Discover more CSS resources and tools for your projects.