Created
January 21, 2014 23:42
-
-
Save tommoor/8550820 to your computer and use it in GitHub Desktop.
Skeleton.css with push-pull mixins
This file contains 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
/* | |
* Skeleton V1.2 | |
* Copyright 2011, Dave Gamache | |
* www.getskeleton.com | |
* Free to use under the MIT license. | |
* http://www.opensource.org/licenses/mit-license.php | |
* 6/20/2012 | |
*/ | |
/* Table of Contents | |
================================================== | |
#Base 960 Grid | |
#Tablet (Portrait) | |
#Mobile (Portrait) | |
#Mobile (Landscape) | |
#Clearing */ | |
/* #Base 960 Grid | |
================================================== */ | |
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; } | |
.container .column, | |
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; position: relative; } | |
.row { margin-bottom: 20px; } | |
/* Nested Column Classes */ | |
.column.alpha, .columns.alpha { margin-left: 0; } | |
.column.omega, .columns.omega { margin-right: 0; } | |
/* Base Grid */ | |
.container .one.column, | |
.container .one.columns { width: 40px; } | |
.container .two.columns { width: 100px; } | |
.container .three.columns { width: 160px; } | |
.container .four.columns { width: 220px; } | |
.container .five.columns { width: 280px; } | |
.container .six.columns { width: 340px; } | |
.container .seven.columns { width: 400px; } | |
.container .eight.columns { width: 460px; } | |
.container .nine.columns { width: 520px; } | |
.container .ten.columns { width: 580px; } | |
.container .eleven.columns { width: 640px; } | |
.container .twelve.columns { width: 700px; } | |
.container .thirteen.columns { width: 760px; } | |
.container .fourteen.columns { width: 820px; } | |
.container .fifteen.columns { width: 880px; } | |
.container .sixteen.columns { width: 940px; } | |
.container .one-third.column { width: 300px; } | |
.container .two-thirds.column { width: 620px; } | |
/* Offsets */ | |
.container .offset-by-one { padding-left: 60px; } | |
.container .offset-by-two { padding-left: 120px; } | |
.container .offset-by-three { padding-left: 180px; } | |
.container .offset-by-four { padding-left: 240px; } | |
.container .offset-by-five { padding-left: 300px; } | |
.container .offset-by-six { padding-left: 360px; } | |
.container .offset-by-seven { padding-left: 420px; } | |
.container .offset-by-eight { padding-left: 480px; } | |
.container .offset-by-nine { padding-left: 540px; } | |
.container .offset-by-ten { padding-left: 600px; } | |
.container .offset-by-eleven { padding-left: 660px; } | |
.container .offset-by-twelve { padding-left: 720px; } | |
.container .offset-by-thirteen { padding-left: 780px; } | |
.container .offset-by-fourteen { padding-left: 840px; } | |
.container .offset-by-fifteen { padding-left: 900px; } | |
/* Push & Pull */ | |
.container .push-by-one { left: 60px; } | |
.container .push-by-two { left: 120px; } | |
.container .push-by-three { left: 180px; } | |
.container .push-by-four { left: 240px; } | |
.container .push-by-five { left: 300px; } | |
.container .push-by-six { left: 360px; } | |
.container .push-by-seven { left: 420px; } | |
.container .push-by-eight { left: 480px; } | |
.container .push-by-nine { left: 540px; } | |
.container .push-by-ten { left: 600px; } | |
.container .push-by-eleven { left: 660px; } | |
.container .push-by-twelve { left: 720px; } | |
.container .push-by-thirteen { left: 780px; } | |
.container .push-by-fourteen { left: 840px; } | |
.container .push-by-fifteen { left: 900px; } | |
.container .pull-by-one { left: -60px; } | |
.container .pull-by-two { left: -120px; } | |
.container .pull-by-three { left: -180px; } | |
.container .pull-by-four { left: -240px; } | |
.container .pull-by-five { left: -300px; } | |
.container .pull-by-six { left: -360px; } | |
.container .pull-by-seven { left: -420px; } | |
.container .pull-by-eight { left: -480px; } | |
.container .pull-by-nine { left: -540px; } | |
.container .pull-by-ten { left: -600px; } | |
.container .pull-by-eleven { left: -660px; } | |
.container .pull-by-twelve { left: -720px; } | |
.container .pull-by-thirteen { left: -780px; } | |
.container .pull-by-fourteen { left: -840px; } | |
.container .pull-by-fifteen { left: -900px; } | |
/* #Tablet (Portrait) | |
================================================== */ | |
/* Note: Design for a width of 768px */ | |
@media only screen and (min-width: 768px) and (max-width: 959px) { | |
.container { width: 768px; } | |
.container .column, | |
.container .columns { margin-left: 10px; margin-right: 10px; } | |
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } | |
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } | |
.alpha.omega { margin-left: 0; margin-right: 0; } | |
.container .one.column, | |
.container .one.columns { width: 28px; } | |
.container .two.columns { width: 76px; } | |
.container .three.columns { width: 124px; } | |
.container .four.columns { width: 172px; } | |
.container .five.columns { width: 220px; } | |
.container .six.columns { width: 268px; } | |
.container .seven.columns { width: 316px; } | |
.container .eight.columns { width: 364px; } | |
.container .nine.columns { width: 412px; } | |
.container .ten.columns { width: 460px; } | |
.container .eleven.columns { width: 508px; } | |
.container .twelve.columns { width: 556px; } | |
.container .thirteen.columns { width: 604px; } | |
.container .fourteen.columns { width: 652px; } | |
.container .fifteen.columns { width: 700px; } | |
.container .sixteen.columns { width: 748px; } | |
.container .one-third.column { width: 236px; } | |
.container .two-thirds.column { width: 492px; } | |
/* Offsets */ | |
.container .offset-by-one { padding-left: 48px; } | |
.container .offset-by-two { padding-left: 96px; } | |
.container .offset-by-three { padding-left: 144px; } | |
.container .offset-by-four { padding-left: 192px; } | |
.container .offset-by-five { padding-left: 240px; } | |
.container .offset-by-six { padding-left: 288px; } | |
.container .offset-by-seven { padding-left: 336px; } | |
.container .offset-by-eight { padding-left: 384px; } | |
.container .offset-by-nine { padding-left: 432px; } | |
.container .offset-by-ten { padding-left: 480px; } | |
.container .offset-by-eleven { padding-left: 528px; } | |
.container .offset-by-twelve { padding-left: 576px; } | |
.container .offset-by-thirteen { padding-left: 624px; } | |
.container .offset-by-fourteen { padding-left: 672px; } | |
.container .offset-by-fifteen { padding-left: 720px; } | |
/* Push & pull */ | |
.container .push-by-one { left: 48px; } | |
.container .push-by-two { left: 96px; } | |
.container .push-by-three { left: 144px; } | |
.container .push-by-four { left: 192px; } | |
.container .push-by-five { left: 240px; } | |
.container .push-by-six { left: 288px; } | |
.container .push-by-seven { left: 336px; } | |
.container .push-by-eight { left: 384px; } | |
.container .push-by-nine { left: 432px; } | |
.container .push-by-ten { left: 480px; } | |
.container .push-by-eleven { left: 528px; } | |
.container .push-by-twelve { left: 576px; } | |
.container .push-by-thirteen { left: 624px; } | |
.container .push-by-fourteen { left: 672px; } | |
.container .push-by-fifteen { left: 720px; } | |
.container .pull-by-one { left: -48px; } | |
.container .pull-by-two { left: -96px; } | |
.container .pull-by-three { left: -144px; } | |
.container .pull-by-four { left: -192px; } | |
.container .pull-by-five { left: -240px; } | |
.container .pull-by-six { left: -288px; } | |
.container .pull-by-seven { left: -336px; } | |
.container .pull-by-eight { left: -384px; } | |
.container .pull-by-nine { left: -432px; } | |
.container .pull-by-ten { left: -480px; } | |
.container .pull-by-eleven { left: -528px; } | |
.container .pull-by-twelve { left: -576px; } | |
.container .pull-by-thirteen { left: -624px; } | |
.container .pull-by-fourteen { left: -672px; } | |
.container .pull-by-fifteen { left: -720px; } | |
} | |
/* #Mobile (Portrait) | |
================================================== */ | |
/* Note: Design for a width of 320px */ | |
@media only screen and (max-width: 767px) { | |
.container { width: 300px; } | |
.container .columns, | |
.container .column { margin: 0; } | |
.container .one.column, | |
.container .one.columns, | |
.container .two.columns, | |
.container .three.columns, | |
.container .four.columns, | |
.container .five.columns, | |
.container .six.columns, | |
.container .seven.columns, | |
.container .eight.columns, | |
.container .nine.columns, | |
.container .ten.columns, | |
.container .eleven.columns, | |
.container .twelve.columns, | |
.container .thirteen.columns, | |
.container .fourteen.columns, | |
.container .fifteen.columns, | |
.container .sixteen.columns, | |
.container .one-third.column, | |
.container .two-thirds.column { width: 300px; } | |
/* Offsets */ | |
.container .offset-by-one, | |
.container .offset-by-two, | |
.container .offset-by-three, | |
.container .offset-by-four, | |
.container .offset-by-five, | |
.container .offset-by-six, | |
.container .offset-by-seven, | |
.container .offset-by-eight, | |
.container .offset-by-nine, | |
.container .offset-by-ten, | |
.container .offset-by-eleven, | |
.container .offset-by-twelve, | |
.container .offset-by-thirteen, | |
.container .offset-by-fourteen, | |
.container .offset-by-fifteen { padding-left: 0; } | |
/* Push & Pull */ | |
.container .push-by-one, | |
.container .push-by-two, | |
.container .push-by-three, | |
.container .push-by-four, | |
.container .push-by-five, | |
.container .push-by-six, | |
.container .push-by-seven, | |
.container .push-by-eight, | |
.container .push-by-nine, | |
.container .push-by-ten, | |
.container .push-by-eleven, | |
.container .push-by-twelve, | |
.container .push-by-thirteen, | |
.container .push-by-fourteen, | |
.container .push-by-fifteen { left: auto; } | |
.container .pull-by-one, | |
.container .pull-by-two, | |
.container .pull-by-three, | |
.container .pull-by-four, | |
.container .pull-by-five, | |
.container .pull-by-six, | |
.container .pull-by-seven, | |
.container .pull-by-eight, | |
.container .pull-by-nine, | |
.container .pull-by-ten, | |
.container .pull-by-eleven, | |
.container .pull-by-twelve, | |
.container .pull-by-thirteen, | |
.container .pull-by-fourteen, | |
.container .pull-by-fifteen { left: auto; } | |
} | |
/* #Mobile (Landscape) | |
================================================== */ | |
/* Note: Design for a width of 480px */ | |
@media only screen and (min-width: 480px) and (max-width: 767px) { | |
.container { width: 420px; } | |
.container .columns, | |
.container .column { margin: 0; } | |
.container .one.column, | |
.container .one.columns, | |
.container .two.columns, | |
.container .three.columns, | |
.container .four.columns, | |
.container .five.columns, | |
.container .six.columns, | |
.container .seven.columns, | |
.container .eight.columns, | |
.container .nine.columns, | |
.container .ten.columns, | |
.container .eleven.columns, | |
.container .twelve.columns, | |
.container .thirteen.columns, | |
.container .fourteen.columns, | |
.container .fifteen.columns, | |
.container .sixteen.columns, | |
.container .one-third.column, | |
.container .two-thirds.column { width: 420px; } | |
} | |
/* #Clearing | |
================================================== */ | |
/* Self Clearing Goodness */ | |
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } | |
/* Use clearfix class on parent to clear nested columns, | |
or wrap each row of columns in a <div class="row"> */ | |
.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; } | |
/* You can also use a <br class="clear" /> to clear columns */ | |
.clear { | |
clear: both; | |
display: block; | |
overflow: hidden; | |
visibility: hidden; | |
width: 0; | |
height: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment