color: #aaa;
}
}
+
+.training-callout {
+ border-left: 3px solid $primary-color;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.17);
+}
- 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="http://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">
+ <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="http://zurb.com/university/foundation-intro" target="_blank">Get registered for an upcomming Foundation training →</a>
+</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">
+ <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="http://zurb.com/university/foundation-intro" target="_blank">Check out our upcoming training opportunities →</a>
+</div>
+
## Form Basics
Creating a form in Foundation is designed to be easy but extremely flexible. Forms are built with a combination of standard form elements, as well as grid rows and columns.
- block grid
---
+<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="http://zurb.com/university/foundation-intro" target="_blank">Get registered for an upcomming Foundation training →</a>
+</div>
+
## Basics
Start by adding an element with a class of `.row`. This will create a horizontal block to contain vertical columns. Then add elements with a `.column` class within that row. Specify the widths of each column with the `.small-#`, `.medium-#`, and `.large-#` classes.
}
}
```
+
### Custom Block Grid
Use the `grid-layout()` mixin to create your own block grid.
- breakpoints
---
+<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 Foundnation and leap ahead skillwise.</p>
+ <a href="http://zurb.com/university/courses" target="_blank"> Get registered →</a>
+</div>
+
## Default Media Queries
Foundation for Sites has three core breakpoints:
flex: true
---
+<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="http://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
+</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.
---
## Vertical Menu
-Add the `.vertical` class to a Menu to switch its orientation.
+Add the `.vertical` class to a Menu to switch its orientation.
<p>
<a class="" data-open-video="4:53"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
<br>
-Add `align-right` class for making the vertical menu aligned to the right.
+Add `align-right` class for making the vertical menu aligned to the right.
```html_example
<ul class="vertical menu align-right">
The above vertically left & right aligned menu are supported in all types of menu's. <br>
But `align-center` for vertical menu’s is only available for basic menu and is not available for dropdown, accordion or a drilldown menu.
</p>
-</div>
+</div>
```html_example
<ul class="vertical menu align-center">
flex: true
---
+<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="http://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
+</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>
</div>
- modal
---
+
+<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="http://zurb.com/university/courses" target="_blank">See the upcoming Foundation trainings →</a>
+</div>
+
## Basics
A modal is just an empty container, so you can put any kind of content inside it, from text to forms to video to an entire grid.
video: mYiyunVQdMY
---
+<div class="callout training-callout">
+ <p>Get trainied 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="http://zurb.com/university/advanced-foundation-training" target="_blank">Reserve your spot →</a>
+</div>
+
<div class="primary callout">
<p>Not familiar with Sass? The [official tutorial](http://sass-lang.com/guide) on sass-lang.com is a great place to start.</p>
</div>
@include foundation-everything;
```
-Our [starter projects](starter-projects.html) include the full list of imports, making it easy to comment out the components you don't need. A full list is also included below.
+Our [starter projects](starter-projects.html) include the full list of imports, making it easy to comment out the components you don't need. A full list is also included below.
```scss
@import 'foundation';
flex: true
---
-<div class="primary callout">
- <p>The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on <a href="responsive-navigation.html">responsive navigation</a> to learn more.</p>
+<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="http://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
</div>
## Basics
</div>
```
+<br>
+
+<div class="primary callout">
+ <p>The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on <a href="responsive-navigation.html">responsive navigation</a> to learn more.</p>
+</div>
+
---
## Advanced Layout
sass: scss/xy-grid/*.scss
---
+<div class="callout training-callout">
+ <p>The XY Grid is 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="http://zurb.com/university/foundation-intro" target="_blank">Don’t miss out on the upcoming Foundation trainings →</a>
+</div>
+
## XY Grid Basics
The XY 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 a full vertical grid.
--- /dev/null
+<div class="callout training-callout">
+
+</div>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
