7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 38 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Downloading the XY Grid

In this first lesson you’ll learn how to download the new XY grid and look at which browsers support it.

Related Links

1.2 Downloading the XY Grid

Hello, and welcome to the first lesson of this course, where you will learn how to download this new grid system and also what browsers support it. So first of all, how can you download the new grid system? Well, there are a few different ways, it really depends on the level of your knowledge on using certain tools like the command line. The first method is of course the easiest one. You just go to the download section of the Foundation For Sites page, and then you can download any of these packages. And that will basically include the XY Grid, so that's the easiest way. The second way is to install it via the command line. If you're using the foundation CLI tool, then you just type foundation new, you choose foundation for sites. You download it from there, and the XY Grid will be included in your downloads. The third option is of course if you only want to use the grid like we will do for this particular course, you can customize a foundation download. So in the download page, if you scroll down you're gonna see a customized foundation section. And all we have to do is uncheck all foundation components, make sure the grid you selected is the XY Grid. If you want, you can do a little bit of customization here and then you're all set. Personally, I'm gonna leave these values at default, but if you want, you can change the number of Columns, Total Gutter, and the Maximum Width of the grid container. So once you select everything you need here, you just go down, hit Download Custom Build. That's gonna download a ZIP file that will contain the CSS for your project, an index.html and a js folder. Personally, we're not gonna use this js folder, but it's there if you need it. Now, if we take a look in the source code here on infoundation.css. First, you're gonna see this normalized CSS file, which is included by default. But then if you scroll further down, you will find all the styles that are required for this grid system to work. And it starts right here. And as you can see, there are quite a lot of styles, but this is a pretty awesome grid. So that's to be expected. Now, what about browser support? Well, here's the thing, as I was saying in the introduction video of this course, the XY Grid is based on Flexbox. Flexbox is a relatively new technology, or a relatively new layout that came recently to CSS, and not all the browsers support it. It is supported in all the major browsers like Chrome, Firefox. But if you're talking about older browsers like IE8, if anyone still uses that, IE9, those do not support Flexbox. And also some mobile version of the browsers do not support it. So any browser that supports Flexbox will support the XY Grid. And currently the ones that do are Chrome, Firefox, Safari 6 plus, what else? IE 10 plus, Edge, supports because it's more recent than IE 10. And also the mobile version of the browsers like iOS, I believe iOS 7 and up supports flexible, and also Android 4.4 and above. So yeah, that's pretty much it. You would use the XY Grid only if you don't need to support those older versions of browsers. If you want to support IE8, IE9 for example, you're out of luck, I'm afraid because this grid system will not work there. So now that we know how to download the new grid and also what kind of browsers support it, let's dig in a little deeper and learn about the basics of using this grid system. That's coming up in the next lesson.

Back to the top