Menu icon Foundation
Mixing the Grids F6 and Apps

Im working to completly overhaul my repo foundationUltra which as a mixup of foundation5 and foundationApps with angular directives for Foundation 5 aswell.

FoundationUltra - Master
https://github.com/RelutionDev/foundationUltra

Ive started from the ground up on my rewrite and instead of using foundation5 am going to be using foundation6 and the flexbox grid which is were I begin .

Foundationultra Dev
https://github.com/RelutionDev/foundationUltra/tree/dev

Now that both of the grid are available in flexbox flavours the elements should play alot nicer ??

My Question:

I want to use rows and columns inside grid-blocks/grid frames the idea being that the blocks and frames hold content which can be further formated with rows and columns.

The theory behind it is that in my remix you would use the grid-blocks to define templates pages etc and the rows and columns to form partials for page content.

My problem.

Ive imported the SCSS into the project that already has apps and have added f6 utils and the grid/grid is dependant on them and im planning on replacing functions and mixins within the grid/grid to use things such as foundationApps breakpoints and functions. But ive hit a few snags

1. Without hacking the css on page and adding width:100% the rows and columns are not taking up all of the space with the grid-block/gird-content

2. Why is there a max-width assigned to f6 grid of 75em ?

3. Ive checked and the breakpoints are almost identical between the two frameworks so why would a row be shrinking instead of expanding

Ive added 2 images to show the difference between a row with 100% and without. . .any input would be appreciated

Foundation remix  build version   by relutiondev 2016 01 27 10 25 27

Foundation remix  build version   by relutiondev 2016 01 27 10 32 01

sitesappsF6gridflex-grid

Im working to completly overhaul my repo foundationUltra which as a mixup of foundation5 and foundationApps with angular directives for Foundation 5 aswell.

FoundationUltra - Master
https://github.com/RelutionDev/foundationUltra

Ive started from the ground up on my rewrite and instead of using foundation5 am going to be using foundation6 and the flexbox grid which is were I begin .

Foundationultra Dev
https://github.com/RelutionDev/foundationUltra/tree/dev

Now that both of the grid are available in flexbox flavours the elements should play alot nicer ??

My Question:

I want to use rows and columns inside grid-blocks/grid frames the idea being that the blocks and frames hold content which can be further formated with rows and columns.

The theory behind it is that in my remix you would use the grid-blocks to define templates pages etc and the rows and columns to form partials for page content.

My problem.

Ive imported the SCSS into the project that already has apps and have added f6 utils and the grid/grid is dependant on them and im planning on replacing functions and mixins within the grid/grid to use things such as foundationApps breakpoints and functions. But ive hit a few snags

1. Without hacking the css on page and adding width:100% the rows and columns are not taking up all of the space with the grid-block/gird-content

2. Why is there a max-width assigned to f6 grid of 75em ?

3. Ive checked and the breakpoints are almost identical between the two frameworks so why would a row be shrinking instead of expanding

Ive added 2 images to show the difference between a row with 100% and without. . .any input would be appreciated

Foundation remix  build version   by relutiondev 2016 01 27 10 25 27

Foundation remix  build version   by relutiondev 2016 01 27 10 32 01
Rafi Benkual almost 4 years ago

Hey Jason -
FoundationUltra is a really cool project! I think you are really have the right idea there. Just addressing that, I'm seeing that now that Foundation for Apps has been out for a year, and Sites 6 is now out, we can build on what we learned about how people are using these things.

The future is exciting because like you're doing, we see a lot more component sharing between Foundation for Sites and Apps. It makes sense, rather than maintaining two different versions. of CSS. Plugins though may be more specialized (but dropdowns can be shared).

The new max-width on rows is 1200px or 75rem. This width fit better with modern screens but of course is adjustable.

Jason Demitri almost 4 years ago

So any reason why a flexbox row might not be expanding to take up the whole of the parent container?