Lesson 28 - Styling the about page

Course
Learn Eleventy From Scratch
Module
Front-End Build

We’re almost there with this front-end now. Let’s do some quickfire styling of our about page.


Like the summary says, let’s make this one snappy. We’re nearly at the end of this course now and I bet you’re getting pretty tired, so it’s time for a quick win.

Let’s go!

Adding an auto-grid utility permalink

The about page is actually pretty much ready to go. All we need to add is styles for the team members. The first part of that is the auto grid that lays out those people items.

I love this upcoming utility and wrote a pretty detailed tutorial about it here on this site.

Let’s add the code. Create a new file in your utilities folder called _auto-grid.scss:

Code language
scss
/*
  AUTO GRID
  Set the minimum item size with `--auto-grid-min-size` and you’ll
  get a fully responsive grid with no media queries.

  https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
*/
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size, 16rem), 1fr));
  grid-gap: var(--auto-grid-gap, get-size('500'));
}

If you don’t have time to read the tutorial, I’ll give you a quick TL;DR.

We use the power of minmax and auto-fill to distribute items by filling as much of the viewport as we can. This creates a really handy, fully responsive grid. All of that in 6 lines of code!

Let’s add that to our critical CSS. Open up eleventy-from-scratch/src/scss/critical.scss and on line 94, add the following, with the other utilities @import statements:

Code language
scss
@import 'utilities/auto-grid';

Adding a people block permalink

Now we have that, we’re going to create a compositional block that affects the auto-grid.

Create a new file in your blocks folder called _people.scss and add the following to it:

Code language
scss
.people {
  --auto-grid-gap: #{get-size('700')};
}

This is CUBE CSS in a nutshell. We have a utility that does one job and does it well, and a compositional block creates some context for it.

Let’s add that to our critical CSS. Open up eleventy-from-scratch/src/scss/critical.scss and on line 83, add the following, with the other block @import statements:

Code language
scss
@import 'blocks/people';

Adding a person block permalink

We’ve got our people laid out now, so let’s make them look good. Create a new file in your blocks folder called _person.scss and add the following to it:

Code language
scss
.person {
  position: relative;
  height: 100%;

  &__details {
    position: absolute;
    bottom: 0.5rem;
    left: -0.25rem;
    width: calc(100% - 0.5rem);
    padding: 0.8rem;
    background: get-color('quaternary');
  }

  &__image {
    filter: grayscale(1);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__name {
    display: block;
    font-size: get-size('600');
  }
}

What we're doing here is creating an overlay that sits on top of each person’s profile shot. Then, because we're forcing the image to fill 100% of the parent height as some images are taller than others, we use object-fit: cover again to fix the cropping. We make it black and white using the grayscale filter for good measure too.

Let’s add that to our critical CSS. Open up eleventy-from-scratch/src/scss/critical.scss and on line 84, add the following, with the other block @import statements:

Code language
scss
@import 'blocks/person';

Now, if you go to http://localhost:8080/about-us, it should look like this:

The about page all styled up with a 3 column grid of team members

Wrapping up permalink

That was a quick one wasn’t it? Let’s move straight on to another quick one by adding ourselves a basic contact page.


Comments

Next up: Lesson 29 - Add a contact page

We’ve got most our front-end now, so let’s see how flexible it is by quickly adding our contact page.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me