9. Styles

We want the charts to be positioned side-by-side, so we will need to add some code that dictates the design of the page.

9.1. What is CSS?

Customizing design is typically done by writing CSS code. Short for Cascading Style Sheets, CSS is a language used to add style and layout to webpages. It allows developers to control the colors, fonts, layout, and other visual elements of a webpage, while remaining separate from the HTML structure, which makes your code easier to maintain and update.

Note

We don’t have time to cover how CSS works in this class. There are dozens of free tutorials available elsewhere online, including one by Mozilla.

Every decent framework offers some method for managing CSS. In baker’s cases, CSS files are stored in the styles folder. There you can find an app.scss file that acts a starting point for whatever styles you’d like to include.

There we can get both charts on the same line by using the Flexbox layout system. To start, lets target the div that contains the parent graphics container.

.graphics-container {
  display: flex;
  justify-content: space-between;
}

9.2. What is SCSS?

One benefit of baker, and many other frameworks, is that they allow you to take advantage of extensions to the traditional tools like CSS. One example is SCSS, also known as Sassy CSS. It extends the capabilities of CSS with features such as variables, mixins and other functions that make writing and maintaining CSS code more efficient and organized.

We can use it here by nesting a directive to limit the width of the two charts to just shy of half the page. By placing the code inside of the parent container’s code, we will only style the two elements in our container.

.graphics-container {
  display: flex;
  justify-content: space-between;
  .graphic {
    flex: 0 1 48%;
  }
}

Now that the charts are next to each other, we can see that despite our resizing in Datawrapper, they are not the same height. We’ll add a few more lines to our CSS to make both iframes the same height.

.graphics-container {
  display: flex;
  justify-content: space-between;
  .graphic {
    flex: 0 1 48%;
    iframe {
      min-height: 360px;
    }
  }
}

9.3. What is responsive design?

We can also specify media queries that target screens smaller than 500 pixels wide, more commonly known as mobile phones, where we want the charts to be stacked on top of each other instead of squeezed side-by-side.

.graphics-container {
  display: flex;
  justify-content: space-between;
  @media (max-width: 500px) {
    display: block;
  }
  .graphic {
    flex: 0 1 48%;
    @media (max-width: 500px) {
      display: block;
      margin-bottom: 15px;
    }
    iframe {
      min-height: 360px;
    }
  }
}

Your charts should now stack into one-column at mobile phone sizes.

Let’s commit our changes and move on to our next challenge. You know the drill.

git add .
git commit -m "Styled charts."
git push origin main