Master the grid
Harness the power of the grid to build complex layouts that work on any device.
Manage your code
Use best practices and semantic code to keep your product light and maintainable.
Learn from ZURB’s product designers
Here are your instructors that are teaching this class.
Brandon is a mastermind when it comes to Foundation. He contributed several key components and of the latest version of our framework.
Tim knows how to web like it’s 1999, which is why he’s our go-to designer on Foundation for Emails. He also knows how to web like it’s the 21st century as well, working with clients and on improving our responsive framework — Foundation.
Angular Engineer Jeanie dedicates her time at ZURB to working on the interactive components of our responsive CSS frameworks. Her work helped make the Foundation family possible
Geoff is a designer and front-end coder at ZURB, and a member of the Foundation team. Within the ZURB office he's known for being an efficient coder and a Sass expert.
“The Q&A section was very good and you made a good effort to encourage questions and did your best to answer them. Good explanation of content with good slides.”
What you’ll learn in this class
Mastering the grid
Getting the most out of the responsive grid
Brandon Arnold | 9:00AM - 9:45AM PDT
- Medium grid: Learn how to write markup for the new tablet-savvy breakpoint in Foundation 5.
- Centering multiple columns: Learn the easiest way to center two or more columns on your page.
- Overlapping columns: Break through the grid and get your columns to overlap over each other.
- Equal Height columns: Get your columns to share the same height when they have different amounts of content within.
- Complex data tables with the grid: Putting it all together to create a complex nested data grid that looks great on all device sizes.
Foundation best practices
Keeping your code organized and flexible
Rafi Benkual | 10:00AM - 10:45AM PDT
- File structure: Learn the Foundation way of structuring your file folders and our efficient use of CSS imports.
- SASS and _settings.scss: Take full advantage of Foundations SASS structure. Learn how to alter nearly anything in Foundation with just a couple of quick changes.
- SASS versioning: Use multiple versions of the Foundation gem on the same machine.
- Media queries: Show how to specify which CSS properties take effect under different conditions.
- HiDPI ready assets: Preparing your assets for HiDPI screens by taking advantage of SVGs.
- Compression & deployment: The best ways to deploy the smallest and most efficient files.
Jordan Humphreys | 11:00AM - 11:45AM PDT
- Interchange: Make sure your mobile browsers only load the graphics that are appropriate for them.
- Abide: Pure HTML5 form validation can be a snap.
- Advanced top bar: Organize complex navigation for mobile- and desktop-sized designs with ease.
- Orbit sizing: Full screen, small screen, fixed height, dynamic height; Using orbit for all media types and sizes.
Tips and tricks
Leveling up your game with a few Foundation tricks
Geoff Kimball | 12:00PM - 12:45PM PDT
- Icon fonts: Don’t import image files for every icon, use Foundations icon Fonts to quickly add HiDPI ready icons in your next project.
- Visibility classes: Create neat navigation techniques with the visibility classes built into Foundation.
- Mega dropdown: Use the Foundation Dropdown classes to create complex grid navigation for your desktop users.
- Masonry grid: Integrate jQuery with the Foundation grid to create a responsive masonry grid.
- Off canvas: Create sliding menus or content areas on your mobile devices.
Why our class format rocks
This class is presented live by members of the ZURB team! You'll get a chance to interact with us directly.
We conduct the class online via GoToTraining, so you can attend from anywhere in the world.
Get all your questions answered during the live Q&A sessions. Each class topic is paired with dedicated Q&A time.
Keep the recording
After you complete the class, we'll send you the class slides, examples and the recording so you'll always have it to reference.