Step 10: A bit of styling

In this step, we are going to do some first styling of our page.

Skeleton CSS

We are going to use a CSS framework. Since we want to keep our page rather simple and we are not going to use a lot of fancy CSS features, we are going to use Skeleton. Skeleton is a very lightweight CSS library which comes with a responsive grid system, which we will look at later.

For now, let’s just include the Skeleton CSS library in our HTML document.

index.html - include skeleton
 4
 5
 6
 7
 8
 9
10
11
    <!-- ... -->
    <title>Land use statistics map</title>

    <!-- CSS libraries -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" type="text/css">

    <!-- Custom CSS styles -->
    <!-- ... -->

And we see that Skeleton already applied some styles to our page, namely the font changed and the table looks much nicer now.

Some styling

While our table looks a bit nicer now, Skeleton also added a lot of space (padding) between the table cells. We can overwrite this in our custom style sheet. We also add a little margin at the top of our details container so it does not stick as close to the map.

style.css - table styling
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* ... */

#details {
  margin-top: 2rem;
}

table {
  margin-bottom: 0;
}
td, th {
  padding: 6px 9px;
}
td {
  text-align: right;
}

/* ... */

Centering content

Skeleton provides a wrapper to center content by adding a class container to the element. So we put all the HTML containers we have so far in a <div> element with this class.

index.html - center content
12
13
14
15
16
17
18
19
20
21
22
  <!-- ... -->
  <body>
    <div class="container">
      <h3>Land use statistics map</h3>
      <div id="map"><!-- Map container --></div>

      <div id="details" class="hidden"><!-- Details container --></div>
    </div>

    <!-- Mustache template, rendered later to show the details of a feature -->
    <!-- ... -->

And we see that all the content is nicely centered, at least on larger screens. If the screen width is too narrow, the map is not centered yet, but we will fix that later on.

Grid layout

Skeleton is based on a grid layout where each row contains 12 columns.

This means that the markup for a row with two columns of equal width would look like this:

markup to create columns with skeleton
<div class="row">
  <div class="six columns">Column 1</div>
  <div class="six columns">Column 2</div>
</div>

We can use this in our details container to display the name of the feature on the left and the table with the data on the right.

First, we add the class row to the details container which will eventually hold the details.

index.html - class row for details container
13
14
15
16
17
18
19
20
    <!-- ... -->
    <div class="container">
      <h3>Land use statistics map</h3>
      <div id="map"><!-- Map container --></div>

      <div id="details" class="hidden row"><!-- Details container --></div>
    </div>
    <!-- ... -->

Next, we add the columns class in the Mustache template.

index.html - name and table in columns
19
20
21
22
23
24
25
26
    <!-- ... -->

    <!-- Mustache template, rendered later to show the details of a feature -->
    <script id="template" type="x-tmpl-mustache">
      <h3 class="six columns">{{ name }}</h3>
      <table class="six columns">
        <tr>
          <!-- ... -->

Next

Proceed to Step 11: Responsive map and instructions.

Code