Created
June 18, 2013 17:31
-
-
Save hatefulcrawdad/5807506 to your computer and use it in GitHub Desktop.
Sneak peek at what we're thinking about for the Foundation 5 Grid.
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
/* Row and Column defaults */ | |
.row { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; width: 100%; } | |
.row .row.collapse { margin-left: 0; margin-right: 0; max-width: none; width: auto; } | |
.row .row { margin-left: -0.9375em; margin-right: -0.9375em; max-width: none; width: auto; } | |
.row.collapse .column, .row.collapse .columns { padding-left: 0; padding-right: 0; float: left; } | |
.column, .columns { padding-left: 0.9375em; padding-right: 0.9375em; width: 100%; float: left; position: relative; } | |
/* Up to 640px */ | |
@media only screen { | |
.small-1 { width: 8.33333% } | |
.small-2 { width: 16.66667% } | |
.small-3 { width: 25% } | |
.small-4 { width: 33.33333% } | |
.small-5 { width: 41.66667% } | |
.small-6 { width: 50% } | |
.small-7 { width: 58.33333% } | |
.small-8 { width: 66.66667% } | |
.small-9 { width: 75% } | |
.small-10 { width: 83.33333% } | |
.small-11 { width: 91.66667% } | |
.small-12 { width: 100% } | |
.small-offset-0 { margin-left: 0% } | |
.small-offset-1 { margin-left: 8.33333% } | |
.small-offset-2 { margin-left: 16.66667% } | |
.small-offset-3 { margin-left: 25% } | |
.small-offset-4 { margin-left: 33.33333% } | |
.small-offset-5 { margin-left: 41.66667% } | |
.small-offset-6 { margin-left: 50% } | |
.small-offset-7 { margin-left: 58.33333% } | |
.small-offset-8 { margin-left: 66.66667% } | |
.small-offset-9 { margin-left: 75% } | |
.small-offset-10 { margin-left: 83.33333% } | |
[class*="column"] + [class*="column"]:last-child { float: right } | |
[class*="column"] + [class*="column"].end { float: left } | |
.column.small-centered, .columns.small-centered { margin-left: auto; margin-right: auto; float: none !important; } | |
} | |
/* Starts at 640px */ | |
@media only screen and (min-width: 40em) { | |
.medium-1 { width: 8.33333% } | |
.medium-2 { width: 16.66667% } | |
.medium-3 { width: 25% } | |
.medium-4 { width: 33.33333% } | |
.medium-5 { width: 41.66667% } | |
.medium-6 { width: 50% } | |
.medium-7 { width: 58.33333% } | |
.medium-8 { width: 66.66667% } | |
.medium-9 { width: 75% } | |
.medium-10 { width: 83.33333% } | |
.medium-11 { width: 91.66667% } | |
.medium-12 { width: 100% } | |
.medium-offset-0 { margin-left: 0% } | |
.medium-offset-1 { margin-left: 8.33333% } | |
.medium-offset-2 { margin-left: 16.66667% } | |
.medium-offset-3 { margin-left: 25% } | |
.medium-offset-4 { margin-left: 33.33333% } | |
.medium-offset-5 { margin-left: 41.66667% } | |
.medium-offset-6 { margin-left: 50% } | |
.medium-offset-7 { margin-left: 58.33333% } | |
.medium-offset-8 { margin-left: 66.66667% } | |
.medium-offset-9 { margin-left: 75% } | |
.medium-offset-10 { margin-left: 83.33333% } | |
.medium-offset-11 { margin-left: 91.66667% } | |
.medium-push-1 { left: 8.33333% } | |
.medium-pull-1 { right: 8.33333% } | |
.medium-push-2 { left: 16.66667% } | |
.medium-pull-2 { right: 16.66667% } | |
.medium-push-3 { left: 25% } | |
.medium-pull-3 { right: 25% } | |
.medium-push-4 { left: 33.33333% } | |
.medium-pull-4 { right: 33.33333% } | |
.medium-push-5 { left: 41.66667% } | |
.medium-pull-5 { right: 41.66667% } | |
.medium-push-6 { left: 50% } | |
.medium-pull-6 { right: 50% } | |
.medium-push-7 { left: 58.33333% } | |
.medium-pull-7 { right: 58.33333% } | |
.medium-push-8 { left: 66.66667% } | |
.medium-pull-8 { right: 66.66667% } | |
.medium-push-9 { left: 75% } | |
.medium-pull-9 { right: 75% } | |
.medium-push-10 { left: 83.33333% } | |
.medium-pull-10 { right: 83.33333% } | |
.medium-push-11 { left: 91.66667% } | |
.medium-pull-11 { right: 91.66667% } | |
.column.medium-centered, .columns.medium-centered { margin-left: auto; margin-right: auto; float: none !important; } | |
.column.medium-uncentered, .columns.medium-uncentered { margin-left: 0; margin-right: 0; float: left !important; } | |
} | |
/* Starts at 1024px */ | |
@media only screen and (min-width: 64em) { | |
.large-1 { width: 8.33333% } | |
.large-2 { width: 16.66667% } | |
.large-3 { width: 25% } | |
.large-4 { width: 33.33333% } | |
.large-5 { width: 41.66667% } | |
.large-6 { width: 50% } | |
.large-7 { width: 58.33333% } | |
.large-8 { width: 66.66667% } | |
.large-9 { width: 75% } | |
.large-10 { width: 83.33333% } | |
.large-11 { width: 91.66667% } | |
.large-12 { width: 100% } | |
.large-offset-0 { margin-left: 0% } | |
.large-offset-1 { margin-left: 8.33333% } | |
.large-offset-2 { margin-left: 16.66667% } | |
.large-offset-3 { margin-left: 25% } | |
.large-offset-4 { margin-left: 33.33333% } | |
.large-offset-5 { margin-left: 41.66667% } | |
.large-offset-6 { margin-left: 50% } | |
.large-offset-7 { margin-left: 58.33333% } | |
.large-offset-8 { margin-left: 66.66667% } | |
.large-offset-9 { margin-left: 75% } | |
.large-offset-10 { margin-left: 83.33333% } | |
.large-offset-11 { margin-left: 91.66667% } | |
.large-push-1 { left: 8.33333% } | |
.large-pull-1 { right: 8.33333% } | |
.large-push-2 { left: 16.66667% } | |
.large-pull-2 { right: 16.66667% } | |
.large-push-3 { left: 25% } | |
.large-pull-3 { right: 25% } | |
.large-push-4 { left: 33.33333% } | |
.large-pull-4 { right: 33.33333% } | |
.large-push-5 { left: 41.66667% } | |
.large-pull-5 { right: 41.66667% } | |
.large-push-6 { left: 50% } | |
.large-pull-6 { right: 50% } | |
.large-push-7 { left: 58.33333% } | |
.large-pull-7 { right: 58.33333% } | |
.large-push-8 { left: 66.66667% } | |
.large-pull-8 { right: 66.66667% } | |
.large-push-9 { left: 75% } | |
.large-pull-9 { right: 75% } | |
.large-push-10 { left: 83.33333% } | |
.large-pull-10 { right: 83.33333% } | |
.large-push-11 { left: 91.66667% } | |
.large-pull-11 { right: 91.66667% } | |
.column.large-centered, .columns.large-centered { margin-left: auto; margin-right: auto; float: none !important; } | |
.column.large-uncentered, .columns.large-uncentered { margin-left: 0; margin-right: 0; float: left !important; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Excellent, of course.