Created
May 29, 2013 12:35
-
-
Save kraftner/5669954 to your computer and use it in GitHub Desktop.
Sass Mixins for row dividers in a fully fluid multi-row grid layout that support variable element height and count.
Blog-Post: http://kraftner.com/en/blog/responsive-dividers-sass-mixins/
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Responsive Dividers</title> | |
| <style type="text/css"> | |
| /* Demo Styling */ | |
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| li{ | |
| background-color:#ccc; | |
| text-align:center; | |
| line-height:50px; | |
| vertical-align:middle; | |
| list-style-type:none; | |
| } | |
| /* */ | |
| ul{ | |
| padding-top:11px; | |
| } | |
| li { | |
| float:left; | |
| margin-right:5%; | |
| position:relative; | |
| margin-bottom:11px; | |
| } | |
| li:after,ul:after{ | |
| border-bottom: 3px dotted #00A0FF; | |
| display: block; | |
| height:0; | |
| position:absolute; | |
| top:-7px; | |
| } | |
| ul:after{ | |
| content: ""; | |
| clear:both; | |
| position:relative; | |
| } | |
| /* 3 Columns */ | |
| @media (min-width: 500px) { | |
| li{ | |
| width: 30%; | |
| } | |
| li:nth-child(3n){ | |
| margin-right:0; | |
| } | |
| li:nth-child(3n+1){ | |
| clear:both; | |
| } | |
| li:nth-child(3n+1):after{ | |
| width:333.33%; | |
| } | |
| li:nth-child(3n+1):after, ul:after { | |
| content: ""; | |
| } | |
| } | |
| /* 2 Columns */ | |
| @media (min-width:300px) and (max-width: 500px) { | |
| li{ | |
| width: 47.5%; | |
| } | |
| li:nth-child(2n){ | |
| margin-right:0; | |
| } | |
| li:nth-child(2n+1){ | |
| clear:both; | |
| } | |
| li:nth-child(2n+1):after{ | |
| width:210.53%; | |
| } | |
| li:nth-child(2n+1):after, ul:after { | |
| content: ""; | |
| } | |
| } | |
| /* 1 Column */ | |
| @media (max-width: 300px) { | |
| li{ | |
| float:none; | |
| margin-right:0; | |
| } | |
| li:after{ | |
| width:100%; | |
| } | |
| li:after, ul:after { | |
| content: ""; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>Element 1 is a little bit too long</li> | |
| <li>Element 2</li> | |
| <li>Element 3</li> | |
| <li>Element 4</li> | |
| <li>Element 5</li> | |
| <li>Element 6</li> | |
| <li>Element 7</li> | |
| <li>Element 8 is pretty long as well</li> | |
| <li>Element 9</li> | |
| <li>Element 10</li> | |
| <li>Element 11</li> | |
| </ul> | |
| </body> | |
| </html> |
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
| ul{ | |
| /* $show_last_row: true, $show_first_row: false, $border-style:solid 1px #000, $gap:20px, $margin-top:10px */ | |
| @include divider-container(true,false,solid 1px #000,20px,10px; | |
| } | |
| @media (min-width: 500px) { | |
| ul{ | |
| /* $columns*/ | |
| @include divider(3); | |
| /* $columns, $gutter: 5% */ | |
| @include columns(3); | |
| } | |
| } | |
| @media (min-width:300px) and (max-width: 500px) { | |
| ul{ | |
| @include divider(2); | |
| @include columns(2); | |
| } | |
| } | |
| @media (max-width: 300px) { | |
| ul{ | |
| @include divider(1); | |
| @include columns(1); | |
| } | |
| } |
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
| @mixin divider-container($show_last_row: true, $show_first_row: false, $border-style:solid 1px #000, $gap:20px, $margin-top:10px){ | |
| @if $show_first_row{ | |
| padding-top:$margin-top; | |
| } | |
| & > *{ | |
| margin-bottom: $gap; | |
| float:left; | |
| position:relative; | |
| } | |
| & > *:after, &:after{ | |
| display:block; | |
| height:0; | |
| left:0; | |
| top:$margin-top - $gap; | |
| border-bottom:$border-style; | |
| } | |
| @if $show_last_row{ | |
| &:after{ | |
| content: ""; | |
| clear:both; | |
| position:relative; | |
| } | |
| } | |
| & > *:after{ | |
| position:absolute; | |
| } | |
| } | |
| @mixin divider($columns){ | |
| @if $columns == 1{ | |
| & > *:after{ | |
| content: ""; | |
| } | |
| } @else { | |
| & > *:nth-child(#{$columns}n+#{1+$columns}):after{ | |
| content: ""; | |
| } | |
| } | |
| } | |
| @mixin columns($columns, $gutter : 5%){ | |
| $width : ( 100% - ($columns - 1) * $gutter ) / $columns; | |
| & > *:after{ | |
| width: $columns * 100% + ( 100% / ($width / $gutter) ) * ($columns - 1); | |
| } | |
| & > *{ | |
| width: $width; | |
| margin-right: $gutter; | |
| &:nth-child(#{$columns}n+1){ | |
| clear:both; | |
| } | |
| } | |
| @if $columns == 1{ | |
| & > *{ | |
| margin-right: 0; | |
| } | |
| } @else { | |
| & > *:nth-child(#{$columns}n){ | |
| margin-right: 0; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment