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:
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?