Created
April 22, 2013 17:35
-
-
Save simplethemes/5436978 to your computer and use it in GitHub Desktop.
Skeleton Grid (1600px)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Table of Contents | |
| ================================================== | |
| #Base 960 Grid | |
| #Tablet (Portrait) | |
| #Mobile (Portrait) | |
| #Mobile (Landscape) | |
| #Clearing */ | |
| .full-width {width:960px; height:auto; overflow:hidden} | |
| #teaser.normal {width: 960px;} | |
| .one_half { width: 48%; } | |
| .one_third { width: 30.66%; } | |
| .two_thirds { width: 65.33%; } | |
| .one_fourth { width: 22%; } | |
| .three_fourths { width: 74%; } | |
| .one_fifth { width: 16.8%; } | |
| .two_fifth { width: 37.6%; } | |
| .three_fifth { width: 58.4%; } | |
| .four_fifth { width: 79.2%; } | |
| .one_sixth { width: 13.33%; } | |
| .five_sixth { width: 82.67%; } | |
| .one_half, | |
| .one_third, | |
| .two_thirds, | |
| .three_fourths, | |
| .one_fourth, | |
| .one_fifth, | |
| .two_fifth, | |
| .three_fifth, | |
| .four_fifth, | |
| .one_sixth, | |
| .five_sixth { | |
| position: relative; | |
| margin-right: 4%; | |
| margin-bottom: 20px; | |
| float: left; | |
| } | |
| .last {margin-right:0 !important;} | |
| .container { | |
| position: relative; | |
| width: 960px; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .span1, | |
| .one.column, | |
| .one.columns { | |
| width: 40px; | |
| } | |
| .two.columns { | |
| width: 100px; | |
| } | |
| .three.columns { | |
| width: 160px; | |
| } | |
| .four.columns { | |
| width: 220px; | |
| } | |
| .five.columns { | |
| width: 280px; | |
| } | |
| .six.columns { | |
| width: 340px; | |
| } | |
| .seven.columns { | |
| width: 400px; | |
| } | |
| .eight.columns { | |
| width: 460px; | |
| } | |
| .nine.columns { | |
| width: 520px; | |
| } | |
| .ten.columns { | |
| width: 580px; | |
| } | |
| .eleven.columns { | |
| width: 640px; | |
| } | |
| .twelve.columns { | |
| width: 700px; | |
| } | |
| .thirteen.columns { | |
| width: 760px; | |
| } | |
| .fourteen.columns { | |
| width: 820px; | |
| } | |
| .fifteen.columns { | |
| width: 880px; | |
| } | |
| .sixteen.columns { | |
| width: 940px; | |
| } | |
| .one-third.column { | |
| width: 300px; | |
| } | |
| .two-thirds.column { | |
| width: 620px; | |
| } | |
| .one-third.column.alpha, | |
| .one-third.column.omega { | |
| width: 310px; | |
| } | |
| .two-thirds.column.alpha, | |
| .two-thirds.column.omega { | |
| width: 630px; | |
| } | |
| .column, .columns { | |
| float: left; | |
| display: inline; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .column.alpha, .columns.alpha { | |
| margin-left: 0; | |
| } | |
| .column.omega, .columns.omega { | |
| margin-right: 0; | |
| } | |
| .offset-by-half { | |
| padding-left: 30px; | |
| } | |
| .offset1, .offset-by-one { | |
| padding-left: 60px; | |
| } | |
| .offset2, .offset-by-two { | |
| padding-left: 120px; | |
| } | |
| .offset3, .offset-by-three { | |
| padding-left: 180px; | |
| } | |
| .offset4, .offset-by-four { | |
| padding-left: 240px; | |
| } | |
| .offset5, .offset-by-five { | |
| padding-left: 300px; | |
| } | |
| .offset6, .offset-by-six { | |
| padding-left: 360px; | |
| } | |
| .offset7, .offset-by-seven { | |
| padding-left: 420px; | |
| } | |
| .offset8, .offset-by-eight { | |
| padding-left: 480px; | |
| } | |
| .offset9, .offset-by-nine { | |
| padding-left: 540px; | |
| } | |
| .offset10, .offset-by-ten { | |
| padding-left: 600px; | |
| } | |
| .offset11, .offset-by-eleven { | |
| padding-left: 660px; | |
| } | |
| .offset12, .offset-by-twelve { | |
| padding-left: 720px; | |
| } | |
| .offset13, .offset-by-thirteen { | |
| padding-left: 780px; | |
| } | |
| .offset14, .offset-by-fourteen { | |
| padding-left: 840px; | |
| } | |
| .offset15, .offset-by-fifteen { | |
| padding-left: 900px; | |
| } | |
| @media only screen and (min-width: 1600px) { | |
| .full-width {width:1600px; height:auto; overflow:hidden} | |
| #teaser.normal {width: 1600px;} | |
| .container { | |
| position: relative; | |
| width: 1600px; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .span1, | |
| .one.column, | |
| .one.columns { | |
| width: 80px; | |
| } | |
| .two.columns { | |
| width: 180px; | |
| } | |
| .three.columns { | |
| width: 280px; | |
| } | |
| .four.columns { | |
| width: 380px; | |
| } | |
| .five.columns { | |
| width: 480px; | |
| } | |
| .six.columns { | |
| width: 580px; | |
| } | |
| .seven.columns { | |
| width: 680px; | |
| } | |
| .eight.columns { | |
| width: 780px; | |
| } | |
| .nine.columns { | |
| width: 880px; | |
| } | |
| .ten.columns { | |
| width: 980px; | |
| } | |
| .eleven.columns { | |
| width: 1080px; | |
| } | |
| .twelve.columns { | |
| width: 1180px; | |
| } | |
| .thirteen.columns { | |
| width: 1280px; | |
| } | |
| .fourteen.columns { | |
| width: 1380px; | |
| } | |
| .fifteen.columns { | |
| width: 1480px; | |
| } | |
| .sixteen.columns { | |
| width: 1580px; | |
| } | |
| .one-third.column { | |
| width: 513.33333px; | |
| } | |
| .two-thirds.column { | |
| width: 1046.66667px; | |
| } | |
| .one-third.column.alpha, | |
| .one-third.column.omega { | |
| width: 523.33333px; | |
| } | |
| .two-thirds.column.alpha, | |
| .two-thirds.column.omega { | |
| width: 1056.66667px; | |
| } | |
| .column, .columns { | |
| float: left; | |
| display: inline; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .column.alpha, .columns.alpha { | |
| margin-left: 0; | |
| } | |
| .column.omega, .columns.omega { | |
| margin-right: 0; | |
| } | |
| .offset-by-half { | |
| padding-left: 50px; | |
| } | |
| .offset1, .offset-by-one { | |
| padding-left: 100px; | |
| } | |
| .offset2, .offset-by-two { | |
| padding-left: 200px; | |
| } | |
| .offset3, .offset-by-three { | |
| padding-left: 300px; | |
| } | |
| .offset4, .offset-by-four { | |
| padding-left: 400px; | |
| } | |
| .offset5, .offset-by-five { | |
| padding-left: 500px; | |
| } | |
| .offset6, .offset-by-six { | |
| padding-left: 600px; | |
| } | |
| .offset7, .offset-by-seven { | |
| padding-left: 700px; | |
| } | |
| .offset8, .offset-by-eight { | |
| padding-left: 800px; | |
| } | |
| .offset9, .offset-by-nine { | |
| padding-left: 900px; | |
| } | |
| .offset10, .offset-by-ten { | |
| padding-left: 1000px; | |
| } | |
| .offset11, .offset-by-eleven { | |
| padding-left: 1100px; | |
| } | |
| .offset12, .offset-by-twelve { | |
| padding-left: 1200px; | |
| } | |
| .offset13, .offset-by-thirteen { | |
| padding-left: 1300px; | |
| } | |
| .offset14, .offset-by-fourteen { | |
| padding-left: 1400px; | |
| } | |
| .offset15, .offset-by-fifteen { | |
| padding-left: 1500px; | |
| } | |
| } | |
| @media only screen and (min-width: 1200px) and (max-width: 1599px) { | |
| .full-width {width:1200px; height:auto; overflow:hidden} | |
| #teaser.normal {width: 1200px;} | |
| .container { | |
| position: relative; | |
| width: 1200px; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .span1, | |
| .one.column, | |
| .one.columns { | |
| width: 55px; | |
| } | |
| .two.columns { | |
| width: 130px; | |
| } | |
| .three.columns { | |
| width: 205px; | |
| } | |
| .four.columns { | |
| width: 280px; | |
| } | |
| .five.columns { | |
| width: 355px; | |
| } | |
| .six.columns { | |
| width: 430px; | |
| } | |
| .seven.columns { | |
| width: 505px; | |
| } | |
| .eight.columns { | |
| width: 580px; | |
| } | |
| .nine.columns { | |
| width: 655px; | |
| } | |
| .ten.columns { | |
| width: 730px; | |
| } | |
| .eleven.columns { | |
| width: 805px; | |
| } | |
| .twelve.columns { | |
| width: 880px; | |
| } | |
| .thirteen.columns { | |
| width: 955px; | |
| } | |
| .fourteen.columns { | |
| width: 1030px; | |
| } | |
| .fifteen.columns { | |
| width: 1105px; | |
| } | |
| .sixteen.columns { | |
| width: 1180px; | |
| } | |
| .one-third.column { | |
| width: 380px; | |
| } | |
| .two-thirds.column { | |
| width: 780px; | |
| } | |
| .one-third.column.alpha, | |
| .one-third.column.omega { | |
| width: 390px; | |
| } | |
| .two-thirds.column.alpha, | |
| .two-thirds.column.omega { | |
| width: 790px; | |
| } | |
| .column, .columns { | |
| float: left; | |
| display: inline; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .column.alpha, .columns.alpha { | |
| margin-left: 0; | |
| } | |
| .column.omega, .columns.omega { | |
| margin-right: 0; | |
| } | |
| .offset-by-half { | |
| padding-left: 37.5px; | |
| } | |
| .offset1, .offset-by-one { | |
| padding-left: 75px; | |
| } | |
| .offset2, .offset-by-two { | |
| padding-left: 150px; | |
| } | |
| .offset3, .offset-by-three { | |
| padding-left: 225px; | |
| } | |
| .offset4, .offset-by-four { | |
| padding-left: 300px; | |
| } | |
| .offset5, .offset-by-five { | |
| padding-left: 375px; | |
| } | |
| .offset6, .offset-by-six { | |
| padding-left: 450px; | |
| } | |
| .offset7, .offset-by-seven { | |
| padding-left: 525px; | |
| } | |
| .offset8, .offset-by-eight { | |
| padding-left: 600px; | |
| } | |
| .offset9, .offset-by-nine { | |
| padding-left: 675px; | |
| } | |
| .offset10, .offset-by-ten { | |
| padding-left: 750px; | |
| } | |
| .offset11, .offset-by-eleven { | |
| padding-left: 825px; | |
| } | |
| .offset12, .offset-by-twelve { | |
| padding-left: 900px; | |
| } | |
| .offset13, .offset-by-thirteen { | |
| padding-left: 975px; | |
| } | |
| .offset14, .offset-by-fourteen { | |
| padding-left: 1050px; | |
| } | |
| .offset15, .offset-by-fifteen { | |
| padding-left: 1125px; | |
| } | |
| } | |
| @media only screen and (min-width: 768px) and (max-width: 959px) { | |
| .container { | |
| position: relative; | |
| width: 768px; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .span1, | |
| .one.column, | |
| .one.columns { | |
| width: 28px; | |
| } | |
| .two.columns { | |
| width: 76px; | |
| } | |
| .three.columns { | |
| width: 124px; | |
| } | |
| .four.columns { | |
| width: 172px; | |
| } | |
| .five.columns { | |
| width: 220px; | |
| } | |
| .six.columns { | |
| width: 268px; | |
| } | |
| .seven.columns { | |
| width: 316px; | |
| } | |
| .eight.columns { | |
| width: 364px; | |
| } | |
| .nine.columns { | |
| width: 412px; | |
| } | |
| .ten.columns { | |
| width: 460px; | |
| } | |
| .eleven.columns { | |
| width: 508px; | |
| } | |
| .twelve.columns { | |
| width: 556px; | |
| } | |
| .thirteen.columns { | |
| width: 604px; | |
| } | |
| .fourteen.columns { | |
| width: 652px; | |
| } | |
| .fifteen.columns { | |
| width: 700px; | |
| } | |
| .sixteen.columns { | |
| width: 748px; | |
| } | |
| .one-third.column { | |
| width: 236px; | |
| } | |
| .two-thirds.column { | |
| width: 492px; | |
| } | |
| .one-third.column.alpha, | |
| .one-third.column.omega { | |
| width: 246px; | |
| } | |
| .two-thirds.column.alpha, | |
| .two-thirds.column.omega { | |
| width: 502px; | |
| } | |
| .column, .columns { | |
| float: left; | |
| display: inline; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .column.alpha, .columns.alpha { | |
| margin-left: 0; | |
| } | |
| .column.omega, .columns.omega { | |
| margin-right: 0; | |
| } | |
| .offset-by-half { | |
| padding-left: 24px; | |
| } | |
| .offset1, .offset-by-one { | |
| padding-left: 48px; | |
| } | |
| .offset2, .offset-by-two { | |
| padding-left: 96px; | |
| } | |
| .offset3, .offset-by-three { | |
| padding-left: 144px; | |
| } | |
| .offset4, .offset-by-four { | |
| padding-left: 192px; | |
| } | |
| .offset5, .offset-by-five { | |
| padding-left: 240px; | |
| } | |
| .offset6, .offset-by-six { | |
| padding-left: 288px; | |
| } | |
| .offset7, .offset-by-seven { | |
| padding-left: 336px; | |
| } | |
| .offset8, .offset-by-eight { | |
| padding-left: 384px; | |
| } | |
| .offset9, .offset-by-nine { | |
| padding-left: 432px; | |
| } | |
| .offset10, .offset-by-ten { | |
| padding-left: 480px; | |
| } | |
| .offset11, .offset-by-eleven { | |
| padding-left: 528px; | |
| } | |
| .offset12, .offset-by-twelve { | |
| padding-left: 576px; | |
| } | |
| .offset13, .offset-by-thirteen { | |
| padding-left: 624px; | |
| } | |
| .offset14, .offset-by-fourteen { | |
| padding-left: 672px; | |
| } | |
| .offset15, .offset-by-fifteen { | |
| padding-left: 720px; | |
| } | |
| } | |
| @media only screen and (max-width: 767px) { | |
| .container { | |
| position: relative; | |
| width: 300px; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .one.column, | |
| .one.columns, .span1, | |
| .two.columns, .span2, | |
| .three.columns, .span3, | |
| .four.columns, .span4, | |
| .five.columns, .span5, | |
| .six.columns, .span6, | |
| .seven.columns, .span7, | |
| .eight.columns, .span8, | |
| .nine.columns, .span9, | |
| .ten.columns, .span10, | |
| .eleven.columns, .span11, | |
| .twelve.columns, .span12, | |
| .thirteen.columns, .span13, | |
| .fourteen.columns, .span14, | |
| .fifteen.columns, .span15, | |
| .sixteen.columns, .span16, | |
| .one-third.column, | |
| .two-thirds.column, | |
| .col, | |
| .one-third.column.alpha, | |
| .one-third.column.omega, | |
| .two-thirds.column.alpha, | |
| .two-thirds.column.omega { | |
| width: 280px; | |
| } | |
| .one_half, | |
| .one_third, | |
| .two_thirds, | |
| .three_fourths, | |
| .one_fourth, | |
| .one_fifth, | |
| .two_fifth, | |
| .three_fifth, | |
| .four_fifth, | |
| .one_sixth, | |
| .five_sixth { | |
| width: 100% !important; | |
| } | |
| .column, .columns { | |
| float: left; | |
| display: inline; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .column.alpha, .columns.alpha { | |
| margin-left: 0; | |
| } | |
| .column.omega, .columns.omega { | |
| margin-right: 0; | |
| } | |
| .container .offset-by-one, .container .offset1, | |
| .container .offset-by-two, .container .offset2, | |
| .container .offset-by-three, .container .offset3, | |
| .container .offset-by-four, .container .offset4, | |
| .container .offset-by-five, .container .offset5, | |
| .container .offset-by-six, .container .offset6, | |
| .container .offset-by-seven, .container .offset7, | |
| .container .offset-by-eight, .container .offset8, | |
| .container .offset-by-nine, .container .offset9, | |
| .container .offset-by-ten, .container .offset10, | |
| .container .offset-by-eleven, .container .offset11, | |
| .container .offset-by-twelve, .container .offset12, | |
| .container .offset-by-thirteen, .container .offset13, | |
| .container .offset-by-fourteen, .container .offset14, | |
| .container .offset-by-fifteen, .container .offset15 { | |
| padding-left: 0; | |
| } | |
| } | |
| @media only screen and (min-width: 480px) and (max-width: 767px) { | |
| .container { | |
| position: relative; | |
| width: 420px; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .one.column, | |
| .one.columns, .span1, | |
| .two.columns, .span2, | |
| .three.columns, .span3, | |
| .four.columns, .span4, | |
| .five.columns, .span5, | |
| .six.columns, .span6, | |
| .seven.columns, .span7, | |
| .eight.columns, .span8, | |
| .nine.columns, .span9, | |
| .ten.columns, .span10, | |
| .eleven.columns, .span11, | |
| .twelve.columns, .span12, | |
| .thirteen.columns, .span13, | |
| .fourteen.columns, .span14, | |
| .fifteen.columns, .span15, | |
| .sixteen.columns, .span16, | |
| .one-third.column, | |
| .two-thirds.column, | |
| .col, | |
| .one-third.column.alpha, | |
| .one-third.column.omega, | |
| .two-thirds.column.alpha, | |
| .two-thirds.column.omega { | |
| width: 400px; | |
| } | |
| .one_half, | |
| .one_third, | |
| .two_thirds, | |
| .three_fourths, | |
| .one_fourth, | |
| .one_fifth, | |
| .two_fifth, | |
| .three_fifth, | |
| .four_fifth, | |
| .one_sixth, | |
| .five_sixth { | |
| width: 100% !important; | |
| } | |
| .column, .columns { | |
| float: left; | |
| display: inline; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .column.alpha, .columns.alpha { | |
| margin-left: 0; | |
| } | |
| .column.omega, .columns.omega { | |
| margin-right: 0; | |
| } | |
| .container .offset-by-one, .container .offset1, | |
| .container .offset-by-two, .container .offset2, | |
| .container .offset-by-three, .container .offset3, | |
| .container .offset-by-four, .container .offset4, | |
| .container .offset-by-five, .container .offset5, | |
| .container .offset-by-six, .container .offset6, | |
| .container .offset-by-seven, .container .offset7, | |
| .container .offset-by-eight, .container .offset8, | |
| .container .offset-by-nine, .container .offset9, | |
| .container .offset-by-ten, .container .offset10, | |
| .container .offset-by-eleven, .container .offset11, | |
| .container .offset-by-twelve, .container .offset12, | |
| .container .offset-by-thirteen, .container .offset13, | |
| .container .offset-by-fourteen, .container .offset14, | |
| .container .offset-by-fifteen, .container .offset15 { | |
| padding-left: 0; | |
| } | |
| } | |
| .container:after { | |
| content: "\0020"; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| .clearfix:before, | |
| .clearfix:after, | |
| .row:before, | |
| .row:after { | |
| content: "\0020"; | |
| display: block; | |
| overflow: hidden; | |
| visibility: hidden; | |
| width: 0; | |
| height: 0; | |
| } | |
| .row:after, | |
| .clearfix:after { | |
| clear: both; | |
| } | |
| .row, | |
| .clearfix { | |
| zoom: 1; | |
| } | |
| .clear { | |
| clear: both; | |
| display: block; | |
| overflow: hidden; | |
| visibility: hidden; | |
| width: 0; | |
| height: 0; | |
| } | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks dude!