Foundation-sites: [Feature Proposal] Foundation 7: #8024 Margin grids

[kball]

From @IamManchanda, relocating from https://github.com/zurb/foundation-sites/issues/9694 for discussion.

As foundation 7 gonna be most probably flexbox only ( #9591 )
and if its gonna be flexbox only, then its a android 2-4.3 drop also

That means we can surely use calc() now
http://caniuse.com/#feat=calc

So,
I propose => #8024

Codepen => http://codepen.io/corysimmons/pen/dGmEBW

.small-1 {
width: calc(100% * 1/12 - 30px);
}

and

=> https://webdesign.tutsplus.com/tutorials/calc-grids-are-the-best-grids--cms-22902
=> https://www.sitepoint.com/creative-grid-system-sass-calc/

[IamManchanda]

Calc based grid system can be very useful if it has a good browser support

• https://codepen.io/sebastianekstrom/pen/lmLHK
• http://codepen.io/corysimmons/pen/dGmEBW

.small-1 {
width: calc(100% * 1/12 - 30px);
}

Reasons:

• Padding grid is kinda sort of a hack
• whereas, Calc based or margin grids is more so a feature !
• It will remove the extra markup and make the css file less bulky without those gutter paddings!
• Update: See below for more reasons => https://github.com/zurb/foundation-sites/issues/9699#issuecomment-275646605

Read this => https://css-tricks.com/a-couple-of-use-cases-for-calc/

All CSS Preprocessors do have math functions and they are pretty useful. But they aren't quite as powerful as native math. The most useful ability of calc() is its ability to mix units, like percentages and pixels. No Preprocessor will ever be able to do that. It is something that has to happen at render time.

---

Special Mention for your inputs guys: @DaSchTour , @ncoden , @brettsmason

[RamanCool]

Well nice, but there is one concern

Browser support of calc is less than flexbox but equal the current compatibility of foundation's flex grid
http://caniuse.com/#feat=calc

[IamManchanda]

@RamanCool Yes its true that both foundation's flex grid and calc have a cutting edge browser support but hey 2017 just started and foundation 7 will released by the end of the year or start of 2018 ....
and i am quite sure the way the web is moving along quite fast, and with google, apple, microsoft helping there users to proceed to latest systems/browsers.... quite sure that,
The browser support will cross 95%++ by then for both

Moreover just for a bit of time (2018 or so),
We can give the polyfill links for things like calc/flexbox in the docs for some time if people are wanting browser support but telling the user's that no support will be provided for same!

[DaSchTour]

@RamanCool I already use calc and flexboxa lot and it works very well. Support for flexbox and calc look bad because old android stock browser doesn't support it. But in fact usage of it is very very low. Most people use Samsung Internet or Chrome on their devices. So what's left? Support and Usage of IE9 is decreasing fast. For Europe and USA more than 95% support calc and flexbox. Support for many CSS3 features is at a similar level. The gap to 100% in most cases is determined by the usage of Opera Mini and UC Browser.

The only market that needs special consideration when thinking about calc and flexbox is Asia, because of the high usage of UC Browser there and Africa because of high usage of Opera Mini (that's also why the global number for this features may look bad).

[IamManchanda]

Exactly @DaSchTour ..... Infact me from asia only ( India ) ... and i dont think there is not any big need to support uc browser/opera mini ..... but maybe i am being partial here coz i posted this ... i dont know :disappointed:

---

But hey still, for these markets ... we can always provide a polyfill links in the docs for the time being ( calc, flexbox etc ) but also mentioning that

No support will be provided for the polyfills .... You can use these polyfills if you want these browsers to be compatible with foundation

[RamanCool]

@DaSchTour Me also not favour of old school coding but as @IamManchanda said .... there could be polyfills links in docs for some time...

[IamManchanda]

@kball @DaSchTour @RamanCool have just thinked about this and
=> this can help us remove columns class ( crutch ) from the html markup of grids too ?

Instead of using

<div class="small-2 large-4 columns">
   <!-- ... -->
</div>

we can use,

<div class="small-2 large-4">
   <!-- ... -->
</div>

What do you guys think on that ??

[DaSchTour]

@IamManchanda I'm not really sure what the benefit of using calc is. To be honest I think with flexbox and column grid, CSS grids will have decreasing importance in future. I already use more custom grid than the rather unflexibel CSS grid. So I'm not sure if it's worth investing a lot of time in a alternative CSS grid system, instead of improving the mixins for flexbox to help creating individual grids.

[IamManchanda]

@DaSchTour i tend to agree with you a little bit ..... but please gjve me some time for research for more reason on using calc() ....

Currently i have only these below benefits that i found/discover

• Padding grid is kinda sort of a hack
• whereas, Calc based or margin grids is more so a feature !
• It will remove the extra markup and make the css file less bulky without those gutter paddings!
• Let us remove the crutch called columns from our html markup ( see my above comment )
• Margin based lets the background colors shine through. Users don't have to put an element immediately inside of a column in order to see the background. See this comment
• It’s HTML’s correct attribute for this purpose (=> outer space around boxes)
• You can use padding alongs, without having to nest another DIV for the actual paddings
• It simply works. Without any "last-element-has"-float-fixes, width calculations or else …

[pritamsinghbisht]

Nice benefits @IamManchanda mentioned.

[corysimmons]

Sorry for being a 🍆 before. Literally homeless right now and frustrated that open-source didn't somehow put me in a house.

@IamManchanda Thanks for following my work in this field.

Here are my thoughts (with easy-to-consume/real-world examples) on this: https://github.com/twbs/bootstrap/issues/19026

Here are some pics of the problem: https://imgur.com/a/OWyOQ

For almost all situations, margin grids result in much lower markup (considering all the spots people need to use grids).

This is important since the worst part about these CSS frameworks is the markup bloat.

https://github.com/corysimmons/bootstrap-margin-grid is a 10 minute WIP. Compare it to Foundation's current padding-based implementation in some real examples and decide which "feels better" (the only actual metric of success).

If you decide you're interested in a margin-based grid, I can actually work on this and provide a beautiful PR with a unique/intuitive grid... It'd be a nice hat feather, but more of an apology. Some good people reached out... It reminded me we're all just caring "people" being manipulated by corps. 💃

[IamManchanda]

@corysimmons There is a proverb in India ( Hindi )

Subh ka bhula agar shaam ko wapas aa jaayyee,
To usey bhula nhi kehtey

This simply means, that "if some person lost his road in the morning but found the same in evening.... then he should not be blamed and should be forgiven."

---

If you decide you're interested in a margin-based grid, I can actually work on this and provide a beautiful PR with a unique/intuitive grid

I will be very honoured sir if you can do a PR ..... thanks a very lot
But will wait for other opinions for the same
cc/ @kball @brettsmason

[corysimmons]

"if some person lost his road in the morning but found the same in evening.... then he should not be blamed and should be forgiven."

That's beautiful.

[kball]

tag @ncoden and @brettsmason as additional input as you're looking at new grid options

[corysimmons]

I noticed you guys were tossing around the idea of some sort of isometric grid markup for Sites and Apps.

Apps needs padding grids or else scrollbars don't nest well (overlap).

Sites could use margin grids, but the difference in the markup/styles for Sites and Apps would make it not worth it.

---

You should really just make it all Grid Layout spec...

Foundation is popular enough that it would _force_ browsers to get their 💩 together with grid layout asap.

It'd be bold. Some people in the community would be mad and abandon you, but I know a lot of people, including myself would rally behind you and even start using Foundation.

Take a stand? Implement the first badass Grid Layout component system? 🥇

https://bit.ly/force-grid-layout

[IamManchanda]

Sorry but you might not know ,
Foundation for apps is a depreciated project...
Extinct now @corysimmons

[corysimmons]

Ah, bummer. It's layout system is the most interesting I've seen in a long time. gl with your grid work guys. 👋

[kball]

@corysimmons There is an effort in progress to bring the grid/layout system from Apps into Sites... it was started and gotten pretty far but then the owner started a new gig so it's looking for an owner... would you be interested in taking it on? https://github.com/zurb/foundation-sites/pull/9487

[corysimmons]

@kball I'll look into it if I get some time.

[IamManchanda]

Closing this in an effort to keep one thread per enhancement
Hope that's not an issue with you guys

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