The fine folks at Zurb has released the new 6.4.1 version of Foundation and with it comes the brand new X-Y Grid. This is important because in the very near future, DobsonDev Underscores will also switch over to use the X-Y Grid rather than the current CSS Grid.
DobsonDev Underscores
For those of you who don’t know, DobsonDev Underscores is my implementation of Underscores, a starter theme for developers that gives an enormous head start on theme development. I used to make all my themes Underscores (and technically I still do) but I found myself always adding Foundation, a front-end framework that makes responsive design infinitely easier. So in the spirit of saving time, which really is the entire principal behind Underscores in the first place, I made my own version that has Foundation hooked right into it from the start. My version also includes a few other libraries including Font Awesome and jQuery Mask because I was adding them to every project as well.
Over the last year or so of using DobsonDev Underscores I’ve also fleshed out the CSS to include a little more then what comes with the default Foundation or Underscores as well so everything is suited to my tastes.
In the end, taking some time to create my own personalized Underscores has saved me an innumerable amount of time, and I would really recommend people take that extra step to extend Underscores in the same manner if they’re using it regularly. Underscores is already a great time saver but adding a framework like Foundation and some custom code for yourself makes it that much better.
But enough about what I’ve been working on, let’s check out what the wonderful people at Zurb have been working on.
CSS Grid vs X-Y Grid
Previous versions of Foundation have always had a few different grids built in, but the most common one is the CSS Grid. This is a grid based on columns and floating <div>
‘s. Don’t get my wrong, this grid is great – but in the new Foundation 6.4.1 Zurb has released the X-Y Grid which is based on Flex Box.
Now I’ll be the first to admin that I didn’t really know too much about Flex Box before they released it. I know a lot of people use it but since I’ve always used the CSS Grid that’s built in with Foundation I’ve never really needed to check it out. Now that Foundation has added it though, I can definitely say that I’m already a convert.
Flex Box is extremely simple to use with Foundation, and it’s much more powerful than the CSS Grid. Basically it’s the same level of complexity and work when developing, but it’s way more powerful in the end.
Let’s take a look at the old way of using Foundation with the CSS Grid:
To change this over to the new X-Y Grid the first thing you have to do is switch your “row”
class with either “grid-x”
(more common) or “grid-y”
. Finally you just need to change the name of your “columns”
class to “cell”
, since technically if you were working with a y-axis flex box a column wouldn’t be the correct name.
Take a look at the new X-Y Grid version of our above example:
It’s as simple as that (pretty much, you might want to add the classes “grid-margin-x”
or “grid-padding-x”
to ensure nice spacing) to move your projects over from the old CSS Grid to the new X-Y Grid.
What Does This All Mean?!
In the very near future (I’m still doing some testing) DobsonDev Underscores will move over to completely use the X-Y Grid. I’ll also do some tutorials on how to work with the new X-Y Grid and Foundation in general so if anyone is interested in merging it into their own project (or using DobsonDev Underscores) they know what to do. Not only that, it will also be notes for myself moving forward.
I also plan on doing some other structural changes to my JavaScript and CSS files in DobsonDev Underscores as well as adding a little bit of additional CSS. Hopefully everyone will be looking forward to these new changes.
Learn More
Zurb has also been kind enough to release this video that goes over using the new X-Y Grid which makes everything a lot easier. Hands down Zurb has proven to me that they are a company that can be trusted and definitely put in a lot of effort to make every web developers job a lot easier.
This video pretty much goes through everything I’ve talked about and A LOT more so it’s definitely worth checking out if you use Foundation and haven’t watched it yet.
As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below. Stay tuned for the updates to DobsonDev Underscores and if you haven’t given Underscores a try for your own WordPress project, you definitely should!