Flexbox practise project 1

For our first Flexbox project, we’re going to create a bootstrap style card component. By the end we will have built a card component that looks like this:

figure30

We’re going to use some of the Flexbox properties that we learned about previously.

I have added a css reset file to reset some of the user agent styling by the browser, this file is called normalize.css. In the HTML we have a simple container element and for this we have used a main HTML element and given a class attribute called main-content accordingly.

Inside the main element container are six different article elements each with an image, a div that contains a h3 heading, description and a link:

<div class="container">
        <h2>Latest Entries</h2>
        <main class="main-content">
            <article class="entry">
                <img src="img/01.jpg" alt="entry image">
                <div class="content">
                    <h3>Tips for Saving Money in your Next Travel</h3>
                    <p>Published on: <span>July 19th, 2019</span></p>
                    <p>By: <span>The Travel Blog</span></p>
                    <a href="#" class="button">Read More</a>
                </div>
            </article>
            …………………
        </main>
    </div>

With the HTML markup out of the way, we can now focus on the css and in particular the Flexbox properties.

Add some border box styles

To kick of the project we’re going to use the universal and html element to apply box sizing to all of our elements on the page. So, in the css file – styles.css add the following at the top of the file:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Center the main container

As with most projects, what we’re going to do is to center the container element for better readability. To do this we’ll target the div with the class container and apply the following styles:

.container {
  max-width: 1200px;
  margin: 0 auto;
}

This will nicely center our main container div:

figure31-1

Next we’re going to center align the h2 heading, with the text ‘Latest Entries’, and give it a font-size:

h2 {
  text-align: center;
  font-size: 1.6rem;
}

This should nicely center our h2 heading within the main container element:

figure32

Style the main content container

Next we’re going style the main element container and set this as the flex container, we’re also going to set the flex wrap property to make sure that the elements wrap to a new line when there is no space within the row:

.main-content {
  display: flex;
  flex-wrap: wrap;
}

When we add these styles, you will notice that it doesn’t make any difference to how the elements were laid out before. This is fine, because it means that we are now making the main-content element a flex container and we have used the flex-wrap to make sure all elements fit within the flex container.

Make the images responsive

At the moment the images are not responsive and this will cause us an issue later on, to make them responsive we just need to add a max width property and set the value to 100%:

img {
  max-width: 100%;
}

Style each article mobile first

We’re going to need to make the card responsive, so we’re going to add a media query with minimum width 480px and we’re going to set a flex property with 0 for both the flex grow and flex shrink and then set the flex basis to 49% for the width for each article component:

@media (min-width: 480px) {
  .entry {
    flex: 0 0 49%;
  }
}

Adding this gives us the following result:

figure33

The articles are smudged together and we need to give them some breathing space, for this we can make use of the justify-content property in the flex container and apply the space-between value:

.main-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

This will give each article some breathing space:

figure34

Create 3 columns for larger devices

At the moment we only have 2 columns for all devices, we want to create 3 columns for larger viewports.

To do this we’re going to add another media query. The media query will be very similar to the one that we have added already, but the only difference will be that we will set a smaller width for each of the article elements.

We’re also going to make use of the css calc function work out the flex-basis value and we’ll use this for both media queries going forward:

@media (min-width: 480px) {
  .entry {
    flex: 0 0 calc(50% - 1rem);
  }
}

@media (min-width: 768px) {
  .entry {
    flex: 0 0 calc(33.3% - 1rem);
  }
}

This will give us 3 articles in each row:

figure35

Also when you resize the window and make it smaller, you will notice that when the breakpoint hits the smaller devices the articles take up two in a row and in mobile devices it will stack and there will be one article in each row.

Add a colors to background and articles

Next we’re going to add a shade of grey to the background of the page to make it a little easier on the eyes. To do with we’ll simply apply a background-color property to the body at the top of the stylesheet:

body {
  background-color: #f2f2f2;
}

Next we’ll give each article a background color of white so that it stands out with the grey back drop. To do this we’ll target the div with content class, as this is the class that contains the heading, description and link:

.content {
  background-color: #fff;
}

Now when we view this in the browser, you will notice that we now have a white background for each article:

figure36

You will also notice that we have a space between the image and the description, this is coming from the margin that is applied by the user agent styling. To fix this we’ll target the h3 under the h2 styling and apply a margin of 0:

h3 {
  margin: 0;
}

This will remove the gap between the h3 heading and the images:

figure37

Remove the gap between the description and the image

If you zoom into one of the articles, you will notice that there is a small gap between the image and the description text:

figure38

To remove this we’ll need to add a display with a value of block for the img element. So, in the stylesheet we simply add display and set the value block:

img {
  max-width: 100%;
  display: block;
}

And this will remove the small gap between the image and the description text nicely:

figure39

Format the content area

Next we need to add some breathing space for the descripton area, at the moment the h3 heading is right up against the image and the text is also right on the edge. To fix this we will apply some padding to the content class and also center align all of the text:

.content {
  background-color: #fff;
  padding: 1rem;
  text-align: center;
}

This will apply some much needed padding to all four corners and will also center align the content:

figure40

The h3 heading needs to be uppercase, and we are also going to give a font size:

.content h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
}

This will set the h3 to be all uppercase and set the font size to 0.9rem:

figure41

We also need to add some line height to give the heading some separation:

.content h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  line-height: 1.5;
}

figure42

Next we need to set the uppercase for all of the text inside the content area, for this we will simply move the text transform property from the h3 styles to the content styles likes so:

.content {
  background-color: #fff;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
}

This will make all of the content text uppercase letters:

figure43

We’re going to now set the color for the date and the author name to a shade of red, if you recall from the HTML markup, you will notice that we have enclosed the date and the author name with a span element:

<div class="content">
    <h3>The Complete Guide for Traveling</h3>
    <p>Published on: <span>July 19th, 2019</span></p>
    <p>By: <span>The Travel Blog</span></p>
    <a href="#" class="button">Read More</a>
</div>

So in the css we will target this span and set the color accordingly:

.content span {
  color: #db008d;
}

This will set the date and the author name color to a nice shade of red:

figure44

We need to add some separation between the article cards themselves, so if you look at the moment you will notice that some cards are stuck together and there is no separation:

figure45

To add this separation we will apply some margin to the bottom of each card, to do this we will apply a margin bottom to the entry class. Since we haven’t styled this class yet we will add these styles under the main-content class styles:

.entry {
  margin-bottom: 2rem;
}

This will apply a separation between the articles:

figure46

You will notice now that we have added a margin, the second article and third article are smaller than the first one. This is because the heading text is only one line, whereas the heading for the first article takes up 2 lines. To fix this we can move the background color style from the content class and apply it to the entry class:

.entry {
  margin-bottom: 2rem;
  background-color: #fff;
}

This will nicely fix our misaligned articles:

figure47

Styling the button

We’re going to finish off by styling the button:

.button {
  display: inline-block;
  background-color: #008fd1;
  text-decoration: none;
  padding: 0.6rem 2rem;
  margin-top: 1rem;
  color: #fff;
}

This will apply the styles nicely to our anchor element that we are using as the button: figure48

This finishes off our card component styling very nicely, Flexbox made it easier for to create a card component similar to the one found with Bootstrap.