You've just spent six lessons hand-writing every line of a page — the HTML, the CSS, the responsive grid, the form. There's a fair question waiting at the end of that: did you have to? A CSS framework promises to skip most of it.

The pitch

A framework is a large, ready-made stylesheet (often with some JavaScript) that hands you finished pieces. Instead of writing CSS, you write HTML using the framework's class names, and its stylesheet makes those classes look right — styled, responsive, consistent across browsers. Bootstrap is the archetype and still one of the most used. A card in Bootstrap is roughly:

<div class="card" style="width: 18rem;">
  <img src="…" class="card-img-top" alt="…">
  <div class="card-body">
    <h5 class="card-title">A Dust Angel Nebula</h5>
    <p class="card-text">2016-04-28</p>
  </div>
</div>

You didn't write .card or .card-body — Bootstrap did. You assemble a page from its vocabulary: btn btn-primary for a button, col-md-4 for a grid column, navbar for a nav. In an afternoon you can have a professional-looking, responsive site without opening a stylesheet.

Notice what it's replacing

Look closely at that card and you'll see something familiar: it's your card, from lesson 3, with different class names. You built a .btn, a .picture-card, a responsive .grid, a .navbar. A CSS framework is exactly those things — a big, general-purpose version of what you just made by hand — packaged so you never write them yourself.

That's the whole idea, and it's genuinely appealing. For a team that needs an admin dashboard shipped next week, not writing the button, the card, the grid, the modal and the form from scratch — and getting cross-browser and responsive behaviour solved for free — is an enormous head start.

But "you never write them yourself" cuts both ways, and the rest of this lesson is about the trade. You're in the one position from which you can actually judge it: you know what's under the class names, because you wrote it.