From the course: Learning Foundation 6
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Source ordering - Foundation Tutorial
From the course: Learning Foundation 6
Source ordering
- [Instructor] The next problem I want to talk about is source ordering. 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 on the left column at desktop dimensions, you might want to have appear in what is the right column as the page gets smaller, or maybe you want to have it appear underneath. So here's an example of a page where we have an aside over on the left at the top row, and underneath, we have two asides that are over on the side. As we start to shrink this page down, you'll see that these switch going all the way down the page. Perhaps we want the article first following by its aside, rather than the aside first followed by the article. This is coming from a document called sourceorder.html. It's inside of your exercise files folder for this particular video. Go ahead and copy that into your working folder, and then open that up in sublime text, and let's take a look at that really quick. So if…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Identify Foundation's three grid systems3m 4s
-
Basic setup of the XY Grid7m 14s
-
Margins and padding with XY Grid4m 27s
-
Margin or padding collapse2m 48s
-
Auto-sized grid cells4m 7s
-
Source ordering5m 44s
-
Block grids3m 36s
-
Vertical grids4m 5s
-
Challenge: Create a grid1m 28s
-
Solution: Create a grid2m 33s
-
-
-
-
-