Intro to Foundation | Lesson #83
Source Ordering Comes to Rows
Learn to shuffle rows without editing HTML.
Source ordering — the ability to swap columns in a Foundation for Sites layout — is great if we want certain HTML, like a sidebar or navigation component, later in our HTML and earlier in our layout. It's also handy when ordering rows in coded prototypes without moving masses of HTML. The technique works because we know in advance how wide each Foundation grid column is. Shuffling them around is as simple as moving them the predefined width left or right.
But rows are different. We can't predict how tall they are, so we can't use CSS margin to move them around. It's possible to rearrange rows, however, to keep lesser-used elements at the end of your HTML but relatively high in your visual layout. All it takes is a little jQuery. Here's how to swap two rows in Foundation for Sites.
To keep this demo clear, we'll use a simple layout:
<div> <div class="large-12 columns"> Row 1 </div> </div> <div> <div class="large-12 columns"> Row 2 </div> </div>
1. Set up Foundation.
<script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> // Your code goes here </script> </body> </html>
2. Give the second row an ID.
Of the two rows you're transposing, choose the row that will move up. Give it an ID, something straightforward like "row2".
3. Select that row with jQuery.
Foundation for Sites uses jQuery, which makes selecting the bottom row a cinch. By declaring row2 a variable, we can quickly refer to it in other places, like the next step.
var row2 = $('#row2');
4. Take that row out of the DOM.
The document object model determines where each element is, based on the provided HTML. This jQuery takes the row before row2 out of the mix.
row1 = row2.prev().detach();
5. Shuffle them around.
Finally, we reinsert the top row into the DOM — but below row2.
And there you go: Switching rows around without changing your HTML.
Oh, and one more thing.
Given all this, you might want to keep an eye on our Playground page. Just sayin’.
About the instructor
Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.