ProgBlog/app/views/index.stache

<header class="w930">
	<div class="heading">
		<a href="#"><span class="title">Tim's Blog</span></a>
		<span class="tagline">Random musings and rantings</span>
	</div>
</header>
<main class="w930">
<section class="pagebody">
	<section class="grid grid-fit grid-gutters">
		<article class="main cell no-top-padding">
			<div class="title">
				<h2>Article Title</h2>
			</div>
			<div class="subtitle">Feb 18, 2016</div>

			Here are some random code examples:

			<p>HTML is always fun to look at, right?</p>
			<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8" /&gt;
		&lt;title&gt;Some Random Title&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>

			<p>Javascript has several ways of making a self-executing function.</p>
			<pre><code>// ES5 IIFE
(function() {
	var x = 'foo';
}());

// ES5 Alternate IIFE
(function() {
	var y = 'bar';
})();

// ES6 IIFE
(() => {
	let x = 'foo';
	const y = 'bar';
})();</code></pre>

Or, how about some php magic methods?

		<pre><code>&lt;?php

class Foo {
	/**
	 * A Constructor
	 */
	public function __construct()
	{

	}

	/**
	 * A Destructor
	 */
	public function __destruct()
	{

	}

	/**
	 * Dynamically get class properties
	 *
	 * @param  string $key - the key of the item to get
	 * @return mixed - the value of the item
	 */
	public function __get($key)
	{

	}

	/**
	 * Dynamically set class properties
	 *
	 * @param string $key - the key of the item to set
	 * @param mixed $value - the value of the item to set
	 */
	public function __set($key, $value)
	{

	}
}</code></pre>

			<p>Or, you could even showcase CSS</p>
			<pre><code>:root {
	--body-font: 'Slabo 27px', serif;
	--header-fonts: 'PT Serif', serif;
	background:whitesmoke;
	font-family: var(--body-font);
	box-sizing: border-box;
	cursor: default;
	line-height: 1.4;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	overflow-y: scroll;
	text-rendering: optimizeLegibility;
	text-size-adjust: 100%
}

/*
 *! Flexbox grid
 */
section {
	flex: 0;
}</code></pre>
		</article>
		<aside class="sidebar cell cell-1of3 no-top-padding">
			<div class="bio">
				<img class="logo" src="https://secure.gravatar.com/avatar/2ea65d51f854de868d4e94de8583ed96.jpg?r=g&s=100&d=wavatar" />
				<div class="title">Timothy J. Warren</div>
				<div class="tagline">Web Developer, Programmer, and all-around Technology Enthusiast</div>
			</div>
			<div class="recent-posts">
				<div class="title">Recent Posts <a class="showall" href="#">show all</a></div>
				<div>
					<a class="post" href="#">Hello, this is a sample post!</a>
				</div>
			</div>
		</aside>
	</section>
	<footer>
		<p>&copy; Timothy J. Warren</p>
	</footer>
</section>
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>