0

I am new to ZURB's Foundation (new to responsive design, generally speaking), i came from 960GS, so I need help and some advice as I am very confused..

I start design process with 1) drawing some wireframes on paper 2) making mock-ups in Photoshop, and then i 3) convert PSD to HTML. I've used to use 960GS PSD template to help me with elements positioning in Photoshop. Everything was quite simple and it worked flawlessly.

As we do not have grid templates provided to use with Foundation framework I don't know from where and how to start with creating mock-ups in Photoshop? Maybe some of you do not use Photoshop but something else, but let forget that for a moment because tool is not important as we only care about final product. I suppose that everyone has to create first some versions of mock-ups before coding, i don't believe that you jump from paper wireframes directly to coding in text editor?

So, as i have found official ZURB article that says:

Foundation, by default, is 940px wide with 15px margins on each side and 30px gutters.

But, I have tested this code:

<div class="row" style='margin-top:200px'>
    <div class="large-1 columns panel" style="background-color:green">1</div>
    <div class="large-1 columns panel" style="background-color:blue">2</div>
    <div class="large-1 columns panel" style="background-color:yellow">3</div>
    <div class="large-1 columns panel" style="background-color:red">4</div>
    <div class="large-1 columns panel" style="background-color:black">5</div>
    <div class="large-1 columns panel" style="background-color:gray">6</div>
    <div class="large-1 columns panel" style="background-color:olivegreen">7</div>
    <div class="large-1 columns panel" style="background-color:pink">8</div>
    <div class="large-1 columns panel" style="background-color:cyan">9</div>
    <div class="large-1 columns panel" style="background-color:magenta">10</div>
    <div class="large-1 columns panel" style="background-color:navy">11</div>
    <div class="large-1 columns panel" style="background-color:white">12</div>
</div>

and it provides 12 columns that are 1200px wide, every column has 15px padding on both sides, without column gutter. Here is a screenshot:

Foundation 12 columns size

So this is quite different from what they have wrote in that article, but i suppose it's because article is 4 years old, and they have changed grid in the meanwhile.

Exact grid measures are crucial for me because i need to know where to put elements, how picture/icon can be big/small etc.. Without it it's like drawing in dark.

I'm not sure if you will understand my confusion, but please have in mind that i tried responsive framework yesterday for the first time. Can someone tell me how does look your routine when making mock-ups, how do you make them?

Improve this question
1

1 Answer 1

Reset to default
0

From that ZURB article:

Foundation has no fixed size. The grid might be 1000px wide, or 400px. Each column could be ... well, almost anything.

and

you shouldn't be designing for a single size anyways.

Which is correct.

I suppose that everyone has to create first some versions of mock-ups before coding, i don't believe that you jump from paper wireframes directly to coding in text editor?

I do, and it's not uncommon. Sometimes I will create a mockup in Photoshop first, but it completely depends on the design. A lot of things I can mockup in code just as quickly as I could in Photoshop.

If you are going to create mockups in Photoshop you need to be aware of what they are and what they aren't. They are not pixel-perfect representations of what you will be creating. Use them as a guide, that is all. Some measurements you will be able to take directly from your PSD, a lot won't make sense in a responsive environment.

Commonly you will make a few different mockups. One for desktop, one for mobile and one for tablet, for example. But it completely depends on the design—You could have anything from two to ten different sizes mocked up. The sizes of the different mockups should be based on the content, not on specific device dimensions (unless you are designing for a specific device—which is very rare). If you are designing a template with no specific content, don't worry too much about the specific sizes.

If you do want to set up grid templates in Photoshop what I would do is take the example grid you have coded, take a screenshot with the browser wider than the max-width of the grid (as you have already done), make your browser window smaller, taking screenshots at every size you want to mockup in Photoshop. Then open each screenshot in Photoshop and drag guides to the correct places, delete the actual screenshots and you have your templates.

There are a lot of related previous posts here that may be helpful:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.