Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad
Created June 18, 2013 17:31
Show Gist options
  • Save hatefulcrawdad/5807506 to your computer and use it in GitHub Desktop.
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; }
}
@brandonjspencer
Copy link

exactly what I've been waiting for... Sweeeet!!

@proimage
Copy link

And to think I was just trying to hack a medium grid size into F4... ;) Will that large grid be triggered for a maximized browser on a 1024px wide screen? If so, what happens when a scrollbar appears? Does it jump down to the medium grid styles?

@zv0r
Copy link

zv0r commented Jun 19, 2013

Excellent, of course.

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