Foundation is a no-frills CSS base designed to make browsers render elements consistently while embracing modern standards.
It builds on the original idea of a lightweight foundation layer but removes legacy hacks, outdated browser workarounds, and unnecessary complexity. The result is a clean starting point that works with modern browsers, design systems, and frameworks.
This is not a framework. It is a base layer intended to sit underneath your styles and components.
brandonhimpfen
What It Solves
Browsers still apply inconsistent default styles across elements such as headings, forms, and media.
Foundation provides:
- A consistent baseline across browsers
- Sensible defaults for typography and layout
- Improved accessibility out of the box
- A predictable starting point for scaling design systems
It removes the need to repeatedly normalize styles across projects.
Design Principles
Minimal by Default
Only essential resets and base styles are included. No opinionated components or layout systems are imposed.
Modern Standards First
Legacy browser hacks and outdated prefixes are removed. The code assumes a modern browser environment and focuses on current CSS capabilities.
Accessibility Built In
Focus states, readable typography, and reduced motion preferences are handled at the base level.
Predictable Behavior
Elements behave consistently without surprising overrides or hidden styles.
Core Features
Reset and Normalization
- Universal
box-sizing: border-box - Consistent margin and padding handling
- Clean element defaults without heavy overrides
Typography System
- Responsive heading scale
- Improved line-height and readability
- Better defaults for paragraphs, lists, and inline text
Forms and Inputs
- Consistent styling across inputs, buttons, and textareas
- Accessible focus states using
:focus-visible - Reduced browser inconsistencies
Media and Layout
- Responsive images and embedded media
- Sensible defaults for block-level elements
- Clean handling of tables and code blocks
Accessibility Enhancements
- Visible focus indicators for keyboard users
- Support for
prefers-reduced-motion - Improved contrast and readability defaults
File Structure
foundation/
├── css/
│ ├── foundation.css
│ └── foundation.min.css
├── scss/
│ └── foundation.scss
├── package.json
└── README.md
The SCSS file serves as the source. Compiled CSS is provided for direct use.
How to Use
Include the compiled CSS file in your project:
<link rel="stylesheet" href="css/foundation.min.css">
Or import the SCSS file into your build system:
@import "foundation";
Foundation should be loaded before your custom styles or design system.
When to Use It
Foundation is best suited for:
- New web projects that need a clean baseline
- Design systems that require consistency across components
- Static sites and content-driven platforms
- Projects where full CSS frameworks are unnecessary
When Not to Use It
It is not intended to replace:
- Component libraries
- UI frameworks such as Bootstrap or Tailwind CSS
- Full design systems
It works best as a foundational layer beneath those tools, if used together.
Positioning
Foundation sits between a traditional reset and a full framework.
- More structured than a basic reset
- Less opinionated than a framework
- Focused on consistency rather than components
Extending the Base
You can build on top of Foundation by:
- Adding a typography system or design tokens
- Layering utility classes
- Integrating with a component library
- Customizing variables in the SCSS source
It is designed to stay out of the way while enabling scale.
Summary
Foundation provides a clean, accessible, and consistent baseline for modern web development.
It removes historical baggage from older CSS resets and replaces it with a focused, forward-looking base layer that supports how websites are built today.