You might be wondering: where is the card component? Why isn't there anything in the card component? Right now there's nothing there, but we're basically only going to be applying styles to our card component. So what I'd like to do is write some of these styles in our card component.

So let's head over to our app and you see in card.js that we have a className of card. So what I'd like to do is close out all over components, and remember that we're using card. For this app, we're just going write all of our styles in main.CSS.

In future apps we're going to separate our CSS into multiple files. So for example, if we were to do that in this guide we would say card.scss, header.scss, home.scss and input.scss. Now the reason I'd like to do it here is that the styles are minimal.

There's not a ton of styles we're going to be writing in this course, and we need you to understand that you can write these styles in any file, any SCSS file, as long as it's being used in our bootstrap.js right here. See how it says import './style/main.scss', and then underneath the hood this is being compiled into a regular CSS.

So let's close this file right here and let's go to main.scss and let's say:

main.scss

.card {
    height: 736px;
    width: 1240px;
}

This will allow us to get the kind of card we're looking for right. Let's go to our application in the browser. You'll see that we can't see anything and that's because we haven't given it a specific color, and we haven't put any background shadow. There's nothing really saying it's here. It's white just like the background.

So if we go to the elements and we open up an app wrapper, you'll see that we have home, and in our home we have our header and our card. This kind of goes back to components. You'll see that we were header and our card is divs.

Then in our home.js, we have our header and our card, which are then in turn rendering these in there. Anyway, let's get back to the styling. What we'd like to do is hover over a card and you'll see that it indeed is 1240 by 736. I'm not going to move my mouse so we can still see this. But by the inputs, you'll see that it says 240 by 736.

So let's go ahead and figure out how we can make this actually appear. So let's go back to here, and we kind of want this background shadow. That's what differentiates it. It looks like the background might be a different color too or it could just be the shadow. So let's go to our application here and let's say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,1);
}

So let's go to our app, and you'll see that kind of this nasty black shadow. It's just too dense. We need to make it nice and shadowy.

So let's say point 0.6 for the box-shadow. Now let's go back to our app and you'll see that it's really subtle now, but you can still see it. Let's continue building our app by getting into the rest of our styles here. You'll see that we have a border-radius here. So let's add in a border-radius, and then we'll be done with the card styles. Let's say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,0.6);
    border-radius: 7px;
}

Let's go back to our application, and you'll see we now kind of have a nice border-radius.

So to make them stand out a bit, let's give our background color of the body a kind of subtle Gray. So what I'd like to do is over to the code here and let's just say:

main.scss

body {
    background-color: #CFCFCF;
}

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,0.6);
    border-radius: 7px;
}

Now let's go to our app and see what we have. That's extremely gray, so we won't be using that. What we can do, and you'll notice it also goes over our card, so let's basically just turn this opacity all the way down. So if you hover over it in visual studio code we can bring it down.

Now you'll see if you don't have the option, you can just write rgba(207, 207, 207, 0.06). If you reload that now gives a really subtle kind of shadow. The next thing I'd like to do is instead of seeing it on the body let's just say:

main.scss

.home {
    background-color: rgba(207, 207, 207, 0.06);
}

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,0.6);
    border-radius: 7px;
}

Next, we need to make this work. We need to actually have these values do something. We need to be able to type into these inputs and have them be something. So if you go to the app right now if you type in these nothing happens obviously. So using state and React, we can make a really cool app here that will basically automatically map over these values.

So in the design, you can't see this, but with React we can make it so when we type in any of these inputs it automatically maps over here in real-time. So go to our code and learn how to do that. What I want to do is actually do that in the next guide, just to kind of separate these concepts a bit.

So let's say in the terminal, real quick let's say: git status, git add ., and let's say git commit -m "added some styles". See you in the next guide where we will hop into application state in React, and we can actually learn how to write some cool React features.

Resources

• Source Code