Moving from static high-fidelity mockups to a Responsive Webstie

Whilst using an existing grid system can be helpful for a lot of people, you don't have to use one. The important thing is that you've decided how you want the site to look at certain breakpoints (which is often more than developers are handed by a creative team before they start work). Also to be responsive, not every element has to stretch/ squash, you can fix the margin/padding width at mobile to be a certain width (16px for example), and have the content grow with the screen size. When that begins to look a little out of proportion with the content (maybe tablet portrait) increase the margin/padding size (maybe 32px etc), and just tailor your media queries to get the look you want at each breakpoint withe the content, but not the gutters scaling in between.

Garrett Sanderson , thank you very much for your reply. Garrett, I have actually applied the grid to my mockups already and here how it looks: http://d.pr/i/1dwEe . What I don't however understand is what to do next and how to install and start using this grid to layout my design components on the page. I've customzed the bootstrap css (removing everything except from their grid: http://d.pr/i/12aWm ) and have added it to my index.html document: http://d.pr/i/1hP33 . The grid I have used in my Sketch 3 mockup is in fact Bootsrap's grid, thus as far as I understand it should be pretty easy for me to implement this grid and start using it, but what I don't quite understand is to how to actually go about and start using it. .

I guess I need to dig deeper and learn more about the actual topic i.e "how to install and apply bootstrap grid to your project" or something along these lines.

Also, Garrett, one more question I wanted to ask you: is it a normal practice to use 12 column grid for both desktop and tablet versions of your website and use only 1 column: http://d.pr/i/gFc2 (actually 2 columns but with gutter between columns set to 0 because Sketch 3 does not allow to create a grid with only one column, so my settings are as follows: ) http://d.pr/i/1iTmt and this is how my mockup looks with this 1 column grid applied to it: http://d.pr/i/146p2 . This is another area I feel a bit lost but as far as I understand there is no reason to use a 12 column grid for a mobile mockup because normally all the layouts on mobile devices are pretty simple where elements are simply being stacked one on top of another, right? Will it be easy to replicate this behaviour in Bootsraps grid? i.e. to switch from a 12 column grid on desktop version of the website to only 1 (or 2 for that matter) columns on mobile devices? I was also told by one really cool designer (Rafal Tomal – www.rafaltomal.com) the following: "If you start with 12 columns on the desktop screen, then you may want to gradually reduce the number of columns on smaller screens. Of course, it has to make sense, so for example from 12 columns on the desktop, you may want to go down to 6 columns on the tablets. If you had 4 elements in one row (each taking 3 cols) on the desktop, then you can display them as 2 elements in 2 rows (each taking 3 cols) on the tablets".

Would be very thankful if you could elaborate on this subject and hopefully it will become much much clearer for me.

Thanks again for your support ;)

There is really no need to change the amount of columns used. In mobile you can still use the 12 column grid, visually it will look like one column but your element will have a width of 12 columns.