Learning Flexbox may not be fun at first. It will challenge what you know about layouts in CSS. But that’s fine. Everything worth learning begins that way.
Flexbox is certainly something you should take seriously. It paves the way for the modern style of laying out content, and it’s not going away anytime soon. It has emerged as a new standard. So with outstretched arms, embrace it!
Cards have become popular on the internet. Google, Twitter, Pinterest, and it seems, everyone else is moving to cards.
A Card is a UI design pattern that groups related information in a flexible-size container. It visually resembles a playing card.
There are many good uses for cards. We are going to be creating a resume style card system. Check out the sample below, and when you are ready lets get started.
See the Pen Card Resume Compete by Mumford (@mumfordt) on CodePen.
Part 1
Let's Begin!
To kick off, let's add in the following code:
See the Pen Creating Cards Part 1 by Mumford (@mumfordt) on CodePen.
We basically set up the first part of our source code. We added a script that we are going to pull in from Font Awesome. This will allow us to add in vector icons that can grow and shrink with our screen size. We also pulled in Google Fonts and linked a stylesheet.
Next let's get a few things set up. Add the following to your document:
See the Pen Creating Cards Part 1b by Mumford (@mumfordt) on CodePen.
What we basically did was set up a large area around our space called "card." We started off with our nav which will contain a link to the persons linked in account, and then the opening header with a title, horizontal rule, and a description. I pulled down the image from the W3 site and edited it with PowerPoint.
Next we are going to add the area for our cards. Add the following below the <div class ="content"> closing tag:
See the Pen Creating Cards Part 1c by Mumford (@mumfordt) on CodePen.
What we basically did here is add an area for our individual cards. We then set up the individual cards based on the kind of card we are creating. We also went to Font Awesome to find an icon that we could pull in. We then adjusted the size of the icon with "fa-4x" after the attribute. We also added simple basic information that accurately describes the card we are emphasizing.
Next, we add a footer:
<p data-height="265" data-theme-id="0" data-slug-hash="eroaNZ" data-default-tab="html" data-user="mumfordt" data-embed-version="2" data-pen-title="Creating Cards Part 1d" class="codepen">See the Pen <a href="https://codepen.io/mumfordt/pen/eroaNZ/">Creating Cards Part 1d</a> by Mumford (<a href="https://codepen.io/mumfordt">@mumfordt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Here is the final source code:
See the Pen Creating Cards Part 1 Final by Mumford (@mumfordt) on CodePen.
Part 2
Alright - now its time to add the styling. We are going to using flexbox to get it going. I am going to give you a good bit of it, but you should read this article to get you started: https://medium.freecodecamp.org/learn-css-flexbox-in-5-minutes-b941f0affc34 (10 minutes)
Now with a little bit of knowledge, get jump into it. Look to the code notes for more information. I only note one of the cards, so the rest are the same.
See the Pen Part 2 by Mumford (@mumfordt) on CodePen.
Part 3
This is it - all done:
See the Pen Card Resume Compete by Mumford (@mumfordt) on CodePen.