Styling with a Classless CSS Framework

Let’s style our app using a different approach: a classless CSS framework. Unlike frameworks like Bootstrap that require adding class names to your HTML elements, classless frameworks style plain HTML automatically. Just link the stylesheet and you are done.

Add the following to the head section of index.html.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
/>

This links to Water.css hosted on a CDN (Content Delivery Network). CDNs serve files quickly from servers around the world.

That one line is the only change we need. The page is now styled.

Checkpoint: Commit your progress.

git add .
git commit -m "payment-04: Add Water.css for styling"
git push

At this point, go ahead and deploy your app as a GitHub Pages site similar to what we did in previous projects (e.g., the WakeUpTimes and the Rock Paper Scissors apps).