Menu icon Foundation
Grid and Getting Started Q?

Hello! I'm totally noob on framework so probably this is a dumb question, but here it is:

Grid:

I'm using this website( http://gridcalculator.dk/ ) so I can start my design on PS I want to know what is the Foundation5 Grid values,

Max width: px
Columns: 12 cols I know that! :)
Gutter width: px
Margin width: px
Page width: px
Column width: px

So I can see my design on PS the most accurate way possible.

Getting Started:

Because this is my 1st time working with any framework there is a good beginners video?

I'm too rusty on coding but I get a client and I want to start with Responsive Design and getting back in shape with coding.

Thanks in advance!

beginnersgridgetting startedps

Hello! I'm totally noob on framework so probably this is a dumb question, but here it is:

Grid:

I'm using this website( http://gridcalculator.dk/ ) so I can start my design on PS I want to know what is the Foundation5 Grid values,

Max width: px
Columns: 12 cols I know that! :)
Gutter width: px
Margin width: px
Page width: px
Column width: px

So I can see my design on PS the most accurate way possible.

Getting Started:

Because this is my 1st time working with any framework there is a good beginners video?

I'm too rusty on coding but I get a client and I want to start with Responsive Design and getting back in shape with coding.

Thanks in advance!

Kevin D. Sherman over 5 years ago

All of these are somewhat variable as it depends what you want.

On the download page you can get most of the defaults:
http://foundation.zurb.com/develop/download.html

note: convert em to px, simply multiply the em x base px ( which is 16px ). For example, in the default, max width of 62.5em is 62.5 x 16 = 1000px

To get some of the other sizes, it might be easier to set up what you're looking for on the download page, download the framework and open it in Chrome and use the inspector to weed through the various column widths.

Hope that helps a little... You might have a hard time really designing for responsive in Photoshop.

RichardCPD over 5 years ago

"You might have a hard time really designing for responsive in Photoshop."

1st! thanks a lot for that info!

and any recommendation instead using PS?

I have the design (home page),did it on Illustrator but because I understand better AI.

I used as a visual reference and of course after coding I hope that it matches 100% the design with the final product.

Kevin D. Sherman over 5 years ago

I preferred doing some quick design mock ups with AI as well. Even as photographer, I find Photoshop to be pretty tough to wrangle. You can use AI to make a few artboards at different sizes to sora make a game plan, but I wouldn't reply on them like the old days of web design/development.

Especially with the power of a framework like Foundation, designing in the browser is the trend.

Wing-Hou Chan over 5 years ago

Hand sketches, then move to wireframes, then usually, to the browser.

I occasionally use PS to create the design of the site before coding it. PS allows you to make mistakes and visualize the site before it goes into a browser.

However it is difficult to create 'responsiveness' in PS. What I'd recommend is creating different designs for different breakpoints, using different canvas sizes, to help visualize the responsiveness.