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)
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)
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.
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.
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.
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.
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: 
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:
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:
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.
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.
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:
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.
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!
(((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! )))
Top comments (4)
Hey Inee, what's up? Did you find anyone to work with you on the plant social network? Cheers!
Hi! Not yet, but I'm interested in collaborating!
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
Good work!