Style Libraries

Learning objectives

You know what style libraries and what they are used for.
You know what a Content Delivery Network (CDN) is and what it is used for.
You know of the possibility of using a style library.

There exists a wide variety of style libraries. Some examples of these include Bootstrap, Foundation, Bulma, and NES.css.

Each of the abovementioned style libraries provide sample pages with defined styles and needed libraries. For example, the page at https://getbootstrap.com/docs/4.5/examples/ shows Bootstrap templates that could be used as a starting point when creating your page and styling it.

Existing style libraries

Several style libraries have been created for making it easier for developers to work on their applications. These style libraries typically offer a uniform theme (i.e. used components on the site look the same), easy layout mechanisms, and -- in some cases -- support responsiveness, i.e. the possibility to adjusting the layout based on the screen resolution. For example, if a client uses a mobile phone, the layout can be structured differently than when the client is using a desktop.

Here is a list of a few somewhat popular libraries, sorted in alphabetical order.

And a few.. less formal ones.

As you can see, there are quite a few options to choose from (and one could roll out their own style library). For more CSS frameworks, check out e.g. the project awesome CSS site.

So, which one to pick and which one is the best? There is no (single and correct) answer to this. The choice of a CSS library depends on previous experience, preferences, schedule, etc. In this course, we will briefly look at a few options. When using CSS frameworks, we do not modify them, but use them as is. In addition, we use a content delivery network (CDN) for retrieving them -- this means that the CSS framework code is not hosted in our project, but retrieved from a CDN server by the client when the client opens up the application.

In practice, all of the style libraries are used so that we include at least a CSS file to the page headers. CSS classes are typically used to style specific elements in the page, although the style libraries themselves often create sensible defaults. Soon, we will look into three examples that show how different CSS libraries can be used to create a simple HTML page, after which we summarize common patterns in using style libraries. The HTML page that we will style is as follows.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>My epic page</h1>
    <p>Welcome all to my epic page. This page has all the epicness that one needs. It also has a form and a table.</p>
    <h2>Form</h2>
    <form>
      <fieldset>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <input type="submit" value="Submit form" />
      </fieldset>
    </form>
    <h2>Table</h2>
    <table>
      <tr>
        <th>table header 1</th>
        <th>table header 2</th>
      </tr>
      <tr>
        <td>row 1, column 1</td>
        <td>row 1, column 2</td>
      </tr>
      <tr>
        <td>row 2, column 1</td>
        <td>row 2, column 2</td>
      </tr>
      <tr>
        <td>row 3, column 1</td>
        <td>row 3, column 2</td>
      </tr>
    </table>
    <p>We also have a nice text here at the end!</p>
  </body>
</html>

In a browser, the page looks as follows.

External Stylesheets

In the following examples, the stylesheets are retrieved from external servers. This means that the stylesheet file is not in the same folder with the HTML document. Instead, the file is retrieved by the browser from the given address when the browser has retrieved the HTML document and finds the link element from the document.

Bootstrap

Let's first look at Bootstrap. To start using Bootstrap, we link its CSS definition to the head element of our page. In addition, we also add a meta element that is used to inform about responsive behaviors. Linking the CSS definition to the page and adding the meta element looks as follows.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Then, we wrap the contents of the body with an element that has the container class. The container class is used to add styles to pad the content within, aligning the contents nicely on the page.

<!-- ... -->
<body>
  <div class="container">
    <!-- page content -->
  </div>
</body>
<!-- ... -->

Next, to adjust the style of the form, we add a div element to wrap components that should be linked together. The div element uses the class form-group -- a class form-control is used for styling input elements.

<!-- ... -->
<div class="form-group">
 <label for="name">Name:</label>
  <input class="form-control" type="text" id="name" name="name" />
</div>
<!-- ... -->

To adjust the style of the submit button, we add the class attribute btn btn-primary to the button. This means that the button should be styled as a button that it is the primary action -- Bootstrap provides different colors for different types of actions.

<input type="submit" value="Submit form" class="btn btn-primary" />

Finally, to style the table, we need to add the class table to the table element.

<table class="table">

Now, the page looks as follows. Used HTML is shown below.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <div class="container">
      <h1>My epic page</h1>
      <p>Welcome all to my epic page. This page has all the epicness that one needs. It also has a form and a table.</p>
      <h2>Form</h2>
      <form>
        <fieldset>
          <div class="form-group">
            <label for="name">Name:</label>
            <input class="form-control" type="text" id="name" name="name" />
          </div>
          <input type="submit" value="Submit form" class="btn btn-primary" />
        </fieldset>
      </form>
      <h2>Table</h2>
      <table class="table">
        <thead>
          <tr>
            <th>table header 1</th>
            <th>table header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>row 1, column 1</td>
            <td>row 1, column 2</td>
          </tr>
          <tr>
            <td>row 2, column 1</td>
            <td>row 2, column 2</td>
          </tr>
          <tr>
            <td>row 3, column 1</td>
            <td>row 3, column 2</td>
          </tr>
        </tbody>
      </table>
      <p>We also have a nice footer text here at the end!</p>
    </div>
  </body>
</html>

Milligram

Milligram is another CSS framework. To start using Milligram, we link its three CSS definitions to the project. The first one is a font that Milligram uses by default, the second one is a library that helps browsers work consistently, and the third one is the milligram CSS definitions. These look as follows.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">

Similar to Bootstrap, we wrap the contents of the body with an element that has the container class -- this is used to pad the content within, aligning the contents nicely on the page.

<!-- ... -->
<body>
  <div class="container">
    <!-- page content -->
  </div>
</body>
<!-- ... -->

We are good to go. The page looks as follows and the HTML is shown below.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
  </head>
  <body>
    <div class="container">
      <h1>My epic page</h1>
      <p>Welcome all to my epic page. This page has all the epicness that one needs. It also has a form and a table.</p>
      <h2>Form</h2>
      <form>
        <fieldset>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" />
          <input type="submit" value="Submit form" />
        </fieldset>
      </form>
      <h2>Table</h2>
      <table>
        <thead>
          <tr>
            <th>table header 1</th>
            <th>table header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>row 1, column 1</td>
            <td>row 1, column 2</td>
          </tr>
          <tr>
            <td>row 2, column 1</td>
            <td>row 2, column 2</td>
          </tr>
          <tr>
            <td>row 3, column 1</td>
            <td>row 3, column 2</td>
          </tr>
        </tbody>
      </table>
      <p>We also have a nice footer text here at the end!</p>
    </div>
  </body>
</html>

PaperCSS

PaperCSS is a CSS framework that modifies the look of the page so that the page looks as if it has been built from pieces of paper, and the used font mimics handwritten text. To start using PaperCSS, we link its CSS definition to the head element of our page. In addition, we add a meta element that is used to inform about responsive behaviors, and a meta element that is used to suggest the use of edge browser in the case of internet explorer.

<link rel="stylesheet" href="https://unpkg.com/papercss@1.8.1/dist/paper.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

Similar to Bootstrap and Milligram, we wrap the contents of the body with an element that has the container class. This is, at this point perhaps unsuprisingly, used to pad the content within, aligning the contents nicely on the page. In addition, we also add the paper class to the element, which enables some of the styles.

<!-- ... -->
<body>
  <div class="container paper">
    <!-- page content -->
  </div>
</body>
<!-- ... -->

No other changes are needed. The page looks as follows and the HTML is shown below.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/papercss@1.8.1/dist/paper.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  </head>
  <body>
    <div class="container paper">
      <h1>My epic page</h1>
      <p>Welcome all to my epic page. This page has all the epicness that one needs. It also has a form and a table.</p>
      <h2>Form</h2>
      <form>
        <fieldset>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" />
          <input type="submit" value="Submit form" />
        </fieldset>
      </form>
      <h2>Table</h2>
      <table>
        <thead>
          <tr>
            <th>table header 1</th>
            <th>table header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>row 1, column 1</td>
            <td>row 1, column 2</td>
          </tr>
          <tr>
            <td>row 2, column 1</td>
            <td>row 2, column 2</td>
          </tr>
          <tr>
            <td>row 3, column 1</td>
            <td>row 3, column 2</td>
          </tr>
        </tbody>
      </table>
      <p>We also have a nice footer text here at the end!</p>
    </div>
  </body>
</html>

Common patterns

As you may have noticed, the frameworks shown above all used a style class container for padding the sides of the page and for defining an high-level layout element. Elements placed within the element that has the container class are laid out following the behavior specified by the framework.

In principle, this does not differ from what we did when learning about layout mechanisms. Previously, we created a style called container that would contain elements and add basic styling. The style container from the CSS frameworks has the same purpose. However, one must note that developers of CSS frameworks have invested significantly more time in thinking about the styles and what works and what doesn't.

In the CSS frameworks, styles may be added to components, although CSS frameworks often come with sensible defaults. For example, when working with Bootstrap, we added the style classes for the input button and the table -- without adding the styles, the button and the table would not have been appropriately styled. At the same time, with Milligram and PaperCSS, input and table were styled by default.