]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
updates positioning copy
authorRafiBomb <rafi@zurb.com>
Wed, 31 May 2017 00:01:57 +0000 (17:01 -0700)
committerRafiBomb <rafi@zurb.com>
Wed, 31 May 2017 00:01:57 +0000 (17:01 -0700)
docs/pages/prototyping-utils.md
scss/prototype/_display.scss

index 0116d5981e2cfe25ffeca587f3fc0e1bde876040..5a8da7de192761a7ac0c21b5c01edbad64223bca 100644 (file)
@@ -635,26 +635,30 @@ Border none lets you quickly resets border to `none` for any element.
 
 ## Display Classes
 
-Display classes helps to display the elements in specific positions inside any other HTML elements.
+Display classes allow you to change the display property of any element.
 
 ```html
 <div class="display-inline"></div>
 <div class="display-inline-block"></div>
 <div class="display-block"></div>
 <div class="display-table"></div>
+<div class="display-table-cell"></div>
 ```
 
-By default, we have just added the most used display classes. but as you would know, there are many other display classes as specified by MDN [here](https://developer.mozilla.org/en-US/docs/Web/CSS/display). If you need some of those classes, then you can add them easily through Sass variables with `$prototype-display`. Sass Reference [here](#sass-reference)
+These cover some of the most used display types. There are many other display values as specified by MDN [here](https://developer.mozilla.org/en-US/docs/Web/CSS/display). If you need some of those classes, then you can add them easily through Sass variables with `$prototype-display`. Sass Reference [here](#sass-reference)
 
 <div class="primary callout">
-  <p>For `display: flex` and `display: none`, use generic `.flex-container` and `.hide` respectively!</p>
+  <ul>
+       <li>For `display: flex` use `.flex-container`. See [Flexbox Reference](flexbox.html)</li>
+       <li>For `display: none` use `.hide`. or Foundation's [Visibility Classes](visibility.html)</li>
+  </ul>
 </div>
 
 ---
 
 ## Positioning
 
-Positioning is very helpful and basic need for complex layouts.
+Positioning classes help you change an element's position value. By default, an element's postion value is `static`.
 
 ```html
 <div class="position-static"></div>
index 3b9d3b3bc1256c5867a42c7d7b82931d034c55a5..23f8b5ccad80c0f4feb88a8a6285102e5c74099d 100644 (file)
@@ -13,7 +13,11 @@ $prototype-display-breakpoints: $global-prototype-breakpoints !default;
 /// Map containing all the `display` classes
 /// @type Map
 $prototype-display: (
-  inline, inline-block, block, table
+  inline,
+  inline-block,
+  block,
+  table,
+  table-cell
 ) !default;
 
 /// Display classes, by default coming through a map `$prototype-display`