[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 ??

[brettsmason]

@corysimmons Thanks that really helped clear things in my mind.

I wanted to pick your brains on single sided margin grids again if you don't mind, as I like the fact it doesn't cause overflow etc.

I forked a Masonry demo and edited it to use a single sided margin: http://codepen.io/brettsmason/pen/JNXwVq - as far as I can see it works OK, though I will admit I haven't had to use Masonry or an alternative in years.

By the way really interesting reading looking at your other projects (Lost especially)!

@andycochran What do you think of padding vs margin? I'd value your opinion too. I like the fact that with a margin grid, the grid classes could be applied directly to cards for example.

[corysimmons]

I wanted to pick your brains on single sided margin grids again if you don't mind, as I like the fact it doesn't cause overflow etc.

Again, I really think you should avoid single-sided grids. I know how sexy the markup is, but even if you aren't using masonry, users should have an option to plop one-off cells within a container.

If you do go the single-sided route, at the very least I'd offer an escape hatch for the negative-margin grids.

By the way really interesting reading looking at your other projects (Lost especially)!

Lost is nice. It ended the need for the "context" stuff that Susy and Jeet have. It's maintained really well by Peter nowadays. That said, postcss-ant is probably the most interesting thing I've done in the layout space.

What's the team's thoughts about migrating from Sass to PostCSS? Bootstrap is considering it for v5.

It'd make Foundation available to users of any preprocessor, or vanilla CSS, and it's insanely powerful (all the power of JS vs. the subset of functions preprocessors handle).

[brettsmason]

Again, I really think you should avoid single-sided grids. I know how sexy the markup is, but even if you aren't using masonry, users should have an option to plop one-off cells within a container.

Stupid question, but what do you mean by the bit in bold? Just want to understand what you mean (example might help), but I totally take on board what your saying so we will go with split, especially as its what users are used to anyway.

In terms of moving to PostCSS - I think it might of been discussed very briefly but not in any detail. I'd be interested to know more about it, as I'll confess to having never used it. From what I understand its more modular in its approach though with additional plugins to handle things that Sass does natively for example.

The Zurb guys like to keep as cutting edge/up to date with advancements as is possible, so I'm sure they would be open to at least discussing what the benefits would be, and what would be involved (I definitely would).

[andycochran]

@andycochran What do you think of padding vs margin? I'd value your opinion too. I like the fact that with a margin grid, the grid classes could be applied directly to cards for example.

Well I see use cases for each method being "better." But it seems to me like most designs need both.

Margin for spacing multiple things inside containers:

And padding for defining containers that divide space:

Using margin for grid column layout doesn't preclude us from also using padding on those columns. The second example above could be done with margin:0.

[corysimmons]

@brettsmason

Stupid question, but what do you mean by the bit in bold? Just want to understand what you mean (example might help) https://codepen.io/corysimmons/pen/GmoWGr

Basically, single-side grids (or "nth-grids" as I call them) need the CSS to define the number of elements in each row. With double-sided (or "negative-margin", "masonry" grids) you don't need to care about how many elements are in a row as long as they add up to 100% width.

From what I understand its more modular in its approach though with additional plugins to handle things that Sass does natively for example.

Regardless of whatever memes people are spewing about PostCSS, it's biggest benefits are:

1. Works with ANY preprocessor, OR just vanilla CSS.
2. All the power of JS whereas preprocessors only give you a handful of functions/logic.

The downsides of PostCSS:

1. Docs are auto-generated and confusing as hell.
2. CLI is lacking (i.e. needs a more flexible API).
3. SugarSS (PostCSS' attempt at replicating the niceties of preprocessors—nestings, vars, etc.—is buggy/lacking.

The best combination, imo, is PostCSS for libs, Sass (Stylus really, but Sass is more popular) for syntactic sugar.

If PostCSS libs are written with preprocessors in mind, you can layer them.

in.scss -> out.css -> PostCSS -> out.posted.css

This gives you the best of both worlds (power of PostCSS, bug-free sugar of Sass), but might be a lot to ask of users. You guys can be the call of that.

---

@andycochran

Using margin for grid column layout doesn't preclude us from also using padding on those columns. The second example above could be done with margin:0.

This is an important note which makes the argument for padding grids moot.

https://codepen.io/corysimmons/pen/aWZbNB?editors=1100

[IamManchanda]

in.scss -> out.css -> PostCSS -> out.posted.css

Love it!

[kball]

I think we should move PostCSS discussion to another issue, but I think it is definitely worth pursuing - have some ideas related to it as well, but lets move to an independent thread. @corysimmons do you want to start it?

[brettsmason]

So based on all the feedback and comments as well as a discussion with @kball, I've been working on a sort of proof of concept. You can view it here: http://codepen.io/brettsmason/pen/GmZaxv

Basically I think it would be good to be able to offer the choice between a margin or padding grid (with margin as default imo). The code is a bit on the messy side at the moment, but I'd really appreciate everyones thoughts!

If this goes down well I'll try and turn it into a full working example with a complete set of mixins, and any help would be great!

[corysimmons]

@kball https://github.com/zurb/foundation-sites/issues/9980

@brettsmason Pen is broke. I guess you're working on it right now. If you share a pen, care to fork off it immediately after to guarantee the shared one works, and for posterity's sake?

[brettsmason]

Sorry fixed now and yes was tinkering, will fork instead!

[corysimmons]

Thanks. :)

Also, can you start putting body { padding: 30px } so we can see where overhangs are happening?

[brettsmason]

Done! At the moment most of the demos have a .grid-container which limits the width to 1200px - would you prefer I got rid of that?

[corysimmons]

This max-width is fine, but not necessary for testing purposes.

It looks like you're on the right track now. It seems like you're having fun with it. Do I smell another grid enthusiast?!

A couple things to solidify an approach (and some docs) on:

1. Setting background color to a flush container. (just a single cell within a container—it'll produce a lot of markup, but should be a good approach to document)
2. It seems like you've already addressed this, but I'd add an element or two to your demos to ensure widow elements don't go awry (as flex-grow: 1 will do). Basically, don't have your demos have a perfect number of columns per row.

Now, where :poop: gets tricky... Thoughts on vertical sizing? :)

[brettsmason]

It looks like you're on the right track now. It seems like you're having fun with it. Do I smell another grid enthusiast?!

Yep! - as @kball will tell you I tend to get pretty heavy into whatever I work on (off canvas was the last thing). I like working on things that I feel could be made a lot better.

Not sure what you mean with 1. - do you just mean add a <div> within the cells and colour those instead or have I misunderstood?

Re vertical sizing - do you mean eg setting the grid to flex-direction: column and how that would work? Almost like the Foundation for Apps grid? So basically the widths become heights...

[corysimmons]

do you just mean add a

within the cells and colour those instead or have I misunderstood

Sure. Experiment with a couple ways to do this and see which one is the easiest to convey to potential users.

Re vertical sizing - do you mean eg setting the grid to flex-direction: column and how that would work? Almost like the Foundation for Apps grid? So basically the widths become heights...

Something like that. I'm not sure of the implementation, but just thinking about sizing vertically as well—like, if I wanted a 500px tall container, and wanted 3 elements in it that were 1/3 with a gutter between them.

It might be silly to implement since Grid Layout will crush whatever we come up with, but it's worth thinking about.

[brettsmason]

So I've been working on putting together the mixins this afternoon and it bought up a few questions.

What should a single .column class behave like? For the live flex grid they take up available space and dont stack like the float grid does. My gut feeling is this should be changed so its 100% width without sizing classes applied. We can then offer some .auto classes or something that add the automatic sizing behaviour.

How do you think the vertical grid should work? I interpreted it as something like this: https://codepen.io/brettsmason/pen/wdzmLO Basically set a modifier class on the grid/row to make the columns go the other way around, so the sizing is applied to the height instead. Does that sound correct/useful/what you had in mind? I think this could basically incorporate the App grid, but I need to investigate that a little more.

[corysimmons]

Sorry @brettsmason

I'd like to keep nerding out on this but no one is paying me to. Going to go study some in-demand tech instead.

You seem to be on the right track with all this stuff so I'm not sure how much more help I could be at this point. Try bouncing these ideas off some html/css-centric co-workers to see how they feel about using your solutions.

I wouldn't worry too much about the vertical stuff if there isn't an elegant solution.

Best of luck. 👍

[kball]

@brettsmason I agree with your assessment on 100% width and then having auto sizing be explicitly applied... the behavior in the current flex grid (and its difference from the float grid) is a constant source of confusion.

On the vertical front, that seems like a reasonable approach. Do gutters then apply vertically rather than horizontally as well?

[brettsmason]

@corysimmons no problem and thanks for all your help with this :thumbsup:

@kball cool thanks for confirming, I'll go with 100% then.

Not sure on gutters. My initial thought was yes to apply vertical gutters, but not sure - I never used Apps so not sure on layouts that would typically be created. I know it has other uses though other than app style layouts.

Is there any way to get some of the Apps templates uploaded as working examples somewhere for me to check?

[IamManchanda]

Your example showed horizontal grid nested within vertical

Flexbox should be either used horizontal or vertical... but not in combination

For Two dimensional grid system => CSS Grids is the correct approach and flexbox shouldnt be used!

[kball]

@brettsmason with regards to app grid, check out the work in this WIP PR: https://github.com/zurb/foundation-sites/pull/9487

@IamManchanda in 2018 CSS Grid is the correct approach... hopefully by late 2017 even... but the target with this grid is something that moves us forward and is actually usable for production projects today.

[brettsmason]

@IamManchanda not everyone has the luxury of being able to use css grid, including me :smile:

[IamManchanda]

I am not saying to use CSS grids right now Check my above comment.... infact I am requesting to delay f7 to early 2018

I am just saying that....just meant that lets not look for a combination and keep it simple Aka One way traffic!! @kball

[IamManchanda]

Same here @brettsmason... even I dont have :D

[brettsmason]

@kball i was actually referring to these: http://foundation.zurb.com/apps/page-templates.html it would be nice to see them working so I have a better understanding of how everything fits together (the docs in the PR don't really give me an idea of the layouts it's for).

There's bound be a lot of overlap between the grids, just wondered how much and if they needed to be separate or not.

[rafibomb]

@brettsmason I think the grid is looking good! One thing that people have asked for and Flexbox can do well is a Block Grid - but with various width columns like: http://bulma.io/documentation/grid/columns/#multiline

I can add this in - where would be the best place to collaborate with you on the flex grid code?

[brettsmason]

@rafibomb I'm in the process of putting together mixins so I can put everything together correctly. Once that's done I'll stick a branch online for you to take a look at.

I'm not sure I fully understand the difference with the multiline thing - isn't it just a row with flex-wrap: wrap on it?

[rafibomb]

@brettsmason Basically! I think a lot of it will be documenting the cool use cases which is where I can help as well.

[IamManchanda]

@brettsmason => http://codepen.io/IamManchanda/pen/NjwKJO?editors=1100 @corysimmons => Can't this be a possibility .row>.columns>.columns>.columns>* and so on ??

PS: I am looking at this as a user of the grid!

---

Update: and here is the .row.reverse version of it => http://codepen.io/IamManchanda/pen/OmOJVo?editors=1100

[corysimmons]

space-around/between will never work with margins. I fought with this for a month with every hack in the book.

.row could be thought of as .apply-a-negative-margin, and .column as .put-a-margin-on-each-side.

I really think Brett's simple flexbox mixin (I'd stick with horizontal-only to avoid confusion/pain) is the correct solution until grid spec is widely used.

Just make sure you expose a mixin to get gutter-aware sizes for fringe cases.

[IamManchanda]

@corysimmons I added space-around for styling purpose .... Here it is with flex-start => http://codepen.io/IamManchanda/pen/ybPORw?editors=1100

I am not a coding geek like you but can't gutters be calculated (maybe calc) to make it work ??

PS: Again i am looking on it as a user!

---

.row could be thought of as .apply-a-negative-margin, and .column as .put-a-margin-on-each-side.

I know that and this is what i hate about it the most!

[corysimmons]

.row {
  // ...
  width: initial;
  margin: 0 -15px;
}

.column {
  // ...
  width: calc(100% * 1/3 - 30px);
  margin: 0 15px;
}

Notice the inner columns aren't aligned flush with the original grid.

This is why you need to do: .row > .column every time you nest.

This extra markup is the price you must pay in exchange for not having to count columns per row.

[IamManchanda]

Oh these gutters... Damn!

Ohk just for my personal knowledge When I don't need gutters... Is this a good way to go about?

[corysimmons]

Sure, but I think you'd better serve yourself, and your team, by agreeing to use 1 technique rather than mixing-and-matching—especially when the payoff is as minimal as a few less <div>s.

Terse markup seems thrown out the window with React, and React is curbstomping everything, so maybe terse markup doesn't matter after all.

Honestly, Brett has this already.

[IamManchanda]

This is exactly why i cant wait for css grids to take over because it has gutters grid-gap inbuilt in them https://codepen.io/enxaneta/pen/YZjJaW?editors=1100

[IamManchanda]

BTW update ..... CSS Grid now has 56.99% - 62.34% browser support! (10x comparing back then when i opened this thread 50 days!) Again, Mobile browser is a big issue though!

[corysimmons]

This is exactly why i cant wait for css grids to take over because it has gutters grid-gap inbuilt in them

Yeah, it took them a while to figure out this was a huge problem, but in the next few years markup will become really logical and terse.

Until it hits 90% global I won't use it.

Alright, I'm outta here again. Good luck team. Ping me if you have a direct question.

[brettsmason]

@corysimmons Sorry to bother you, I'm trying to get my head around a question with margin grids. I've mainly used padding grids in the past, so struggling with the way to handle this.

A typical use case would be a solid coloured, full width background container, within this is our grid container, centred and contained to a max width. Then within that would be our columns etc.

Currently with a padding grid we would write:

<div class="header"><!-- background here -->
  <div class="row">
    <div class="logo">Logo</div>
    <div class="nav">Nav</div>
  </div>

However the above doesn't work with a margin based grid. We can't use margin: auto as we have a negative margin on the .row with a margin based grid.

What would be the best way of tackling this scenario in your opinion? Do we simply need to add an extra wrapper around the .row for this to work? Something like .row-container.

Also on smaller screens we have left/right padding currently that stops content from hitting the edges. Would adding padding to this .row-container work? Trouble with that is it wouldn't then line up to the rest of the grid elements.

Would appreciate your input as I'm keep to keep the new grid a margin grid!

[andycochran]

I don't see a way to use max-width with margin-auto on margin-based grids without an extra container. Yuck. But if you only need one background color for the whole row, there's no reason to use a margin-based grid.

Again, I'd advise against letting the "gutter" interchangeably be margin OR padding. Define them both explicitly. Then, for this use case, you create a grid with x padding, 0 margin, and a max-width.

The caveat is, if you want a row like this… 

…to have a max-width, you have to use an extra container. Which isn't so bad. Because with a padding-based grid, you'd have to use 4 extra containers (1 inside each of the columns).

[brettsmason]

@andycochran After discussion with @kball I was planning on making the gutter margin only. However I'm experimenting with real world situations/layouts and see how it would work.

So what you are suggesting is a way for a grid to have no gutter, margin and/or padding? The complication is no gutters and padding don't need calc(), but margin does. Struggling to understand fully how that could work.

Would definitely like to discuss to get it nailed down though as the idea is interesting. I just don't want to end up with the mess of specificity like the current grid 😄

[brettsmason]

@andycochran Actually, I think: http://brettmason.co.uk/grid/ nearly does what you described. All I need to do is remove the .padding-gutters > [size]-[number] specificity and keep it on the margin option, as those widths are overwriting the margin based widths.

I'll put a demo together tonight and see what you think.

[brettsmason]

@andycochran Here's the demo I promised: http://brettmason.co.uk/grid/v2/ The 2 buttons toggles the classes on the grid. Is this what you meant?

[corysimmons]

Can I get a CodePen for the background problem?

[brettsmason]

@corysimmons Sorry for the delay. Here's a quick CodePen: https://codepen.io/brettsmason/pen/ybRONQ Basically with the margin grid we need an extra div in order to contain the width of elements within. I guess that's going to be the one main downside of margin grid compared to padding, but it also has a lot of positives.

[IamManchanda]

If its just about adding a container ... Man i dont see it as a big issue !

[corysimmons]

Yeah I think a wrapping element to an entire set of blocks is cheaper than what you'd have to do with current solutions.

https://codepen.io/corysimmons/pen/MmPyvd?editors=1100

Pretty much every padding grid does this thing where they assume no one wants actual margins between elements, and it's all faux. So when situations like this pop up, you can't just say "Just wrap the whole thing in a .bg element", but rather the user has to figure out a lot of markup bloat to make it work.

This is just one of the inherit problems with the negative-margin technique, and CSS layout in general. Hence I went with nth grids for like... ever.

[IamManchanda]

@brettsmason @corysimmons not quite css guru like you guys But what's the problem with margin: 0 -1rem; instead of margin: 0 auto; https://codepen.io/IamManchanda/pen/bWmpax?editors=1100

[brettsmason]

@IamManchanda the auto centres the element in the viewport. In your example everything is left aligned.

[corysimmons]

@brettsmason Not sure why he asked that, but just to be clear, .container should be its own class, right?

[brettsmason]

@corysimmons Yes definately its own class. At the moment with the live grid its built into the .row class, which is a mistake.