CSS: Frameworks and Grids
Illustration by John Hersey

Using mobile grids


From:

CSS: Frameworks and Grids

with James Williamson

Video: Using mobile grids

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.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course CSS: Frameworks and Grids
3h 27m Beginner Jan 22, 2013

Viewers: in countries Watching now:

Have you wondered if using a CSS framework will speed up your site development? In this course, senior author James Williamson introduces the types of frameworks available—including the most popular choices among working web developers—and provides an honest assessment of the pros and cons to using a framework. He guides you through downloading a framework, setting up a directory structure, and building a framework-based site, such as structuring the HTML and working with forms. A separate chapter explores layout grids, often included with CSS frameworks, which provide a simple system for laying out page content.

Topics include:
  • 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
Subjects:
Developer Web
Software:
CSS
Author:
James Williamson

Using mobile grids

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.

There are currently no FAQs about CSS: Frameworks and Grids.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.