← Code Skills

Advanced Foundation

An in-depth class covering the techniques and application of Foundation for sophisticated product design.

Adv foundation proof point1

Master the grid

Harness the power of the grid to build complex layouts that work on any device.

Adv foundation proof point2

Manage your code

Use best practices and semantic code to keep your product light and maintainable.

Adv foundation proof point3

Advanced Features

Leverage powerful javascript components that make complex features a breeze.

$299 per person
Attend this class on Tuesday, June 9
Reserve Your Spot

Questions? Email us at [email protected]

Learn from ZURB’s product designers

Here are your instructors that are teaching this class.

Brandon home
Brandon Arnold
Design Lead

Brandon is a mastermind when it comes to Foundation. He contributed several key components and of the latest version of our framework.

Tim home
Tim Hartwick

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.

Jeanie home
Jeanie Chung

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 home
Geoff Kimball

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.
  • Beyond the basics with Javascript

    Using Javascript to take your fuctionality further

    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.
    • Callbacks: Take your site to a new level by making your javaScript integrate with ours.
  • 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

Mic icon
Live training

This class is presented live by members of the ZURB team! You'll get a chance to interact with us directly.

Web icon
Held online

We conduct the class online via GoToTraining, so you can attend from anywhere in the world.

Question icon
Live Q&A

Get all your questions answered during the live Q&A sessions. Each class topic is paired with dedicated Q&A time.

Video icon
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.

$299 per person

Attend this class on Tuesday, June 9

Reserve Your Spot

Want custom team training? We’ve got you covered. Learn about team training »