Xmeter Style Guide

Example

Heading 1 h1

Paragraph p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis suscipit nunc, a cursus libero euismod at. Nulla placerat neque massa, quis interdum leo efficitur vel. Donec feugiat varius arcu non volutpat. Mauris eget mauris ut mauris auctor mattis id vel justo. Nulla dictum arcu nec suscipit mollis. Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.

Heading 2 h2

Paragraph p Suspendisse ut auctor enim. Aliquam viverra enim vitae ante aliquet venenatis. Sed vel nibh sit amet sapien fermentum mattis nec non arcu. Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis. Aenean tincidunt ante risus, semper malesuada libero consectetur id. Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi. Integer blandit est quam, eget mattis urna scelerisque quis. Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula. Maecenas risus nibh, volutpat sed euismod non, semper eget neque. Integer varius egestas risus, volutpat sagittis turpis convallis eget. Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet. In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem. Sed luctus congue tortor a scelerisque.

Heading 3 h3

Paragraph p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis. Quisque id justo elit. Fusce ut quam non sem efficitur accumsan sed id neque. Mauris finibus dignissim gravida. In dignissim mauris ac odio molestie volutpat. Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus. Suspendisse sit amet fermentum sapien. Aliquam luctus laoreet iaculis. Proin lacinia orci vitae tellus pellentesque porttitor.

Heading 4 h4

Paragraph p Aenean consectetur suscipit urna, non vehicula lacus blandit et. Integer at lacus et diam tristique suscipit. Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis. Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat. Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo. Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi. Curabitur aliquam maximus nulla eu venenatis. Nam aliquam lorem non felis dignissim dictum. Pellentesque sagittis vehicula nisl non luctus. Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem. In quis lectus in lectus interdum laoreet eu quis quam. Fusce auctor posuere purus, quis semper libero dignissim euismod. Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.

Heading 5 h5

Paragraph p Donec finibus ut lectus finibus pellentesque. Nulla euismod feugiat nulla nec posuere. Sed ac est id sem sagittis rhoncus eu ac neque. Aliquam eu metus sagittis, porta turpis id, scelerisque magna. Nulla venenatis elementum est, semper viverra felis tristique sit amet. Mauris nec ipsum id orci porttitor auctor sed sit amet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.

Heading 6 h6

Paragraph p Donec vel dolor ut felis dapibus ultricies vitae a nibh. Ut semper odio est, sed lacinia ligula gravida ut. Vestibulum facilisis viverra pulvinar. Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie. Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus. Donec ut quam massa. Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl. Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zero h1 Two Three
Four Five Six Seven

Zero One h2 Three
Four Five Six Seven

Zero One Two h3
Four Five Six Seven

Zero One Two Three
h4 Five Six Seven

Zero One Two Three
Four h5 Six Seven
Zero One Two Three
Four Five h6 Seven
12345 address Ave br
Washington, DC 00000 br
United States of America
Pellentesque pre habitant() {
	morbi.tristique = senectus;
	et (netus = malesuada; fames < ac; turpis.egestas++) {
		Nunc.sit += [amet, scelerisque][et];
		Cras = {
			lectus: cursus,
			sed: dui,
			quis: convallis(id () { justo Quisque.elit; }),
		};
	}
}
	
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Markup
<figure class="h-Ruled">
	<h1>Heading 1 <code>h1</code></h1>
	<p>Paragraph <code>p</code>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Aliquam sagittis suscipit nunc, a cursus libero euismod at.
		Nulla placerat neque massa, quis interdum leo efficitur vel.
		Donec feugiat varius arcu non volutpat.
		Mauris eget mauris ut mauris auctor mattis id vel justo.
		Nulla dictum arcu nec suscipit mollis.
		Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.</p>
	<h2>Heading 2 <code>h2</code></h2>
	<p>Paragraph <code>p</code>
		Suspendisse ut auctor enim.
		Aliquam viverra enim vitae ante aliquet venenatis.
		Sed vel nibh sit amet sapien fermentum mattis nec non arcu.
		Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis.
		Aenean tincidunt ante risus, semper malesuada libero consectetur id.
		Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi.
		Integer blandit est quam, eget mattis urna scelerisque quis.
		Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula.
		Maecenas risus nibh, volutpat sed euismod non, semper eget neque.
		Integer varius egestas risus, volutpat sagittis turpis convallis eget.
		Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
		In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
		Sed luctus congue tortor a scelerisque.</p>
	<h3>Heading 3 <code>h3</code></h3>
	<p>Paragraph <code>p</code>
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
		Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis.
		Quisque id justo elit.
		Fusce ut quam non sem efficitur accumsan sed id neque.
		Mauris finibus dignissim gravida.
		In dignissim mauris ac odio molestie volutpat.
		Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus.
		Suspendisse sit amet fermentum sapien.
		Aliquam luctus laoreet iaculis.
		Proin lacinia orci vitae tellus pellentesque porttitor.</p>
	<h4>Heading 4 <code>h4</code></h4>
	<p>Paragraph <code>p</code>
		Aenean consectetur suscipit urna, non vehicula lacus blandit et.
		Integer at lacus et diam tristique suscipit.
		Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis.
		Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat.
		Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo.
		Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi.
		Curabitur aliquam maximus nulla eu venenatis.
		Nam aliquam lorem non felis dignissim dictum.
		Pellentesque sagittis vehicula nisl non luctus.
		Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem.
		In quis lectus in lectus interdum laoreet eu quis quam.
		Fusce auctor posuere purus, quis semper libero dignissim euismod.
		Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.</p>
	<h5>Heading 5 <code>h5</code></h5>
	<p>Paragraph <code>p</code>
		Donec finibus ut lectus finibus pellentesque.
		Nulla euismod feugiat nulla nec posuere.
		Sed ac est id sem sagittis rhoncus eu ac neque.
		Aliquam eu metus sagittis, porta turpis id, scelerisque magna.
		Nulla venenatis elementum est, semper viverra felis tristique sit amet.
		Mauris nec ipsum id orci porttitor auctor sed sit amet sem.
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.</p>
	<h6>Heading 6 <code>h6</code></h6>
	<p>Paragraph <code>p</code>
		Donec vel dolor ut felis dapibus ultricies vitae a nibh.
		Ut semper odio est, sed lacinia ligula gravida ut.
		Vestibulum facilisis viverra pulvinar.
		Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie.
		Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus.
		Donec ut quam massa.
		Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl.
		Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</figure>
<figure class="h-Ruled">
	<h1>Zero <code>h1</code> Two Three <br/> Four Five Six Seven</h1>
	<h2>Zero One <code>h2</code> Three <br/> Four Five Six Seven</h2>
	<h3>Zero One Two <code>h3</code>   <br/> Four Five Six Seven</h3>
	<h4>Zero One Two Three <br/> <code>h4</code>  Five Six Seven</h4>
	<h5>Zero One Two Three <br/> Four <code>h5</code>  Six Seven</h5>
	<h6>Zero One Two Three <br/> Four Five <code>h6</code> Seven</h6>
</figure>
<figure class="h-Ruled">
	<address>
		12345 <code>address</code> Ave <code>br</code><br/>
		Washington, DC 00000 <code>br</code><br/>
		United States of America
	</address>
</figure>
<figure class="h-Ruled">
	<pre>
Pellentesque <code>pre</code> habitant() {
	morbi.tristique = senectus;
	et (netus = malesuada; fames &lt; ac; turpis.egestas++) {
		Nunc.sit += [amet, scelerisque][et];
		Cras = {
			lectus: cursus,
			sed: dui,
			quis: convallis(id () { justo Quisque.elit; }),
		};
	}
}
	</pre>
</figure>
<figure class="h-Ruled">
	<figure>
		Aenean consectetur <code>figure</code> suscipit urna, non vehicula lacus blandit et.
		<figcaption>Integer at lacus et diam tristique <code>figure</code> <code>figcaption</code> suscipit.</figcaption>
	</figure>
</figure>
<figure class="h-Ruled">
	<blockquote>Donec <code>blockquote</code> vel dolor ut felis dapibus ultricies vitae a nibh.</blockquote>
</figure>
<figure class="h-Ruled">
	<figcaption>A horizontal rule <code>hr</code> is present below.</figcaption>
	<hr/>
</figure>
Source: kss-base.scss, line 23