Episode 1 — Fundamentals / 1.9 — CSS Responsive Design
1.9.g — CSS Frameworks Overview
In one sentence: CSS frameworks provide pre-built styles and layout systems that speed up development — they come in utility-first, component-based, and hybrid flavors, each with trade-offs you should understand before adopting one.
Navigation: ← 1.9.f — Spacing & Rhythm · 1.9 Overview →
1. What is a CSS framework?
A CSS framework is a pre-written collection of CSS (and sometimes JavaScript) that provides:
- A reset/normalize for consistent cross-browser defaults.
- A grid/layout system for responsive page structure.
- Pre-styled components (buttons, cards, forms, modals).
- Utility classes or design tokens for rapid styling.
Instead of writing every style from scratch, you use the framework's conventions and customize where needed.
2. Framework categories
| Category | Philosophy | Example |
|---|---|---|
| Utility-first | Small, single-purpose classes composed in HTML | Tailwind CSS |
| Component-based | Pre-designed components you drop in and customize | Bootstrap, Bulma |
| Hybrid | Mix of pre-built components + utility classes | Foundation |
3. Component-based: Bootstrap
Bootstrap is the most widely-used CSS framework. It provides ready-made components with a class-based API.
How it works
<div class="container">
<div class="row">
<div class="col-md-8">Main content</div>
<div class="col-md-4">Sidebar</div>
</div>
</div>
<button class="btn btn-primary btn-lg">Get Started</button>
<div class="card">
<img src="photo.jpg" class="card-img-top" alt="…" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some text.</p>
</div>
</div>
Pros
| Advantage | Detail |
|---|---|
| Fast prototyping | Drop in classes, get polished components instantly |
| Comprehensive | Modals, tooltips, carousels, forms — all included |
| Documentation | Extensive, well-organized docs with examples |
| Team familiarity | Most developers have used Bootstrap at some point |
Cons
| Disadvantage | Detail |
|---|---|
| Bundle size | Full Bootstrap CSS is ~230 KB uncompressed (can be reduced with tree-shaking) |
| Generic look | Sites look "Bootstrap-y" without significant customization |
| Override battles | Customizing deeply means fighting specificity |
| Opinionated structure | Your HTML is shaped by the framework's grid/class conventions |
4. Utility-first: Tailwind CSS
Tailwind CSS provides low-level utility classes. You compose them directly in your HTML instead of writing custom CSS.
How it works
<div class="max-w-7xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-2">Card title</h3>
<p class="text-gray-600">Some text.</p>
</div>
</div>
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold
py-3 px-6 rounded-lg transition-colors">
Get Started
</button>
Pros
| Advantage | Detail |
|---|---|
| No naming fatigue | No inventing class names like .card-wrapper-inner |
| Small production CSS | Purges unused classes — final bundle often < 15 KB |
| Design consistency | Constrained values from a config (spacing, colors, sizes) |
| Rapid iteration | Change styles without switching files |
Cons
| Disadvantage | Detail |
|---|---|
| Verbose HTML | Long class strings reduce readability |
| Learning curve | Must memorize utility class names |
| Tight coupling | Styling lives in markup — harder to separate concerns |
| Custom CSS still needed | Complex animations, pseudo-element patterns need regular CSS |
5. Other frameworks (brief mentions)
| Framework | Category | Notable trait |
|---|---|---|
| Bulma | Component-based | Flexbox-only, no JavaScript dependency |
| Foundation | Hybrid | Enterprise-grade, accessible, extensive grid |
| Pico CSS | Classless | Semantic HTML looks good with zero classes |
| Open Props | Token library | CSS custom properties for building your own system |
6. When to use a framework vs custom CSS
| Scenario | Recommendation |
|---|---|
| Prototype / MVP | Framework — ship fast, iterate on design later |
| Marketing site / unique brand | Custom CSS — frameworks fight custom design |
| Large team, many developers | Framework — shared conventions reduce inconsistency |
| Learning CSS | Custom CSS first — understand what frameworks abstract |
| Component library / design system | Custom or token library — full control over API |
| Admin dashboard | Framework — components (tables, forms, modals) accelerate work |
Rule of thumb: If the framework saves more time than it costs in customization and overrides, use it. If you spend more time fighting it than building, go custom.
7. Framework comparison at a glance
| Feature | Bootstrap 5 | Tailwind CSS | Custom CSS |
|---|---|---|---|
| Pre-built components | Yes (50+) | No (build your own) | No |
| Bundle size (prod) | ~50 KB (purged) | ~10–15 KB (purged) | Depends |
| Responsive grid | 12-column flex grid | Utility-based grid/flex | Your choice |
| Customization | Sass variables, themes | tailwind.config.js | Unlimited |
| JavaScript included | Yes (dropdowns, modals) | No (pair with headless UI) | Your choice |
| Learning curve | Low–Medium | Medium | Varies |
| Design uniqueness | Low (without customization) | High | Highest |
8. Getting started (preview for 1.11)
Both Bootstrap and Tailwind will be covered in depth in Section 1.11. For now, understand the categories and trade-offs. When you reach 1.11:
- Bootstrap: install via npm or CDN, use the class-based component API, customize with Sass variables.
- Tailwind: install via npm, configure
tailwind.config.js, add the Tailwind directives to your CSS, use utility classes in HTML.
# Bootstrap quick start
npm install bootstrap
# Tailwind quick start
npm install -D tailwindcss
npx tailwindcss init
9. Key takeaways
- Utility-first (Tailwind) = compose styles from small classes. Component-based (Bootstrap) = use pre-designed components.
- Frameworks trade control for speed — understand what you're giving up.
- Production bundle size matters — always purge/tree-shake unused framework CSS.
- Learn custom CSS first — frameworks are abstractions over concepts you need to understand.
- Pick the framework that matches your project type, team size, and design goals.
Explain-It Challenge
Explain without notes:
- What is the fundamental difference between how you build a card component in Bootstrap vs Tailwind?
- A teammate argues "we should use a framework so we don't need to learn CSS." Why is this problematic?
- When would custom CSS be a better choice than any framework, even for a large team?
Navigation: ← 1.9.f — Spacing & Rhythm · 1.9 Overview →