Layouts to a Rhythm

Just  a few thoughts on using mixins and variables to create a rhythm in a design without relying on a grid. (Though there’s an implied grid of $variable x $variable)

Much as I love frameworks and grids, I’ve found them a bit forced while developing templates and themes for woop.ie, our digital publishing platform.

Multiple screen sizes and devices present a challenge - I might want to have wider side gutters for iPad (to allow for clumsy thumbs) than on screen. And with (mostly) single column content having multiple grid options seems a bit redundant.

Another issue is type scaling. Some responsive designs just scale the body font-size proportionally as the screen gets bigger. I find this a bit lazy/confining. Why not have dramatic leaps as real estate increases. Let’s have headings get six times bigger from mobile to 27” iMac!

What I’ve been experimenting with instead is designing to a rhythm - defining a unit and using multiples of that everywhere I go, so I know that there’s a harmony and relationship between type size, line heights, margins and paddings.

It’s all done with the magic of Sass. Here I define my base units.

/* Widths */
$sidegutter: 30px; /* Left and right spacing */
$basegrid: 15px; /* Set a base scale */ 

Then we make a mixin for type size:

@mixin typesize ($size, $lineheight, $marginbottom) {
 font-size: $basegrid*$size;
 line-height: $basegrid*$lineheight;
 margin:0 0 $basegrid*$marginbottom 0;
}

Now, every time we style a piece of text (headings, lists etc.) we use this mixing and simple multiples to make sure there’s a harmony throughout our design.

 h1 {
 font-family: $font1;
 @include typesize
 (1.75, 2, 1);
 } 

Different sizes get different sized types, but there’s always a relationship there, without having to do any fancy maths in your head. Plus, if you tweak a lot by eye like I do, it makes experimenting so much easier.

 /* Over 768px */
 @media screen and (min-width: 769px) { 

 hgroup { 
 margin-left: $sidegutter*2;
 margin-right: $sidegutter*2;

 h1 {
 @include typesize
 (4, 4, 1);
 margin:$basegrid*2 0 $basegrid 0;
 }

We can then do interesting things like outdenting pullquotes, and still keep a relationship to the overall design

 .fig-image, .fig-video, .fig-pullquote {
 clear: left;
 float: left;
 margin: 0 $basegrid*3 $basegrid 0;
 margin-left: -($sidegutter*4); /*match indent of article */
 padding: $basegrid*0.25 0 0 0;
 width: $basegrid*28;
}

The beauty of this system is that if I change the base body font and it all feels too small or too big, I can change my $basegrid by 1 or 2 pixels and everything will reflow and refactor to reflect that change.

There’s so much more to this system and I’m only really scratching the surface - if you’ve any thoughts on it tweet me @irishstu.