Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Responsive, Pretty CSS Columns in LESS/SASS
/* Media Queries Assume: 1em = 16px */
/* ================================================= */
/* Helpers
/* ================================================= */
.clearfix{*zoom: 1;&:before,&:after{display:table;content:"";}&:after{clear:both;}}
.box-sizing( @boxmodel ) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
-ms-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
/* ================================================= */
/* Columns
/* ================================================= */
@columnGutter : 20px;
.columns{
list-style: none;
margin:0;
padding:0;
width:100%;
.clearfix();
img,
input,
select,
textarea{
max-width: 100%;
}
& > .column{
float:left;
width:100%;
.box-sizing(border-box);
}
&.two > .column,
&.col-2 > .column{
&:nth-child(odd){
clear: left;
}
}
&.three > .column,
&.col-3 > .column{
&:nth-child(3n+1){
clear: left;
}
}
&.four > .column,
&.col-4 > .column{
&:nth-child(4n+1){
clear: left;
}
}
}
/* ================================================= */
/* Mobile layout
/* 240–479 px
/* ================================================= */
@media screen and (min-width: 15em) { /** 16px * 15 = 240px **/
.columns{
& > .column{
margin-bottom: @columnGutter;
}
}
}
/* ================================================= */
/* Wide mobile layout
/* 480-599 px
/* ================================================= */
@media screen and (min-width: 30em) { /** 16px * 30 = 480px **/
}
/* ================================================= */
/* Tablet layout
/* 600-959 px
/* ================================================= */
@media screen and (min-width: 37.5em) { /** 16px * 37.5 = 600px **/
.columns{
& > .column{
margin-bottom: @columnGutter * 1.5;
}
&.two > .column,
&.col-2 > .column,
&.four > .column,
&.col-4 > .column{
padding-left: 0;
padding-right: @columnGutter * (1/2);
width: 50%;
&:nth-child(even){
padding-left: @columnGutter * (1/2);
padding-right: 0;
}
}
}
}
/* ================================================= */
/* Widescreen layout
/* 960-1079 px
/* ================================================= */
@media screen and (min-width: 60em ) { /** 16px * 60 = 960px **/
.columns{
&.three > .column,
&.col-3 > .column{
padding-left: @columnGutter * (2/3);
width: 33.3333333333333%;
&:first-child,
&:nth-child(3n+1){
padding-left: 0;
padding-right: @columnGutter * (2/3);
}
&:nth-child(3n+2){
padding-left: @columnGutter * (1/3);
padding-right: @columnGutter * (1/3);
}
}
&.four > .column,
&.col-4 > .column{
padding-left: @columnGutter * (3/4);
width: 25%;
&:first-child,
&:nth-child(4n+1){
padding-left: 0;
padding-right: @columnGutter * (3/4);
}
&:nth-child(4n+2){
padding-left: @columnGutter * (1/4);
padding-right: @columnGutter * (2/4);
}
&:nth-child(4n+3){
padding-left: @columnGutter * (2/4);
padding-right: @columnGutter * (1/4);
}
}
}
}
/* Media Queries Assume: 1em = 16px */
/* ================================================= */
/* Helpers
/* ================================================= */
.clearfix{*zoom: 1;&:before,&:after{display:table;content:"";}&:after{clear:both;}}
@mixin box-sizing( $boxmodel ) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
-ms-box-sizing: $boxmodel;
box-sizing: $boxmodel;
}
/* ================================================= */
/* Columns
/* ================================================= */
$columnGutter : 20px;
.columns{
list-style: none;
margin:0;
padding:0;
width:100%;
@extend .clearfix;
img,
input,
select,
textarea{
max-width: 100%;
}
& > .column{
float:left;
width:100%;
@include box-sizing(border-box);
}
&.two > .column,
&.col-2 > .column{
&:nth-child(odd){
clear: left;
}
}
&.three > .column,
&.col-3 > .column{
&:nth-child(3n+1){
clear: left;
}
}
&.four > .column,
&.col-4 > .column{
&:nth-child(4n+1){
clear: left;
}
}
}
/* ================================================= */
/* Mobile layout
/* 240–479 px
/* ================================================= */
@media screen and (min-width: 15em) { /** 16px * 15 = 240px **/
.columns{
& > .column{
margin-bottom: $columnGutter;
}
}
}
/* ================================================= */
/* Wide mobile layout
/* 480-599 px
/* ================================================= */
@media screen and (min-width: 30em) { /** 16px * 30 = 480px **/
}
/* ================================================= */
/* Tablet layout
/* 600-959 px
/* ================================================= */
@media screen and (min-width: 37.5em) { /** 16px * 37.5 = 600px **/
.columns{
& > .column{
margin-bottom: $columnGutter * 1.5;
}
&.two > .column,
&.col-2 > .column,
&.four > .column,
&.col-4 > .column{
padding-left: 0;
padding-right: $columnGutter * (1/2);
width: 50%;
&:nth-child(even){
padding-left: $columnGutter * (1/2);
padding-right: 0;
}
}
}
}
/* ================================================= */
/* Widescreen layout
/* 960-1079 px
/* ================================================= */
@media screen and (min-width: 60em ) { /** 16px * 60 = 960px **/
.columns{
&.three > .column,
&.col-3 > .column{
padding-left: $columnGutter * (2/3);
width: 33.3333333333333%;
&:first-child,
&:nth-child(3n+1){
padding-left: 0;
padding-right: $columnGutter * (2/3);
}
&:nth-child(3n+2){
padding-left: $columnGutter * (1/3);
padding-right: $columnGutter * (1/3);
}
}
&.four > .column,
&.col-4 > .column{
padding-left: $columnGutter * (3/4);
width: 25%;
&:first-child,
&:nth-child(4n+1){
padding-left: 0;
padding-right: $columnGutter * (3/4);
}
&:nth-child(4n+2){
padding-left: $columnGutter * (1/4);
padding-right: $columnGutter * (2/4);
}
&:nth-child(4n+3){
padding-left: $columnGutter * (2/4);
padding-right: $columnGutter * (1/4);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment