Recently I’ve been contemplating if Foundation is a little too bulky for my DobsonDev Underscores project. All I usually use from Foundation is the responsive grid system, the visibility classes and some typography settings. I wondered to myself if I could simply just make the responsive grid and visibility classes easily enough on my own – I already knew I could do the typography settings because there was quite a large amount of time where I didn’t know that those classes were in Foundation so I did use my own version of them.
I took to CodePen and I found that in about an hour or so I had my own working responsive grid using Flexbox. I really like using Flexbox, it’s extremely powerful and seems to be the way most of the front-end frameworks are moving these days. Foundation‘s newest XY Grid is built on Flexbox. I am a huge fan of Flexbox‘s justifying abilities, allowing you to justify a element to the center, left or right. This eliminates the need for offsets or similar mechanics. Flexbox also has a advantage in the fact that it can be laid out in any flow direction; left, right, down or even up. My responsive grid doesn’t really take advantage of that but it could be very easily extended to do just that. There are a lot more advantages and you can see a great list and explanation on this StackOverflow question with this answer as well as this one.
Full Responsive Grid Code
Before I get into any of the usage I want to present the code via CodePen so you can look over it and see the example HTML included with the pen. While the pen is embedded below I would recommend opening it up in a new tab so you can play with it full screen and see it’s responsive aspects.
See the Pen Flexbox Responsive Grid by Alex Dobson (@SufferMyJoy) on CodePen.
The Grid Container
The first thing to do was to create a grid container and a grid class. The grid container was the class I would use to define a maximum width and center the content as other grid systems do. While this is not technically necessary and could be added after, I have never once not wanted a centered grid container.
The code for the grid container is as follows. I also added a extra class that could be added to the grid container main class called .container-padding which adds a bit of padding to the bottom of the container to space everything out.
You can see that the example HTML all have the .grid-container .container-padding combination happening because the samples are easier to differentiate that way.
The Grid
The next thing to do was create the actual grid class. This is the container which has the actual display: flex; property on it.
You can see the code below:
The code became a little larger just to ensure browser compatibility and to define the basic flex properties for the parent. In my grid system everything is set to work in rows so I’ve orientation, direction and flow properties to all reflect that. However, it would be possible to make a different class here, something like .vertical-grid or something and change those properties. I just don’t see a use for this for myself right now, but knowing me I’ll probably add it sometime in the future anyway.
The Columns
The next thing to add was the column class. This would basically contain all the child properties (remember, Flexbox is basically divided up into a parent div that has the display: flex; property and then child elements that have the flex: …; property) we need. Again there is some extra code for the sake of browser compatibility and also some sizing code to make sure there are no strange errors from inherit widths or heights.
You can see the code below:
The flex property is the shorthand for flex-grow , flex-shrink and flex-basis combined. Basically what it does here is ensure the column won’t grow or shrink in the container but will rather look at their width as defined by us (we will do this right away).
We then have the box-sizing: border-box; property which we have to ensure that padding won’t increase the box size and therefore just ruin our grid system. Make sure you include that!
The grid is based on a 12 column system, just like Foundation or Bootstrap. It was easy enough to do the math to figure out how big each column had to be, simply take the column width and divide by 12 and you’re good to go.
For example, for a column width of 5:
5 รท 12 = 4.1666
Therefore the width for a column width of 5 could be as follows:
Now that would work if we did that for 1 – 12 columns, but that wouldn’t be responsive. Let’s take a look at making it responsive next.
Responsive Columns
They key to making responsive designs here is to define different column widths for different screen widths. For example, you may want to have two things next to each other on a large desktop screen but then on a mobile screen you’ll probably want to have them stack on top of each other.
Just like Foundation, I choose to have a small, medium and large screen type. I didn’t include xlarge because honestly I don’t use it that much, but I could easily add it in the future with some copy, paste and replace.
Since we’re designing a responsive grid system it’s important we start mobile first. So basically we want to create all the .small-# classes first, then add in CSS @media screen and (min-width: #em) queries after for each of the large classes.
Again let’s take a look at what this looks like with the 5 column value:
As you can see we have the same basic code three times with the class name changed. This may not make a lot of sense right now, but if we combine all the different column widths you can get some awesome stuff. Let’s take a look at an example:
So in this example, when the screen is small the columns will each be full width, but on medium they will be a 2×2 grid and then on a large screen they will be a 4×1 grid. This is really basic responsive design but I still wanted to go over in case someone is just starting web development here.
Extras
And with that we pretty much have a responsive Flexbox framework. Some of the other classes I’ve added you can read through on your own (things like the offsets, although I might go through everything in a subsequent blog post but this article is already pretty long). However there is one thing I want to go over still because it’s a Flexbox exclusive feature and if I didn’t this would pretty much be a CSS grid anyway.
That feature is the justify-content property of the grid. Remember the grid is the parent element which has the display: flex; property. Below is all the code you need to add:
Once this is added to the grid the columns will automatically be justified to wherever the parent is set. Let’s take a look at an example:
By doing this we are able to justify content without having to use offset classes or anything else. It’s a pretty awesome feature and makes things like call to action’s very easy to make.
As for switching over to this system from Foundation for DobsonDev Underscores, I’m still not sure what I’m going to do. I need to do some test sites and see what happens. As of right now my plan is to create a little select section of the form on the DobsonDev Underscores site and allow myself to choose which version of the build to download, one with Foundation and one with this.
As I keep on working with this I plan on improving it. I’m sure I’ll use it on one website and realize there is a bunch missing or something. From there I’ll work on it and maybe eventually it will take over from Foundation, but for right now I think I’ll keep Foundation even with all it’s extra bulk that I don’t use.
As always thank you for reading and please share DobsonDev Underscores around as much as you can! Please feel free to put any suggestions or ideas for future articles in the comments section below, and please try out this flexbox grid system and let me know if you have any questions.