Skip to content

Instantly share code, notes, and snippets.

@kraftner

kraftner/example.html

Created May 29, 2013 12:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kraftner/5669954 to your computer and use it in GitHub Desktop.
Save kraftner/5669954 to your computer and use it in GitHub Desktop.
Download ZIP
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/
Raw
example.html
<!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>
Raw
example.scss
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);
}
}
Raw
responsive-dividers-mixins.scss
@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