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.
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 with 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’s Best Practices with Ghaida Zahran | 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.
- 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 with Caleb Winters | 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.