CodePen

HTML

            
              <h1>A LESS vertical rhythm mixin</h1>

<h2>font-size, line-height and margin-bottom</h2>

<p>This little mixin, helps create vertical rhythm for your website.</p>
<p>It does this by calculating the font size, the line height and bottom margin</p>

<h6>notes</h6>
  <small>the vertical rhythm will probably break when you add photos. I'd suggest using <a href="http://www.twitter.com/_dte">Dan's</a> great little plugin - <a href="http://daneden.me/baseline/">Baseline.js</a> which will help to fix this.</small>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              // initial variables set-up

@doc-font-size:16;
@doc-line-height:24;

// mixin

// full-fat vertical rhythm
.font-size (@size) {
  font-size: 0px + @size;
  font-size: 0rem + @size / @doc-font-size;
  line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
  margin-bottom: 0px + @doc-line-height;
	margin-bottom: 0rem + (@doc-line-height / @doc-font-size);
}

// just the REMs
.font-rem (@size) {
  font-size: 0px + @size;
  font-size: 0rem + @size / @doc-font-size;
}

// just font-size and line-height
.font (@size) {
  font-size: 0px + @size;
  font-size: 0rem + @size / @doc-font-size;
  line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
}


// set-up the body font-size / line-height
body {
	margin-top: 0px + @doc-line-height;
	font-size: 0px + @doc-font-size;	
}

// reseting margin-top on all the things 

h1, h2, h3, h4, h5, h6, blockquote, iframe, label, p, pre, address, td, th, ul, ol, dl, dd, hr,
table, small { margin-top: 0; }

// making the page

html { 
  background-color: #383131;
	color: #F2F2F2;
	font-family: Georgia, Times, "Times New Roman", serif;
}

body {
  margin: 2em auto;
  width: 80%;
}

h1, h2, h3, h4, h5, h6{ 
  font-family: "Lucida Bright", Georgia, serif;
  color: #d15300; 
}
p, small {
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  }

a {
  color: #d15300; 
  text-decoration: none;
}

h1 {
	.font-size(32);
}

h2 {
  .font-rem(20);
}

h6 {
  .font(16);
}

p {
  .font(16);
}


small {
  .font-size(12);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................