3

I've searched extensively, and can't seem to find a consistent way that people handle the top/bottom margins between modules in a... modular way. I like the idea of just using a generic wrapper div with the css as .page-area { margin-bottom: 1em }, but in the real world, designers aren't that consistent, and you end up with multiple variations on that container. I've used this sass code on a few projects, and it worked alright, but I didn't necessarily love it (credit to Nicole Sullivan):

*p,m = padding,margin
*a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
*s,m,l,n = small($space-half),medium($space),large($space-double),none(0)

*/

$space : 1em;
$space-half : $space/2;
$space-double : $space*2;

 .ptn, .pvn, .pan { padding-top:     0; }
 .pts, .pvs, .pas { padding-top:     $space-half; }
 .ptm, .pvm, .pam { padding-top:     $space; }
 .ptl, .pvl, .pal { padding-top:     $space-double; }
 .prn, .phn, .pan { padding-right:   0; }
 .prs, .phs, .pas { padding-right:   $space-half; }
 .prm, .phm, .pam { padding-right:   $space; }
 .prl, .phl, .pal { padding-right:   $space-double; }
 .pbn, .pvn, .pan { padding-bottom:  0; }
 .pbs, .pvs, .pas { padding-bottom:  $space-half; }
 .pbm, .pvm, .pam { padding-bottom:  $space; }
 .pbl, .pvl, .pal { padding-bottom:  $space-double; }
 .pln, .phn, .pan { padding-left:    0; }
 .pls, .phs, .pas { padding-left:    $space-half; }
 .plm, .phm, .pam { padding-left:    $space; }
 .pll, .phl, .pal { padding-left:    $space-double; }
 .mtn, .mvn, .man { margin-top:      0; }
 .mts, .mvs, .mas { margin-top:      $space-half; }
 .mtm, .mvm, .mam { margin-top:      $space; }
 .mtl, .mvl, .mal { margin-top:      $space-double; }
 .mrn, .mhn, .man { margin-right:    0; }
 .mrs, .mhs, .mas { margin-right:    $space-half; }
 .mrm, .mhm, .mam { margin-right:    $space; }
 .mrl, .mhl, .mal { margin-right:    $space-double; }
 .mbn, .mvn, .man { margin-bottom:   0; }
 .mbs, .mvs, .mas { margin-bottom:   $space-half; }
 .mbm, .mvm, .mam { margin-bottom:   $space; }
 .mbl, .mvl, .mal { margin-bottom:   $space-double; }
 .mln, .mhn, .man { margin-left:     0; }
 .mls, .mhs, .mas { margin-left:     $space-half; }
 .mlm, .mhm, .mam { margin-left:     $space; }
 .mll, .mhl, .mal { margin-left:     $space-double; }

I realize that questions like this can potentially start discussions, but that's not my intent - I'm just wondering if there is a single common best practice for consistent vertical margin/padding of modules and page sections? SMACSS doesn't seem to touch on it.

Ivan Durst
  • 1,163
  • 2
  • 12
  • 24
  • SO is not the appropriate place for opinionated "best practices" type questions. – cimmanon Nov 13 '14 at 20:23
  • 1
    @cimmanon: Most questions on SO are 'opinionated "best practices"' questions - the voting system lets us decide which is the optimal solution, which strengthens the skill and confidence of all the developers who view it. I've googled and searched SO endlessly and cannot find an answer to this question, so I feel it's appropriate to ask it. I didn't ask for a list or discussion of good practices, I asked for a single *best* practice, hoping to get pointed to a resource that has the *most* commonly used answer (if there is one), which will be confirmed by the votes on it. – Ivan Durst Nov 14 '14 at 01:22

1 Answers1

0

I don't know if this will be helpful for you, but this is usually what I do.

I set a vertical rhythm variable based on my defaults, and then make a placeholder class for vertical rhythm, which I extend on elements that need it.

$base-font-size: 20px !default
$base-line-height: 1.3
$base-vertical-rhythm: ceil($base-font-size * $base-line-height)

%base-vertical-rhythm
    margin-bottom: em($base-vertical-rhythm)

blockquote,
dl,
ol,
p,
ul
    @extend %base-vertical-rhythm

Compass also has some presets for vertical rhythm.

faustman
  • 106
  • 3