From 5f1ae2dddaccbb6ccadbf48f4827dab2eea29834 Mon Sep 17 00:00:00 2001 From: harry Date: Thu, 9 Feb 2017 10:37:37 +0530 Subject: [PATCH] Visual Regression: Added display classes to testing Also removed display-table and display-table-cell as default from docs and scss --- docs/pages/prototyping.md | 6 +-- scss/prototype/_display.scss | 2 +- test/visual/prototype/display.html | 74 ++++++++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 test/visual/prototype/display.html diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md index 5cd88580c..810244b5a 100644 --- 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
-
-
``` +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 1973b0776..e9107127f 100644 --- 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 index 000000000..d3ec28bc5 --- /dev/null +++ b/test/visual/prototype/display.html @@ -0,0 +1,74 @@ + + + + + + + Foundation for Sites Testing + + + + + +
+

Display None

+ A span element. + + Another span element +
+
+

Display Inline

+ A span element. + My Debugged span. + Another span element +
+
+

Display Block

+ A span element. + My Debugged span. + Another span element +
+ +
+

Display Inline Block

+
Floating box
+
Floating box
+
Floating box
+
Floating box
+
Floating box
+
Floating box
+
Floating box
+
Floating box
+
Floating box
+
Floating box
+
Floating box
+ +
Another box, after the floating boxes...
+
+ +

 

+ + + + + -- 2.47.2