Footer and Alignment Utilities

Transcript

Our first goal in this lesson is to center and limit the width of the main content area.

We have previously created a class called center, but when we apply it we see no changes. The second step is to limit the overall width, and for that we're going to create a new class called wrapper.

For our wrapper class, we will add a max-width property as well as some left and right padding.

.wrapper {
  max-width: 1024px;
  padding-left: 24px;
  padding-right: 24px;
}

Once that is saved, we have now achieed our desired affect on the main content.

This last part is the footer, so we will add the same classes into our footer element.

Now we will turn our attention to styling our footer. In looking at our final design, we see that the characteristics of the footer are a dark background, the logo image, and that the alignment is such that the image is on the left and the copyright information is on the right.

First, let's create a class to apply the background color. The background color we're after is a little bit darker than what was used in the header, so we will create the class background-black and add this style into our color utility section, applying the even darker navy blue and again using this light grey to ensure text contrast.

.background-black {
  background-color: #040234;
  color: #dcd9ee;
}

Once this is applied, one error is quite significant which is that the background color does not span across the entire page. This is because the footer has the wrapper class applied, which again, is limiting the width. And so instead of applying it directly to the footer, we can remove it from the footer and create an additional div that will wrap the footer and apply the background-color class on that element instead. And on save, we see that we have achieved spanning the whole width.

Before we move onto alignment, we need to add a placeholder for the logo image. We're not quite ready to add custom images during this lesson, so instead we can use a service called placehold.it and pass it the value of 40 which will create a 40 pixel square to represent our final logo dimensions, which you can see has now been added.

<img src="https://placehold.it/40" alt="Unicorn Space Tours" />

It's time for another spacing utility class. You can see that the logo is flush with the top, and the copyright is flush with the bottom. We would like to create a padding utility class.

We will create the class padding-v (to represent vertical) -md to represent medium which will apply the properties of padding top 24 pixels and padding bottom 24 pixels.

.padding-v-md {
  padding-top: 24px;
  padding-bottom: 24px;
}

We're setting this as a medium value in case we want to create a smaller size later that's less than 24 pixels, or perhaps a large class later that's more than 24 pixels.

We will then apply this on the same div as our background.

Upon save, you'll see that despite having equal values for padding-top and bottom, there appears to be more space below the paragraph then there is above the image. Let's inspect and find out why that is.

If we examine the image, we'll see that its bounds are tight to the image dimensions. However, the paragraph includes extra margin, which is affecting the overall visual space. For purposes of this paragraph, we ultimately do not need any margin applied, so we will be creating the class margin-v (again for vertical) -0 in the same fashion as our padding class. You can guess that this means we'll assign margin-top: 0 and margin-bottom: 0.

.margin-v-0 {
  margin-top: 0;
  margin-bottom: 0;
}

And on save, we will see that that has now equalized the top and bottom spacing which is now only reliant on the padding being applied.

Now it's time to address the alignment of the logo and the copyright. As a reminder, we want the logo on the left and the copyright date on the right.

To accomplish this, we will create a utility class called flexbox and define the property display with the flex value. Let's apply this class and see what the default behavior is. We will add it onto the footer.

.flexbox {
  display: flex;
}

Flexbox is an alternate layout algorithm for display that is considered one dimensional. Its default behavior, as you can see, is to place the flex children in what is called row alignment, which equates to horizontal or x-axis alignment. Let's update our flexbox class with one more unique property of flex called justify-content with the value space-between.

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

On save, we can see that this property has assigned extra horizontal space between the two flex children items.

The final adjustment we would like to make is to vertically align the image with the copyright date and for that we're going to create an additional utility class for reuse later.

We will call this class flexbox--aligncenter with the align-items: center property and then apply this to the footer as well. and on save, we have achieved the alignment were' after.

.flexbox--aligncenter {
  align-items: center;
}

In summary, we applied our existing center class to the main element as well as to the footer element, and then created an additional wrapper class to limit width and also add a bit of horizontal padding. Following that, we created an additional background color class and created and applied flexbox utility classes for the footer alignment. Our final alignment utility class was to remove margins from the top and bottom which was placed on the copyright paragraph.