RWD Frameworks
CSS frameworks ship a ready-made grid, components, and utility classes. They speed up prototyping at the cost of carrying extra CSS to production.
The big four
| Framework | Approach | Strength |
|---|---|---|
| Bootstrap | Component classes (.btn, .card). | Quickest path to a complete admin UI. |
| Tailwind CSS | Atomic utility classes (p-4 text-center). | Stays in HTML; tree-shakes to small bundles. |
| Bulma | Modifier classes, no JS. | Clean syntax, easy to learn. |
| Foundation | Component classes, accessibility-first. | Strong forms and email templates. |
Do you actually need one?
| Use a framework when… | Skip it when… |
|---|---|
| You're prototyping or building admin UIs fast. | The design is custom and unique. |
| The team's CSS skills vary widely. | You want the smallest possible CSS bundle. |
| You need rich components (modals, dropdowns) out of the box. | You're already using a component-driven framework like React. |
Tip: Whatever you pick, configure the build to purge unused classes. A 4KB production CSS file is realistic with Tailwind; a 200KB unpurged Bootstrap is not.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>RWD Frameworks</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Which framework uses atomic utility classes?
Answer:
It is named after the famous Texas event.
Discussion
Loading…