CSS Frameworks

Writing CSS code is time-consuming, that is why we need CSS Frameworks

Common CSS Frameworks are:

Bootstrap (More Features, but larger)
Foundation
Semantic UI
UI Kit
Materialize
Milligram (Less Features, but smaller)

To use a Framework, first to link it with CDN (Content Delivery Network)

<head>
  <link
    href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous"  />
</head>

Next, to style some elements, all we need to do is to give a class to each element.

<body>
  <!-- Make 50% of the screen width -->
  <form class="w-50">
    <!-- "mb-3" means margin-bottom: 3rem -->
    <div class="mb-3">
      <label class="form-label" for="name">Name</label>
      <input class="form-control" id="name" type="text" />
    </div>
    <div class="mb-3">
      <label class="form-label" for="email">Email</label>
      <input class="form-control" id="email" type="email" />
    </div>
    <button class="btn btn-primary" type="submit">Register</button>
    <button class="btn btn-secondary" type="reset">Clear</button>
  </form>
</body>

However, loading a Bootstrap CSS file sometimes is slow, hence we need some easy, simple CSS framework, i.e. Milligram

To use Milligram is also easier than Bootstrap, because all you need to done is to change the CDN link. Your form will be automatically styled.

<head>
  <link
    rel="stylesheet"
    href="<https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css>"  />
</head>