- Read Tutorial
- Watch Guide Video
All right so we want to make it look like this.
Let's go into our archive component and we have title and items, so what I want to do is add another className of archive-items
newsletterArchive.js
function ArchiveItem({title, date}) { return ( <div className='archive-item archive-items__item'> <div className='archive-item__title'>{title}</div> <div className='archive-item__date'>{date}</div> </div> ) } class NewsletterArchive extends Component { render() { return ( <div className='newsletter-archive'> <div className='newsletter-archive__title'>Archive</div> <div className='newsletter-archive__items archive-items'> {/* newsletter items */} <ArchiveItem title='hey' date='this is the date'/> </div> </div> ) } }
Now let's go into our newsletter-archive.scss.
newsletter-archive.scss
.newsletter-archive {
grid-row: archive-s/archive-e;
grid-column: archive-s/archive-e;
&__title {
}
&__items {
}
}
.archive-items {
&__item {
}
}
.archive-item {
&__title {
}
&__date {
}
}
Now we have access to these all over the place and we can make it look good. So I want to start with the title.
newsletter-archive.scss
.newsletter-archive {
grid-row: archive-s/archive-e;
grid-column: archive-s/archive-e;
&__title {
color: $color-red-BA;
font-size: 1.8rem;
font-weight: 500;
line-height: 2.3rem;
border-bottom: .1rem solid $color-gray-E6;
padding-bottom: .4rem;
}
&__items {
}
}
Let's try that now. And it's looking pretty similar right now we just got to style the archive items with a grid and a row gap. So the grids are going to be pretty automatic because they're all the same. We don't have any special conditions here. We don't have like a box button over here. We just need it to autofill again based on how many items there are and then we'll put a row gap of how many pixels we decide.
So let's see. Let's go to our code and display our grid.
newsletter-archive.scss
.archive-items {
display: grid;
&__item {
}
}
Now what I want to do is actually write a grid for the archive itself.
newsletter-archive.scss
.newsletter-archive {
grid-row: archive-s/archive-e;
grid-column: archive-s/archive-e;
display: grid;
grid-template-rows: [title-s] 2.7rem [title-e items-s] 1fr [items-e];
&__title {
color: $color-red-BA;
font-size: 1.8rem;
font-weight: 500;
line-height: 2.3rem;
border-bottom: .1rem solid $color-gray-E6;
padding-bottom: .4rem;
}
&__items {
}
}
Now that's going to autofill as well because we only have these two items we don't really worry about placing them. We can but I just want to be specific with the titles even if we don't. So that when we come back in here if we ever do that we'll say OK this is clear on what's going on here.
Now what we want to do is put in more items so we can actually see this in action. OK lets's go into our newsletterArchive.js and let's just copy and paste our ArchiveItem a few times.
newsletterArchive.js
class NewsletterArchive extends Component { render() { return ( <div className='newsletter-archive'> <div className='newsletter-archive__title'>Archive</div> <div className='newsletter-archive__items archive-items'> {/* newsletter items */} <ArchiveItem title='hey' date='this is the date'/> <ArchiveItem title='hey' date='this is the date'/> <ArchiveItem title='hey' date='this is the date'/> <ArchiveItem title='hey' date='this is the date'/> </div> </div> ) } }
Now I'm going to go back to Firefox and see how that looks like. I'm going to select it on the grid so archive and then the archive items.
You can kind of see how this is working now. Really cool. All right so that should be good.
What we want to do now is style the items in this grid, we don't want them to just be grey. We wanted to look more like the web design we have in here, and then deal with the date object and then we'll finish off the archives. We can probably do this all in this video.
Let's try it let's go into our code and go into the newsletter-archive.scss. We don't need all of these selectors, so we'll get rid of the ones we don't need later. Let's add in some styles.
newsletter-archive.scss
.archive-item {
display: grid;
&__title {
font-size: 1.4rem;
line-height: 1.7rem;
margin-bottom: 3px;
transition: all .2s ease;
&:hover {
font-size: 1.6rem;
font-weight: 500;
}
}
&__date {
}
}
So that should cover the title. It's working just like it should in our design, with it getting bigger when we hover it.
Now let's work on the date.
newsletter-archive.scss
.archive-item {
display: grid;
&__title {
font-size: 1.4rem;
line-height: 1.7rem;
margin-bottom: 3px;
transition: all .2s ease;
&:hover {
font-size: 1.6rem;
font-weight: 500;
}
}
&__date {
color: $color-red-BA;
font-family: $font-encode-cond;
font-size: 1.3rem;
line-height: 1.6rem;
}
}
Let's check it out now. And that looks pretty good. Obviously we don't have a date in here so we can't really tell. Let's go into our newsletterArchive.js and change the date in one of the items to have an example date.
Now when you do left all you do with this component now is give it some row gaps and then we need to throw in the functionality for the item to get the date parsing the way we need it to. So let's get on the row gaps and then in the next video we'll throw in the calculations for the date and then we'll move on to the content component.
So let's go to our code here and let's go to the newsletter archive.
newsletter-archive.scss
.newsletter-archive {
grid-row: archive-s/archive-e;
grid-column: archive-s/archive-e;
display: grid;
grid-template-rows: [title-s] 2.7rem [title-e items-s] 1fr [items-e];
&__title {
color: $color-red-BA;
font-size: 1.8rem;
font-weight: 500;
line-height: 2.3rem;
border-bottom: .1rem solid $color-gray-E6;
padding-bottom: .4rem;
}
&__items {
}
}
.archive-items {
margin-top: 1.6rem;
display: grid;
grid-row-gap: 1.6rem;
grid-template-rows: repeat(auto-fit, 1fr);
&__item {
}
}
.archive-item {
display: grid;
grid-row-gap: 3px;
&__title {
font-size: 1.4rem;
line-height: 1.7rem;
transition: all .2s ease;
&:hover {
font-size: 1.6rem;
font-weight: 500;
}
}
&__date {
color: $color-red-BA;
font-family: $font-encode-cond;
font-size: 1.3rem;
line-height: 1.6rem;
}
}
So what we need to do is fix up this date so that things are actually parsed as a real date instead of just displaying text. So let's go ahead and complete that functionality in the next video and add the content component.
Let's commit our code.
git status git add . git commit -m "styled archive items and such"
I'll see in the next video.