knife-sass
Version:
Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.
57 lines (54 loc) • 3.33 kB
HTML
<html>
<head>
<title>Typography</title>
<link rel="stylesheet" href="example1.css">
<link rel="stylesheet" href="http://basehold.it/24">
</head>
<body>
<div class="container">
<header>
<h1>Vertical Rhythm </h1>
<p>Building Strong Typography with Knife</p>
</header>
<div class="grid grid1">
<h1>First In line</h1>
<p>Rub face on everything rub face on everything. Sleep on keyboard give attitude, sleep on keyboard but attack feet find something else more interesting and all of a sudden go crazy. Under the bed sweet beast so stick butt in face. Stare at ceiling intrigued by the shower so destroy couch. Lick butt mark territory make muffins</p>
<h2>Second Hand Headings</h2>
<p>Need to chase tail destroy couch cat snacks. Throwup on your pillow behind the couch run in circles but need to chase tail for chew iPad power cord. Throwup on your pillow play time. </p>
<h3>Third Times the Charm</h3>
<p>Leave hair everywhere hunt anything that moves so climb leg, give attitude so hate dog. Stick butt in face stare at ceiling chase mice stare at ceiling. Cat snacks find something else more </p>
<h4>Common Time</h4>
<p>Sun bathe stick butt in face or chase imaginary bugs missing until dinner time or mark territory or find something else more interesting. Attack feet nap all day. Why must they do that. Under the bed.</p>
<h5>Really Swinging</h5>
<p>Shake treat bag inspect anything brought into the house yet find something else more interesting stick butt in face and chew iPad power cord. Lick butt chew iPad power cord play time attack feet attack feet why must they do that or attack feet.</p>
<h6>a little more sense than that the I see dead people kid.</h6>
<p>Stare at ceiling give attitude sun bathe. All of a sudden go crazy give attitude for sleep on keyboard or leave hair everywhere or missing until dinner time but leave hair everywhere. Need to chase tail destroy couch cat snacks. Throwup on your pillow behind the couch run in circles but need to chase tail for chew iPad power cord. Throwup on your pillow play time.</p>
</div>
<div class="grid grid2">
<h4>Side bar title</h4>
<p>Sweet beast cat snacks chase imaginary bugs stand in front of the computer screen hate dog yet give attitude. Climb leg leave hair everywhere or shake treat bag yet throwup on your pillow shake treat bag behind the couch yet lick butt. </p>
<h5>Really Swinging</h5>
<p>Shake treat bag inspect anything brought into the house yet find something else more interesting stick butt in face and chew iPad power cord. Lick butt chew iPad power cord play time attack feet attack feet why must they do that or attack feet.</p>
<p>
<small><strong>NB : </strong>Need to chase tail destroy couch cat snacks. Throwup on your pillow behind the couch run in circles but need to chase tail for chew iPad power cord. </small>
</p>
<h6>Stick it in a list :</h6>
<ol>
<li>Stare at ceiling </li>
<li>give attitude sun bathe</li>
<li>go crazy </li>
<li>give attitude</li>
<li>sleep on keyboard</li>
<li>chew iPad power cord </li>
<li>Throwup on your pillow </li>
<li>play time</li>
</ol>
</div>
<footer>
<p>Type Knife. <a href="https://github.com/Pushplaybang/knife">View on GitHub<a></p>
</footer>
</div>
<!-- /container -->
</body>
</html>