87 lines
2.7 KiB
HTML
87 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>
|
|
TACHYONS EXAMPLES
|
|
</title>
|
|
<meta name="author" content="@mrmrs">
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/i.css">
|
|
</head>
|
|
<body class="sans-serif">
|
|
<header>
|
|
<h1>TACHYONS</h1>
|
|
<h2>Markup examples for layouts and components</h2>
|
|
</header>
|
|
<main>
|
|
<p>Work in progress</p>
|
|
<ul>
|
|
<li>Vertical Nav</li>
|
|
<li>Horizontal Nav</li>
|
|
<li>Footer with social links</li>
|
|
<li>Footer with text links</li>
|
|
<li>Footer with multiple columns</li>
|
|
<li>Prose / Typography styles</li>
|
|
</ul>
|
|
|
|
<section>
|
|
<h1>Headers</h1>
|
|
<header class="bg-maroon wht pal pax-ns">
|
|
<h1 class="fw4 fw1 ttu tc-l thin mega-l man">Tachyons</h1>
|
|
<h2 class="fw1 uc ttu tc-l tabs small f4-ns">
|
|
Performance-first responsive css patterns
|
|
</h2>
|
|
</header>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<h1>Lists</h1>
|
|
<h2>Horizontal Navigation</h2>
|
|
<ul>
|
|
<li>Home</li>
|
|
<li>Shop</li>
|
|
<li>Contact</li>
|
|
<li>Settings</li>
|
|
<li>Log In</li>
|
|
</ul>
|
|
<h2>Vertical Navigation</h2>
|
|
<ul>
|
|
<li>Sign Up</li>
|
|
<li>FAQ</li>
|
|
<li>Tasks</li>
|
|
<li>Opportunities</li>
|
|
<li>Feed</li>
|
|
<li>Messages</li>
|
|
<li>Contact</li>
|
|
</ul>
|
|
</section>
|
|
<section class="pal">
|
|
<h1>Buttons</h1>
|
|
<a href="#" class="btn ba br2 phm pvs link">Button</a>
|
|
<a href="#" class="btn ba br2 phm pvs link">Click Here Now</a>
|
|
</section>
|
|
<section>
|
|
<h1>Forms</h1>
|
|
</section>
|
|
<section>
|
|
<h1>Layouts</h1>
|
|
</section>
|
|
<section>
|
|
<h1>Footers</h1>
|
|
<footer class="pam pax-ns bg-teal">
|
|
<p class="f6 title ttu">Copyright everything obvi forever</p>
|
|
<ul class="list mln pan">
|
|
<li class="dib prs"><a class="link wht" href="http://github.com/mrmrs" title="mrmrs">github</a></li>
|
|
<li class="dib prs"><a class="link wht" href="http://twitter.com/mrmrs_" title="mrmrs_">twitter</a></li>
|
|
<li class="dib prs"><a class="link wht" href="http://soundcloud.com/mr_mrs" title="mrmrs_">soundcloud</a></li>
|
|
<li class="dib prs"><a class="link wht" href="http://instagram.com/mrmrs_" title="mrmrs_">instagram</a></li>
|
|
</ul>
|
|
</footer>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|