Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding boilerplates, grids, and frameworks
- Choosing a framework
- Building your own framework
- Crafting a deployment strategy
- Modifying files
- Customizing typography and color
- Filling in framework gaps
- Exploring grid-based syntax
- Nesting grids
- Using mobile grids
Skill Level Beginner
One of the downsides to using grid systems is what happens to them when screen sizes shrink. At smaller sizes, most grid systems change the column span definition so that they don't float anymore and then go ahead and set their width to the full screen of 100%. This is the effect of sort of stacking elements on top of each other on smaller screen sizes. Most of the time that's fine, but there going to be times when you want the ability to arrange page elements on smaller screens as well. That's where Mobile grids come in. Mobile grids are a second set of class selectors that target smaller screens.
Usually mobile grids default to four columns, although many frameworks have options that you can set to determine how many mobile columns that you'd like. Look at this in the browser. Here's our two- column layout, and if I start to resize this, one of the things you'll notice is at a certain size, boom. Everything sort of jumps down to the single-column look, and everything is stacking right on top of each other. For the most part that works, but these areas, for example, there is this newsletter, and this sort of tagline area up here.
Those look good stacked beside each other in a two-column layout, and it's probably a little easier to read, and visually they make a little bit more sense, so I want to do that. So I'm going to tackle them using Mobile grids, and before I can start using them, I have to know what they are and how to apply them. So if I go into the foundation.css--and a lot of frameworks will have their grids in a separate CSS file--but for foundation, it's literally directly right in the normal grid. I am going to scroll down and find those. And I just happened to know where I am looking as it would take a while to find them otherwise, but I'm going to go right down here, right around 3800 or so.
You can see right there is my Mobile 4-column grid, so I can see the classes to use here are either one, two, three, or four, so all I am looking at is this mobile-one, two, three, or four to determine how many columns span within the Mobile grid. I might also want to take note of the fact that the Mobile grid is contained within a media query. So the only time that these are going to come into contention at all is when this media query is triggered which means that it's below the minimum width of 720 pixels.
So I'm going to go back into my source code. I am going to scroll down until I find those two elements that I want to stack beside each other in my mobile grid. So this section right here that says class=intro. I am going to add a class to that, and the class I am going to add to it is mobile-two, because I want it to span half of the 4-column grid. Same thing for the newsletter. I'm going to give it a class of mobile-two. It really is just that simple. So if I save this, go back into my browser, and refresh this at the smaller size, you can see that these two guys are now lining up right beside each other, kinda-sorta.
So obviously, there are some issues here with the styling that I applied to these, and basically it has to do more with the margin up top here than anything else, but it's really easy for me to go ahead and change that. If I switch back into my code, and I open up the custom.css--you can find that in the _css folder-- if I scroll down all the way to the bottom of that, I see that I have my own smaller screen styles down here. I am just going to scroll down, and I want to find these forms styles here. I'm going to copy this, and below that I'm going to paste it to create a new section, and here I'm just going to call this sidebar, so I'm just adding a new section of styles in there.
And what I want to do is the asides themselves, I want to give them margins. So I'm going to go ahead and give a margin of 3em top 0 for right and left, and then 2ems for bottom, and then I need to address the margin that was on the header. I'm going to do an aside h3, the headers inside of my asides are h3, and I am just going to tell it's margin-top to be 0, so it will align flush. So I'll save that. Go back into my page, refresh that, and there we go. Now both of those elements are lining up right beside each other.
I have got enough space above them now to where there is a definite sort of division between them. And at the mobile screen, at the smaller size, I get this nice sort of two-column layout that still allows me to read these but doesn't stack them on top of each other. I do want to point out that not every framework or grid system that you are going to work with is going to have a separate mobile grid. As you can see, the concept is really pretty simple to this, so if you are willing to put in a little extra time, you could probably modify any framework or grid system to have a mobile grid or even a tablet and mobile-specific grids if you need that level of complexity.