Sweet Cards with CSS
Tags: css, javascript, react, styling
Published: 2021-01-28 19:06:35

Hey all! Today I'm going to give you several simple tips for styling a dashboard page involving multiple "cards". I'm using Rails backend (doesn't matter) and React frontend. 
We'll also import a Google font into our App file! 

I have minimal "styling" right now, but I wouldn't even call it styling. This page is the user's dashboard page to display their PLANT collection. 

We're going to make neat containers and cards to hold it all together! (if your Dev settings are in light mode you can't see the edges of the below screenshots as clearly)

![Screen Shot 2021-01-28 at 9.48.24 AM](https://dev-to-uploads.s3.amazonaws.com/i/eq1sm4olc4iagch7hpif.png)

# DASHBOARD div
First, let's make our biggest container: the page itself! Here's the basic structure, you can ignore all the React-y stuff. Just notice that PlantContainer component is one layer inside "dashboard" div.
```
render() {
        return (
            <div className="dashboard">
                <div>
                    <h2 className="user-name-icon"><img className="user-dashboard-icon" src={user.icon} />
                    {this.props.user.username}</h2>
                </div>
                <div className="dashboard-btn-div-top">
                    <button className="dash-add-plant-btn" >Add Plant</button>
                    <button className="greenhouse-btn" >Greenhouse</button>
                </div>
                <PlantContainer 
                    
                />
                <br></br>
                <div className="dashboard-btn-div-bottom">
                    <button className="dash-edit->Edit User</button>
                    <button className="dash-logout-btn"  >Logout</button>
                </div>
            </div>
        );
    }
}
```
The outermost wrapper has the class of "dashboard". To start, I just want to get the content off the left EDGE of the page...I hate that it's touching. In your CSS file:  
```
.dashboard {
     padding: 40px;
}
```
Padding **pushes in** content from the border of the element. (Margin **pushes out** from the border, and border is the actual edge of your element) 

![Screen Shot 2021-01-28 at 10.10.19 AM](https://dev-to-uploads.s3.amazonaws.com/i/xttf7afojbw8ogxj1fcm.png) 

# PLANT CONTAINER div
Ok now let's look at the next container -- the Plant Container component. This one returns a div with class of "plant-container". I want that box to contain all the plants I have in my collection! 

CSS: 
```
.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
}
```
So I've made a border to outline the container, I've **pushed out** from the container with margin 20px, and **pushed in** some padding inside so the content isn't RIGHT on the edge of the container. 
 
![Screen Shot 2021-01-28 at 10.16.24 AM](https://dev-to-uploads.s3.amazonaws.com/i/ew7rjvo9bb3a6fnzkrc7.png)

Cool, so now we have a box inside of another box. I want the edges of my boxes to be *soft*, so I'll add `border-radius: 10px;` to soften the edges in `.plant-container`. 

![Screen Shot 2021-01-28 at 10.20.34 AM](https://dev-to-uploads.s3.amazonaws.com/i/6datyo1gkwxv2twkihvr.png)

# PLANT CARD div
Nice. Now, let's go another level deeper and get the cards themselves boxed in. My plant cards are being rendered in the PlantContainer component, so you won't see it in the above snippet. 
```
.plant-card-dashboard {
         border: 1px solid rgb(0, 0, 0);
         border-radius: 10px;
         padding: 15px;
         margin: 10px;
         width: 200px;
         background-color: rgb(255, 255, 255);
}
```
So I want the card to **push out** each other by margin 10px, **pushed inside** itself with padding 15px, I'm setting a stiff width so they're all the same, outlining with black border, and rounding the edges with border-radius.

![Screen Shot 2021-01-28 at 10.25.16 AM](https://dev-to-uploads.s3.amazonaws.com/i/bqrzl8tatdsrk3t4nt7i.png)
Round boyzzz.

# CARD CONTAINER div
Inside the Plant Container div, I made ANOTHER box with class `card-container` to wrap all the cards. The reason I did this was so that the title "Your Plant Collection" would be inside the .plant-container.  

![Screen Shot 2021-01-28 at 10.27.04 AM](https://dev-to-uploads.s3.amazonaws.com/i/8qswq91hgg1r61bh5nfm.png)

The cards are all stacked on top of each other, and I want them to display side by side. 
So we got Dashboard > Plant Container > Card Container: 
```
.card-container {
    display: inline-flex;
    flex-wrap: wrap;
}
```
The inline flex let's it display side by side, and flex-wrap allows the next card added to go down to the next row in the container. I added a plant to demonstrate: ![Screen Shot 2021-01-28 at 10.31.32 AM](https://dev-to-uploads.s3.amazonaws.com/i/fn8oazanjkap5il7s21l.png)

Now I want to add more juicy style...how about a background image? Let's get back up to our `.dashboard` class styling and add an image. I have the images locally in my styles directory. I set the image size to "contain" so that it shows the whole picture, and it automatically repeats itself underneath (even though it doesn't look like it in the screenshot).
Here's our dashboard styling: 
```
.dashboard {
    padding: 40px; 
    background: url(./images/zz2.jpg);    
    background-size: contain;
} 
```
Now she looks like this: 
![Screen Shot 2021-01-28 at 10.34.22 AM](https://dev-to-uploads.s3.amazonaws.com/i/hx3kbz6vdx48f2xpofk0.png)

If we look back up into our .plant-container CSS group, we're going to add a few more things:
```
.plant-container {
     padding: 20px;
     margin: 20px;
     border: 1px solid black;
     background-color: rgba(255, 255, 255, 0.521);
     backdrop-filter: blur(5px);
}
```
The "background-color" is white with about half the opacity, which will fade out our background image (which is in .dashboard div). As a final touch, I wanted the PlantContainer to also BLUR the background a bit, so that's what "backdrop-filter" is doing...it's an expensive effect though, so try not to use it more than once on a page. 

# PLANT IMAGE styling
Let's work on that plant image now...it's a bit SQUARE isn't it? On my plant card, the image class is `plant-image-dashboard` and here's how it's styled: 
```
.plant-image-dashboard {
    width: 200px;
    height: 200px;
    object-fit: fill;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
```
So I set the height and width so it's a square, set the image fit to "fill". SIDENOTE: _I uploaded already square images, if you have rectangular images, setting height and width to square and choosing `object-fit: fill` will probably squish your image down and warp it all weird._ Then we added a black border, made it ROUNDER with 15px, and added a little box shadow so the image popped out slightly. Now it looks like this: 

![Screen Shot 2021-01-28 at 10.41.10 AM](https://dev-to-uploads.s3.amazonaws.com/i/2mdzlfrc82razi9dfcew.png)

# GOOGLE FONT TIME
Whew! Almost there. Let's import a Google Font. It's a little more involved for a React app. I liked "Nanum Myeongjo" -- sounds Korean ^_^ 
Click on `Download Family` and you'll get a little zip file dropped in your downloads.

![Screen Shot 2021-01-28 at 10.43.29 AM](https://dev-to-uploads.s3.amazonaws.com/i/nkmfv5suj5sy6j5s7ws3.png)

Open that up into a little folder. You'll see a few font .ttf files. I just wanted the "regular" one. Make a folder in your `style` directory called `fonts` and drag-n-drop the file(s) into your fonts directory. For me, the style folder is inside the `src` directory. 

![Screen Shot 2021-01-28 at 10.46.39 AM](https://dev-to-uploads.s3.amazonaws.com/i/v6w1kfr5fh1gv36o4s2e.png)
 
Now find the javascript file that loads your App.js. My React App came with `bootstrap.js` (even though I'm not using Bootstrap) and that's the one that loads my App.js (which then loads all my other components). 
Import your font into your file that loads your App.js like so, routing the path from where my `bootstrap.js` lives: 
![Screen Shot 2021-01-28 at 10.48.33 AM](https://dev-to-uploads.s3.amazonaws.com/i/4l5ssoc4r0xsta5yhnek.png)

THEN, you can put `font-family: 'Nanum Myeongjo', serif;` in your App styling for site-wide font-ing! 
Now we got a nicely styled Dashboard page that displays your beloved plant collection. Boom. 
![Screen Shot 2021-01-28 at 10.55.18 AM](https://dev-to-uploads.s3.amazonaws.com/i/t0jqujconyny9qe3boah.png)

I hope this was helpful to anyone just learning CSS. I'm using pure vanilla CSS in this project, no Bootstrap or Bulma, so it's been a challenge to learn it! 

I did a similar thing to my feed page which displays other user's new plants! 

![Screen Shot 2021-01-28 at 11.08.15 AM](https://dev-to-uploads.s3.amazonaws.com/i/z3llhtk2rjtr42i6rao2.png)
 
(((Are you a fellow plant-lover interested in co-partnering with me to work on my House Plant Social Media app, FacePlant? I'm interested in collaborating, as I feel this project could have some traction. See this [demo video](https://www.youtube.com/watch?v=QobMlju2xlM&t=4s&ab_channel=IneeAder) of the app, tell me what you think! )))