/* Responsive Template Name: RS-MQF 960 V.2 File: 960px Responsive Framework CSS Author: OS Templates Author URI: http://www.os-templates.com/ Licence: Website Template Licence */ /* #################################################################################################### */ /* ############### PLEASE READ THE FOLLOWING TO UNDERSTAND THIS DOCUMENT ############################## */ /* ############### FEEL FREE TO DELETE THE INSTRUCTIONS IF NOT NEEDED ############################## */ /* #################################################################################################### */ /* The following should help you understand how to work out the box size for a 960px responsive max-width layout. Step 1: We start out with a fixed width - in this case it is 960px We set our distance between each box (margin / gutter) - in this case it is 30px We now start to do some math. Step 2: First we find out what 30px in percentage is: 30px ÷ 960px × 100 = 3.125% Step 3: We now decide on how many elements / sections / boxes we want to use and how they will look - our instance has 1, 2, 3, 4, 5 & 6 box sections To illustrate how these elements will work, we use the following demonstration: 1. box 2. box | margin | box 3. box | margin | box | margin | box 4. box | margin | box | margin | box | margin | box 5. box | margin | box | margin | box | margin | box | margin | box 6. box | margin | box | margin | box | margin | box | margin | box | margin | box Step 4: Now we work out the width of each box for each situation. For the following demonstration we have completed the math for the points 2 & 3 from the above list: WORKING OUT ONE HALF: ( box | margin | box ) Fixed width minus the gutter / margin, divide the result by two and your finished: 960px - 30px = 930px ÷ 2 = 465px To work out the Responsive / fluid width we use the result from the fixed width: 465px ÷ 960px × 100 = 48.4375% WORKING OUT ONE THIRD: ( box | margin | box | margin | box ) Here we have double the margin, so we need to double the margin measurement in our equation Fixed width minus 2 × margin, divide the result by three and your finished: 960px - 60px ÷ 3 = 300px To work out the Responsive / fluid width we use the result from the fixed width: 300px ÷ 960px × 100 = 31.25% So now we have an end result that mathematically looks like: 31.25% | 3.125% | 31.25% | 3.125% | 31.25% If you add all of the above sizes together you get => 100% Step 5: Now that we have worked out the measurement for one element box we can work out the sum of multiple boxes: For our example we use the "One Third" result from above, basically one box with a margin and two boxes combined together, using our visual help we go from: box | margin | box | margin | box => to => box | margin | boxbox 1 box = 960px - 60px ÷ 3 = 300px 2 boxes = width of 1 box × 2 + the width of one margin (the margin is no-longer in use so it is added to the width of the two boxes) 2 boxes = 300px × 2 + 30px = 630px The responsive width is found using the above result: 630px ÷ 960px × 100 = 65.625% So now we have an end result that mathematically looks like: 31.25% | 3.125% | 65.625% If you add all of the above sizes together you get => 100% */ .one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth{display:inline; float:left; margin:0 0 0 3.125%; list-style:none;} .one_half:first-child, .one_third:first-child, .two_third:first-child, .one_quarter:first-child, .two_quarter:first-child, .three_quarter:first-child, .one_fifth:first-child, .two_fifth:first-child, .three_fifth:first-child, .four_fifth:first-child, .one_sixth:first-child, .two_sixth:first-child, .three_sixth:first-child, .four_sixth:first-child, .five_sixth:first-child{margin-left:0;} .first{margin-left:0; clear:left;} .full_width{display:block; width:100%; clear:both;} /*----------------------------------------------Half Grid-------------------------------------*/ /* .one_half{width:465px;} => 465 ÷ 960 = 0.484375 * 100 = 48.4375 */ .one_half{width:48.4375%;} /*----------------------------------------------Third Grid-------------------------------------*/ /* .one_third{width:300px;} => 300 ÷ 960 = 0.3125 * 100 = 31.25 .two_third{width:630px;} => 630 ÷ 960 = 0.65625 * 100 = 65.625 */ .one_third{width:31.25%;} .two_third{width:65.625%;} /*----------------------------------------------Quarter Grid-------------------------------------*/ /* .one_quarter{width:217.5px;} => 217.5 ÷ 960 = 0.2265625 * 100 = 22.65625 .two_quarter{width:465px;} => 465 ÷ 960 = 0.484375 * 100 = 48.4375 .three_quarter{width:712.5px;} => 712.5 ÷ 960 = 0.7421875 * 100 = 74.21875 */ .one_quarter{width:22.65625%;} .two_quarter{width:48.4375%;} .three_quarter{width:74.21875%;} /*----------------------------------------------Fifth Grid-------------------------------------*/ /* .one_fifth{width:168px;} => 168 ÷ 960 = 0.175 * 100 = 17.5 .two_fifth{width:366px;} => 366 ÷ 960 = 0.38125 * 100 = 38.125 .three_fifth{width:564px;} => 564 ÷ 960 = 0.5875 * 100 = 58.75 .four_fifth{width:762px;} => 762 ÷ 960 = 0.79375 * 100 = 79.375 */ .one_fifth{width:17.5%;} .two_fifth{width:38.125%;} .three_fifth{width:58.75%;} .four_fifth{width:79.375%;} /*----------------------------------------------Sixth Grid-------------------------------------*/ /* .one_sixth{width:135px;} => 135 ÷ 960 = 0.140625 * 100 = 14.0625 .two_sixth{width:300px;} => 300 ÷ 960 = 0.3125 * 100 = 31.25 .three_sixth{width:465px;} => 465 ÷ 960 = 0.484375 * 100 = 48.4375 .four_sixth{width:630px;} => 630 ÷ 960 = 0.65625 * 100 = 65.625 .five_sixth{width:795px;} => 795 ÷ 960 = 0.828125 * 100 = 82.8125 */ .one_sixth{width:14.0625%;} .two_sixth{width:31.25%;} /* Same as one_third */ .three_sixth{width:48.4375%;} /* Same as two_quarter */ .four_sixth{width:65.625%;} /* Same as two_third */ .five_sixth{width:82.8125%;}