I’m just now getting around to publishing some of the helpers I’ve created recently that I found useful (and maybe you will, too).
So, to start: Columns. Almost all of my projects end up needing some combination of columns (without the hassle of grid frameworks), and since I’ve been building responsive sites, I needed to create something simple and reusable to solve my responsive column problem so that content would flow nicely from mobile to desktop.
I found that I rarely used anything above 4 columns, so if you need more than that you’ll see a method to the madness below. I’ve based my media query breakpoints on the Frameless grid (mobile, wide mobile, tablet, widescreen) and I keep my column-collapsing relative to the number of columns (i.e., I don’t flow a 3 column layout into 2, but I do flow 4 into 2).
Having variable gutter spacing between projects was always necessary, so simple set columnGutter
to whatever spacing size/unit you prefer and have at it.
Below is the Sass syntax, but for those interested in LESS, see this gist for both options.
Sass Syntax
/* 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); } } } }