Introduction to Foundation 6
Achieve maximum thrust by learning how to use Foundation 6 to power your projects.
Foundation 6 transformed the way we design and build the web, and the 6.4 release did it again with the brand new XY grid. In this 4-hour live webinar class, you'll gain a comprehensive understanding of the new grid, navigation, menu, and other interactive components that are a part of Foundation. Foundation is the world's most advanced front-end framework, and you can learn it from the team who builds it. If you have a basic knowledge of HTML/CSS and want to become an amazing front-end developer, this class is for you.
What you’ll learn in this class
Using Foundation 6Learn how to go from Prototype to Production with Foundation 69:00AM - 9:45AM PDT
- Getting started with Foundation: Learn the quickest way to get Foundation configured and installed
- Explanation of our mobile first approach: Use the mobile-first grid to get support for the largest number of old devices.
- Deep dive into our flexible, powerful grid: Learn how to quickly build complex responsive layouts using the Foundation XY grid
Prototyping with Foundation part 1Faster prototyping with Foundation UI components10:00AM - 10:45AM PDT
- Block grid: Create evenly spaced blocks and get elements to line up easily.
- Source Ordering: Shift columns around between our breakpoints to dictate how responsive layouts are viewed.
- Buttons: Create clear calls to action by just adding a style.
- Typography: Get great looking type and vertical rhythm right out of the box.
- Callouts: Highlight content or sections of your page.
- Forms: Layout inputs, selects, and labels to create easy to use forms.
Prototyping with Foundation part 2Faster prototyping with Foundation navigation components11:00AM - 11:45AM PDT
- Navigation: How to quickly implement 5 common navigation patterns.
- Pagination, Breadcrumbs: Create useful sub-navigation patterns that create simple user flows.
- Magellan: Build a solid navigation that scrolls users to the content they want to see.
- Visibility classes: Show different navigation or content elements for different devices.
- Toggler: Creating your own plugins with toggler and using Motion UI to animate them.
- Reveal: Create dead-simple responsive modals and add Motion UI animations.
- Dropdown Pane: Organize multi-tier content — just add links and go.