Foundation 6 Preview Videos - Cheat Sheets

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
26 Likes

Looks like you’ve had some time on your hands. Well done - and thank you.

1 Like

Now that is dedication. I hope it helps people.

1 Like

Wow, that’s quite a list! thanks…

1 Like

thank you, veeery helpful!!

1 Like

Thanks so much for your efforts, Doug! Very helpful indeed.

1 Like

Wow @teefers! You are awesome! Thank you.

2 Likes

@teefers Very helpful.

I made something similar in German (for two videos at the moment, more will follow):

Willkommen in der Welt von Foundation 6

Ein beispielhafter Produktionsprozess mit Foundation 6


2020-01-17: Just added the TOC of the next video:

Foundation 6 Templates und Nutzerfragen

7 Likes

This is absolutely fantastic!
Thxs Doug.

1 Like

Totally amazing @teefers, thank you from a newbie trying to learn : )

1 Like

This is just what I was looking for. Many many thanks for taking the time to do this. :slight_smile:

1 Like

super, Michael - 1000 Dank dafür!

2 Likes

Wow - this took some work, and it is well appreciated. Very useful!

1 Like

Wow, impressive. Thanks @teefers

1 Like

Wow! Thanks a lot!

1 Like

Hi Doug,
This is what we’ve all been waiting for. Is there a donation account? I think you’ve deserved it…

Thomas

1 Like