Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad
Created June 18, 2013 17:31
Show Gist options
  • Select an option

  • Save hatefulcrawdad/5807506 to your computer and use it in GitHub Desktop.

Select an option

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.
/* 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; }
}
@zv0r

zv0r commented Jun 19, 2013

Copy link
Copy Markdown

Excellent, of course.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment