Flexbox Action Grid HTML5 CSS3

In this week's tutorial, I'll be showing you how to code an action grid using the flexbox layout—a quick and easy way to create a responsive grid layout on any website with CSS3.

The HTML

First, we’re going to create a section and give it a unique class name called “xop-section”. Within the section, we’re going to use the div tag, then we’ll give it the class “xop-wrapper”. Then, we’re going to create another div classed “xop-container”.

Now, we’re going to code the actual action box. First, we’re going to create a div and give it the class “actionBox”. Within the action box div, we’re going to use the heading tag for the heading and the “p” tag for the lines of text below the heading. Lastly, we’re going to use the button tag and give it a class called “xop-btn”. Within the button tag, we’re going to name the actual button, so in this case, ‘download’, and then we’re going to add an icon right next to the text. The icon is from font awesome and I’m just going to use the HTML method of adding icons.

To make our other two action boxes, all we need to do it highlight the code up to the “xop-actionBox” div and then paste it two more times below. Then, we’re just going to change the heading text and the text in the button. Finally, we’re going to grab the last two icons that relate to the “upload” action box and the “sharing” action box. Well, that’s it for the HTML, now let’s head on over to the CSS.

The CSS

First, let’s add a purple background the entire page. Then, we’re going to select .xop-section and style the properties relating to the fonts we’ll be using in this section. Then, we’re going to select .xop-wrapper, which we’ll give a max-width of 85%, a width of 960px; and finally set the margin to 0 auto to center everything.

Now, we’re going to select .xop-container and use the display: flex declaration. That means that we’re going to be using the famous flex layout on the content within the container. Using the flexbox layout makes it so much easier to make your content responsive. Finally, we’re going to add a 2% margin to the top and bottom of the container.

Now, we’re selecting the actual action box so that we apply some nice styles. First, let’s set the width and height of the action box to 270px. Then we’re going to add a purple background color to the box. We’re going to center-align the text and color it white, add 40px of padding, and add a 10px border radius to give the box rounded corners. Finally, we’re going to give the boxes a 2% padding all around so that theirs some breathing room on either side of each action box.

Now, we’re going to code the responsiveness of the action boxes. First, let’s declare the media screen property for when the browser is 1070px—that seems to be the breaking point for the boxes in my browser. I’m going to select .xop-container and set the flex direction to column—that means that when the browser is 1070 and smaller, it will automatically move the items into a column layout. This is ideal when scrolling a website on a mobile phone. I’m also going to select .xop-actionBox and set it’s height to 270px and it’s width to 200px. I don’t want the action box to look too wide on mobile screens.

We’re almost done, all that we need to style is the heading, text, and the button within the action boxes. First, we’re just going to set the font size and weight of the headings and add a 2% margin to the top and bottom of the heading. To style the lines of text, we’re just going to add some padding to the top and bottom and give it a line-height of 1.4.

Now, we just need to style the buttons. First, we’re going to select .xop-btn and give it a white background. We’re going to remove the border, add 5% padding, and set its width to 100%. We’re going to color the text purple and set the font family style. We’re also going to add round corners to the button. Finally, we’re just going to style the hover state of the button. First, we’re going to change it’s background to a light purple, and color the text white. Then, we’re going to use the cursor property and set its value to “pointer”. There you have it! You’ve just coded a flexbox action grid using HTML5 and CSS3.

Comment Below!

Feel free to share a screenshot of your version of this flexbox action grid in the comments below. Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *