Menu icon Foundation
How to work with grid system on custom element size

Hello !

I'm kinda new to Foundation, and I try to understand how the grid system work.

My WebDesign is already done, and it isn't based on a grid design.
How can I work anyway using the Foundation grid system ?

For example, on a "line" (width 1000px) I have two elements of width 698px and 285px.
The first one float on the left and the next one float on the right.
JSFiddle : https://jsfiddle.net/oqm0syn6/

Is there a solution to respect this design using the Foundation grid system, please ?

Thanks for your help.

newFoundationgrid

Hello !

I'm kinda new to Foundation, and I try to understand how the grid system work.

My WebDesign is already done, and it isn't based on a grid design.
How can I work anyway using the Foundation grid system ?

For example, on a "line" (width 1000px) I have two elements of width 698px and 285px.
The first one float on the left and the next one float on the right.
JSFiddle : https://jsfiddle.net/oqm0syn6/

Is there a solution to respect this design using the Foundation grid system, please ?

Thanks for your help.

Rafi Benkual over 2 years ago

There is a really good tutorial to get to know the Foundation grid here: 

http://foundation.zurb.com/learn/introduction-to-the-foundation-grid.html

or

http://foundation.zurb.com/learn/foundation-6-grid-basics-mobile-first.html

You might also be interested in the Foundation training which teaches the responsive grid and more:

http://zurb.com/university/foundation-intro

Just OnMyOwn over 2 years ago

Hello Rafi !

Thanks for your answer.

Yep, I get it.

But it still not answer my case, as I understand it :-(.
Aka "Is it possible to fit a design that isn't based on a grid system using Foundation ?".

If the answer is yes, can you gimme a tips resolving the easy example above with some Foundation stuff ?
In this example : Foundation base grid system is 12 column based by default. In my case, on a row of 1000px, 1 column is ~83px, and so 698px is equal to ~8.40 columns... so it doesn't fit :/. 

Thanks for your incoming help.
Regards,

 

Rafi Benkual over 2 years ago

Yes, you can do this with the Foundation grid. You can make a custom class with a width of 698px or you can use the grid mixins with Sass.

You can make a column in your css like 

.main-content {
  width: grid-column(1 of 7);
}

or with a %

.main-content {
  width: grid-column(33.3%);
}

 

Just OnMyOwn over 2 years ago

Hello Rafi !

First of all : happy new year ;-).

OK, I get it, thanks.
So, in the way I can't use Sass on my web host, the only ay is the custom class ?
And so, in fact, I will use only custom class, with media queries to define the size of the element on the diferent support (S, L, M, ...), right ?