<a target="_blank" href="https://www.browserstack.com/"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></a><br>
[BrowserStack Open-Source Program](https://www.browserstack.com/open-source)
-## Training
+<!-- ## Training
-Want the guided tour to Foundation from the team that built it? The ZURB team offers comprehensive training courses for developers of all skill levels. If you're new to Foundation, check out the [Introduction to Foundation Course](http://zurb.com/university/foundation-intro?utm_source=Github%20Repo&utm_medium=website&utm_campaign=readme&utm_content=readme%20training%20link) to kickstart your skills, amplify your productivity, and get a comprehensive overview of everything Foundation has to offer. More advanced users should check out the [Advanced Foundation Course](http://zurb.com/university/advanced-foundation-training?utm_source=Github%20Repo&utm_medium=website&utm_campaign=readme&utm_content=readme%20training%20link) to learn the Advanced skills that ZURB uses to deliver quality client work in short timeframes.
+Want the guided tour to Foundation from the team that built it? The ZURB team offers comprehensive training courses for developers of all skill levels. If you're new to Foundation, check out the [Introduction to Foundation Course](http://zurb.com/university/foundation-intro?utm_source=Github%20Repo&utm_medium=website&utm_campaign=readme&utm_content=readme%20training%20link) to kickstart your skills, amplify your productivity, and get a comprehensive overview of everything Foundation has to offer. More advanced users should check out the [Advanced Foundation Course](http://zurb.com/university/advanced-foundation-training?utm_source=Github%20Repo&utm_medium=website&utm_campaign=readme&utm_content=readme%20training%20link) to learn the Advanced skills that ZURB uses to deliver quality client work in short timeframes. -->
Copyright © 2020 Foundation Community
<p><a href="https://get.foundation/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 cell">
- <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
</div>
<div class="large-4 medium-4 cell">
<p><a href="https://get.foundation/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowledge.</p>
position: relative;
padding: 1rem 0;
width:100%;
- background-image: url('https://zurb.com/university/assets/zurbwired2016-web-banner-a95e5d17264e3617a2ae4f34e84f973b.gif');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
## Icons
-An icon can be used in place of text. We're using the [Foundation icon font](https://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
+An icon can be used in place of text. We're using the Foundation icon font here, but any icon fonts or image-based icons will work fine.
<p>
<a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
- dropdown button
---
-<div class="callout training-callout">
- <p>To help you get the most out of Foundation and create responsive websites and apps like us we’ve put together some unique online webinar training. Learn Foundation’s Grid, how to use and modify Foundation's UI components, Foundation’s JavaScript options and functions, and tons of tips and tricks we learned from major client projects.</p>
- <a href="https://zurb.com/university/foundation-intro" target="_blank">Learn more about Foundation training →</a>
-</div>
-
## Basics
A basic button can be created with minimal markup. Because buttons can be used for many purposes, it's important to use the right tag.
video: tpmQcZSPw4Q
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Become a master of the Foundation Grids to create complex layouts faster and with less code. The new XY Grid is the newest and most powerful version. Stay up-to-date with all the new features in Foundation 6.4 and learn how to migrate to the XY Grid with our online webinar training. You’ll also learn all the useful UI components and Foundation JavaScript to really crush your projects.</p>
<a href="https://zurb.com/university/foundation-intro" target="_blank">Get registered for an upcoming Foundation training →</a>
-</div>
+</div> -->
The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.
flex: true
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Learn the right way to tackle your project and at same time saving time and money. We offer in depth online webinars for you to gain the skills to become a Foundation front-end master.</p>
<a href="https://zurb.com/university/foundation-intro" target="_blank">Check out our upcoming training opportunities →</a>
-</div>
+</div> -->
## Form Basics
- block grid
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Become a master of the Foundation Grids to create complex layouts faster and with less code. The new XY Grid is the newest and most powerful version. Stay up-to-date with all the new features in Foundation 6.4 and learn how to migrate to the XY Grid with our online webinar training. You’ll also learn all the useful UI components and Foundation JavaScript to really crush your projects.</p>
<a href="https://zurb.com/university/foundation-intro" target="_blank">Get registered for an upcoming Foundation training →</a>
-</div>
+</div> -->
## Importing
## New to Foundation for Sites?
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>The number one way to learn your way around Foundation and start mastering responsive web development is via the training courses offered by the ZURB team.</p>
<a class="button" href="https://zurb.com/university/foundation-intro" target="_blank">Check out the next Foundation training →</a>
-</div>
+</div> -->
With an easy to understand syntax and consistent structure, you'll learn your way around Foundation in no time!
- breakpoints
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Build better websites and apps, code cleaner, and become a better front-end developer with Foundation training. We're running two online webinar training sessions this month where we break down how to get the most out of Foundation and leap ahead skillwise.</p>
<a href="https://zurb.com/university/courses" target="_blank"> Get registered →</a>
-</div>
+</div> -->
## Default Media Queries
flex: true
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Navigation is one the most crucial part of your site. Be a navigation guru with our Foundation online webinar training. You’ll learn techniques for creating responsive navigations that work with any type of site. In addition to that you can learn tips and tricks and best practices for all of Foundation’s components.</p>
<a href="https://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
-</div>
+</div> -->
The menu is a flexible, all-purpose component for navigation. It replaces Foundation 5's inline list, side nav, sub nav, and icon bar, unifying them into one component.
flex: true
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Off-canvas layouts are common and useful for mobile and desktop layouts. Be a navigation guru with our Foundation online webinar training. You’ll learn techniques for creating responsive navigations that work with any type of site. In addition to that you can learn tips and tricks and best practices for all of Foundation’s components.</p>
<a href="https://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
-</div>
+</div> -->
<div class="primary callout">
<p>Good news! We've updated Off-canvas to offer more and better functionality. Another bonus is the markup is simplified. This new version applies to version 6.3+. We work hard to avoid breaking changes, so any markup updates are listed in the <a href="#migrating-from-versions-prior-to-v6-3">migration section</a> of this page.</p>
Note that there's no `<html>` or `<body>` tags, and no header or footer. This code will be injected into the `{{> body}}` declaration when Panini assembles your pages.
-In the prototyping template, these finished files are compiled into a standalone folder called `dist` (short for "distribution"), which also includes your processed CSS, JavaScript, and images. This folder can easily be uploaded to any web server, or Notable's [Hosted Prototypes](https://zurb.com/notable/features/hosted) service.
+In the prototyping template, these finished files are compiled into a standalone folder called `dist` (short for "distribution"), which also includes your processed CSS, JavaScript, and images. This folder can easily be uploaded to any web server, or Notable's Hosted Prototypes service.
---
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>We hope you’re loving these free documentation videos! If you’d like to really accelerate your learning and master the world of front-end development, our Foundation online webinar training is the answer.</p>
<a href="https://zurb.com/university/courses" target="_blank">See the upcoming Foundation trainings →</a>
-</div>
+</div> -->
## Basics
video: mYiyunVQdMY
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Get trained up on Foundation's Sass with our online webinar training. Sass allows you to write dramatically more efficient code. We'll go over things like how to install and start compiling Sass, nesting mixins and functions, and writing fully semantic CSS using Foundation mixins for insanely maintainable code.</p>
<a href="https://zurb.com/university/advanced-foundation-training" target="_blank">Reserve your spot →</a>
-</div>
+</div> -->
<div class="primary callout">
<p>Not familiar with Sass? The [official tutorial](https://sass-lang.com/guide) on sass-lang.com is a great place to start.</p>
flex: true
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>Navigation is one the most crucial part of your site. Be a navigation guru with our Foundation online webinar training. You’ll learn techniques for creating responsive navigations that work with any type of site. In addition to that you can learn tips and tricks and best practices for all of Foundation’s components.</p>
<a href="https://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
-</div>
+</div> -->
## Basics
sass: scss/xy-grid/*.scss
---
-<div class="callout training-callout">
+<!-- <div class="callout training-callout">
<p>The XY Grid is a huge advancement in Grids. Stay up-to-date with all the new features in Foundation 6.4 with our online webinar training. You’ll come away knowing the ins and outs of the XY Grid to create complex layouts faster and with less code. Not to mention all the useful UI components and Foundation JavaScript you’ll learn. You’ll make your coworkers jealous.</p>
<a href="https://zurb.com/university/foundation-intro" target="_blank">Don’t miss out on the upcoming Foundation trainings →</a>
-</div>
+</div> -->
## XY Grid Basics
<div class="row align-center">
<div class="small-12 column text-center">
- <h5 class="homepage-section-subtitle lighter hide-me">Register Today</h5>
+ <!-- <h5 class="homepage-section-subtitle lighter hide-me">Register Today</h5>
<span class="homepage-section-subtitle-divider lighter small-centered hide-me"></span>
- <h1 class="homepage-section-title hide-me">Get all the answers in our <br><!-- August 8th --><a class="hyperlink" href="https://zurb.com/university/courses">Foundation Classes</a></h1>
+ <h1 class="homepage-section-title hide-me">Get all the answers in our <br><!-- August 8th -->
+ <a class="hyperlink" href="https://zurb.com/university/courses">Foundation Classes</a></h1> -->
</div>
<div class="small-11 medium-10 large-9 column text-center small-centered">
- <p class="homepage-section-desc hide-me">Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.</p>
+ <!-- <p class="homepage-section-desc hide-me">Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.</p> -->
</div>
<div class="small-11 medium-8 large-5 column footer-contact-form small-centered" style="position:relative;">
<!-- <form class="request-form" action="https://zurb.com/api/mail/zurbmail" id="requestCourseInformation" method="post">
<input type="hidden" name="_subject" value="ZURB | Foundation Training Inquiry">
<input type="hidden" name="_to" value="contact@get.foundation">
</form> -->
- <a href="https://zurb.com/university/courses" class="expanded large button home-form-submit-button">See Upcoming Classes</a>
- <p class="text-center">
Or if you prefer, contact the Foundation Team at <a class="text-link" href="mailto:contact@get.foundation">contact@get.foundation</a></p>
+ <!-- <a href="https://zurb.com/university/courses" class="expanded large button home-form-submit-button">See Upcoming Classes</a> -->
+ <p class="text-center">
Contact the Foundation Team at <a class="text-link" href="mailto:contact@get.foundation">contact@get.foundation</a></p>
</div>
</div>
</section>
</div>
<div class="footer-nav-center">
<ul class="footer-nav-menu">
- <li class="footer-nav-menu-item">
- <a href="https://zurb.com/responsive">Showcase</a>
- </li>
- <li class="footer-nav-menu-item">
- <a href="https://zurb.com/university/courses">Training</a>
- </li>
<li class="footer-nav-menu-item">
<a href="https://get.foundation/develop/getting-started.html">Building Blocks</a>
</li>
<ul class="dropdown menu right-side" data-dropdown-menu data-click-open="true">
<li class="menu-item">
- <a href="https://zurb.com/responsive">Showcase</a>
+ <a href="javascript:void(0)">Showcase</a>
<ul class="menu">
- <li><a href="https://zurb.com/responsive">Foundation Showcase</a></li>
<li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
<li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
<li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
<a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
<ul class="menu vertical">
<li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
- <li><a href="https://zurb.com/university/lessons">Lessons</a></li>
+ <
!-- <li><a href="https://zurb.com/university/lessons">Lessons</a></li>
<li><a href="https://zurb.com/university/courses">Courses</a></li>
- <li><a href="https://zurb.com/university/training">Custom Training</a></li>
+ <li><a href="https://zurb.com/university/training">Custom Training</a></li> -->
<li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
</ul>
<ul class="mobile-ofc vertical menu">
<li>
- <a href="https://zurb.com/responsive">Showcase</a>
+ <a href="javascript:void(0)">Showcase</a>
<ul class="submenu menu vertical" data-submenu>
- <li><a href="https://zurb.com/responsive">Foundation Showcase</a></li>
<li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
<li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
<li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
