Foundation-sites: [Feature] Display Classes

[IamManchanda]

Inspiration => https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss

@kball @ncoden @natewiebe13 and all others. I am talking about you!
Let me know your thoughts on this ..... as code is ready for push!!

Also,

1. As, this have similarity to Visibility classes, What's the take on !important?
2. What about responsive variations? .... Yes or No

In short, I Wanna add these below classes

.display-flex { /* @if $global-flexbox */ }
.display-inline-flex { /* @if $global-flexbox */ }
.display-none { }
.display-inline { }
.display-inline-block { }
.display-block {  }
.display-table { }
.display-table-cell { }

[natewiebe13]

My thoughts are similar to #9708. I'm just trying to think of a case where you would want to use this utility class over defining how to display the component using CSS?

[IamManchanda]

@natewiebe13
These classes are far far different than those helper classes ... moreover it don't add much code ( generated css )

.display-none { display: none; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-table { display: table; }
.display-table-cell { display: table-cell; }

That's it!!!

and yes if its $global-flexbox, it adds these two more

.display-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; 
}

.display-inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex; 
}

[IamManchanda]

I'm just trying to think of a case where you would want to use this utility class over defining how to display the component using CSS?

1. Web Templates
2. Prototypes
3. Urgent works
4. Landing pages

[natewiebe13]

I still don't see an immediate benefit other than doing a quick prototype. IMO this encourages bad practices. There's no reason you couldn't create a boilerplate file and include that in your prototypes. I think this just starts to create bloat instead of keeping it minimal.
Another fear is if we start creating helper classes like this, how far do we go? We could add helper classes for everything, and then you're basically doing inline styles. I don't consider these to be that much different in regards to bad practice.

<span class="display-block background-primary text-alert text-bold text-uppercase">Some Content</span>

<span style="display: block; background: #1779ba; color: #cc4b37; font-weight: bold; text-transform: uppercase;">Some Content</span>

@kball, correct me if I'm wrong, but I don't think the goal of Foundation is to make it easy to create a prototype with 0 styles, but is meant to be an unopinionated base (or foundation :stuck_out_tongue_winking_eye:) to use when styling a site/app.

[IamManchanda]

@natewiebe13 You know i thinked about it ..... you are right .... closing this

[kball]

@natewiebe13 generally agree. Prototyping is an important usecase for us, but we're more focused on being an unopinionated foundation that you can build on top of. Things that are prototype focused and super simple to do in app css should not live here... things that are more complicated to do, even if in the end you'll want to mix it into your own class, there may be an argument for including a helper/prototyping class.

[IamManchanda]

@kball that's why i have just created a [work in progress] repo ProtoPen ..... to create a prototype library on top of foundation on the things which can't be covered here.

I don't consider these to be that much different in regards to bad practice.

<span class="display-block background-primary text-alert text-bold text-uppercase">Some Content</span>

<span style="display: block; background: #1779ba; color: #cc4b37; font-weight: bold; text-transform: uppercase;">Some Content</span>

I agree this above looks a serious bad practise but then if it was that bad .... why frameworks like bootstrap, semantic, materialize etc use these type of prototypes???
Answer: Public demands that.... specially Backend developers ( non designers )

[natewiebe13]

@kball, thinking more on this, it may add value to create a prototyping extension for Foundation. Possibly as a separate plugin or even built into Foundation, but disabled by default. Thoughts?

[IamManchanda]

Reopening due to above comments

[kball]

@natewiebe13 yes... for V7 we're even talking about making a distinction between "prototype mode" and "strict mode" for just about any component...

Example would be things like button groups or menus where it is super convenient for prototyping if classes on a single parent element cause a bunch of things to happen, but it breaks down when you start to move outside the mold, so you want to have finer control element by element.

I think the place to start is to add a distinction to each mixin/set of mixins of whether it is targeted for prototyping or something else, and gathering together a set of prototyping mixins that can be included by default with a single "prototyping" include or something similar.

@ncoden interested in your thoughts on this

[IamManchanda]

@ncoden interested in your thoughts on this

I am also very interested to know his thoughts :smiling_imp:

[natewiebe13]

I opened an issue for discussion specifically regarding prototyping #9736

[brettsmason]

@IamManchanda I'm going to close this if you don't mind, as I think #9736 covers this too, and that covers all the prototyping features.

[IamManchanda]

Yup exactly ! @brettsmason

9736 (#9738)