Created
January 20, 2012 20:52
-
-
Save fitsum/1649505 to your computer and use it in GitHub Desktop.
Fluid Desktop & Mobile 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
| // This file requires Sass & Compass. | |
| // | |
| // - http://sass-lang.com | |
| // - http://compass-style.org | |
| // For box-sizing. | |
| @import compass/css3 | |
| // `Clear floated elements. | |
| //---------------------------------------------------------------------------------------------------- | |
| // http://sonspring.com/journal/clearing-floats | |
| .clear | |
| clear: both | |
| display: block | |
| overflow: hidden | |
| visibility: hidden | |
| width: 0 | |
| height: 0 | |
| // http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified | |
| .clearfix:before, | |
| .clearfix:after, | |
| .container:before, | |
| .container:after | |
| content: '.' | |
| display: block | |
| overflow: hidden | |
| visibility: hidden | |
| font-size: 0 | |
| line-height: 0 | |
| width: 0 | |
| height: 0 | |
| .clearfix:after, | |
| .container:after | |
| clear: both | |
| // `Container | |
| //---------------------------------------------------------------------------------------------------- | |
| .container | |
| margin-left: auto | |
| margin-right: auto | |
| padding-left: 10px | |
| padding-right: 10px | |
| max-width: 1200px // Or whatever. | |
| // `Percentage based widths. | |
| //---------------------------------------------------------------------------------------------------- | |
| .width-5, | |
| .width-10, | |
| .width-15, | |
| .width-20, | |
| .width-25, | |
| .width-30, | |
| .width-33, | |
| .width-35, | |
| .width-40, | |
| .width-45, | |
| .width-50, | |
| .width-55, | |
| .width-60, | |
| .width-65, | |
| .width-66, | |
| .width-70, | |
| .width-75, | |
| .width-80, | |
| .width-85, | |
| .width-90, | |
| .width-95, | |
| .width-100, | |
| .mobile-width-5, | |
| .mobile-width-10, | |
| .mobile-width-15, | |
| .mobile-width-20, | |
| .mobile-width-25, | |
| .mobile-width-30, | |
| .mobile-width-33, | |
| .mobile-width-35, | |
| .mobile-width-40, | |
| .mobile-width-45, | |
| .mobile-width-50, | |
| .mobile-width-55, | |
| .mobile-width-60, | |
| .mobile-width-65, | |
| .mobile-width-66, | |
| .mobile-width-70, | |
| .mobile-width-75, | |
| .mobile-width-80, | |
| .mobile-width-85, | |
| .mobile-width-90, | |
| .mobile-width-95, | |
| .mobile-width-100 | |
| +box-sizing(border-box) | |
| padding-left: 10px | |
| padding-right: 10px | |
| .is-parent | |
| padding-left: 0 | |
| padding-right: 0 | |
| // `Push & Pull, to rearrange column order (for potential "SEO"). | |
| //---------------------------------------------------------------------------------------------------- | |
| .push-5, | |
| .push-10, | |
| .push-15, | |
| .push-20, | |
| .push-25, | |
| .push-30, | |
| .push-33, | |
| .push-35, | |
| .push-40, | |
| .push-45, | |
| .push-50, | |
| .push-55, | |
| .push-60, | |
| .push-65, | |
| .push-66, | |
| .push-70, | |
| .push-75, | |
| .push-80, | |
| .push-85, | |
| .push-90, | |
| .push-95, | |
| .pull-5, | |
| .pull-10, | |
| .pull-15, | |
| .pull-20, | |
| .pull-25, | |
| .pull-30, | |
| .pull-33, | |
| .pull-35, | |
| .pull-40, | |
| .pull-45, | |
| .pull-50, | |
| .pull-55, | |
| .pull-60, | |
| .pull-65, | |
| .pull-66, | |
| .pull-70, | |
| .pull-75, | |
| .pull-80, | |
| .pull-85, | |
| .pull-90, | |
| .pull-95, | |
| .mobile-push-5, | |
| .mobile-push-10, | |
| .mobile-push-15, | |
| .mobile-push-20, | |
| .mobile-push-25, | |
| .mobile-push-30, | |
| .mobile-push-33, | |
| .mobile-push-35, | |
| .mobile-push-40, | |
| .mobile-push-45, | |
| .mobile-push-50, | |
| .mobile-push-55, | |
| .mobile-push-60, | |
| .mobile-push-65, | |
| .mobile-push-66, | |
| .mobile-push-70, | |
| .mobile-push-75, | |
| .mobile-push-80, | |
| .mobile-push-85, | |
| .mobile-push-90, | |
| .mobile-push-95, | |
| .mobile-pull-5, | |
| .mobile-pull-10, | |
| .mobile-pull-15, | |
| .mobile-pull-20, | |
| .mobile-pull-25, | |
| .mobile-pull-30, | |
| .mobile-pull-33, | |
| .mobile-pull-35, | |
| .mobile-pull-40, | |
| .mobile-pull-45, | |
| .mobile-pull-50, | |
| .mobile-pull-55, | |
| .mobile-pull-60, | |
| .mobile-pull-65, | |
| .mobile-pull-66, | |
| .mobile-pull-70, | |
| .mobile-pull-75, | |
| .mobile-pull-80, | |
| .mobile-pull-85, | |
| .mobile-pull-90, | |
| .mobile-pull-95 | |
| position: relative |
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
| // This file requires Sass & Compass. | |
| // | |
| // - http://sass-lang.com | |
| // - http://compass-style.org | |
| // For box-sizing. | |
| @import compass/css3 | |
| // `Percentage based widths. | |
| //---------------------------------------------------------------------------------------------------- | |
| .width-5, | |
| .width-10, | |
| .width-15, | |
| .width-20, | |
| .width-25, | |
| .width-30, | |
| .width-33, | |
| .width-35, | |
| .width-40, | |
| .width-45, | |
| .width-50, | |
| .width-55, | |
| .width-60, | |
| .width-65, | |
| .width-66, | |
| .width-70, | |
| .width-75, | |
| .width-80, | |
| .width-85, | |
| .width-90, | |
| .width-95, | |
| .width-100 | |
| float: left | |
| .width-5 | |
| width: 5% | |
| .width-10 | |
| width: 10% | |
| .width-15 | |
| width: 15% | |
| .width-20 | |
| width: 20% | |
| .width-25 | |
| width: 25% | |
| .width-30 | |
| width: 30% | |
| .width-33 | |
| width: 33.33333% | |
| .width-35 | |
| width: 35% | |
| .width-40 | |
| width: 40% | |
| .width-45 | |
| width: 45% | |
| .width-50 | |
| width: 50% | |
| .width-55 | |
| width: 55% | |
| .width-60 | |
| width: 60% | |
| .width-65 | |
| width: 65% | |
| .width-66 | |
| width: 66.66666% | |
| .width-70 | |
| width: 70% | |
| .width-75 | |
| width: 75% | |
| .width-80 | |
| width: 80% | |
| .width-85 | |
| width: 85% | |
| .width-90 | |
| width: 90% | |
| .width-95 | |
| width: 95% | |
| .width-100 | |
| width: 100% | |
| // `Prefix, to add extra columns before. | |
| //---------------------------------------------------------------------------------------------------- | |
| .prefix-5 | |
| margin-left: 5% | |
| .prefix-10 | |
| margin-left: 10% | |
| .prefix-15 | |
| margin-left: 15% | |
| .prefix-20 | |
| margin-left: 20% | |
| .prefix-25 | |
| margin-left: 25% | |
| .prefix-30 | |
| margin-left: 30% | |
| .prefix-33 | |
| margin-left: 33.33333% | |
| .prefix-35 | |
| margin-left: 35% | |
| .prefix-40 | |
| margin-left: 40% | |
| .prefix-45 | |
| margin-left: 45% | |
| .prefix-50 | |
| margin-left: 50% | |
| .prefix-55 | |
| margin-left: 55% | |
| .prefix-60 | |
| margin-left: 60% | |
| .prefix-65 | |
| margin-left: 65% | |
| .prefix-66 | |
| margin-left: 66.66666% | |
| .prefix-70 | |
| margin-left: 70% | |
| .prefix-75 | |
| margin-left: 75% | |
| .prefix-80 | |
| margin-left: 80% | |
| .prefix-85 | |
| margin-left: 85% | |
| .prefix-90 | |
| margin-left: 90% | |
| .prefix-95 | |
| margin-left: 95% | |
| // `Suffix, to add extra columns after. | |
| //---------------------------------------------------------------------------------------------------- | |
| .suffix-5 | |
| margin-right: 5% | |
| .suffix-10 | |
| margin-right: 10% | |
| .suffix-15 | |
| margin-right: 15% | |
| .suffix-20 | |
| margin-right: 20% | |
| .suffix-25 | |
| margin-right: 25% | |
| .suffix-30 | |
| margin-right: 30% | |
| .suffix-33 | |
| margin-right: 33.33333% | |
| .suffix-35 | |
| margin-right: 35% | |
| .suffix-40 | |
| margin-right: 40% | |
| .suffix-45 | |
| margin-right: 45% | |
| .suffix-50 | |
| margin-right: 50% | |
| .suffix-55 | |
| margin-right: 55% | |
| .suffix-60 | |
| margin-right: 60% | |
| .suffix-65 | |
| margin-right: 65% | |
| .suffix-66 | |
| margin-right: 66.66666% | |
| .suffix-70 | |
| margin-right: 70% | |
| .suffix-75 | |
| margin-right: 75% | |
| .suffix-80 | |
| margin-right: 80% | |
| .suffix-85 | |
| margin-right: 85% | |
| .suffix-90 | |
| margin-right: 90% | |
| .suffix-95 | |
| margin-right: 95% | |
| // `Push & Pull, to rearrange column order (for potential "SEO"). | |
| //---------------------------------------------------------------------------------------------------- | |
| // | |
| // Push: | |
| // | |
| .push-5 | |
| left: 5% | |
| .push-10 | |
| left: 10% | |
| .push-15 | |
| left: 15% | |
| .push-20 | |
| left: 20% | |
| .push-25 | |
| left: 25% | |
| .push-30 | |
| left: 30% | |
| .push-33 | |
| left: 33.33333% | |
| .push-35 | |
| left: 35% | |
| .push-40 | |
| left: 40% | |
| .push-45 | |
| left: 45% | |
| .push-50 | |
| left: 50% | |
| .push-55 | |
| left: 55% | |
| .push-60 | |
| left: 60% | |
| .push-65 | |
| left: 65% | |
| .push-66 | |
| left: 66.66666% | |
| .push-70 | |
| left: 70% | |
| .push-75 | |
| left: 75% | |
| .push-80 | |
| left: 80% | |
| .push-85 | |
| left: 85% | |
| .push-90 | |
| left: 90% | |
| .push-95 | |
| left: 95% | |
| // | |
| // Pull: | |
| // | |
| .pull-5 | |
| left: -5% | |
| .pull-10 | |
| left: -10% | |
| .pull-15 | |
| left: -15% | |
| .pull-20 | |
| left: -20% | |
| .pull-25 | |
| left: -25% | |
| .pull-30 | |
| left: -30% | |
| .pull-33 | |
| left: -33.33333% | |
| .pull-35 | |
| left: -35% | |
| .pull-40 | |
| left: -40% | |
| .pull-45 | |
| left: -45% | |
| .pull-50 | |
| left: -50% | |
| .pull-55 | |
| left: -55% | |
| .pull-60 | |
| left: -60% | |
| .pull-65 | |
| left: -65% | |
| .pull-66 | |
| left: -66.66666% | |
| .pull-70 | |
| left: -70% | |
| .pull-75 | |
| left: -75% | |
| .pull-80 | |
| left: -80% | |
| .pull-85 | |
| left: -85% | |
| .pull-90 | |
| left: -90% | |
| .pull-95 | |
| left: -95% | |
| // `Don't try this at home, kids... | |
| // Simulate box-sizing support in IE7. | |
| //---------------------------------------------------------------------------------------------------- | |
| *:first-child + html | |
| .width-5, | |
| .width-10, | |
| .width-15, | |
| .width-20, | |
| .width-25, | |
| .width-30, | |
| .width-33, | |
| .width-35, | |
| .width-40, | |
| .width-45, | |
| .width-50, | |
| .width-55, | |
| .width-60, | |
| .width-65, | |
| .width-66, | |
| .width-70, | |
| .width-75, | |
| .width-80, | |
| .width-85, | |
| .width-90, | |
| .width-95, | |
| .width-100 | |
| padding-left: 0 | |
| padding-right: 0 | |
| & > * | |
| margin-left: 10px | |
| margin-right: 10px |
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
| // This file requires Sass & Compass. | |
| // | |
| // - http://sass-lang.com | |
| // - http://compass-style.org | |
| // For box-sizing. | |
| @import compass/css3 | |
| // `Percentage based widths. | |
| //---------------------------------------------------------------------------------------------------- | |
| .mobile-width-5, | |
| .mobile-width-10, | |
| .mobile-width-15, | |
| .mobile-width-20, | |
| .mobile-width-25, | |
| .mobile-width-30, | |
| .mobile-width-33, | |
| .mobile-width-35, | |
| .mobile-width-40, | |
| .mobile-width-45, | |
| .mobile-width-50, | |
| .mobile-width-55, | |
| .mobile-width-60, | |
| .mobile-width-65, | |
| .mobile-width-66, | |
| .mobile-width-70, | |
| .mobile-width-75, | |
| .mobile-width-80, | |
| .mobile-width-85, | |
| .mobile-width-90, | |
| .mobile-width-95, | |
| .mobile-width-100 | |
| float: left | |
| .mobile-width-5 | |
| width: 5% | |
| .mobile-width-10 | |
| width: 10% | |
| .mobile-width-15 | |
| width: 15% | |
| .mobile-width-20 | |
| width: 20% | |
| .mobile-width-25 | |
| width: 25% | |
| .mobile-width-30 | |
| width: 30% | |
| .mobile-width-33 | |
| width: 33.33333% | |
| .mobile-width-35 | |
| width: 35% | |
| .mobile-width-40 | |
| width: 40% | |
| .mobile-width-45 | |
| width: 45% | |
| .mobile-width-50 | |
| width: 50% | |
| .mobile-width-55 | |
| width: 55% | |
| .mobile-width-60 | |
| width: 60% | |
| .mobile-width-65 | |
| width: 65% | |
| .mobile-width-66 | |
| width: 66.66666% | |
| .mobile-width-70 | |
| width: 70% | |
| .mobile-width-75 | |
| width: 75% | |
| .mobile-width-80 | |
| width: 80% | |
| .mobile-width-85 | |
| width: 85% | |
| .mobile-width-90 | |
| width: 90% | |
| .mobile-width-95 | |
| width: 95% | |
| .mobile-width-100 | |
| width: 100% | |
| // `Prefix, to add extra columns before. | |
| //---------------------------------------------------------------------------------------------------- | |
| .mobile-prefix-5 | |
| margin-left: 5% | |
| .mobile-prefix-10 | |
| margin-left: 10% | |
| .mobile-prefix-15 | |
| margin-left: 15% | |
| .mobile-prefix-20 | |
| margin-left: 20% | |
| .mobile-prefix-25 | |
| margin-left: 25% | |
| .mobile-prefix-30 | |
| margin-left: 30% | |
| .mobile-prefix-33 | |
| margin-left: 33.33333% | |
| .mobile-prefix-35 | |
| margin-left: 35% | |
| .mobile-prefix-40 | |
| margin-left: 40% | |
| .mobile-prefix-45 | |
| margin-left: 45% | |
| .mobile-prefix-50 | |
| margin-left: 50% | |
| .mobile-prefix-55 | |
| margin-left: 55% | |
| .mobile-prefix-60 | |
| margin-left: 60% | |
| .mobile-prefix-65 | |
| margin-left: 65% | |
| .mobile-prefix-66 | |
| margin-left: 66.66666% | |
| .mobile-prefix-70 | |
| margin-left: 70% | |
| .mobile-prefix-75 | |
| margin-left: 75% | |
| .mobile-prefix-80 | |
| margin-left: 80% | |
| .mobile-prefix-85 | |
| margin-left: 85% | |
| .mobile-prefix-90 | |
| margin-left: 90% | |
| .mobile-prefix-95 | |
| margin-left: 95% | |
| // `Suffix, to add extra columns after. | |
| //---------------------------------------------------------------------------------------------------- | |
| .mobile-suffix-5 | |
| margin-right: 5% | |
| .mobile-suffix-10 | |
| margin-right: 10% | |
| .mobile-suffix-15 | |
| margin-right: 15% | |
| .mobile-suffix-20 | |
| margin-right: 20% | |
| .mobile-suffix-25 | |
| margin-right: 25% | |
| .mobile-suffix-30 | |
| margin-right: 30% | |
| .mobile-suffix-33 | |
| margin-right: 33.33333% | |
| .mobile-suffix-35 | |
| margin-right: 35% | |
| .mobile-suffix-40 | |
| margin-right: 40% | |
| .mobile-suffix-45 | |
| margin-right: 45% | |
| .mobile-suffix-50 | |
| margin-right: 50% | |
| .mobile-suffix-55 | |
| margin-right: 55% | |
| .mobile-suffix-60 | |
| margin-right: 60% | |
| .mobile-suffix-65 | |
| margin-right: 65% | |
| .mobile-suffix-66 | |
| margin-right: 66.66666% | |
| .mobile-suffix-70 | |
| margin-right: 70% | |
| .mobile-suffix-75 | |
| margin-right: 75% | |
| .mobile-suffix-80 | |
| margin-right: 80% | |
| .mobile-suffix-85 | |
| margin-right: 85% | |
| .mobile-suffix-90 | |
| margin-right: 90% | |
| .mobile-suffix-95 | |
| margin-right: 95% | |
| // `Push & Pull, to rearrange column order (for potential "SEO"). | |
| //---------------------------------------------------------------------------------------------------- | |
| // | |
| // Push: | |
| // | |
| .mobile-push-5 | |
| left: 5% | |
| .mobile-push-10 | |
| left: 10% | |
| .mobile-push-15 | |
| left: 15% | |
| .mobile-push-20 | |
| left: 20% | |
| .mobile-push-25 | |
| left: 25% | |
| .mobile-push-30 | |
| left: 30% | |
| .mobile-push-33 | |
| left: 33.33333% | |
| .mobile-push-35 | |
| left: 35% | |
| .mobile-push-40 | |
| left: 40% | |
| .mobile-push-45 | |
| left: 45% | |
| .mobile-push-50 | |
| left: 50% | |
| .mobile-push-55 | |
| left: 55% | |
| .mobile-push-60 | |
| left: 60% | |
| .mobile-push-65 | |
| left: 65% | |
| .mobile-push-66 | |
| left: 66.66666% | |
| .mobile-push-70 | |
| left: 70% | |
| .mobile-push-75 | |
| left: 75% | |
| .mobile-push-80 | |
| left: 80% | |
| .mobile-push-85 | |
| left: 85% | |
| .mobile-push-90 | |
| left: 90% | |
| .mobile-push-95 | |
| left: 95% | |
| // | |
| // Pull: | |
| // | |
| .mobile-pull-5 | |
| left: -5% | |
| .mobile-pull-10 | |
| left: -10% | |
| .mobile-pull-15 | |
| left: -15% | |
| .mobile-pull-20 | |
| left: -20% | |
| .mobile-pull-25 | |
| left: -25% | |
| .mobile-pull-30 | |
| left: -30% | |
| .mobile-pull-33 | |
| left: -33.33333% | |
| .mobile-pull-35 | |
| left: -35% | |
| .mobile-pull-40 | |
| left: -40% | |
| .mobile-pull-45 | |
| left: -45% | |
| .mobile-pull-50 | |
| left: -50% | |
| .mobile-pull-55 | |
| left: -55% | |
| .mobile-pull-60 | |
| left: -60% | |
| .mobile-pull-65 | |
| left: -65% | |
| .mobile-pull-66 | |
| left: -66.66666% | |
| .mobile-pull-70 | |
| left: -70% | |
| .mobile-pull-75 | |
| left: -75% | |
| .mobile-pull-80 | |
| left: -80% | |
| .mobile-pull-85 | |
| left: -85% | |
| .mobile-pull-90 | |
| left: -90% | |
| .mobile-pull-95 | |
| left: -95% | |
| // `Don't try this at home, kids... | |
| // Simulate box-sizing support in IE7. | |
| //---------------------------------------------------------------------------------------------------- | |
| *:first-child + html | |
| .mobile-width-5, | |
| .mobile-width-10, | |
| .mobile-width-15, | |
| .mobile-width-20, | |
| .mobile-width-25, | |
| .mobile-width-30, | |
| .mobile-width-33, | |
| .mobile-width-35, | |
| .mobile-width-40, | |
| .mobile-width-45, | |
| .mobile-width-50, | |
| .mobile-width-55, | |
| .mobile-width-60, | |
| .mobile-width-65, | |
| .mobile-width-66, | |
| .mobile-width-70, | |
| .mobile-width-75, | |
| .mobile-width-80, | |
| .mobile-width-85, | |
| .mobile-width-90, | |
| .mobile-width-95, | |
| .mobile-width-100 | |
| padding-left: 0 | |
| padding-right: 0 | |
| & > * | |
| margin-left: 10px | |
| margin-right: 10px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment