[Feature Queries] CSS Grid and Progressive Enhancement | 2018 #10661

IamManchanda · 2017-09-19T12:01:04Z

Inspiration: https://codepen.io/primalivet/pen/ryjKmV?editors=0100

This Thread is a successor of #10134, just to attract more viewership needed!

Well, Things have changed a lot now!

Microsoft is also now supporting CSS Grid!
https://twitter.com/MSEdgeDev/status/908096400507858944
Again, Thanks to @gregwhitworth and Microsoft Team!

http://caniuse.com/#feat=css-featurequeries
Freaking 92% global ... even Opera Mini/UC Browser is supported
Atleast expect it to go to 95-97 by 2018? No?

IE (11) Support is going down day by day, its 3% right now, expect it to go 2% or even 1% in 2018
Update: We may be supporting IE 10 and 11 also most probably! Working on it!

So here What I propose for Foundation 7 and all of it without dirty hacks:

/**
 * IE 6-10 Browser support = around 0%
 * IE 11 Browser Support = 3% (Going down)
 * But Still we will support IE
 */

@supports (display: grid) {
  .grid-x, .grid-y {
    /* CSS Grid */
    /* Both 1D and 2D */
    display: grid;  /* Latest Chrome, Firefox, Safari, Opera, Edge */
  }
}
@supports not (display: grid) {
  @supports (display: flex) {
    /* Flex Grid, Full fallback support for 1D without any code bloat. */
    /* Progressive Enhancement for 2D */
    .grid-x, .grid-y {
      display: flex;  /* Old Chrome, Firefox, Safari, Opera, Edge, Opera Mini */
    }
  }
  @supports not (display: flex) {
    /* Progressive Enhancement only! */
    .grid-x, .grid-y {
      display: inline-block; /* UC Browser */
    }
  }
}

/* Hack for IE, assuming that IE is a browser */
/* Sass Customisation to rip this duplicate code if you DONT want to support IE */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .grid-x, .grid-y {
    display: flex;  /* IE 10, 11 */
  }
}

IamManchanda · 2017-09-19T12:05:28Z

@kball If we go like this, there is no need to support things like KISS

And I don't think just to support Old IE, Going down 3% browser users and its hacks, we need to change our whole dev environment with things Like KISS and PostCSS... There is no need for that
There is brand new EDGE after all.

DaSchTour · 2017-09-19T12:30:24Z

But consider, that display flex and display grid have very different behavior and are not substitutes. I'm not even sure if it's a good idea to wrap display: grid into css classes. Same as with flexbox many features "get lost" when wrapped into classes.

IamManchanda · 2017-09-19T12:36:04Z

But consider, that display flex and display grid have very different behavior and are not substitutes.

I am not saying to use grid only for first support tag... we can and should use "Grid + Flex"
Also on not substitutes,
That is what Is called Progressive enhancement, No?
Show as much as possible for a fallback

See this example BTW => https://codepen.io/primalivet/pen/ryjKmV?editors=0100

EDIT: Just found out that Opera Mini also supports flexbox 😛 and its only UC browsers that don't support flexbox (old spec, doesn't support wrapping) fully so updated my thread

IamManchanda · 2017-09-19T13:47:27Z

The thing that matter with layouts is that, CSS Grid is perfect for 2-directional layouts
But Flexbox can do some good stuff too, but with lot more work for 2-directional layouts

What we need is an answer to this question (choose one from two below)

I can do all the Crazy stuff & App Layouts, support everything even UC browser but IE?
I can't do much stuff, have lot of hacks, doesn't even support UC browser but hey I support IE?

IamManchanda · 2017-09-19T17:23:50Z

Good article https://ihatetomatoes.net/message-for-grumpy-developers/

The Good: Things used to be much more simpler

The Bad: CSS layouts with float and clearfix felt like a hack

The Now: Create CSS layouts without any hacks

The Solution: Remove all distractions and learn from simple demos

The Future: I can’t wait to build more responsive and faster UI with the latest CSS specifications, instead of spending time coding workarounds for old browser imperfections.

digitalfuel · 2017-09-19T21:24:51Z

Build 7 now with the future in mind. Let those that want and can use it help make it better for those that don't and can't just yet. 6 is for IE, 7 is for the future. If 7 does not look forward enough, before the time 8 is due people will be looking for alternatives that are not a backward 7. Let hop skip then jump into a future version 7.

And what is wrong with a great foundation 6 for those that need to support old tech and what is a 7 that includes them going to do to change their or our developments. Not much. It would only be a lot of effort for a 6.7.

IamManchanda · 2017-09-19T21:33:17Z

@digitalfuel All the thing aka normal grid remains same ... we are not changing that

In General for 2D,
What we are thinking is to create Sass mixins for some cool stuff like
https://codepen.io/primalivet/pen/ryjKmV?editors=0100
2d will only support CSS Grid with Flexbox fallback

In 1D,
I think we can use CSS Grid with flexbox and inline block fallback (Progressive Enhancement )
If needed we can support IE too
See this => https://s.codepen.io/matuzo/debug/Emddvx

You can read about progressive enhancement in this article to know more => https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/

digitalfuel · 2017-09-20T05:24:44Z

I am all for an approach like progressive enhancements as long as it supports CSS Grid.
Is ie 9 & 10 still on the cards to stop being supported? This would help.
I have a project that would fit nice for a November v7 release. Being my own I am keen to test the CSS Grid waters.

IamManchanda · 2017-09-20T06:31:43Z

@digitalfuel
I think we may support IE 10,11 too

https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10, 11 specific styles go here */  
  display: flex;
}

digitalfuel · 2017-09-20T20:55:40Z

I like this idea as it can be easily removes if deemed not needed for a specific project.

How is the CSS Grid looking to be implemented into the Framework. Will it be implemented into the current HTML structure like XY Grid or will it be independent from it?
Is there an example of the current thinking?

IamManchanda · 2017-09-21T06:30:36Z

Boom right now we dont know but some experiments going on internally and things going well

orangedaisy · 2017-09-21T15:53:56Z

Please, do not try to shoehorn CSS Grid Layout into Foundation's grid system.

https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/

CSS Grid Layout is the framework. It needs no abstraction. Anything you do will make an already complex spec even more complicated and confusing.

IamManchanda · 2017-09-21T18:13:52Z

Don't worry, nothing like that!

Our focus is Sass mixins (and functions for progressive fallback).

orangedaisy · 2017-09-21T18:53:17Z

This:

@supports (display: grid) {
  .grid-x, .grid-y {
    /* CSS Grid */
    /* Both 1D and 2D */
    display: grid;  /* Latest Chrome, Firefox, Safari, Opera, Edge */
  }
}

And this:

Our focus is Sass mixins (and functions for progressive fallback).

would lead me to believe that you are trying to somehow co-opt CSS Grid Layout into an abstracted system.

You do not need to do this.

Any line of code you write will be an unnecessary abstraction and limitation of CSS Grid Layout. If you want to support "progressive enhancement," then leave CSS Grid Layout out of your codebase and only provide the fallback (no need to do this through @supports either, just make it an optional @import). You cannot provide a CSS Grid Layout framework because it is already a framework.

Cramming CSS Grid Layout into Foundation's grid system would be like cramming the Bootstrap grid system into Foundation--while somehow trying to support both--and then providing an extra layer of classes on top. It just doesn't make sense. The work is already done. Don't reinvent the wheel.

IamManchanda · 2017-09-21T19:27:34Z

Cramming CSS Grid Layout into Foundation's grid system

We are certainly not doing that. I am sorry many things I can't tell because of being an early stage... but FWIW... it looks like that most probably, we are not touching XY Grid!

Another FWIW... we are just applying maths!

digitalfuel · 2017-09-21T20:58:40Z

Glad to hear CSS Grid will not be stuffed into the grid system.

I would love to see an example of the apply math concept.
And would also like to know where all the talk of CSS specs in F7 ended up.

IamManchanda · 2017-09-21T21:15:19Z

Something like
Code once, Run with different spec's !

colin-marshall · 2018-01-27T05:29:18Z

@IamManchanda closing out this feature request to be reconsidered in v7.

IamManchanda · 2018-01-28T11:14:15Z

It seems like that this is already labelled for v7 and we closed it by mistake so we are reopening it... Thanks!

As discussed with Yetinauts,

We can also use JS to detect IE 10 & 11
to make something like https://codepen.io/IamManchanda/pen/BJbzmR & much more to work just like

@mixin grid-code {
  // My Grid Code
}

@mixin flexbox-fallback {
  // My Flexbox Fallback
}

@supports (display: grid) {
  @include grid-code;
}

@supports not(display: grid) {
  @include flexbox-fallback;
}

html.ie-10-11 {
  @include flexbox-fallback;
}

IamManchanda · 2018-01-28T20:50:34Z

V7 requests are being closed for the time being. We have them labeled so we can readdress them in the future.

IamManchanda added CSS Grid feature request Foundation 7 labels Sep 19, 2017

IamManchanda added Progressive Enhancement flexbox labels Sep 19, 2017

IamManchanda changed the title ~~[Feature Queries Part 2] CSS Grid and Progressive Enhancement | 2018~~ [Feature Queries] CSS Grid and Progressive Enhancement | 2018 Sep 19, 2017

IamManchanda self-assigned this Sep 19, 2017

IamManchanda added the XY Grid label Sep 19, 2017

IamManchanda mentioned this issue Oct 13, 2017

[XY Grid] Foundation 7 - 2 Dimensional Grid System - Using Feature Queries/CSS Grid and discussion on whether to fully DROP IE or not? #10134

Closed

colin-marshall closed this as completed Jan 27, 2018

IamManchanda reopened this Jan 28, 2018

IamManchanda closed this as completed Jan 28, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature Queries] CSS Grid and Progressive Enhancement | 2018 #10661

[Feature Queries] CSS Grid and Progressive Enhancement | 2018 #10661

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

DaSchTour commented Sep 19, 2017

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

digitalfuel commented Sep 19, 2017

IamManchanda commented Sep 19, 2017 •

edited

Loading

digitalfuel commented Sep 20, 2017

IamManchanda commented Sep 20, 2017 •

edited

Loading

digitalfuel commented Sep 20, 2017 •

edited

Loading

IamManchanda commented Sep 21, 2017

orangedaisy commented Sep 21, 2017 •

edited

Loading

IamManchanda commented Sep 21, 2017 •

edited

Loading

orangedaisy commented Sep 21, 2017 •

edited

Loading

IamManchanda commented Sep 21, 2017

digitalfuel commented Sep 21, 2017

IamManchanda commented Sep 21, 2017

colin-marshall commented Jan 27, 2018

IamManchanda commented Jan 28, 2018 •

edited

Loading

IamManchanda commented Jan 28, 2018

[Feature Queries] CSS Grid and Progressive Enhancement | 2018 #10661

[Feature Queries] CSS Grid and Progressive Enhancement | 2018 #10661

Comments

IamManchanda commented Sep 19, 2017 • edited Loading

IamManchanda commented Sep 19, 2017 • edited Loading

DaSchTour commented Sep 19, 2017

IamManchanda commented Sep 19, 2017 • edited Loading

IamManchanda commented Sep 19, 2017 • edited Loading

IamManchanda commented Sep 19, 2017 • edited Loading

digitalfuel commented Sep 19, 2017

IamManchanda commented Sep 19, 2017 • edited Loading

digitalfuel commented Sep 20, 2017

IamManchanda commented Sep 20, 2017 • edited Loading

digitalfuel commented Sep 20, 2017 • edited Loading

IamManchanda commented Sep 21, 2017

orangedaisy commented Sep 21, 2017 • edited Loading

IamManchanda commented Sep 21, 2017 • edited Loading

orangedaisy commented Sep 21, 2017 • edited Loading

IamManchanda commented Sep 21, 2017

digitalfuel commented Sep 21, 2017

IamManchanda commented Sep 21, 2017

colin-marshall commented Jan 27, 2018

IamManchanda commented Jan 28, 2018 • edited Loading

IamManchanda commented Jan 28, 2018

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 19, 2017 •

edited

Loading

IamManchanda commented Sep 20, 2017 •

edited

Loading

digitalfuel commented Sep 20, 2017 •

edited

Loading

orangedaisy commented Sep 21, 2017 •

edited

Loading

IamManchanda commented Sep 21, 2017 •

edited

Loading

orangedaisy commented Sep 21, 2017 •

edited

Loading

IamManchanda commented Jan 28, 2018 •

edited

Loading