Created
June 12, 2014 18:35
-
-
Save DannyJoris/f7fa8809ffcc92a38f9b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
| <div class="container"> | |
| <div class="column">Column 1</div> | |
| <div class="column">Column 2</div> | |
| <div class="column">Column 3</div> | |
| <div class="column">Column 4</div> | |
| <div class="column">Column 5</div> | |
| <div class="column">Column 6</div> | |
| <div class="column">Column 7</div> | |
| <div class="column">Column 8</div> | |
| </div> |
This file contains hidden or 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
| // ---- | |
| // Sass (v3.3.8) | |
| // Compass (v1.0.0.alpha.19) | |
| // Zen Grids (v1.4) | |
| // ---- | |
| @import "zen"; | |
| // | |
| // @file _breakpoint-grid-breakdown.scss | |
| // Used to create grids with dynamic numbers of columns across | |
| // different breakpoints. | |
| // | |
| // http://www.chromaticsites.com/blog/responsive-grid-building-sass-and-zen-grids-tale-breakpoint-grid-breakdown-mixin | |
| // | |
| // Example usage: | |
| // .view-id-fancy-grid { | |
| // @include breakpoint-grid-breakdown(1 2 4); | |
| // } | |
| // .list-of-items { | |
| // @include breakpoint-grid-breakdown(1 2, $breakpoint-mobile $breakpoint-desktop, '.list-item'); | |
| // } | |
| // Example breakpoint variables. | |
| $breakpoint-mobile: 320px; | |
| $breakpoint-tablet: 768px; | |
| $breakpoint-desktop: 960px; | |
| // Breakpoint | |
| // A simple breakpoint mixin used within breakpoint-grid-breakdown. | |
| // Can be passed pixel values or previously defined breakpoint variables. | |
| @mixin breakpoint($breakpoint-size) { | |
| @media all and (min-width: $breakpoint-size) { | |
| @content; | |
| } | |
| } | |
| // Breakpoint Grid Breakdown | |
| // Displays a grid of items with a dynamic column count across breakpoints. | |
| // For use with Zen Grids and a breakpoint-oriented mixin. | |
| // @author Gus Childs http://drupal.org/user/1468898 | |
| // | |
| // @param list $column-counts | |
| // A list of how many columns should exist on the respective breakpoints. | |
| // @param list $breakpoints | |
| // A list of breakpoints to be used in the 'breakpoint' mixin. Corresponds | |
| // directly with the $column-counts list. Defaults to those commonly used. | |
| // @param string $selector | |
| // The selector of each individual grid item. Defaults to 'views-row'. | |
| @mixin breakpoint-grid-breakdown($column-counts, $breakpoints: $breakpoint-mobile $breakpoint-tablet $breakpoint-desktop, $selector: '> div') { | |
| #{$selector} { | |
| @each $breakpoint in $breakpoints { | |
| $key: index($breakpoints, $breakpoint); | |
| $column-count: nth($column-counts, $key); | |
| @include breakpoint($breakpoint) { | |
| @for $i from 1 through $column-count { | |
| $remainder: $i % $column-count; | |
| &:nth-child(#{$column-count}n+#{$remainder}) { | |
| $page-grid-column-span: $zen-column-count / $column-count; | |
| $page-grid-column-position: 1 + (($i - 1) * $page-grid-column-span); | |
| @include zen-grid-item($page-grid-column-span, $page-grid-column-position); | |
| @if $remainder == 1 or $column-count == 1 { | |
| clear: both; | |
| } @else { | |
| clear: none; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| } | |
| .container { | |
| @include breakpoint-grid-breakdown(1 2 4); | |
| //@include breakpoint-grid-breakdown(1 2 4, $breakpoint-mobile $breakpoint-tablet $breakpoint-desktop, '.column'); | |
| } | |
| .column { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border: 1px solid white; | |
| background: hotpink; | |
| font-family: sans-serif; | |
| color: white; | |
| } |
This file contains hidden or 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
| @media all and (min-width: 320px) { | |
| .container > div:nth-child(1n+0) { | |
| float: left; | |
| width: 100%; | |
| margin-left: 0%; | |
| margin-right: -100%; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| word-wrap: break-word; | |
| clear: both; | |
| } | |
| } | |
| @media all and (min-width: 768px) { | |
| .container > div:nth-child(2n+1) { | |
| float: left; | |
| width: 50%; | |
| margin-left: 0%; | |
| margin-right: -50%; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| word-wrap: break-word; | |
| clear: both; | |
| } | |
| .container > div:nth-child(2n+0) { | |
| float: left; | |
| width: 50%; | |
| margin-left: 50%; | |
| margin-right: -100%; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| word-wrap: break-word; | |
| clear: none; | |
| } | |
| } | |
| @media all and (min-width: 960px) { | |
| .container > div:nth-child(4n+1) { | |
| float: left; | |
| width: 25%; | |
| margin-left: 0%; | |
| margin-right: -25%; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| word-wrap: break-word; | |
| clear: both; | |
| } | |
| .container > div:nth-child(4n+2) { | |
| float: left; | |
| width: 25%; | |
| margin-left: 25%; | |
| margin-right: -50%; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| word-wrap: break-word; | |
| clear: none; | |
| } | |
| .container > div:nth-child(4n+3) { | |
| float: left; | |
| width: 25%; | |
| margin-left: 50%; | |
| margin-right: -75%; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| word-wrap: break-word; | |
| clear: none; | |
| } | |
| .container > div:nth-child(4n+0) { | |
| float: left; | |
| width: 25%; | |
| margin-left: 75%; | |
| margin-right: -100%; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| word-wrap: break-word; | |
| clear: none; | |
| } | |
| } | |
| .container:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .column { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border: 1px solid white; | |
| background: hotpink; | |
| font-family: sans-serif; | |
| color: white; | |
| } |
This file contains hidden or 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
| <div class="container"> | |
| <div class="column">Column 1</div> | |
| <div class="column">Column 2</div> | |
| <div class="column">Column 3</div> | |
| <div class="column">Column 4</div> | |
| <div class="column">Column 5</div> | |
| <div class="column">Column 6</div> | |
| <div class="column">Column 7</div> | |
| <div class="column">Column 8</div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment