Skip to content

Instantly share code, notes, and snippets.

@ajtroxell

ajtroxell/_footer.kit.html

Created June 14, 2013 19:17
Show Gist options
  • Save ajtroxell/5784459 to your computer and use it in GitHub Desktop.
Save ajtroxell/5784459 to your computer and use it in GitHub Desktop.
Download ZIP
CodeKit’s “The Kit Language” & How to Use It: http://ajtroxell.com/codekits-the-kit-language-how-to-use-it/
Raw
_footer.kit.html
</div>
<div class="footer_container">
<footer class="container">
<div class="row">
<nav class="span12">
<ul class="secondary">
<li class="<!--$page_1_Nav-->"><a href="../page_1.html">Page 1</a></li>
<li class="<!--$page_2_Nav-->"><a href="../page_2.html">Page 1</a></li>
<li class="<!--$page_3_Nav-->"><a href="../page_3.html">Page 2</a></li>
<li class="<!--$page_4_Nav-->"><a href="../page_4.html">Page 3</a></li>
<li class="<!--$page_5_Nav-->"><a href="../page_5.html">Page 4</a></li>
</ul>
</nav>
</div>
</footer>
</div>
<script src="<!--$jsPath-->master-ck.js"></script>
</body>
</html>
Raw
_header.kit.html
<!-- @import "_variables" -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><!--$pageTitle--> | Website Title</title>
<meta name="keywords" content="<!--$pageKeywords-->">
<meta name="description" content="<!--$pageDescription-->">
<meta name="author" content="AJ Troxell, aj@ajtroxell.com">
<!-- HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Stylesheet -->
<link href="<!--$cssPath-->master.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="<!--$cssPath-->ie.css" />
<![endif]-->
</head>
<body class="<!--$bodyClass-->">
<div class="container">
<header class="row">
<div class="span3">
<a class="logo" href="/"><h1 class="ir">Website Title</h1></a>
</div>
<nav class="span9">
<ul>
<li class="<!--$page_1_Nav-->"><a href="../page_1.html">Page 1</a></li>
<li class="<!--$page_2_Nav-->"><a href="../page_2.html">Page 1</a></li>
<li class="<!--$page_3_Nav-->"><a href="../page_3.html">Page 2</a></li>
<li class="<!--$page_4_Nav-->"><a href="../page_4.html">Page 3</a></li>
<li class="<!--$page_5_Nav-->"><a href="../page_5.html">Page 4</a></li>
</ul>
</nav>
</header>
Raw
_variables.kit.html
<!-- $images = ../assets/css/images/ -->
<!-- $css = ../assets/css/ -->
<!-- $js = ../assets/js/ -->
Raw
imports.kit.html
<!-- @include someFile.kit -->
<!-- @import '../../someFileAtRelativePath.html' -->
<!--@include no_spaces_at_beginning_or_end.txt-->
Raw
kit-conditionals-option-simplified.kit.html
<!-- $itemActive = {if:current_kit = page_1}
activeClassName
{else:current_kit}
inactiveClassName
{/if:current_kit} -->
Raw
kit-conditionals-option.kit.html
<!-- $itemActive = {if:kit = page_1}
activeClassName
{else if:kit = page_2}
activeClassName
{else}
inactiveClassName
{/if:kit} -->
Raw
page_1.kit.html
<!-- Header Variables -->
<!-- $pageTitle = Page Title -->
<!-- $pageDescription = Lorem ipsum description of this page. -->
<!-- $pageKeywords = keyword keyword keyword keyword keyword keyword keyword keyword keyword keyword keyword -->
<!-- Body Class -->
<!-- $bodyClass = home -->
<!-- Nav Class -->
<!-- $page_1_Nav = active -->
<!-- $page_2_Nav = inactive -->
<!-- $page_3_Nav = inactive -->
<!-- $page_4_Nav = inactive -->
<!-- $page_5_Nav = inactive -->
<!-- Import Header -->
<!-- @import "_header" -->
<section>
<div class="row">
<div class="span12">
<div class="span7 offset6">
<article class="message">
<h1>Page Title</h1>
<p>Urna tortor velit, vut vel ridiculus augue arcu velit facilisis in ac! Hac habitasse dignissim turpis? Mattis urna ultricies porta dolor? Pid sociis sagittis placerat, nec integer. Habitasse, rhoncus scelerisque, scelerisque hac, eu pulvinar, nisi enim? Ut aenean enim turpis, et hac sed odio pulvinar.</p>
<p>Odio? Dis elementum dignissim in penatibus adipiscing nisi quis massa! Diam ridiculus ac placerat. Montes magnis nec. Sit vel a vel urna, aenean turpis. Porta in! Sit ac adipiscing nunc, urna ac mid hac vel? Dolor sit penatibus mauris platea ut hac, odio cras.</p>
</article>
</div>
</div>
</div>
</section>
<!-- Import Footer -->
<!-- @import "_footer" -->
Raw
variables.kit.html
<!--$myVar:This text is amazing-->
<!--@var2=Some other incredible text-->
<!-- @width = 40px -->
<!-- $manifesto Who needs colons and equals signs? -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment