]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 17150cc)
Visual Regression: Added display classes to testing
authorharry <harmanmanchanda182@gmail.com>
Thu, 9 Feb 2017 05:07:37 +0000 (10:37 +0530)
committerharry <harmanmanchanda182@gmail.com>
Thu, 9 Feb 2017 05:07:37 +0000 (10:37 +0530)
Also removed display-table and display-table-cell as default from docs and scss

docs/pages/prototyping.md patch | blob | blame | history
scss/prototype/_display.scss patch | blob | blame | history
test/visual/prototype/display.html [new file with mode: 0644] patch | blob

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 5cd88580c718232a3196632dae4de1ad4dec3d98..810244b5a73e54b4db9a0c8899d267028f4e73f2 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -41,7 +41,7 @@ or, if you looking for specific utility instead of all, these helper classes can
 @include foundation-prototype-spacing;
 ```
 
-Looking for more customization? Click here for the [Sass Reference](#sass-reference)
+Looking for more customization including responsive breakpoints? Click here for the [Sass Reference](#sass-reference)
 
 ---
 
@@ -324,10 +324,10 @@ Display classes helps to display the elements in specific positions inside any o
 <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-classes`. Sass Reference [here](#sass-reference)
+
 ---
 
 ## Positioning
diff --git a/scss/prototype/_display.scss b/scss/prototype/_display.scss
index 1973b077679b7c170fa47bcfd588ad5bf54b8588..e9107127fa036ea6c62d2a658eadefa90e235e2b 100644 (file)
--- a/scss/prototype/_display.scss
+++ b/scss/prototype/_display.scss
@@ -13,7 +13,7 @@ $prototype-display-breakpoints: $global-prototype-breakpoints !default;
 /// Map containing all the `display` classes
 /// @type Map
 $prototype-display-classes: (
-  none, inline, inline-block, block, table, table-cell
+  none, inline, inline-block, block
 ) !default;
 
 @mixin display($display) {
diff --git a/test/visual/prototype/display.html b/test/visual/prototype/display.html
new file mode 100644 (file)
index 0000000..d3ec28b
--- /dev/null
+++ b/test/visual/prototype/display.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Foundation for Sites Testing</title>
+    <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
+    <link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
+    <style type="text/css">
+      .debug {
+        background: #94BBF9;
+        padding: 3px;
+        color: #000;
+      }
+
+      .floating-box {
+          display: inline-block;
+          width: 150px;
+          height: 75px;
+          margin: 10px;
+          border: 3px solid #73AD21;  
+      }
+
+      .after-box {
+          border: 3px solid red; 
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row column">
+      <h2 class="m-t-20">Display None</h2>
+      <span>A span element.</span>
+      <span class="debug display-none">My Debugged span.</span>
+      <span>Another span element</span>
+    </div>
+    <div class="row column">
+      <h2 class="m-t-20">Display Inline</h2>
+      <span>A span element.</span>
+      <span class="debug display-inline">My Debugged span.</span>
+      <span>Another span element</span>
+    </div>
+    <div class="row column">
+      <h2 class="m-t-20">Display Block</h2>
+      <span>A span element.</span>
+      <span class="debug display-block">My Debugged span.</span>
+      <span>Another span element</span>
+    </div>
+
+    <div class="row column">
+      <h2 class="m-t-20">Display Inline Block</h2>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+      <div class="floating-box">Floating box</div>
+
+      <div class="after-box">Another box, after the floating boxes...</div>
+    </div>
+    
+    <p class="m-y-30">&nbsp;</p>
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git