From: harry <harmanmanchanda182@gmail.com>
Date: Thu, 6 Jul 2017 16:09:29 +0000 (+0530)
Subject: Update docs copy on prefixing responsive classes from single to all helpers!
X-Git-Tag: v6.4.2-rc2~1^2~28^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10356%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Update docs copy on prefixing responsive classes from single to all helpers!
---

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index 2b37fac1d..38990d759 100644
--- a/docs/pages/prototyping-utilities.md
+++ b/docs/pages/prototyping-utilities.md
@@ -76,7 +76,30 @@ You can instead import only the specific utility classes that you need. To make
 @include foundation-prototype-spacing;
 ```
 
-Looking for more customization including **responsive breakpoints?** Click here for the [Sass Reference](#sass-reference)
+Looking for more customization? Click here for the [Sass Reference](#sass-reference)
+
+---
+
+## Responsive breakpoints
+
+<div class="alert callout">
+  <p>Responsive breakpoints is disabled by default.</p>
+</div>
+
+These prototype classes also have an optional mobile first responsive classes  so that setting a class will apply to the small breakpoint and large unless overridden by a class for a larger breakpoint. <br>
+You can easily enable these classes by setting `$global-prototype-breakpoints` to `true`.
+
+```html
+<p class="medium-text-uppercase">This text will be uppercase for medium and up.</p>
+<p class="large-text-lowercase">This text will be lowercase for large breakpoint.</p>
+```
+
+You can also customise things by choosing to add responsive breakpoints only for specific prototype helpers that you would need as responsive classes. <br>
+For example, text transformation classes have a breakpoint variable `$prototype-transformation-breakpoints` which is set to `$global-prototype-breakpoints` which is set to `false` by default. For enabling responsive breakpoints for text transformation classes, simply set: 
+
+```scss
+$prototype-transformation-breakpoints: true;
+``` 
 
 ---
 
@@ -745,23 +768,6 @@ Note: Combining `overflow: hidden` in either the X or Y direction with the `over
 
 ---
 
-## Responsive breakpoints
-
-For applicable classes, if you prefix a breakpoint,
-the effect will be effective within that breakpoint.
-
-<div class="primary callout">
-  <p>Responsive breakpoints is disabled by default. If you want to enable it, please set <code>$global-prototype-breakpoints</code> to <code>true</code>.</p>
-</div>
-
-
-```html_example
-<p class="medium-text-line-through">text-line-through effect when medium breakpoint.</p>
-<p class="large-text-line-through">text-line-through effect when large breakpoint.</p>
-```
-
----
-
 ## Sass Mixin Helpers
 
 We also provides some extra utility mixins that you can use for your next prototype project.