Now we can really quickly fix this archive problem by going into newsletter-archive.scss and scrolling down to the .archive-items and where we put auto-fit. Let's just go ahead and change that to auto-fill. It shouldn't change anything, but if we say align content start should fix it.

newsletter-archive.scss

.archive-items {
    margin-top: 1.6rem;
    display: grid;
    grid-row-gap: 1.6rem;
    grid-template-rows: repeat(auto-fill, 1fr);
    align-content: start;

    &__item {

    }
}

All right sweet, that's fixed. Now let's change it back to auto-fit and see how that behaves with the align content. All right, so those look the same, what I expected it to do is go back and we'd see it like auto-fill. With the way those work they should look a little bit differently but we probably have a height set somewhere that's preventing that from working the way I expect it to.

Anyway, either way works so let's stick with auto-fit. All right, so now what we need to do is finish styling this and than throw in this gap here. OK so let's go ahead and go into the newsletter-latest.scss and let's start by styling the title.

OK so we already have the font that we need which is the in code but we don't have the color. We need it to be white not color gray 4D by default so let's say color, I think this is the first time we've over ridden a color without making it the red color, so that's cool.

So font family is going to be in code and font size can be 40 pixels or 4em either way, you want font weight to override to 500. And let's put the line height at 5rem I'm going to change the font-size to rem as well.

And for text align we obviously want it to be centered, it doesn't really matter because the width is already set to the text but just in case we want it to definitely be centered.

newsletter-latest.scss

&__title {
    grid-row: s/m;
    color: white;
    font-size: 4rem;
    font-weight: 500;
    line-height: 5rem;
    text-align: center;
}

OK that looks good, it looks like our design.

Now let's go ahead and I think we're good for the image. When we get any images from the backend when we upload them that might change, but we'll fix it accordingly. Let's quickly style this text box.

So it looks like it's 63 pixels from the image and about 60.5 from the left there. So let's go in to our code. I'm going to close the terminal so you can see this better. And on the paragraph I'm going to say margin and whatever it was in the design there, if we go 63 pixels so 6.3rem and 60.5 so 6.5rem and it should be good. Let's throw in a line high of 2rem because we want those lines to be a little bit more separated.

newsletter-latest.scss

&__body {
    grid-row: m/e;
    p {
        margin: 6.3rem 6.05rem;
        line-height: 2rem;
    }
}

You'll see that they're a little bit separated in our design. In our app we can't see it but we'll go over it when we add in more content. Now let's go ahead and throw it, we already have the font, so I think we're good here. Let's just increase the font size to 16 pixels and make it a bit bigger.

Sweet, it looks good.

Now let's do this, I want to go over the line height to show you and we just want to put in more text anyway. So what I'll do is just go up here and search lorem ipsum and click on the first link and get some of the text here.

And I'm going to go into newsletter-latest.js and place it in here.

newsletterLatest.js

import React, { Component } from 'react';

class NewsletterLatest extends Component {
    render() {
        return (
            <div className='newsletter-latest'>
                <h1 className='newsletter-latest__title'>Title goes here</h1>
                <img className='newsletter-latest__image' src='http://via.placeholder.com/960x258'/>
                <div className='newsletter-latest__body'>
                    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
                </div>
            </div>
        )
    }
}
export default NewsletterLatest;

OK, I'm going to go into the browser now we can see that in action.

OK, so if I go to the code and just see you can definitely see this. I'm just going to pull this tab over a bit to the side for you and go to the newsletter-latest and I get rid of this line height it's going to look a bit different. With five rem it's going to greatly increase it.

It barely does it with 2rem let's just stick to 2.2rem or something because you'll be able to tell. OK so 2.2rem looks like this.

If you comment that out it's going to put that text in a little bit. It's pretty subtle but it's pretty obvious that it moved as well so that's pretty good. Now let's go ahead and I think that's all the styles we need. We do need a border here, so what we'll do is we'll throw in that border and the border radius.

So let's go in here and let's look at our application while were doing it. Let's say on the newsletter-latest as a border one pixel solid and we want the color to be color-gray-E6 I believe let's check the design. Yeah it's E6 in here and has a border radius 5 pixels. So the background looks a little more gray but it's really not, it's actually white.

You'll see it says it's white in here. So let's go in newsletter-latest.scss and let's say radius is .5rem.

newsletter-latest.scss

.newsletter-latest {
    grid-rows: s/e;
    grid-column: latest-s/latest-e;

    display: grid;
    grid-template-rows: [s] 258px [m] 405px [e];
    grid-template-columns; [s] 1fr [e];

    border: 1px solid $color-gray-E6;
    border-radius: .5rem;
}

okay that should be good, and yeah it looks really clean.

OK, now what we need to do is quickly throw in some margins or some grid row gaps we'll see what looks best. So we need this date to be out a bit, and we need this Archive to be out a bit as well. So let's just reference the designs since we have it right here, and it looks like the archive is 38.5 so we could do something like margin top 38.5 on the archive and that would work just fine. And same with this date 21px right.

But we don't really want to do that just cuz it's kind of. Well, it really does matter we can do it as row gaps, I think it would be best to do row gaps that makes more sense to me. Now this is going to be a bit different. We don't want it to be 21 pixels because technically in our app our box starts here, so if we do 21 pixels this arrow is still going to be over it.

So we'll do something like half of this, which we know this box is 4rem if you remember. It's 40 pixels, so we'll say 40 pixels plus 21 so about 61 pixels. And this will be 3.8rem, 38.5 pixels so 3.85rem and then we've got 66.1rem, so let's go and apply that to our grid.

So let's go to newsletter-grid .scss and let's say grid row gap, so it's going to be on the rows. that's going to be our 38.5 so 3.85rem and then we have a grid column gap of 21 pixels plus the half of our box so about 61 or 6.1rem.

newsletter-grid.scss

.newsletter-grid {
    grid-row: content-s/content-e;
    // height: 100%;
    display: grid;
    grid-template-rows: [s box-s] 16rem [box-e archvie-s] 1fr [archive-e e];
    grid-template-columns: [box-s archive-s] 16rem [box-e archive-e latest-s] 960px [latest-e];

    justify-content: center;

    grid-row-gap: 3.85rem;
    gird-column-gap: 6.1rem;
}

OK, now there could be some potential problems with this and it's that it could throw the gap on top or on bottom of our entire grid, so let's see how it reacts. We only want it to appear in these two positions, now if it does that the approach we should take is just applying margins to these components specifically. So let's go see what it looks like with the gaps, okay that actually looks really really good.

Just to show you how well that brought things together I'll comment it out and you'll see the big difference just a couple styles can make. So you'll see if we comment that out it's going to make it look awful,

whereas if you just add in these two little styles and it really adds a lot to the application, spacing is a lot. And now another thing I just noticed is that we need something on the top here which we'll just add a margin top to the entire grid.

So let's see what the design wants, it wants it to be about 47 pixels. So we just need this to be 47 pixels down and it's right on it. So we already know that's all we have to add. So let's just say margin top is 4.7rem. And then let's just move a few of these things around, so justify content and margin apply to where it is on its own grid, mostly justify content.

So let's put these at the top sense it doesn't only have to do with the grid. The actual newsletter grid it has more to do with where it belongs on its own grid much like how we put grid row up here. Because grid row doesn't have anything to do with its own grid if makes sense. Let's get rid of this height and that looks really clean.

newsletter-grid.scss

.newsletter-grid {
    justify-content: center;
    grid-row: content-s/content-e;

    display: grid;
    grid-template-rows: [s box-s] 16rem [box-e archvie-s] 1fr [archive-e e];
    grid-template-columns: [box-s archive-s] 16rem [box-e archive-e latest-s] 960px [latest-e];

    grid-row-gap: 3.85rem;
    gird-column-gap: 6.1rem;
}

Now you'll see that we have our application build out really well here, it looks very similar to our design, its very clean and looks very good. Now one thing I did notice is that our layout is quite wide. Now it might not look like that on your screen because you're likely on a smaller screen so it's probably something like this. Which is exactly what it looks like in the design.

So that's up to you if you want to change that, it looks good like that to me. Now extending it like this. I think this is just as good, I think it looks great. The design doesn't specify at all whether it gets bigger or larger, it really only has that one kind of width.

OK so let's go ahead and let's look at our application and before we get into anything else we have to make it so we can receive data into this because right now we're just hard coding things in and we want to make it so when we're in the back end. Or let me call when we fetch the latest newsletter, we want it to just throw the content in we don't have to worry about anything at that point,

We want to program it takes in this content automatically. Again after that let's get rid of this boarder because you've seen the design and we don't have that in here. And this is also different up here with the Welcome and HOA management, so we'll talk about that.

Let's commit out code

Terminal

git status
git add .
git commit -m "styled newsletter latest and applied row gaps to the newsletter grid"

Resources

Source code