Menu icon Foundation
Using A Different Grid System With Foundation

After some pretty thorough searching, I've found almost nothing in the way of people using external grid systems with Foundation (Susy, Singularity etc).

Given that Foundation is fairly modular, and it would be easy to exclude `foundation/components/grid`, it would seem that this should be a possibility. Looking through the Foundation codebase, it would appear that its components should be able to be used within a different grid system.

I'm wondering if there is something I'm missing?

Has anyone gone down this path? How did it go?

I would also be interested whether anyone used Compass's Vertical Rhythm.

susysingularitygridgrid-systemlayout

After some pretty thorough searching, I've found almost nothing in the way of people using external grid systems with Foundation (Susy, Singularity etc).

Given that Foundation is fairly modular, and it would be easy to exclude `foundation/components/grid`, it would seem that this should be a possibility. Looking through the Foundation codebase, it would appear that its components should be able to be used within a different grid system.

I'm wondering if there is something I'm missing?

Has anyone gone down this path? How did it go?

I would also be interested whether anyone used Compass's Vertical Rhythm.

Pedr about 5 years ago

Yep. That's a fair point.

I think the Foundation grid system is fine up to a point, but then something more sophisticated is needed. I also find it strange that there is no support for vertical rhythm baked in. I haven't used Foundation on anything public-facing for these two reasons, but it has been great for admin interfaces and prototyping.

But I guess you're right. If I'm going to rip out the grid and replace it with Susy, why not rip out the breakpoints and replace them with Breakpoint etc.

Karl Ward about 5 years ago

I don't see any reason why there would be a problem using a separate grid system. You would just need to use the 3rd party grid for all the grid/responsive/layout logic. I have not done it before, but essentially you just need to add the sass/css for your grid system, and use its classes in your code, instead of Foundation grid classes.

Personally I would question why you are choosing another grid, or if you really need to use foundation at all if you are using another grid ...