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, 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

Repsonive blockquote

 .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.

Leave a Reply

Your email address will not be published. Required fields are marked *