Since we’re designing a responsive grid system it’s important we start mobile first. 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. Just like Foundation, I choose to have a small, medium and large screen type. 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. They key to making responsive designs here is to define different column widths for different screen widths. Let’s take a look at making it responsive next. Now that would work if we did that for 1 – 12 columns, but that wouldn’t be responsive. Therefore the width for a column width of 5 could be as follows: 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. The grid is based on a 12 column system, just like Foundation or Bootstrap. 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. 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). The flex property is the shorthand for flex-grow, flex-shrink and flex-basis combined. 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. 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. The next thing to add was the column class. 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. vertical-grid or something and change those properties. However, it would be possible to make a different class here, something like. In my grid system everything is set to work in rows so I’ve orientation, direction and flow properties to all reflect that. The code became a little larger just to ensure browser compatibility and to define the basic flex properties for the parent. This is the container which has the actual display: flex property on it. ![]() ![]() The next thing to do was create the actual grid class. container-padding combination happening because the samples are easier to differentiate that way. You can see that the example HTML all have the. container-padding which adds a bit of padding to the bottom of the container to space everything out. I also added a extra class that could be added to the grid container main class called. The code for the grid container is as follows. While this is not technically necessary and could be added after, I have never once not wanted a centered grid container. The grid container was the class I would use to define a maximum width and center the content as other grid systems do. The first thing to do was to create a grid container and a grid class. See the Pen Flexbox Responsive Grid by Alex Dobson ( on CodePen.0 The Grid Container ![]() 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. Full Responsive Grid Codeīefore 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. 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. My responsive grid doesn’t really take advantage of that but it could be very easily extended to do just that. Flexbox also has a advantage in the fact that it can be laid out in any flow direction left, right, down or even up. This eliminates the need for offsets or similar mechanics. I am a huge fan of Flexbox‘s justifying abilities, allowing you to justify a element to the center, left or right. ![]() Foundation‘s newest XY Grid is built on 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. I took to CodePen and I found that in about an hour or so I had my own working responsive grid using Flexbox. 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. All I usually use from Foundation is the responsive grid system, the visibility classes and some typography settings. Recently I’ve been contemplating if Foundation is a little too bulky for my DobsonDev Underscores project.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |