DEV Community

Inee Ader 🐌
Inee Ader 🐌

Posted on • Updated on

Sweet Cards with CSS

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

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>
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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);
}
Enter fullscreen mode Exit fullscreen mode

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
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

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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;
} 
Enter fullscreen mode Exit fullscreen mode

Now she looks like this:
Screen Shot 2021-01-28 at 10.34.22 AM

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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

(((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 of the app, tell me what you think! )))

Discussion (4)

Collapse
ariwald profile image
Arivaldo (孙狮林)

Hey Inee, what's up? Did you find anyone to work with you on the plant social network? Cheers!

Collapse
ineeader profile image
Inee Ader 🐌 Author

Hi! Not yet, but I'm interested in collaborating!

Collapse
ariwald profile image
Arivaldo (孙狮林) • Edited on

cool
I am also new in town, but I guess we could work out something together and get help from stack overflow, google etc. or a more experienced developer.
how did you think this social network could work? the plant owners would interact with each other, in order to exchange experiences or what?
cheers

Collapse
jupiteris profile image
Jupiter Programmer

Good work!