Skip to content

Instantly share code, notes, and snippets.

@hatefulcrawdad
Created March 15, 2013 04:44
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save hatefulcrawdad/5167539 to your computer and use it in GitHub Desktop.
This should get your close to creating a custom grid for foundation within whatever media query you want. Just change the word "class" to whatever you want to use. I haven't tested this, just copied in the large-# classes as a base, but it should work.
@media only screen and (your-widths) {
.row .class-1 {
position: relative;
width: 8.33333%; }
.row .class-2 {
position: relative;
width: 16.66667%; }
.row .class-3 {
position: relative;
width: 25%; }
.row .class-4 {
position: relative;
width: 33.33333%; }
.row .class-5 {
position: relative;
width: 41.66667%; }
.row .class-6 {
position: relative;
width: 50%; }
.row .class-7 {
position: relative;
width: 58.33333%; }
.row .class-8 {
position: relative;
width: 66.66667%; }
.row .class-9 {
position: relative;
width: 75%; }
.row .class-10 {
position: relative;
width: 83.33333%; }
.row .class-11 {
position: relative;
width: 91.66667%; }
.row .class-12 {
position: relative;
width: 100%; }
.row .class-offset-1 {
position: relative;
margin-left: 8.33333%; }
.row .class-offset-2 {
position: relative;
margin-left: 16.66667%; }
.row .class-offset-3 {
position: relative;
margin-left: 25%; }
.row .class-offset-4 {
position: relative;
margin-left: 33.33333%; }
.row .class-offset-5 {
position: relative;
margin-left: 41.66667%; }
.row .class-offset-6 {
position: relative;
margin-left: 50%; }
.row .class-offset-7 {
position: relative;
margin-left: 58.33333%; }
.row .class-offset-8 {
position: relative;
margin-left: 66.66667%; }
.row .class-offset-9 {
position: relative;
margin-left: 75%; }
.row .class-offset-10 {
position: relative;
margin-left: 83.33333%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment