tags:
- index
- home
-
+
video-hero: true
---
<div class="accordion-content" data-tab-content>
- <div class="row accordion-content-item">
-
+ <div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/P2rbx0sGPJo" frameborder="0" allowfullscreen></iframe>
+ </div>
</div>
- <div class="medium-8 columns accordion-content-item-text">
- <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <div class="medium-8 columns">
+ <h4>Zero to Website | Part 1: Before You Build - The Basics of the Web </h4>
+ <a href="https://youtu.be/P2rbx0sGPJo" class="accordion-content-item-cta">Watch Video</a>
</div>
</div>
<div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/3nCXVJXe_gg" frameborder="0" allowfullscreen></iframe>
+ </div>
</div>
<div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <h4>Zero to Website | Part 2: Digging Into Foundation's Starter Package</h4>
+ <a href="https://youtu.be/3nCXVJXe_gg" class="accordion-content-item-cta">Watch Video</a>
</div>
</div>
<hr class="accordion-content-item-divider">
- <div class="row">
+ <div class="row accordion-content-item">
+
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/yGDTqm713AI" frameborder="0" allowfullscreen></iframe>
+ </div>
</div>
- <div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <div class="medium-8 columns accordion-content-item-text">
+ <h4>Zero to Website | Part 3: Intro to the Foundation Grid</h4>
+ <a href="https://youtu.be/yGDTqm713AI" class="accordion-content-item-cta">Watch Video</a>
</div>
</div>
<div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <img src="{{root}}assets/img/intro-grid.png">
</div>
<div class="medium-8 columns">
- <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <h4>Zero to Website Guide Part 4: Scaffolding Your Portfolio with Foundation’s Grid</h4>
+ <a href="http://zurb.com/university/lessons/zero-to-website-guide-part-4-scaffolding-your-portfolio-with-foundation-s-grid" class="accordion-content-item-cta">Go to lesson</a>
</div>
</div>
<div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <img src="https://s3.amazonaws.com/university-prod/uploads/attachments/249/original/Sample-blog-post.png?1423700108">
</div>
<div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <h4>Build a Solid Layout with Foundation</h4>
+ <a href="http://zurb.com/university/lessons/build-a-solid-layout-with-foundation" class="accordion-content-item-cta">Go to lesson</a>
</div>
</div>
<div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <img src="https://s3.amazonaws.com/university-prod/uploads/attachments/495/original/143-pic-ex1.png?1480448383">
</div>
<div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <h4>Have It Your Way with Foundation's Modular Responsive Navigation</h4>
+ <a href="http://zurb.com/university/lessons/have-it-your-way-with-foundation-s-modular-responsive-navigation" class="accordion-content-item-cta">Go to lesson</a>
</div>
</div>
</div>
</li>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Simple Templates</a>
+ <a href="#" class="accordion-title">HTML Templates</a>
<div class="accordion-content " data-tab-content>
<div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <img src="http://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-07.svg">
</div>
<div class="medium-8 columns">
- <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <h4>Portfolio</h4>
+ <p class="subheader">Show off your work and highlight what you do with this grid style thumbnail layout.</p>
+ <a href="http://foundation.zurb.com/templates.html">See all templates</a>
</div>
</div>
<div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <img src="http://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-06.svg">
</div>
<div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <h4>Blog Single Column</h4>
+ <p class="subheader">This sleek, minimal approach can help your blog stand out by putting content front and center.</p>
+ <a href="http://foundation.zurb.com/templates.html">See all templates</a>
</div>
</div>
<div class="row">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
+ <img src="http://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-03.svg">
</div>
<div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
+ <h4>Agency</h4>
+ <p class="subheader">Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers.</p>
+ <a href="http://foundation.zurb.com/templates.html" class="accordion-content-item-cta">See all templates</a>
</div>
</div>
</div>
</li>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Basic Documentation</a>
- <div class="accordion-content " data-tab-content>
+ <a href="#" class="accordion-title">Getting Started</a>
+ <div class="accordion-content" data-tab-content>
- <div class="row">
- <div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
- </div>
- <div class="medium-8 columns">
- <h4>Foundation 6.3 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
- </div>
+ <div class="row">
+ <div class="medium-4 columns accordion-content-item-thumbnail">
+ <img src="{{root}}assets/img/docs-kitchensink.png">
</div>
-
- <hr class="accordion-content-item-divider">
-
- <div class="row">
- <div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
- </div>
- <div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
- </div>
+ <div class="medium-8 columns">
+ <h4>Kitchen Sink</h4>
+ <p class="subheader">Every component in Foundation all on one page, mingling with each other.</p>
+ <a href="{{root}}kitchen-sink.html" class="accordion-content-item-cta">Go to Kitchen Sink</a>
</div>
+ </div>
- <hr class="accordion-content-item-divider">
+ <hr class="accordion-content-item-divider">
-
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://placehold.it/350x250">
- </div>
-
<div class="medium-8 columns">
- <h4>Foundation 6.4 Update: Cards, Mutation Observers, Off-Canvas</h4>
- <a href="#" class="accordion-content-item-cta">Watch Video</a>
- </div>
+ <div class="row">
+ <div class="medium-4 columns accordion-content-item-thumbnail">
+ <img src="{{root}}assets/img/intro-css.png">
+ </div>
+ <div class="medium-8 columns">
+ <h4>Foundation Starter Projects - CSS Download </h4>
+ <p class="subheader">This video will take you through downloading and getting started with the Foundation CSS project.</p>
+ <a href="https://youtu.be/lFrpnk0Oo_8?list=PLJVWPVPk_D_0-LDRu8k29w-7ktRk_dJ5n" class="accordion-content-item-cta">Watch Video</a>
</div>
-
</div>
+
+ </div>
</li>
</ul>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Latest updates in Foundation 6.3.0</a>
<div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
+ <p>Foundation 6.3 contains new features, reworked old features, and more bugfixes than you can shake a stick at! Foundation is now EVEN MORE accessible out of the box, with a default color palette that meets AA contrast requirements, better keyboard navigation, and a slew of other improvements.</p>
+
+ <ul>
+ <li><strong>A new, bulletproof off-canvas:</strong> 6.3 includes an all new off-canvas implementation that adds features and improves performance over the existing version. Open from the top, bottom, side, you name it. It's even backwards compatible so you don't need to change any markup. Thanks for your hard work Brett Mason!</li>
+ <li><strong>Cards!:</strong> After lots of debate and iterations we have added Cards to Foundation 6. Card based designs are perfect for responsive sites and make it easy to display a ton of information without overwhelming your users (as long as you use them correctly). Another awesome contribution by Brett Mason!</li>
+ <li><strong>Responsive Accordion to Tabs:</strong> Tabs work great on larger screens but can be a mess on mobile. With this new update, you can switch your UI based on screen size from tabs to responsive accordions for a better experience on mobile. It's a breeze to implement and provide an awesome experience for your users. Thanks to designerno1, for this one!</li>
+ <li><strong>Mutation observers:</strong> Foundation is the most advanced framework in the world for a reason. We're always looking to include awesome technologies that will help you develop faster. Mutation observers work behind the scenes and automatically detect DOM changes and triggers updates in components. This saves you manually having to Reflow elements to trigger changes in things like reveal modals, sticky bars, equalizer, and more. Shoutout to Corey Snyder for putting this one together!</li>
+ <li><strong>Deep linking to Tabs:</strong> Deep linking has become one of the hottest topics on the web within the last few years and absolutely critical for eCommerce sites and mobile apps. Have specific content in tabs and want to send users to it? Now you can in 6.3 thanks to ahebrank.</li>
+ <li><strong>Print Styling:</strong> Traditionally, printing a responsive webpage is very difficult. Foundation typically would only show the mobile screen, other frameworks throw up their hands, and you'd have to spend hours setting up a custom print stylesheet. In 6.3, you can specify exactly which breakpoint you want your print page to mirror, and Foundation will figure out the rest. Shout out to Andy Cochran for adding that!</li>
+ <li><strong>Vertical Rhythm:</strong> Foundation has always made it easy to manipulate the sizes of your different types of headers and text, but to create strong vertical rhythm on a site you need more than this. With 6.3 the configuration of typography sizing, line height, and margins are all accessible in a single compact setting. Kudos to Karl Anders!</li>
+ <li><strong>Flexbox Helpers:</strong> We've been using #FLEXBOX more and more recently, and getting more and more excited about using it for UI. In 6.3 we've added a bunch of new helpers that make Flexbox more accessible and easier to prototype with.</li>
+ </ul>
</div>
+
</li>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">New Ecommerce Templates</a>
+ <a href="#" class="accordion-title">Building Blocks</a>
<div class="accordion-content" data-tab-content>
I would start in the open state, due to using the `is-active` state class.
</div>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
