Foundation 6 Preview Videos - Cheat Sheets
I’ve been going through Joe’s Foundation 6 Preview videos. Until Joe gets the concise tutorials and the documentation going, I decided to add some notes to use these videos as a passing reference.
Then typed them up into a markdown document with links to the part of the videos.
It was intended for my use but thought it might help others.
I haven’t checked every one of the descriptions or links yet. If you find errors or want to expand the narrative, just let me know.
Foundation 6 Preview # 1
| Time | Description |
|---|---|
| 08:38 | Setting Theme |
| 10:55 | Site Styles - General |
| 11:51 | Site Styles - Background |
| 12:23 | Site Styles - Site Width |
| 12:44 | Site Styles - Colors |
| 14:24 | Site Styles - text colors |
| 14:57 | Site Styles - text sizes |
| 16:54 | Site Styles - List Styles |
| 18:10 | Site Styles - Features Performance |
| 19:27 | Site Styles - Features preload (FA4) |
| 21:30 | Site Styles - Features - other Add-on stacks (TCMS, Agent, PageSafe) |
| 23:25 | Site Styles - Fonts General |
| 24:37 | Site Styles - Fonts web-safe |
| 25:31 | Site Styles - Fonts Google |
| 26:44 | Site Styles – Font styles |
| 27:15 | Swatches General |
| 31:20 | Swatches Background |
| 35:54 | Swatches Other types |
| 36:25 | Swatches - Wallpaper |
| 39:15 | Swatches - Text color |
| 41:06 | Swatches - Overlay, Background image, height |
| 45:50 | Text Stack |
| 47:45 | Header Stack |
| 48:20 | Table Stack |
| 49:45 | Column Stacks |
| 52:21 | Column Size SM MD LG |
| 53:20 | Column Alignment |
| 53:24 | Grid Pro* |
| 54:20 | Grid Pro* - Templates |
| 54:48 | Grid Pro* - Order |
| 56:45 | Grid Pro* - Vertical alignment |
| 57:36 | Picture |
| 58:20 | Picture Sizes |
| 59:10 | Image Type and query type |
| 1:01:53 | Details Stack |
| 1:02:33 | Other Stacks mentioned |
| 1:03:15 | Captions |
| 1:04:30 | Forms - Overview (templates) |
| 1:05:30 | A11Y forms |
| 1:06:20 | Blob (Template for Fun) |
| 1:10:00 | Questions |
| 1:11:18 | Question - Container |
| 1:12:50 | Question - Clean Source (generated) |
| 1:17:48 | Question - Blogs |
| *Grid Pro renamed to Columns Pro in 6.1 | |
Foundation 6 Preview # 2
| Time | Description |
|---|---|
| 07:25 | Menus - overview |
| 09:40 | RW Menu Stack (RW Generated links) |
| 09:55 | Simple Menu |
| 14:06 | Vertical Menu |
| 15:38 | Dropdown Menu |
| 16:25 | Dropdown Vertical Menu |
| 16:57 | Drill-down Menu |
| 17:45 | Accordion Menu |
| 18:41 | Sub Menu Style |
| 20:14 | Individual Menu Stacks (Build Menu Yourself) |
| 20:35 | Menu Stack |
| 21:30 | Menu Stack Settings |
| 22:20 | Menu Item Stack |
| 22:53 | Menu Item Sub Menu |
| 23:54 | Dropdown Menu Stack |
| 24:44 | Morf Menu styles |
| 24:57 | Drill-down to Dropdown |
| 29:05 | Color Change Menu item |
| 29:50 | RW Breadcrumbs |
| 30:38 | Breadcrumbs (build yourself) |
| 31:19 | Menu Template |
| 31:40 | Scroll to Navigation |
| 33:33 | Scroll to - Container Anchor ID |
| 36:44 | QA Floating Menu (fixed to top) |
| 37:00 | Floating Menu - Position swatch |
| 37:43 | Floating Menu - Sticky options |
| 38:18 | Menu Styling Component .menu |
| 39:27 | Center Logo template |
| 42:42 | SVG stack center logo |
| 43:17 | Menu Vertical Alignment |
| 43:45 | SVG hide-for-small-only Custom Class - Helper stack |
| 45:45 | Top Bar Template |
| 46:14 | Top Bar Stack |
| 49:40 | QA Nav system for Social Media Icons |
| 51:36 | Buttons |
| 53:16 | Open Lightbox Template |
| 54:18 | Hamburger Button |
| 56:49 | Link Button |
| 58:10 | Off-Canvas |
| 1:06:15 | Forms |
| 1:09:56 | Form text input |
| 1:11:15 | Form Auto Suggest |
| 1:11:52 | Form - Keyboard Type |
| 1:12:49 | Form - Auto Caps |
| 1:13:55 | Form Actions |
| 1:16:50 | Form Templates |
| 1:20:00 | QA |
Foundation 6 Preview # 3
| Time | Description |
|---|---|
| 03:59 | Zurb’s Website |
| 05:34 | Zurb’s Kitchen Sink |
| 08:45 | Foundation 6 Speed (swatches) |
| 14:00 | Foundation 6 Speed (Clean code) |
| 14:35 | Foundation 6 Accessibility (a11y) |
| 17:43 | Web page Overview |
| 20:45 | New Stacks page |
| 21:27 | Copy site styles |
| 21:45 | Site Styles - site colors explained |
| 23:33 | Site styles - Features area |
| 24:00 | Build site banner |
| 24:56 | Banner - swatch background (image) |
| 25:50 | Banner - Header |
| 28:05 | Banner header content alignment |
| 28:30 | Banner Swatch Height |
| 29:19 | Banner Content Vertical alignment |
| 29:55 | Banner Overlay Swatch |
| 31:50 | Banner text size - fit text |
| 33:22 | Banner Text Shadow Swatch |
| 34:20 | Container Content |
| 34:50 | Content Picture (image) |
| 35:45 | Content Column Separation- Gutter, Margin, Padding |
| 37:00 | Card Template |
| 38:50 | HTML tags Header, Section |
| 40:40 | Vertical spacing - padding Swatch selector (CSS Selector) |
| 42:35 | F6 Utility Classes (pt:96) |
| 45:10 | Content section Column Mobile sizing |
| 46:50 | Center Orphan Column - Horizontal Alignment |
| 47:35 | Column Source Order (column swap template) |
| 49:45 | *Grid Pro |
| 53:10 | Contact Form |
| 54:10 | Footer |
| 57:45 | Footer Menu Stack - Horz. Small, Vert Med + |
| 59:50 | Source Order *Grid Pro |
| 1:03:15 | Page section Colors |
| 1:05:34 | Menu W/Icon |
| 1:06:13 | Menu Drop Zone |
| 1:07:55 | Menu Font style swatch |
| 1:08:30 | Swatch Component Assignment - Parent Class |
| 1:10:15 | Menu Wrapper Container - style |
| 1:11:50 | Menu Container sizing |
| 1:12:45 | Menu Logo Visibility (Utility Class, Template) |
| 1:18:20 | Animation |
| 1:19:58 | Captions |
| 1:21:25 | Swatch organization |
| *Grid Pro renamed to Columns Pro in 6.1 | |
What’s New in Foundation 6.1
| Time | Description |
|---|---|
| 04:18 | Hover effects (Swatches) |
| 05:00 | On State - hover |
| 07:02 | Transition Swatch |
| 10:05 | On State Hover - Button Corners |
| 13:50 | On State - States |
| 15:08 | Swatch Breakpoints |
| 17:45 | Box Rounded Corners Breakpoints |
| 20:50 | Site Styles - layout improvements (swatches, pen) |
| 24:40 | Grid Pro renamed Columns Pro |
| 25:15 | 3 column sample - Grid cell now called Column |
| 25:45 | Column Dividers |
| 28:28 | Column Dividers - swatch |
| 29:25 | New Launcher Stack |
| 31:40 | Break |
| 33:25 | Vertical Grid |
| 38:44 | Site Pre-loader |
| 41:30 | Site Styles Lists Position and Indent |
| 43:47 | Forms |
| 44:05 | HoneyPot |
| 46:30 | reCaptcha |
| 49:00 | QA |
