DEV Community: Joshua Swiss

Re-learning CSS Part 2: Simplify Cards with Flexbox

Joshua Swiss — Thu, 18 Jun 2020 11:00:34 +0000

This is an ongoing series where I am starting over learning modern CSS. You can find other posts in this series below:

Part 1: CSS Grid or Flexbox for Layouts?

TL;DR - Styling cards used to be a pain. With Flexbox it's pretty easy!

CSS is tough. When I started professionally developing websites about five years ago, there was zero incentive to develop CSS knowledge; even basic layouts seemed hacky, with prolific use of float: right; this and margin: 0 auto; that. It didn't intrinsically make sense and only added to the mystique and inapproachability that was CSS at the time.

I often dreaded styling anything beyond minor tweaks. If I had to create a card, for example, I'd reach for Bootstrap or Bulma or Material Design. But with Flexbox there's no need! Let's start with a super simple example.

Card 1: Simple and centred

Let's say you want a very basic card that has one piece of child content in it, and that content is centred vertically and horizontally. For the sake of this example, let's say it's holiday destinations. Here's some simple code to get started:

Each card is an article element. The cards are inside a section element, where I applied some basic Grid styles. The important part for this example is inside the .card class:

Flex, like grid, are known as 'display-inside' keywords that can be assigned to the display property. 'Display-inside' keywords change how the element's inner content is displayed. This is in contrast to 'display-outside' keywords that change the element's outer display type, or the role the element has in the layout flow. Some 'display-outside' keywords are block or inline.

Within an element where the display: flex; property/keyword is assigned, child elements are centred vertically with align-items: center; and horizontally with justify-content: center;.

While this card layout is pretty simple, it's not all that useful. Let's move on to something we could more realistically use.

Card 2: Centred with sections

Building on the last example; we need a little more for your holiday cards. Just saying the destination name doesn't really do much. Let's add a photo, and the date visited:

Now each card's content is horizontally centre-aligned, and it has three sections: one for the header, one for the main content (a photo for this example), and one for the footer.

I made some changes to the card's max and min width and height, and added some basic styles to each section and the img elements, but those changes aren't that interesting, and you can check them out in the Pen above. The most interesting line of code for this example, at least that relates to Flexbox, is: flex-direction: column;

This one line transposes the contents of our three new section elements to display vertically instead of horizontally, similar to the old-school display: block; versus display: inline-block;.

Ok! Our cards are starting to look pretty decent, but I think they could be better. Let's stick with the three sections we have for each card, but add some extra styling for functionality we might add later.

Card 3: Handling complex sections

The final example has the card's title and date in the 'header' section aligned to the left, and changes the footer to a 'card-action-area' where there are 'open' and 'edit' buttons.

In the new header element we have a card-title and card-date, each with styles specific to them. The header element has the style align-self: flex-start; applied, which pull the child sections to the beginning (the flex start) of the element.

The new footer element also has two children, open and edit buttons, but we want these to be displayed horizontally rather than vertically. With flex that's easy! Simply set the card-action-area class to display: flex;, which will apply to all it's child elements, and reset the flex-direction to its default row!

Wrapping up

Flexbox makes styling components like cards a breeze. It's powerful and applicable for simple or more complex components. I wish I had it when I started web development!

For more, check out my personal site!

Re-learning CSS Part 1: Grid or Flexbox

Joshua Swiss — Sun, 10 May 2020 14:17:50 +0000

TL;DR - CSS Grid and Flexbox are great. I use Grid for layouts and two-dimensional renderings, and Flexbox for one-dimensional renderings and components.

Like many other software engineers at the time, I reached for CSS frameworks to solve the problem. I Bootstrapped, Bulma'ed, and Material Designed my way through a lot of them. Frameworks like these enable teams to develop products quickly and with a degree of uniformity. Professionally, I exclusively used frameworks for a long time, with the occasional tweak here and there in regular CSS. But frameworks are not without downsides: they can add a lot of weight to your package bundle, add complexity to your markup, and are yet another thing to learn.

I had all but resigned myself to working with frameworks forever, until I came across this tweet, in a thread discussing how a lot of folk (like me!) think CSS is a pain:

Shaw

@shshaw

@WebDojo @chriscoyier Modern CSS has solved so much of this. Come back to it with a fresh mind removing any remembrance of floats and Internet Explorer.

03:49 AM - 09 Apr 2020

1 108

This inspired me. Have I ignored major improvements in CSS? Is it easier now? Does it make more sense? What if I come back to it with a 'fresh mind'?

And thus, this blog series was born. I'm going to relearn CSS and write about it along the way. I'll be looking at layouts, components, 'pure-CSS' images, and animations.

First up, layouts. Specifically, should I build my layout with CSS Grid or Flexbox?

Grid or Flexbox?

According to our good friends at CanIUse (as of 8 May, 2020) both Flexbox and Grid work with the browsers a significant majority of people use.

Can I Use Grid?

Can I Use Flexbox?

While Grid has a bit more red in its image, it still works with the browsers 95% of the population use. For my audience, that works fine. If you need to accommodate for that remaining ~5%, I'd suggest adding appropriate polyfills.

Building Layouts

Most layouts look something like this:

The 'Holy Grail' Layout. What was once a pain, is now pretty simple

I'd hazard a guess that a ridiculous proportion of websites have some form of this basic layout in place, with a header for title/nav/avatar, a footer for contact, external navigation, etc. two sidebars for whatever, and a main section in the middle. This layout is so popular, its been dubbed the 'Holy Grail' Layout!

So, let's build this layout using both CSS Grid and Flexbox!

Here's the layout using Grid:

Overall, pretty simple! However, there are a few things worth noting, that may not be otherwise obvious:

The element with display: grid; (here a div with the id of grid) sets top-level child elements of that div to exist in a grid display;
grid-template-rows and grid-template-columns set up the grid. Here we have a 3x3 grid, with the header and footer set to 50px height, and the left and right sidebars set to 100px width;
grid-gap is shorthand for grid-column-gap and grid-row-gap. Here I set both to 1em;
Similarly, grid-column is shorthand for grid-column-start and grid-column-end, where the grid item is not inclusive of the end column. Where I have grid-column: 1 / 4;, it means grid-column-start: 1;, grid-column-end: 4;, which means this grid item spans columns 1, 2, and 3.

Now, let's check out the same layout, this time using Flexbox:

A little more verbose! I wrapped the second row in a section element so I could have rows inside columns (notice how Flexbox's rows/columns are the inverse of Grid's?). Let's break it down a little:

For the topmost div, I set the display to flex, set a minimum height and width, and set the flex-direction to column. Column here means one column, with multiple rows;
In the #main section, I again set the display to flex, and set flex-direction to row. Row here means one row, with multiple columns. I also gave the section a margin top and bottom of 1em;
I gave the header and footer and the asides default height and width; and
I gave the main article a margin left and right of 1em, and set it to flex-grow: 1. flex-grow allows the article element to expand to take up the extra space in the flex-row it is in.

BONUS!

Here's the same layout using Bootstrap!

Funnily enough, even though I imported Bootstrap here, I'm still using Flexbox! This is because Bootstrap uses the 12-column grid convention, and I hate it. The 12-column grid layout is a web design convention that, at best, requires you to do some calculations, and at worst, requires you to overuse magic numbers.

I cannot tell you how long I've spent fiddling with different configurations of the 12-column layout to get it just right; tweaking col-10\ to col-8\, adjusting margins as I go. It's a waste of time, and you don't learn anything in the process.

So, if you still need Flexbox to use Bootstrap, why do you need to use Bootstrap. It's a very good question...

Which to use?

In the end, I prefer Grid for layouts or anything two-dimensional, and Flexbox for one-dimensional renderings (like the icons in the bottom of my site!) or for components. Of course, that's personal preference; yours may differ, and mine may change over time!

For me, it is definitely time to rid myself of unnecessary frameworks, wipe the slate clean, and embrace CSS!