In our application we want to basically close out of our terminal and then go to our app.js and introduce some new divs. Okay so lets get rid of the content in the three hi divs, and then lets give them class names. So the first className is going to be grid__skew-dark-one and we are just going to copy this a few times and then let's change them.

app.js

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div className="grid">
        <div className="grid__skew-dark-one"></div>
        <div className="grid__skew-dark-two"></div>
        <div className="grid__skew-dark-three"></div>

        <div className="grid__skew-light-one"></div>
        <div className="grid__skew-light-two"></div>
        <div className="grid__skew-light-three-box"></div>
      </div>
    );
  }
}

Now, let's go look at it and visualize how we want to do this before we start typing code and mess up. Alright so you can see that we have this weird skew here, now one approach would be to go to our clip path and select trapezoid and try to get that effect although thats just pretty inefficient and pointless.

What we can do instead is provide a block like we did with the other skews and then just put it behind it. You wont be able to see this part because its over it but you would be able to see the rest. So if I inspect the element let me show you what I'm saying, so I'll select the grid and you'll see that we can just say let's make this one go from column 1 to 3 and then from row 1 to 5.

And then we will put it behind the skew that is already there and then we will put in the bigger darker skew. Okay so let's get into that block there, okay this is pretty simple stuff that will be our grid skew dark one box again sorry about the confusing names.

You could probably come up with a better naming strategy then this, but I'm just going to stick with it. Okay so this naming strategy is good because its very clear as to which skew it is, which is good because then you don't have to put in a ton of comments.

Let's do this, let's not put it in with these other skews in the main.scss because that's going to get really cumbersome really quick. Let's do this instead and let's say .grid down here and then we will say &__skew-dark-one-box, and we'll do skew two as well and I think that is all that we actually need I don't think we need that third one.

Let's just focus on the box though, so we want a background color and then let's get that from our application after we do this, so let's just say crimson for now. And then let's say grid column is 1/3 if you remember because we want it to go a crossed two columns, and then grid row 1/5.

main.scss

.grid {
    &__skew-dark-one-box {
        background-color: crimson;
        grid-column: 1/3;
        grid-row: 1/5;
    }

    &__skew-dark-two {

    }
}

Now, if you go to our application you'll see that's exactly what we want except for its a different color. Let's go to the design and I'll get the color and then you can just copy it. So it looks like its #518BDE so go ahead and just throw that in instead of crimson.

Now that should give us the effect we want, let's go ahead and add in that other skew and then clean things up in our code a bit. So you can see that what we want to do is basically extend it from column 3 to 5 and then what will do is extended all the way down again. So basically we are doing the same exact thing except we are providing a clip path on this one.

This is really simple really awesome, and so much easier than what I tried to do the first time around when I initially recorded it, this is such a better approach and consider yourselves blessed if you're going through these guides and not the initial ones.

So let's go ahead and do that now, we want the same information here except for we want to basically put the column over from 3/5.

main.scss

&__skew-dark-two {
    background-color: #518BDE;
    grid-column: 3/5;
    grid-row: 1/5;
}

So if you save that it's basically going to extended it, now we just need to apply that clip path, so let's go back to Chrome to our clip path maker and lets select parallelogram we are obviously going to move it but that should just make it easy.

Let's extend it to, well let's guess and we don't want to put it all the way over we want to put it about half way maybe, or actually we do want to put it all the way over. As you can see in our design it extends right here and thats obviously an invisible line you can kind of look at.

So let's go to the clip path maker and take this bottom right corner all the way over to the left. And it's not going to look like a triangle like this, its going to extend up because of how we are laying out our grid.

So this might be looking different you in your mind, but let's just copy this over and put it in our skew-dark-two and let's save this.

main.scss

.grid {
    &__skew-dark-one-box {
        background-color: #518BDE;
        grid-column: 1/3;
        grid-row: 1/5;
    }
    &__skew-dark-two {
        background-color: #518BDE;
        grid-column: 3/5;
        grid-row: 1/5;

        -webkit-clip-path: polygon(0 0, 100% 0%, 0 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0%, 0 100%, 0 100%);
    }
}

Now let's save that and go to our app and you'll see that looks great.

So I'm going to close out the grid or well what I'd rather do is just open this up in a new Firefox tab just so we can kind of go back and forth from the grid view and what it looks like without the grid. So let's go ahead and just resize this and see what it looks like, and it shouldn't resize much because of the way we set it up and yeah that looks great.

You'll see that if we were to get rid of this minmax in our grid on the columns and just say repeat 1fr you'll see if we do that this is going to get really ugly real quick. You see it just skews down way to much its trying to maintain the exact percentage or aspect ratio.

We don't want to do that, we want it to say okay we don't want to resize this down any further it's going to look bad, which is why we put in minmax. So it'll say okay the minimum is going to be 150px each one of these columns has to be at least 150px other then that it can be a fractional unit.

Now a fractional unit is basically like saying 1/11, if its a fractional unit its going to be 1/11. The fractional unit for the row is going to be 1/4 because you'll see that we have four rows so we want it to be 1/4th of everything.

Try and understand what I just said, if that doesn't make sense again don't worry it doesn't matter now, you will get the hang of it as we go on and build out more applications.

But I do recommend that you do try and understand how this works because it will make things a lot easier and of course the main goal here is to understand how this works I'm just saying that if you don't, don't worry to much because you'll catch it overtime most likely.

Okay, so that is how you do that. Let's go ahead and clean up our code a little bit because you'll see that it gets really messy really quick. But we kind of avoided that by putting a new .grid here and putting new code in it.

So let's go ahead and create a new file in our style and let's just call this clippaths.scss now in main.scss let's import this. So I'll hit return a couple times and just stay @import 'clippaths' you don't have to specify that its scss, it just knows.

Okay now what we can do is basically copy all this code inside of main.scss and throw it into clippaths. Now this doesn't really clean up things very much right now except for when we start adding in new code it really will because it we'll say okay we know all of our clip apps exist in this one file we don't have to search for it in main.scss.

Another thing I would like to do is get rid of this grid stuff and put it in the main.scss because it doesn't really make sense to put it in clip paths because this grid is not only for the clip pass, it's going to be for our entire application.

So we don't want to say, okay let's modify our grid if we ever wanted to and then say, oh its in clip paths, obviously we don't want it to be in clip paths because thats not going to be our though we're not going to say oh it belongs in clip paths.

We're going to say it belongs in a file like grid or in our main, so as a matter of fact what I'd like to do is create a file and call this base.scss. Now what we want to do is paste this in here except for not directly, obviously what we want to do is say .grid and paste it in.

base.scss

.grid {
    height: 100vh;
    width: 100vw;

    display: grid;
    grid-template-rows: repeat(4, minmax(200px, 1fr));
    grid-template-columns: repeat(11, minmax(150px, 1fr));
}

All I did here is take this code out of clippaths.scss and I placed it in base.scss just to clean things up, its not going to change anything, although sense we are not importing this yet you'll be able to see what our application looks like with out the grid.

again I'm not importing it so all it's including right now is our clippaths.scss, there's no grid. Okay so let's go into our app and let's just look at what that looks like and you'll see that you can't even see anything.

There's no grid, we've tried to lay these out on a grid nothing's really working, you'll see our skews are all messed up and nothing looks good. So let's go ahead and go back to our code and import this base file into our main.scss and let's import it above clip paths.

main.scss

@import 'base';
@import 'clippaths';

Now if you go back to the browser you'll see it all comes back.

Now, one thing I want to do before we move on is another refactor and kind of clean things up. We know we are going to be using these colors and clip paths through out our application we've already used them multiple times, so rather than trying to remember these and go back and reference code and go to the design. Let's just put these in variables that we will remember okay.

So skew-light-one that's going to be our light color so I'm just going to hit command x after selecting that color. And then let's go into our base file, and then let's create these files at the top of our base.

So its kind of like the base of the application so its going to contain our variables and our grid set ups and stuff like that. So let's say $color-blue-one: now you can name these what ever you want, but obviously I'm going to be naming these like this through out the whole application.

If you want things to go smoothly I recommend using the same function names. On the flip side it might be a good idea to change them because then you are going to be forced to remember how your code is working.

But it doesn't matter just put in the color here so #5496E6. Okay, so really awesome now we can just use this color in here, we can just say color-blue-one. And if we weren't to import base it wouldn't work, you'll see right now it's working fine but if we were to go into main.scss and not import base again our grid is not there so we wouldn't see it.

And the color is not going to be there either and we will also get an error thats saying hey where is this color-blue-one.

So that's why we have to make sure we import it into our application.

Now, another thing you want to watch out for is importing it after we use it, if you try to import the variable after we use it, so if you import it after clippaths its not going to work because it's going to say hey where is it, because you haven't defined it yet because of the way it compiles.

So go into your main and make sure you are putting base above clippaths because it has variables that we're going to be using in clippaths. So let's get rid of these # and replace them with color-blue-one. So I'll show you a cool feature in VS code if you're not using VS code just switch these out color blue with these colors.

Now, if you're in VS code and if you select it and hit command + d you'll see it selects the next instance. Now if this was in a whole bunch of places like if we had a whole bunch of these you could just hit command + d over and over again and it would select them all.

And you'll see that there is a curser at the end of each of these, now we can just type so thats really awesome, it really speeds things up when you get into code mode, so I recommend learning these little tricks in code editors.

I'm not sure if Sublime has this feature it's pretty limited, its a pretty lite text editor, I mean VS is lite as well. Anyway it doesn't really matter, I'm just trying to prep you as we go through these apps so you can build stuff and see what I'm doing quicker, because I'm going to be using that feature quite a bit and I'm not going to explain it as I go on, but I'll probably explain it a couple more times.

So let's now put this #518BDE into its own variable, so I'm just going to copy that and then I'm going to hit command + d so I can select these both and then I'm just going to say $color-blue-two;.

So I'm kind of speeding things up here, we haven't even defined this yet. But I just want to speed things up as I go on through out the application so you can see what I'm doing and so that the future apps can be quick and we can get them done quickly.

Okay, so let's go define this variable in base.scss let's put this on another line so lets say $color-blue-two: #518BDE; and what I guarantee will happen is as we're building this application is I might forget a name I used and I'll go back to base.scss to remember it and I'm just trying to get you used to my dev flow.

So let's go ahead and go to our app and make sure everything is working, and it looks good to me.

Now, you'll see we have a blue line that appears there every now and then, and that's just because of the way we have it set up with being specifically right there. One fix we could do is we could just extend the darker blue to start in the top left corner and then we can specify that this left point goes in the middle rather then the end.

So what I'm saying is instead of doing this we can make it extend all the way over grid so over 4 columns not just 2. And then we can actually do something like this where its at 50%.

Okay so go ahead and copy that and I'll show you what I'm doing. So I'm going to go into the code, I'm going to go into clippaths and I'm going to go to skew-dark-two and let's just replace it in here.

So I'm just going to show you what the difference is in here, so this is the difference.

Original

-webkit-clip-path: polygon(0 0, 100% 0%, 0% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 0% 100%, 0% 100%);

New

-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);

That is the difference, all we are doing is saying we want it to go half way instead of at the beginning. Now if we get rid of that old webkit and clip-path and just leave the new one. It's going to basically look like less of a skew, do you see that it extends way too far out.

But what we're going to do, is we are going to extend this all across so the middle will be right where this one ends. So let's go into clippaths.scss and start it at 1 on our grid column.

clippaths.scss

&__skew-dark-two {
    gackground-color: $color-blue-two;
    grid-column: 1/5;
    grid-row: 1-5;
}

Let's save that and let's go into our app and you'll see that it's where we want it.

Now let's see, it looks like it messed up something with our other skew here. Let's go ahead and go to our app here, and what I want to do on the skew-dark-two is say z-index: -10; and that will just put it at the back of our app.

So that looks great.

You don't get that line anymore, and that looks really clean and it extends very well, and that kind of wraps up our skews for now. We're going to have another couple skews later on with our buttons and with our timer display.

Now what we've done here is made it really easy to add in these skews when we do because if you go back to Firefox you'll see we have all these rows so we can just put it right here in the corner of 2/3.

When we develop this skew really simply we can just place it right here now and then make it go up halfway or something.

And then just extend it to over here to the end part of the grid. So by using CSS grid we made it incredibly easy for us to one scale our CSS front-end application so we don't have to refactor much, and we've been able to visualize things very quickly.

So CSS grid is a good technology and I think it was released around 2017 you can Google it if you'd like. But anyway that completes our initial skew set up.

In the next video let's place our Birthday Countdown label up here in the left corner and then we will start building this component MM/DD/YYYY and Generate Countdown components.

I'll see you in the next video, so lets go ahead and commit our code.

Terminal

git status
git add .
git commit -m "placed dark skews and refactored SCSS"

Resources

Source code