Grids & Flexbox Magic

Grids. I have been putting off grid systems for a while now. Because I am a glutton for punishment and like to do things the hard way I guess. I also often get distracted coloring. Well, today is finally the day. I will color tomorrow.

A grid is defined as a structure comprising a series of horizontal and vertical lines which intersect and are then used to arrange content. Essentially, it's a way for designers to more easily structure a page for optimal readability. Using a grid is going to allow you to produce designs that are proportionate and uniform. It's about math, but not scary math. Grids are going to allow you to create a page based on ratios and equations, rather than a layout that feels like it works. This guide by Mark Boulton is one of the more detailed introduction to grids I came across. OK, so I'm sold on using grids, now what?

A grid system. I chose to start with Flexbox here. To get a better concept of how to design with grids and use Flexbox I drew up a simple gird layout to build for a mobile screen. I need to practice something as I'm learning it, otherwise it's complete gibberish.grids

Once I got my content code in order, it was time for Flexbox. The Flexbox (Flexible Box) Layout will help you lay out your page and manage your containers more efficiently than doing it all "manually" with CSS alone. Let's just say "good day to you" overflow: hidden. To enable Flexbox add display: flex; to the parent element CSS.

This is going to switch the body element to use the flexbox layout instead of the regular block layout. All elements in the flow of the document (not absolutely positioned elements!) will now become flexible. Woo!

OK, now we need to give it more specific orders. What direction are we working in? Are there single or multiple lines involved? Add these specifics to the parent element. Chris Coyier wrote an article recently that walks you through your Flexbox command options. It's kind of an amazing resource and will give you a better idea of how to get started with Flexbox properties.  Screen Shot 2014-01-31 at 12.48.56 PMWe have now said that we are using flex layout, we are working left to right, and using multiple lines. We are so bossy. I then established the widths of the elements by spelling out how many of a particular class should be used in a row, and then Flexbox took it from there.

See the Pen Intro to Flexbox by Joni Trythall (@jonitrythall) on CodePen.

You can click on the "Result" tab to see the flexible magic that happened.

I am still trying to get a better understanding of all the capabilities of this thing (...pretty sure this applies to life in general as well) but I wanted to share what I dove into today just incase someone else finds this stuff as flippin' amazing as I do. For further reading, this article by David Storey at Smashing Magazine was a real treat.

Deep in the Internets I also found this flexbox playground and generator. Let's just say it makes for a wild Friday night. I would know.

Happy flexing!