Anyone familiar with Responsive Design for a Q&A

I kinda get what your saying, I think the first video of "building a simple website" was a little more comprehensive, which is why I stopped watching the videos for now. I'm planning to go back after i finish the html/css deep dive videos, hopefully they'll fill some of the gaps. Overall though, I think videos is still pretty good.

Yeah it does seem like a step was missed from going to building the cupcake site to making it responsive. Personally, I think it would have been nice if they didn't use a grid to build the cupcake site. At least not at first.

What I've taken home is that a "container" div that holds the design is set to an arbitrary value like 90%. They state "The design is based off 1000px wide" but then they tell you each of the 12 grids is 65px and the gutters between them is 20px. Well, add this up and it's 1020px, breaking the "container".

I think that the last grid's margin is nullified, so it would fit into a 1000px wide container. But if you look at the grid sizes, they don't seem based on a "add up to 12" method. If you take 3 of the 4x grids, the total comes to around 97%. But if you do 6 of the 2x divs, the total width is 85% when you add up all the widths. Is this how it's supposed to be?

The Media Queries weren't touched on enough to allow for comprehension of why the values used were chosen.

I'm not sure of the specific grid they are using in the series but I know in Twitter Boostrap the grids are like this. 12 column layout for a total of 960px. When you do your spans they have to be inside of a div with a class "row". This row puts on a -20px margin which takes care of the overlapping. In Blueprint CSS it's a similar situation. On your last span on the page that would break it, you have to add the "last" class which again applies the negative margin as to not break it.

Other than just relying on the videos for knowledge, just open up the framework css files and take a look. You can see the specific px widths that are programmed in. Also if you make some test sites and use chrome you can "inspect the element" which will allow you to see the defined area, in blue, and the extra margin or padding, in orange.

Well I've been looking through more and more resources, and though a "click" hasn't been made, I have assumptions.

Since the design is responsive, we can base it on a 1140px wide design and break it down to 12 grids. Initially my problem was that at large resolutions, a 30px gutter looked better and as the viewport was lowered, a 20px became more aesthetically pleasing.

This means that each grid will have a different width and margin (right). If you divide 1140 by 12 you get 95. So each grid was either going to be 65px with a 30px margin or 75px with a 20px (controlled by MQ). When I used the Target / Context = Result, I get:

65px = 5.701%, 30px = 2.631% 75px = 6.578%, 20px = 1.574%

I then devised this formula: (x * grid_width) + ((x - 1) * gutter_width). The value you get is divided by 1140 and that gets you the per-grid width as a percentage. ie.

1x wide grid at higher res = (1 * 65px ) + (0 * 30px) = 65px. Divided by 1140 = 5.701%

2x wide grid at higher res = (2 * 65px ) + (1 * 30px) = 160px. Divided by 1140 = 14.035%

3x wide grid at higher res = (3 * 65px ) + (2 * 30px) = 255px. Divided by 1140 = 22.368%

etc.

Because the container div is 90% of the body, it scales on the fly. I did the math of multiple columns that added up to 12 stacked in 1 row, like:

2x-2x-2x-2x-2x-2x 3x-3x-3x-3x 4x-4x-4x 6x-6x

(and many other variations, like 2x-5x-3x-2x)

And basically the widths came out between 98% and 100%. This seems to be an acceptable width that would not go beyond the container and force the floated divs to the next line.

I have no idea if this is the right way of doing things, but it is working so far.