Menu icon Foundation
Foundation 6 Codepen setup check please?

I've got a codepen set up here with what should be all the right links, and yet when I do a simple row > column layout with 3 columns set to small-4, I'm getting a vertical stack instead of 3 blocks in a horizontal row:

https://codepen.io/justmonk/pen/gxRvEe/

Please help?

foundation 6codepengrid not working

I've got a codepen set up here with what should be all the right links, and yet when I do a simple row > column layout with 3 columns set to small-4, I'm getting a vertical stack instead of 3 blocks in a horizontal row:

https://codepen.io/justmonk/pen/gxRvEe/

Please help?

This post has been closed. No new replies can be added.

Michal Pandyra almost 2 years ago

It looks like the Foundation 6.4.1 CSS file that you're loading from the CDN is compiled for use with the new "XY Grid" system while your HTML markup is for the traditional Grid.

Monk almost 2 years ago

...so... why do the docs list out 3 different types of html for using the grid, but only the x/y one works now?

Or is there a different version of foundation that allows you to develop in all of the grid options? I grabbed the css link for this particular version of foundation from https://cdnjs.com/libraries/foundation

 - also, thank you, using the correct markup fixes the issue.

Michal Pandyra almost 2 years ago

Good morning,

With Foundation 6.4 cane some sweeping changes to the entire framework. The new XY Grid layout tool was introduced as the new standard and the traditional Float Grid and Flex Grid have been moved to a legacy branch.

I suspect that the version of Foundation 6.4 available via Cloudflare CDN has been compiled to the new standard.

Monk almost 2 years ago

It's fine, I'll use the new markup. I was just confused by the documentation.

Michal Pandyra almost 2 years ago

If you wish to continue using the Float Grid, Cloudflare CDN does appear to provide a version built for it. The file is here:

https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/css/foundation-float.min.css