[Foundation Future] Discussion on Grid's Future ( Flex/Float/Spec - Margin/Padding )

[IamManchanda]

https://github.com/zurb/foundation-sites/wiki/Project-Roadmap#other-things-to-investigateschedule

Other Things to Investigate/Schedule

3. CSS Grid - Not sure what the timeline is on this but we should target this, perhaps similar to flexbox mode?

CSS Grids has landed a week back first in firefox, and then in chrome, safari and opera

I am opening this thread for the discussion on this awesome layout monster! ( This might be very soon, but better to be early than late! )

---

1. Quick Overview => https://www.slideshare.net/rachelandrew/talk-web-design-css-grid-layout

2. Complete Guide => https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/

3. Grid by example => http://gridbyexample.com/

4. What mozilla says => https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

5. Yes or no to IE and its old spec => https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

6. Feature Queries => https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

---

Update: Well its so co-incidental ..... that when i posted this thread, Zurb was already working on this on a youtube video :smiling_imp: => https://youtu.be/bI1wNuvuFxo
Maybe its because both zurb and community wants the advancements! Right ??

[IamManchanda]

https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

This is how flexbox works. However, most of the flexbox problems I am asked about are due to developers trying to make flexbox do layout in two dimensions. This is where you need Grid Layout.

[orangedaisy]

The prevailing advice seems to be to not co-opt CSS Grid into frameworks like this (emphasis mine):

I know a lot of people will think the “best” way to use CSS Grid will be to download the new version of Bootstrap (version 5! now with Grid!), or to use any one of a number of CSS Grid layout frameworks that people are inevitably going to make later this year (despite Rachel Andrew and I begging everyone not to). But I don’t. The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser.

— http://jensimmons.com/post/feb-28-2017/benefits-learning-how-code-layouts-css

It's worth remembering the obstacles that have been encountered in trying to create a flexbox system that handles all of its options. Grid is way more intricate – it would be more difficult to create a class-based system than just advising users to use Grid itself.

[DaSchTour]

@orangedaisy very good point. Grid should really be used as the base layout for a page and inside this grid rows and columns from foundation can work very nice. Even with flexbox I'm not sure if there is any need for grids anymore. There are a lot of flexbox features that are very hard to put into css-classes by using foundation-flexbox grid it's only possible to use a very small part of flexbox.

The most important thing is, that flexbox and css-grid solve different layout needs. So they should be used in combination not like flexbox mode at the moment.

[IamManchanda]

The most important thing is, that flexbox and css-grid solve different layout needs. So they should be used in combination not like flexbox mode at the moment

@DaSchTour :+1: :+1: :+1: :+1: ....... A trillion :+1:

One dimensional Layout => Flexbox Two dimensional Layout => CSS Grids

Grid is way more intricate – it would be more difficult to create a class-based system than just advising users to use Grid itself.

@orangedaisy We are talking advanced layouts here, we should not create classes for everything, Infact there are so many properties, there is no way we can create classes for everything, I feels Sass Mixins are the best way to go about. For example,

@include grid-wrapper (
  $row : 100px 1fr auto,
  $column : 1fr 200px,
  $gap: 10px 20px,
  $align: center,
  $justify: space-evenly,
  $areas: "header  header"
          "content aside "
          "footer  aside ",
);

@include grid-row (1/3);
@include grid-column (2/4);

[IamManchanda]

Tagging you @corysimmons because Looking at this Feature Queries example by mozilla,

I have got one deep question in mind, Can there be a combo of something like { Calc Grids + Feature Queries + CSS Grids }

[orangedaisy]

@IamManchanda Creating mixins like this is, I'm sorry to say, a fool's errand. You're just recreating the browser's built-in functionality. How is that helpful?

[IamManchanda]

@orangedaisy ohk so what's best way out according to you ?

[orangedaisy]

@IamManchanda The best way is to not do it at all. It doesn't matter what you do – classes, mixins, functions, etc – you're just going to be increasing complexity and recreating something the browser already does. It's like that gradient mixin from a couple of weeks ago: the browser already does this. There's no need to make it more complicated.

[IamManchanda]

ohk @orangedaisy

But i have my two cents on it! Deep down in my head, I have a thing that coming to my mind

Calc Grids + Feature Queries + CSS Grids Spec = Production

So, I will wait for @corysimmons comment for the same

Reason: https://github.com/corysimmons/postcss-ant#what-about-grid-spec

Fun Fact: Grid Spec's API was developed independently of postcss-ant's. Any similarities with how size setting works (e.g. fixed takes precedence over fr) is completely by coincidence and a testament to how good of an idea these new ideas about sizing are.

[orangedaisy]

You should not try to recreate the Grid spec. I don't understand what any of this has to do with Cory's postcss plugin.

[IamManchanda]

@orangedaisy coz i have followed his work!!!

https://corysimmons.com/

This site was designed with a golden ratio grid using a PostCSS layout plugin I made that mimics much of CSS Grid Spec but works seamlessly in IE9

[corysimmons]

If you want I can do a grid with a setting so developers serving different audiences can pick and choose based on their needs. For instance, if you don't need centering or equal height, you should use float just for browser support.

$grid-type could take:

• float
• inline-block
• flexbox
• grid-layout

I think something that makes my postcss-ant project different is that it makes working with real ratios incredibly easy.

I think it'd be interesting if Foundation migrated to PostCSS. You guys are missing out on so much power vs JavaScript. PostCSS projects also work with any CSS preprocessor, or just vanilla CSS, and compile much faster than other preprocessors.

🍕 for thought.

Anyone else excited about Game of Thrones Season 7?!

[IamManchanda]

Yes excited and two version 7

1. Game of Thrones Season 7
2. Foundation for sites 7

If you want I can do a grid with a setting so developers serving different audiences can pick and choose based on their needs. For instance, if you don't need centering or equal height, you should use float just for browser support.

@corysimmons First of all, to let you know, we are dropping IE9 ...

My 2 cents

What maybe great as a fallback to CSS Grids i feel would be Calc combined with feature queries because both have almost similar browser support. Calc | Feature Queries. I feel that these two have good browser support specially considering foundation 7 will be around there about end 2017/early 2018. Flexbox ofcourse will be there in there about as its FLEXBOX

Yes opera mini and UC browser is a concern though as far as browser support is concerned!

[IamManchanda]

I think it'd be interesting if Foundation migrated to PostCSS. You guys are missing out on so much power vs JavaScript. PostCSS projects also work with any CSS preprocessor, or just vanilla CSS, and compile much faster than other preprocessors.

I don't know ... To be advanced is very important for any framework but i love sass so its hard and emotional for me to comment on.... will tag @kball on answering this !

[corysimmons]

I like Sass too. I use both. Sass for generic syntax help, and PostCSS for heavy-lifting plugins/functions.

Regarding dropping support for IE9, that's fine. I'm a fan of progressive enhancement.

I've worked on sites built completely with flexbox recently. Once you get into browser support testing, you end up spending a lot of time and energy trying to make various flexbug workarounds work together.

So, unless flexbox is offering me something I need (order, easy equal-height columns, alignment with one less element) then I typically fall back to float based layouts (yes... still).

Typically I end up building the big structure of a site using mostly floats, then sprinkle flexbox in where I really need it. During browser testing, hardly anything is outright broken in a huge amount of browsers.

I'm not a luddite. In fact, I would be ecstatic if everyone used latest Chrome, but can you imagine if Google itself didn't support 5% of browsers just because they wanted to use whatever "the CSS hawtness" was at the time?

With a settings-based approach to this problem, you could target audiences very easily. When flexbug-affected browsers were below 1%, you could sunset the float arg. When 99% of browsers supported grid layout, you could sunset flexbox. etc.

---

Another approach: If ZURB (or any company) is interested, I can make grid layout's API work in IE9+ during the compilation stage (not a JS-dependent polyfill). It'd take a month or two working on it several hours a day so I'd need funding, but I imagine the public would really appreciate being able to use Grid Layout right this second.

[corysimmons]

I should be explicit. When I say "IE9+", I don't mean "We need to support IE9 guys!"

Flexbox is full of bugs and no one seems to care about an old browser user (0.5%?) here and there. But those small percentages of users missing support add up quick and you end up with a broken site for something like 5% of users.

So when I say "IE9+", I'm just pointing out that it'd work in 99.9% of browsers seamlessly.

[IamManchanda]

Flexbox is full of bugs and no one seems to care about an old browser user (0.5%?) here and there. But those small percentages of users missing support add up quick and you end up with a broken site for something like 5% of users.

You nailed it but most bugs are only there in flexbox because people wanna use flexbox for two dimensional layouts.

[corysimmons]

People use flexbox for everything. It'd work if there weren't so many bugs, but the bugs are there, and they get worse as you nest and the more things you try to do with it.

I'm speaking from real-world experience walking into a dozen sites that were about to launch. The client reviewed them on Safari (version was less than a year old) and opened dozens of requests to fix various things. As I fixed them, they introduced other bugs in other browsers. This dance took forever.

Flexbox has its place, but the bugs make it nearly unusable for me.

I suspect grid layout will suffer the same fate. Only time will tell.

Hence I'd suggest making what type of grid you're using a setting, and preferably defaulting to float-based (e.g. bulletproof) layouts.

[IamManchanda]

Poke @kball @rafibomb!

[IamManchanda]

Update: When i created this thread ... browser support was mere 6% ( including that ms grid ) 22 days and now its 37% .... Now that's a real push!!!!! ( Expect it soon to go 20 more aka when people update Chrome 56)

Concern: IE/Edge, Mobile browsers (Android webview, Opera mini, UC, Samsung)

Source: http://caniuse.com/#feat=css-grid

[glen-84]

@IamManchanda Microsoft have started work on updating their implementation. (source)

[corysimmons]

Vendors promise they'll implement a semi-complicated spec correctly before universe heat death. 👍 💯

👋

[kball]

I tend to agree that CSS grid will need to be opt-in for a while, however I think we should make it easy to adopt... We've got a draft of a CSS-grid based version of the base Foundation grid in progress that we'll use as a stopgap for 6.4, but we really should be discussion not if to use grid bot rather what the world will look like when grid is widely enough supported.

Broadly speaking, I think what this is hinting towards is a world where our "grids" are less architectural choices but more componentized, able to be picked and chosen... but I could be wrong.

I think @corysimmons makes a great point that grids (and technology standards such as flexbox, css grid, and some the other new hotness) should be configurable on/off... Our current binary float/flex approach is pretty cludgy, but works well enough for 2 systems. If we imagine 4, 5, or 6 different grid options, what do y'all think this should this look like moving forward?

[IamManchanda]

If we imagine 4, 5, or 6 different grid options, what do y'all think this should this look like moving forward?

In one word => Bloat

[kball]

@IamManchanda possibly... but the question I'd ask is... do grid systems need to be as complex and encompassing as they tend to be today, or should we be thinking of grids more like components that can be contained and mixed and matched?

[corysimmons]

Output wouldn't be bloat, but asking people to memorize more settings is just cruel.

I still think you guys are in the unique position to force grid layout on vendors so everyone can be done with layout obfuscations forever. I'll rename my 1st born to "Zurb".

[IamManchanda]

Sorry but its too early .... for me best solution would be to delay foundation 7 to early-mid 2018 so that the grid gets good browser support and we can implement one solution grid system! What do you guys think ??

[corysimmons]

Honestly at this point, I'd just make a simple flexbox grid. Maybe spice it up with some ratio-sizing mixin.

People like flexbox. Autoprefixer covers a lot of edge cases. Special work could be done to ensure flexbugs are minimized.

It'd be simple and everyone would love it.

Since every layout mechanism will be completely trashed when Grid Layout is usable (early adopters late 2017, everyoe else mid 2018), it isn't worth bloating the src with some decoupled adapter thing.

Hell, I'd even padding-grid it just so people didn't have to learn margin grids for several months.

Who am I, and what did I do with @corysimmons?!

[kball]

I actually tend to agree for the base case... @brettsmason is working on a simple flexbox grid... Brett is http://codepen.io/brettsmason/pen/RKMbZG the latest example of what you've been playing with?

[corysimmons]

That's the one...

God I hate padding grid markup. Adding bg color to a row: row > cell-with-bg > row > cells

@IamManchanda Can you give me a thumbs up on this comment?

[corysimmons]

@kball @brettsmason I'll make you guys a ratio-sizing mixin thing if I get a chance. Or I could pseudo-code it and you could implement it however you'd like. It'd make your grid unique without ruffling feathers.

[brettsmason]

@kball Sorry for the delay, I'm away at the moment. So to be honest I haven't progressed anything with the grid, mainly due to lack of feedback on stuff so not knowing what direction to take.

I agree with @corysimmons on a lot of what he said. I've been looking into margin based grids recently and like the idea, but not sure how it would go down with users who have been using padding for so long? I think an option to switch between padding or margin would be good, but might make things too complicated. Whatever is the cleanest and easiest for the end user to implement would be my choice.

Id love to properly discuss it and get a feature list agreed so we can move it forward.

[corysimmons]

Both options suck and always have.

I think a good test of how complicated/hard-to-use a grid is, is to apply various background colors to things—specifically rows.

Here's how I'd do margin: https://codepen.io/corysimmons/pen/eWpVBN Let me know how you'd do it with padding.

[brettsmason]

@corysimmons Yeah that's a lot like a simple CodePen I put together when experimenting with ideas, and I agree is nice. What are your thoughts on including the margin on one side (left)? eg: https://codepen.io/brettsmason/pen/jmWVNe

The main reason being there is no overflow then if the grid is the full width of the browser window.

I'd really like the grid to be based on a simple selection of mixins (current mixins aren't the best in my opinion) that are easy and intuitive to use but flexible too. I came from using Susy, so I guess that would be my inspiration.

You know far more about it though so I'd value your opinion.

[corysimmons]

Single-side margins are less flexible than double side, but, yes, they are really clean.

You need to know how many elements are going to go in a row. Here's an example: https://codepen.io/corysimmons/pen/GmoWGr?editors=1100

I've fought to use the single-side gutter for a long time (Jeet, Lost) because it made more sense than doing some weird overhanging negative-margin stuff. But it has a lot of fringe cases (masonry, breaking if you need to change a one-off item, etc.).

With double-sided gutters you can plop anything anywhere and it'll JustWork™. In Lost and postcss-ant—which really is the pinnacle of losing everything to my obsession with this stuff—I offered both approaches.

But honestly, I think it adds too much stuff for people to remember, especially for a framework like Foundation, so I'd simplify and just keep negative-margin/double-gutter grids in all cases.

Single margin is great for nesting, and double is great for flexibility. Again, no good solution (trust me I've obsessed with this for years) and we should force Grid Layout down peoples' throats and be done with this horrible problem once and for all.

---

Btw, I'm still interested in a CodePen of how you'd apply a background color to a row, and a different background color to columns, using a padding approach though.

[brettsmason]

Thanks, that's helpful and I hadn't thought about things like Masonry use etc. Sounds like double-sided should be what we stick with on that front.

In terms of background colour for rows/columns - the only way is with extra markup as far as I know, eg https://codepen.io/brettsmason/pen/ZKQKEZ

What would you say are the negatives of using a margin based approach? I'm sold on it, but just want to make sure everything is covered.

[corysimmons]

Add body { padding: 30px; }. Notice the springgreen overhanging (i.e. not flush with cells as expected).

---

Negatives of dub-guts (what I'm calling them now because it sounds like a cool zombie name) are it does some negative-margin stuff which can cause overhang issues, but the worst thing is nesting. You did it in your codepen (nesting a cell, just to nest a row).

I've found people don't do a ton of nesting so it's less of an issue than I've made it out to be, but it still sucks when single-gut grids can nest w/o extra markup like so:

<div class="grid">
  <div class="cell grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
  </div>

  <div class="cell">
    3
  </div>
</div>

Pros and cons to everything, which is why I threw my hands up and just began offering everything. :(

Grid Layout solves all this crap.

[brettsmason]

Ah OK great - I see the problem with that now 👍

My main aim would be to get rid of the madness that is the current nested, overly specific classes, and get away from things like this: https://github.com/zurb/foundation-sites/issues/995

@kball @rafibomb what do you think? I guess it could potentially be a breaking change, but we have never shied away from moving things forward.

I'd propose that for 6.4 we completely rework the flex grid to be a margin based grid and ditch padding. I've already done a lot of the work, but I'd need a decision on if this would be OK?

Grid layout looks great, but unfortunately for people like me who wont be able to use it in my every day work, it wont really solve anything for now.

[corysimmons]

Grid layout looks great, but unfortunately for people like me who wont be able to use it in my every day work, it wont really solve anything for now.

Fair enough, and tbh, Foundation probably shouldn't even abstract Grid Layout's API.

---

To do the margin stuff, you'd need some control over gutter on a global, and per-row basis, via a mixin.

[brettsmason]

Yeah agreed - I think people should be encouraged to learn the API, no need to get involved 👍 I'll get together what I've done so far and get it online somewhere for you to see, assuming its given the go ahead.

[kball]

@brettsmason I'm down with breaking change, but prefer we go through a deprecation cycle to do it, so that we don't completely block folks who want to upgrade but need more time. A tentative proposal would look something like this:

1. We create the new margin-based flex grid as an independent mixin using a 'zf-' namespace (we want to move all of our SCSS to namespacing anyway)
2. We make the new grid the default (we want to make Flex the default anyway, this would really jump us forward)
3. We write a migration guide (how to move from old flex grid to the new grid)
4. We provide a way for someone to opt back to the old flex grid with a deprecation warning that it will be dropped in 6.5.

Thoughts?

[brettsmason]

@kball ok thanks, I think that makes sense.

And what about the margin based approach? Foundation has always used padding so it would be a fairly big shift.

[IamManchanda]

Yes fairly big shift but that's ohk with an Avanced and bold framework like foundation!

[kball]

As mentioned above - big shifts are fine with me if they move us in the right direction and we give folks a path and adjustment period.

That said, I'd be interested in some of the opinions of more SCSS & design focused folks like @gakimball @tdhartwick @jnemeth @andycochran @ncoden

[brettsmason]

Question for everyone. Is there still value in the responsive gutter stuff? I've never used it myself so interested if its worth keeping. It adds a lot of bloat and (in my opinion) not needed complexity.

I'm busy working on putting something together at the moment for this!

[corysimmons]

I think responsive gutters are definitely useful.

Off the top of my head, the syntax could look like:

$zf-column-gutter: 60px;
$zf-row-gutter: 30px;

.default-grid {
  @include zf-grid(1/4);

  @media (min-width: 800px) {
      @include zf-grid(1/4, $column-gutter: 10px); // should usually only need to be applied to the container
  }

  .big-cell {
    @include zf-cell(1/2);
  }
}

.one-off-size {
  @include zf-cell(2.5/6, $column-gutter: 30px, $row-gutter: 2%);
}

I don't think responsive gutters should be the default dist. But the generator should offer this kind of functionality in a dynamic way.

I've made a billion PoC of this kind of stuff, so implementation won't be a problem once we settle on an API. Maybe we should shift the discussion to designing the API first and not worry about complexity?

---

Irrelevant Sidecry: It sucks so bad that attr data only works with the content property in CSS or we could do some really cool stuff directly from the markup <div columns="1/2" gutter="15px">. It's possible with something like Reshape but that's a pretty big dependency for a project like this.

[brettsmason]

Thanks @corysimmons. I think part of the problem is the current grid is just so unnecessarily complicated, where I don't think it needs to be (its hurting my head reading through it all!).

Another issue I've come across with using margin based grids plus calc() is if we include a .collapse class like the current grid to remove margins from columns within a row.

That's maybe more to do with the spaghetti of mixins/functions at the moment though maybe, but I'm not sure how to structure everything to offer a great set of clear functions/mixins to do all we need...

[corysimmons]

I completely get that. The overwhelming amount of settings/spaghetti involved with these big CSS frameworks is the reason I, and a lot of other devs, avoid them.

How integrated is the grid stuff with components? If it is, it shouldn't be, and components should be scoped using vanilla flexbox.

The concept of a "grid" has always worked best as a structure/overall-layout thing imo.

If it's not coupled, then just delete all the grid stuff and focus on making a couple really flexible/powerful mixins (zf-grid and zf-cell).

• zf-grid would be applied to a container.
• zf-cell applied to any one-off sizes.

Write a loop for your base grid classes:

loop over breakpoints
  loop over number of columns

Then just write additional loops for things like .collapse:

// base grid
loop over breakpoints
  loop over number of columns

// .collapse
loop over breakpoints
  loop over number of columns using $gutter: 0

// additional stuff
loop over breakpoints
  loop over number of columns + whatever

This will modularize these loops a bit so they can be switched on/off (for things like the generator), or an internal generator like @include zf-generate-grid($breakpoints-map, $number-of-columns, $include-collapsed, etc.).

[andycochran]

Keep in mind, margin-based grids cause the body to scroll horizontally unless its padding is greater than the negative margin-right of the row. If you want your grid flush with the edges of the page, you need a padding-based grid (or a left side only, single-sided, margin-based grid).

[corysimmons]

Or body { overflow-x: hidden }