Join Jen Kramer for an in-depth discussion in this video Source ordering, part of Up and Running with Foundation 5.
As you work with your grid, you may want to change the order of the source as the page gets smaller. For example, what appears over here in the right column, you may want to have it appear on top as the page gets smaller, rather than on the bottom. So this is a great example of that. This is our block grid example from the previous video. And if you start to make this page smaller here, what you're going to wind up with at some break point along the way, she'll have your pictures on the top of the screen, and you'll have your text on the bottom.
That's just the way the grid system works, when you have a right-hand column, it will go underneath, the left-hand column goes on top. But what if you wanted this to be reverse, so that you have at this type of layout, the smaller screen resolutions? You want to have the text on top with the images underneath, but you want to maintain that right hand column. Well this is something that's called source ordering. Foundation offers this way you can change the source order within a row, via push and pull classes. The push classes will push the content from left to right, a given number of cells.
The pull classes, pull the content from right to left, a given number of cells. So let me show you how this works. It's so much easier just to code it then to try to explain it. So if you go into your Sublime Text, the file I'm working with now is called is called source-order.html. You can get this file from your Exercise Files folder. Copy it out of there for the eighth video in chapter two, and Paste that on into your Foundation folder. And then open it on up here.
The first thing I'm going to do, is I'm actually going to switch the order of these cells. So right now, I have the large 9 on the top, the large 3 on the bottom. I'm actually going to switch these entirely. Just going to take the entire div with a class of large three columns, Cut that, and I'm going to Paste that up here just after the start of the row, and that is the first step in this process. Okay, so think about what I just did. Did it make a difference? Well now I've got a left column. Right? Left column of text on the large resolutions. But it is in fact tucking in underneath everything at small resolutions. Also, for SEO purposes, the text appears first on the page rather than the images. So ultimately, the code order here is a little bit better, although the display leaves a little bit to be desired. So if you refresh your page at this point, and make sure you're looking at source order. You'll now see your text on the left side of the screen, and your pictures on the right side of the screen. But when you collapse it, it looks the way you want it to look. All right, so that's the first step, is to get it to the way you want it to look at the small resolution. Remember again we're mobile first, so that's where we design first.
And then we're going to tweak for the larger resolutions, like this. And so this is where we add those additional classes. So here to the large 3, we're going to add a large-push-9. So what we're going to do, is we're going to take this left column and we're going to push it over nine columns. So it's going to show up over here on the page. And in fact, if you save what you've got here, and you refresh your webpage, it's going to look horrible but there it is.
There's the text, our images are sitting on top of it at the moment. Now what we're going to do here with our large 9, is we're going to say large-pull-3. So in this case, once again, we're going to take our large 9 column and pull it three spaces to the left. And so now if you save this again and refresh your web browser, now we have the layout that we wanted. We have our pictures on the left, our text on the right.
But as I make the page narrower, our text shows up on top with the pictures underneath. So the source ordering is incredibly useful in terms of laying out your webpages. You can put your columns exactly where the Marketing department wants them, at the desktop resolutions. And you can still make things make sense to search engines and mobile devices inside of your source code.
- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips