From: RafiBomb Date: Tue, 4 Jul 2017 00:27:30 +0000 (-0700) Subject: adds course calouts to docs X-Git-Tag: v6.4.2-rc2~1^2^2~18^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8c43050f1949a3036e36a79a380d0357d2543d9d;p=thirdparty%2Ffoundation%2Ffoundation-sites.git adds course calouts to docs --- diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 84c3882a5..cef66d15e 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -440,3 +440,8 @@ a[data-open-video] { color: #aaa; } } + +.training-callout { + border-left: 3px solid $primary-color; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.17); +} diff --git a/docs/pages/button.md b/docs/pages/button.md index 90328507c..dc4554749 100644 --- a/docs/pages/button.md +++ b/docs/pages/button.md @@ -7,6 +7,11 @@ tags: - dropdown button --- +
+

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.

+ Learn more about Foundation training → +
+ ## 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. diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md index 0ad2ff36b..7cf3a0416 100644 --- a/docs/pages/flex-grid.md +++ b/docs/pages/flex-grid.md @@ -5,6 +5,11 @@ sass: scss/grid/_flex-grid.scss video: tpmQcZSPw4Q --- +
+

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.

+ Get registered for an upcomming Foundation training → +
+ 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. --- diff --git a/docs/pages/forms.md b/docs/pages/forms.md index 2ef6a551b..992a78eb8 100644 --- a/docs/pages/forms.md +++ b/docs/pages/forms.md @@ -13,6 +13,11 @@ tags: flex: true --- +
+

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.

+ Check out our upcoming training opportunities → +
+ ## 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. diff --git a/docs/pages/grid.md b/docs/pages/grid.md index f243398a8..989ed9741 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -9,6 +9,11 @@ tags: - block grid --- +
+

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.

+ Get registered for an upcomming Foundation training → +
+ ## 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. @@ -662,6 +667,7 @@ Refer to the Sass documentation below to learn how each mixin works. } } ``` + ### Custom Block Grid Use the `grid-layout()` mixin to create your own block grid. diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md index e5522e651..9aaeddfbe 100644 --- a/docs/pages/media-queries.md +++ b/docs/pages/media-queries.md @@ -8,6 +8,11 @@ tags: - breakpoints --- +
+

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.

+ Get registered → +
+ ## Default Media Queries Foundation for Sites has three core breakpoints: diff --git a/docs/pages/menu.md b/docs/pages/menu.md index e73b36743..4027e21e5 100644 --- a/docs/pages/menu.md +++ b/docs/pages/menu.md @@ -12,6 +12,11 @@ tags: flex: true --- +
+

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.

+ Find out more about Foundation training classes → +
+ 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. --- @@ -117,7 +122,7 @@ Items can also be set to expand out and take up an even amount of space, with th ## Vertical Menu -Add the `.vertical` class to a Menu to switch its orientation. +Add the `.vertical` class to a Menu to switch its orientation.

Watch this part in video @@ -138,7 +143,7 @@ Add the `.vertical` class to a Menu to switch its orientation.
-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