diff --git a/colonnade-min.css b/colonnade-min.css index d382837..16eb0ba 100644 --- a/colonnade-min.css +++ b/colonnade-min.css @@ -1 +1 @@ -.container,.row,[class*="column-"]{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.container{position:relative;width:960px;margin:0 auto;padding:0}.row{margin-bottom:20px;zoom:1}[class*="column-"]{margin-left:10px;margin-right:10px;float:left;position:relative;display:inline}.column-1{width:60px}.column-2{width:140px}.column-3{width:220px}.column-4{width:300px}.column-5{width:380px}.column-6{width:460px}.column-7{width:540px}.column-8{width:620px}.column-9{width:700px}.column-10{width:780px}.column-11{width:860px}.column-12{width:940px}.offset-1{margin-left:90px}.offset-2{margin-left:170px}.offset-3{margin-left:250px}.offset-4{margin-left:330px}.offset-5{margin-left:410px}.offset-6{margin-left:490px}.offset-7{margin-left:570px}.offset-8{margin-left:650px}.offset-9{margin-left:730px}.offset-10{margin-left:810px}.offset-11{margin-left:890px}[class*="column-"]>.row{margin-bottom:0px}[class*="column-"]>.row>[class*="column-"]:first-child{margin-left:0px}[class*="column-"]>.row>[class*="column-"]:last-child{margin-right:0px}.row:before,.row:after,.container:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.container:after{clear:both}@media only screen and (min-width: 1400px){.container{width:1400px}.column-1{width:96.667px}.column-2{width:213.333px}.column-3{width:330px}.column-4{width:446.667px}.column-5{width:563.333px}.column-6{width:680px}.column-7{width:796.667px}.column-8{width:913.333px}.column-9{width:1030px}.column-10{width:1146.667px}.column-11{width:1263.333px}.column-12{width:1380px}.offset-1{margin-left:126.667px}.offset-2{margin-left:243.333px}.offset-3{margin-left:360px}.offset-4{margin-left:476.667px}.offset-5{margin-left:593.333px}.offset-6{margin-left:710px}.offset-7{margin-left:826.667px}.offset-8{margin-left:943.333px}.offset-9{margin-left:1060px}.offset-10{margin-left:1176.667px}.offset-11{margin-left:1293.333px}}@media only screen and (min-width: 1200px) and (max-width: 1399px){.container{width:1140px}.column-1{width:75px}.column-2{width:170px}.column-3{width:265px}.column-4{width:360px}.column-5{width:455px}.column-6{width:550px}.column-7{width:645px}.column-8{width:740px}.column-9{width:835px}.column-10{width:930px}.column-11{width:1025px}.column-12{width:1120px}.offset-1{margin-left:105px}.offset-2{margin-left:200px}.offset-3{margin-left:295px}.offset-4{margin-left:390px}.offset-5{margin-left:485px}.offset-6{margin-left:580px}.offset-7{margin-left:675px}.offset-8{margin-left:770px}.offset-9{margin-left:865px}.offset-10{margin-left:960px}.offset-11{margin-left:1055px}}@media only screen and (min-width: 768px) and (max-width: 959px){.container{width:768px}.column-1{width:44px}.column-2{width:108px}.column-3{width:172px}.column-4{width:236px}.column-5{width:300px}.column-6{width:364px}.column-7{width:428px}.column-8{width:492px}.column-9{width:556px}.column-10{width:620px}.column-11{width:684px}.column-12{width:748px}.offset-1{margin-left:74px}.offset-2{margin-left:138px}.offset-3{margin-left:202px}.offset-4{margin-left:266px}.offset-5{margin-left:330px}.offset-6{margin-left:394px}.offset-7{margin-left:458px}.offset-8{margin-left:522px}.offset-9{margin-left:586px}.offset-10{margin-left:650px}.offset-11{margin-left:714px}}@media only screen and (max-width: 767px){[class*="offset-"]{margin-left:0px}[class*="column-"]{margin-left:0px;margin-right:0px;margin-bottom:5px}}@media only screen and (min-width: 480px) and (max-width: 767px){.container,[class*="column-"]{width:420px}}@media only screen and (max-width: 479px){.container,[class*="column-"]{width:300px}} +.container,.row,[class*="column-"]{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.container{position:relative;width:960px;margin:0 auto;padding:0}.row{margin-bottom:20px;zoom:1}[class*="column-"]{margin-left:10px;margin-right:10px;float:left;position:relative;display:inline}.column-1{width:60px}.column-2{width:140px}.column-3{width:220px}.column-4{width:300px}.column-5{width:380px}.column-6{width:460px}.column-7{width:540px}.column-8{width:620px}.column-9{width:700px}.column-10{width:780px}.column-11{width:860px}.column-12{width:940px}.offset-1{margin-left:90px}.offset-2{margin-left:170px}.offset-3{margin-left:250px}.offset-4{margin-left:330px}.offset-5{margin-left:410px}.offset-6{margin-left:490px}.offset-7{margin-left:570px}.offset-8{margin-left:650px}.offset-9{margin-left:730px}.offset-10{margin-left:810px}.offset-11{margin-left:890px}[class*="column-"]>.row{margin-bottom:0px}[class*="column-"]>.row>[class*="column-"]:first-child{margin-left:0px}[class*="column-"]>.row>[class*="column-"]:last-child{margin-right:0px}.row:before,.row:after,.container:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.container:after{clear:both}@media only screen and (min-width: 1200px){[class*="column-"]{margin-left:20px;margin-right:20px}}@media only screen and (min-width: 1400px){.container{width:1400px}.column-1{width:76.667px}.column-2{width:193.333px}.column-3{width:310px}.column-4{width:426.667px}.column-5{width:543.333px}.column-6{width:660px}.column-7{width:776.667px}.column-8{width:893.333px}.column-9{width:1010px}.column-10{width:1126.667px}.column-11{width:1243.333px}.column-12{width:1360px}.offset-1{margin-left:136.667px}.offset-2{margin-left:253.333px}.offset-3{margin-left:370px}.offset-4{margin-left:486.667px}.offset-5{margin-left:603.333px}.offset-6{margin-left:720px}.offset-7{margin-left:836.667px}.offset-8{margin-left:953.333px}.offset-9{margin-left:1070px}.offset-10{margin-left:1186.667px}.offset-11{margin-left:1303.333px}}@media only screen and (min-width: 1200px) and (max-width: 1399px){.container{width:1140px}.column-1{width:55px}.column-2{width:150px}.column-3{width:245px}.column-4{width:340px}.column-5{width:435px}.column-6{width:530px}.column-7{width:625px}.column-8{width:720px}.column-9{width:815px}.column-10{width:910px}.column-11{width:1005px}.column-12{width:1100px}.offset-1{margin-left:115px}.offset-2{margin-left:210px}.offset-3{margin-left:305px}.offset-4{margin-left:400px}.offset-5{margin-left:495px}.offset-6{margin-left:590px}.offset-7{margin-left:685px}.offset-8{margin-left:780px}.offset-9{margin-left:875px}.offset-10{margin-left:970px}.offset-11{margin-left:1065px}}@media only screen and (min-width: 768px) and (max-width: 959px){.container{width:768px}.column-1{width:44px}.column-2{width:108px}.column-3{width:172px}.column-4{width:236px}.column-5{width:300px}.column-6{width:364px}.column-7{width:428px}.column-8{width:492px}.column-9{width:556px}.column-10{width:620px}.column-11{width:684px}.column-12{width:748px}.offset-1{margin-left:74px}.offset-2{margin-left:138px}.offset-3{margin-left:202px}.offset-4{margin-left:266px}.offset-5{margin-left:330px}.offset-6{margin-left:394px}.offset-7{margin-left:458px}.offset-8{margin-left:522px}.offset-9{margin-left:586px}.offset-10{margin-left:650px}.offset-11{margin-left:714px}}@media only screen and (max-width: 767px){[class*="offset-"]{margin-left:0px}[class*="column-"]{margin-left:0px;margin-right:0px;margin-bottom:5px}}@media only screen and (min-width: 480px) and (max-width: 767px){.container,[class*="column-"]{width:420px}}@media only screen and (max-width: 479px){.container,[class*="column-"]{width:300px}} diff --git a/colonnade.css b/colonnade.css index 77e6471..018e985 100644 --- a/colonnade.css +++ b/colonnade.css @@ -143,150 +143,154 @@ * completely muck it up with some media queries based on * some good break points. ***********************************************************************************/ +@media only screen and (min-width: 1200px) { + [class*="column-"] { + margin-left: 20px; + margin-right: 20px; } } @media only screen and (min-width: 1400px) { .container { width: 1400px; } .column-1 { - width: 96.667px; } + width: 76.667px; } .column-2 { - width: 213.333px; } + width: 193.333px; } .column-3 { - width: 330px; } + width: 310px; } .column-4 { - width: 446.667px; } + width: 426.667px; } .column-5 { - width: 563.333px; } + width: 543.333px; } .column-6 { - width: 680px; } + width: 660px; } .column-7 { - width: 796.667px; } + width: 776.667px; } .column-8 { - width: 913.333px; } + width: 893.333px; } .column-9 { - width: 1030px; } + width: 1010px; } .column-10 { - width: 1146.667px; } + width: 1126.667px; } .column-11 { - width: 1263.333px; } + width: 1243.333px; } .column-12 { - width: 1380px; } + width: 1360px; } .offset-1 { - margin-left: 126.667px; } + margin-left: 136.667px; } .offset-2 { - margin-left: 243.333px; } + margin-left: 253.333px; } .offset-3 { - margin-left: 360px; } + margin-left: 370px; } .offset-4 { - margin-left: 476.667px; } + margin-left: 486.667px; } .offset-5 { - margin-left: 593.333px; } + margin-left: 603.333px; } .offset-6 { - margin-left: 710px; } + margin-left: 720px; } .offset-7 { - margin-left: 826.667px; } + margin-left: 836.667px; } .offset-8 { - margin-left: 943.333px; } + margin-left: 953.333px; } .offset-9 { - margin-left: 1060px; } + margin-left: 1070px; } .offset-10 { - margin-left: 1176.667px; } + margin-left: 1186.667px; } .offset-11 { - margin-left: 1293.333px; } } + margin-left: 1303.333px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .container { width: 1140px; } .column-1 { - width: 75px; } + width: 55px; } .column-2 { - width: 170px; } + width: 150px; } .column-3 { - width: 265px; } + width: 245px; } .column-4 { - width: 360px; } + width: 340px; } .column-5 { - width: 455px; } + width: 435px; } .column-6 { - width: 550px; } + width: 530px; } .column-7 { - width: 645px; } + width: 625px; } .column-8 { - width: 740px; } + width: 720px; } .column-9 { - width: 835px; } + width: 815px; } .column-10 { - width: 930px; } + width: 910px; } .column-11 { - width: 1025px; } + width: 1005px; } .column-12 { - width: 1120px; } + width: 1100px; } .offset-1 { - margin-left: 105px; } + margin-left: 115px; } .offset-2 { - margin-left: 200px; } + margin-left: 210px; } .offset-3 { - margin-left: 295px; } + margin-left: 305px; } .offset-4 { - margin-left: 390px; } + margin-left: 400px; } .offset-5 { - margin-left: 485px; } + margin-left: 495px; } .offset-6 { - margin-left: 580px; } + margin-left: 590px; } .offset-7 { - margin-left: 675px; } + margin-left: 685px; } .offset-8 { - margin-left: 770px; } + margin-left: 780px; } .offset-9 { - margin-left: 865px; } + margin-left: 875px; } .offset-10 { - margin-left: 960px; } + margin-left: 970px; } .offset-11 { - margin-left: 1055px; } } + margin-left: 1065px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } diff --git a/colonnade.scss b/colonnade.scss index 36def25..ca2a8e1 100644 --- a/colonnade.scss +++ b/colonnade.scss @@ -112,6 +112,13 @@ $bigGrids : true; * some good break points. ***********************************************************************************/ +@if $bigGrids == true { @media only screen and (min-width: 1200px) { + [class*="column-"] { + margin-left: $gutterWidth; + margin-right: $gutterWidth; + } +} } + @if $bigGrids == true { @media only screen and (min-width: 1400px) { $containerWidth: 1400px; @@ -122,13 +129,13 @@ $bigGrids : true; @for $i from 1 through $columnNumber { .column-#{$i} { - width: (($containerWidth / 12) * $i - 20); + width: (($containerWidth / 12) * $i - 40); } } @for $i from 1 through ($columnNumber - 1) { .offset-#{$i} { - margin-left: (($containerWidth / 12) * $i + 10); + margin-left: (($containerWidth / 12) * $i + 20); } } @@ -144,13 +151,13 @@ $bigGrids : true; @for $i from 1 through $columnNumber { .column-#{$i} { - width: (($containerWidth / 12) * $i - 20); + width: (($containerWidth / 12) * $i - 40); } } @for $i from 1 through ($columnNumber - 1) { .offset-#{$i} { - margin-left: (($containerWidth / 12) * $i + 10); + margin-left: (($containerWidth / 12) * $i + 20); } }