-
Notifications
You must be signed in to change notification settings - Fork 5
/
demo.html
255 lines (241 loc) · 52.7 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
/*<![CDATA[*/
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre
{ margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
td.sourceCode { padding-left: 5px; }
code.sourceCode span.kw { color: #007020; font-weight: bold; }
code.sourceCode span.dt { color: #902000; }
code.sourceCode span.dv { color: #40a070; }
code.sourceCode span.bn { color: #40a070; }
code.sourceCode span.fl { color: #40a070; }
code.sourceCode span.ch { color: #4070a0; }
code.sourceCode span.st { color: #4070a0; }
code.sourceCode span.co { color: #60a0b0; font-style: italic; }
code.sourceCode span.ot { color: #007020; }
code.sourceCode span.al { color: red; font-weight: bold; }
code.sourceCode span.fu { color: #06287e; }
code.sourceCode span.re { }
code.sourceCode span.er { color: red; font-weight: bold; }
/*]]>*/
</style>
<link rel="stylesheet" href="../styles/tutorial.css">
<title>From here to Cloudfour.com: One Idea</title>
</head>
<body>
<nav id="TOC" class="toc">
<header>
<h1>On This Page</h1>
</header>
<ul>
<li><a href="#the-goal">The Goal</a></li>
<li><a href="#the-ingredients">The Ingredients</a></li>
<li><a href="#sounds-geeky">Sounds Geeky</a><ul>
<li><a href="#its-totally-geeky-youre-right">It's Totally Geeky, You're Right</a></li>
</ul></li>
<li><a href="#the-recipe">The Recipe</a><ul>
<li><a href="#step-1-content">Step 1: Content</a><ul>
<li><a href="#markdown-is-bigger-than-markdown">Markdown is bigger than Markdown</a></li>
<li><a href="#pandoc-markdown">Pandoc = markdown++</a></li>
<li><a href="#whats-your-obsession-with-pandoc">What's your obsession with pandoc?</a></li>
<li><a href="#our-first-markdown-example">Our first markdown example</a></li>
<li><a href="#but-how-do-we-get-from-that-to-an-html-page">But how do we get from that to an HTML page?</a></li>
<li><a href="#a-standalone-html-page">A standalone HTML page</a></li>
<li><a href="#making-it-html5">Making it HTML5</a></li>
<li><a href="#but-what-about-snippets-common-to-multiple-pages">But what about snippets common to multiple pages?</a></li>
<li><a href="#making-our-own-html-template-for-pandoc">Making our own HTML template for pandoc</a></li>
<li><a href="#a-segue-way-to-talking-about-css">A segue way to talking about CSS</a></li>
</ul></li>
<li><a href="#step-2-css">Step 2: CSS</a><ul>
<li><a href="#sass-and-scss">Sass and SCSS</a></li>
<li><a href="#what-that-scss-turns-into">What that SCSS turns into</a></li>
</ul></li>
</ul></li>
</ul>
</nav>
<h2 id="the-goal"><a href="#TOC">The Goal</a></h2>
<p>Refresh Cloudfour.com within a tight timeline, flexing our technical muscles and putting our mouth where our money is and vice-versa.</p>
<h2 id="the-ingredients"><a href="#TOC">The Ingredients</a></h2>
<ul>
<li><em><a href="http://daringfireball.net/projects/markdown/">Markdown</a></em> (with <em><a href="http://johnmacfarlane.net/pandoc">Pandoc</a></em> extensions)</li>
<li><em><a href="http://sass-lang.com/" title="SASS 3 (SCSS)">SCSS</a></em> (That is, the new, slightly cooler version of <em>SASS</em>)</li>
<li><em><a href="http://johnmacfarlane.net/pandoc">Pandoc</a></em> for transforming our content into HTML5 pages</li>
<li><em><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></em> for inspiration on web page templating and client-side feature detection</li>
<li><em><a href="http://www.github.com">Git/Github</a></em> for version control and possibly for deployment</li>
</ul>
<h2 id="sounds-geeky"><a href="#TOC">Sounds Geeky</a></h2>
<p>It is. But this is not just something I want to do as a pet project. It represents:</p>
<ol type="1">
<li>A rejection of the cumbersome, fragile situation with CMSes, especially pursuant to the pan-device (i.e. "mobile") web. <em>Especially</em> when we're talking about a <em>static, content-centric web site.</em>
<ol type="1">
<li>Why should content be fragmented and removed from humans in databases, when it is not really relational data?</li>
<li>Why should content be polluted with any more markup than is relevant to the content itself—that is: why are we imposing web-specific (and in most cases, really, desktop-web-specific) information on our content?</li>
<li>Why are we vastly overcomplicating things, which leads to
<ol type="i">
<li>Us not understanding our own tools,</li>
<li>Us not being able to craft content for disparate devices and/or clients,</li>
<li>Us building sites that don't behave in the way that our well-honed best practices suggest they should</li>
<li>Us authoring content that is forever glued to and imprisoned by its desktop-heavy, CMS overlords</li>
</ol></li>
</ol></li>
<li>An interest in expanding our knowledge by forcing some new tools at us, even if this is a <em>one-off project</em> that dies a quiet death.
<ol type="i">
<li>We are hemmed in by our current toolset, prevented from experimenting with any of the cutting-edge technologies to which we've been introduced.</li>
<li>This project is very constrained in size, and the unknowns equally constrained.</li>
</ol></li>
<li>A collection of thoughts I've built up and tabled, written down for further exploration, during the writing of the book.</li>
</ol>
<h3 id="its-totally-geeky-youre-right"><a href="#TOC">It's Totally Geeky, You're Right</a></h3>
<p>But it doesn't matter. The output of this project is HTML pages. If we hate it, we can find something else. There is no lock-in.</p>
<h2 id="the-recipe"><a href="#TOC">The Recipe</a></h2>
<h3 id="step-1-content"><a href="#TOC">Step 1: Content</a></h3>
<p>At the root of this process is content. Here's something to know:</p>
<p><strong>For this process it doesn't really matter if we write content in HTML or markdown, though I prefer markdown.</strong></p>
<p>The reason I'm excited about the shiny tool of <code>pandoc</code> is that it is, as it claims, the "swiss-army knife" of content adaptation. It can as easily go from HTML to markdown as from markdown to HTML, or HTML to epub (read it on your iPad!), or markdown to JSON, or HTML to LaTeX or textile to PDF or rst (ReStructured Text) to manpage. It's like that. It doesn't care. It stays the fuck out of the way. Write the content in textile. I don't care. More on this in a sec.</p>
<p>The overarching goal I am pressing for is:</p>
<p><strong>CONTENT FIRST</strong></p>
<p>I mean <em>really</em> first. I mean freed of its shackles. I mean portable and standalone. I mean actually separating content from presentation, something we all have been giving lip service to for a lot of years.</p>
<p><em>Why do I prefer markdown?</em></p>
<h4 id="markdown-is-bigger-than-markdown"><a href="#TOC">Markdown is bigger than Markdown</a></h4>
<p>First, I wish there were a more generic term for <em>markdown</em>. For one thing, there are actually several flavors of markdown, including MultiMarkdown, which I used for <a href="http://hf-mw.com">the book's website</a> (you can see the source MultiMarkdown in <a href="https://github.com/lyzadanger/HFMWSite">the repo</a>). There's also a fair amount of confusion about the difference between markdown the syntax and markdown the tool-that-does-the-transformation (e.g MultiMarkdown—it's a library written in C, if you care).</p>
<p>When I say "I prefer markdown," what I mean is not markdown-as-cool-specific-technology but the philosophy that markdown espouses (and has been emphasized in its most nice form, IMHO, by the pandoc approach). Markdown is human-readable. Not just kind of (a la XML or HTML) but really not uncomfortable to scan. But it is <em>structured</em>, enough that there is an explicit outline to documents and they can easily be shuttled into and out of other formats. It is also stupidly simple; it takes about five or ten minutes to get your head around. You can find syntax info on <a href="http://daringfireball.net/projects/markdown/syntax" title="Markdown Syntax documentation">The Daring Fireball</a>.</p>
<h4 id="pandoc-markdown"><a href="#TOC">Pandoc = markdown++</a></h4>
<p>Pandoc has "extensions," which add things like:</p>
<ul>
<li>Syntax highlighting for something around 60 programming languages (when one converts markdown to HTML)</li>
<li>Table support</li>
<li>More image attribute support</li>
<li>Better lists and nested lists</li>
</ul>
<p>But, true to the philosophy, documents written in the pandoc-extended flavor of markdown (like this one) still look fine<sup><a href="#fn1" class="footnoteRef" id="fnref1">1</a></sup> in other markdown viewers and are still human-readable.</p>
<p>Documents represented in a structure like markdown are portable; they feel <strong>future-friendly</strong>.</p>
<p>So, I will continue to use the term <code>markdown</code> for purposes of this project, but I wish there were a better word that encompassed the concept.</p>
<h4 id="whats-your-obsession-with-pandoc"><a href="#TOC">What's your obsession with pandoc?</a></h4>
<p>I've already mentioned a few things. But pandoc is this strangely-quiet, total sleeper of a project. It has a sort of dazzling array of features that, so far, all appear to work as advertised. The project is actually led by <a href="http:/johnmacfarlane.net/" title="John McFarlane's site">John McFarlane</a>, a philosophy professor at Berkeley. Yet somehow it doesn't totally wallow in over-academia.</p>
<p>It doesn't espouse any document format. It merely serves as a Babel fish, something to help free content from any bounds. I think at its core it is trying to solve the same deep question as I am: <em>What is content? At what point is content represented in the minimal way it needs to be to be structurally meaningful?</em></p>
<p><em>This is all very abstract</em></p>
<h4 id="our-first-markdown-example"><a href="#TOC">Our first markdown example</a></h4>
<p>OK. Let's look at something real, then. This is a very, very preliminary variant of the content Higgins drew on the white board the other day, representing the content on the site's landing page:</p>
<pre><code>% Cloud Four: We make the web mobile
# Cloud Four
## We Make the Mobile <-> Web
### [Development](http://www.cloudfour.com/dev "Mobile Web Development")
We build the mobile <-> web.
### [Training](http://www.cloudfour.com/training "Mobile Web Training and Education")
Mobilize your team.
### [Consulting](http://www.cloudfour.com/strategy "Mobile Web Consulting and Strategy")
Strategy for today and tomorrow.
#### Read our Book
We don't just make the mobile web, we also wrote a book about it. Buy [_Head First Mobile Web_](http://bit.ly/hf-mw "Head First Mobile Web") on Amazon.com.
#### Find Us
Catch up with us in the real world:
* Wed, Jan 18: "Zombie Apocalypse 101": [Jason](http://www.example.com "Jason Grigsby") and [Lyza](http://www.example.com "Lyza Danger Gardner"), WebVisions, NYC
* Mon, Jan 23: [Mobile Portland](http://www.mobileportland.com "Mobile Portland") meeting, [Urban Airship](http://www.urbanairship.com "Urban Airship Building")
[More Gigs...](http://www.cloudfour.com/events "Cloud Four Happenings")
</code></pre>
<p>There are very few things to explain here:</p>
<ul>
<li>Lines that begin with any number of <code>#</code> characters represent headings. <code>#</code> is a top-level heading (think <code><h1></code>). <code>##</code> is a second-level heading (<code><h2></code>), etc.</li>
<li>Links are probably the most complex thing in markdown (you should take that as a relief!). They look like <code>[thing the link should say](http://link.to.this "Optional title for the link; this goes in the <a> title attribute if used")</code></li>
<li>You make text emphasized by <code>*surrounding it with an asterisk* or _with underscores_</code>. Doubling either of these (e.g. <code>**</code> or <code>__</code>) will get you the <code><strong></code> tag in HTML (i.e. is stronger emphasis than just one!).</li>
<li>This is an item in an unordered list: <code>* Wed, Jan 18: "Zombie Apocalypse 101": [Jason](http://www.example.com "Jason Grigsby") and [Lyza](http://www.example.com "Lyza Danger Gardner"), WebVisions, NYC</code> Ordered lists are as straightforward.</li>
</ul>
<h4 id="but-how-do-we-get-from-that-to-an-html-page"><a href="#TOC">But how do we get from that to an HTML page?</a></h4>
<p>The first step in pandoc-land is to do something like this in a Terminal window:</p>
<p><code>$ pandoc --from markdown --to html index.mdown > index.html</code></p>
<p>(I'm being quite verbose; this could also be accomplished with <code>$ pandoc index.mdown > index.html</code> as markdown to HTML is the default)</p>
<p>I'm telling pandoc to convert <code>index.mdown</code> <em>from</em> markdown <em>to</em> <code>HTML</code> and to put (<code>></code>) the resulting output into <code>index.html</code>.</p>
<p>Here's what that gives us:</p>
<pre class="sourceCode"><code class="sourceCode html"><br /><span class="kw"><h1</span><span class="ot"> id=</span><span class="st">"cloud-four"</span><span class="kw">></span>Cloud Four<span class="kw"></h1></span><br /><span class="kw"><h2</span><span class="ot"> id=</span><span class="st">"we-make-the-mobile---web"</span><span class="kw">></span>We Make the Mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> Web<span class="kw"></h2></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"development"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/dev"</span><span class="ot"> title=</span><span class="st">"Mobile Web Development"</span><span class="kw">></span>Development<span class="kw"></a></h3></span><br /><span class="kw"><p></span>We build the mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> web.<span class="kw"></p></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"training"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/training"</span><span class="ot"> title=</span><span class="st">"Mobile Web Training and Education"</span><span class="kw">></span>Training<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Mobilize your team.<span class="kw"></p></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"consulting"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/strategy"</span><span class="ot"> title=</span><span class="st">"Mobile Web Consulting and Strategy"</span><span class="kw">></span>Consulting<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Strategy for today and tomorrow.<span class="kw"></p></span><br /><span class="kw"><h4</span><span class="ot"> id=</span><span class="st">"read-our-book"</span><span class="kw">></span>Read our Book<span class="kw"></h4></span><br /><span class="kw"><p></span>We don't just make the mobile web, we also wrote a book about it. Buy <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://bit.ly/hf-mw"</span><span class="ot"> title=</span><span class="st">"Head First Mobile Web"</span><span class="kw">><em></span>Head First Mobile Web<span class="kw"></em></a></span> on Amazon.com.<span class="kw"></p></span><br /><span class="kw"><h4</span><span class="ot"> id=</span><span class="st">"find-us"</span><span class="kw">></span>Find Us<span class="kw"></h4></span><br /><span class="kw"><p></span>Catch up with us in the real world:<span class="kw"></p></span><br /><span class="kw"><ul></span><br /><span class="kw"><li></span>Wed, Jan 18: <span class="dv">&quot;</span>Zombie Apocalypse 101<span class="dv">&quot;</span>: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Jason Grigsby"</span><span class="kw">></span>Jason<span class="kw"></a></span> and <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Lyza Danger Gardner"</span><span class="kw">></span>Lyza<span class="kw"></a></span>, WebVisions, NYC<span class="kw"></li></span><br /><span class="kw"><li></span>Mon, Jan 23: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.mobileportland.com"</span><span class="ot"> title=</span><span class="st">"Mobile Portland"</span><span class="kw">></span>Mobile Portland<span class="kw"></a></span> meeting, <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.urbanairship.com"</span><span class="ot"> title=</span><span class="st">"Urban Airship Building"</span><span class="kw">></span>Urban Airship<span class="kw"></a></li></span><br /><span class="kw"></ul></span><br /><span class="kw"><p><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/events"</span><span class="ot"> title=</span><span class="st">"Cloud Four Happenings"</span><span class="kw">></span>More Gigs...<span class="kw"></a></p></span></code></pre>
<p><em>That's just a fragment</em>, you say.</p>
<p>True.</p>
<p>But we can take this further.</p>
<h4 id="a-standalone-html-page"><a href="#TOC">A standalone HTML page</a></h4>
<p>As I mentioned, pandoc does a lot of stuff. If I were to run the command:</p>
<p><code>$ pandoc --from markdown --to html --standalone index.mdown > index.html</code></p>
<p>I'd get:</p>
<pre class="sourceCode"><code class="sourceCode html"><br /><span class="dt"><!DOCTYPE </span>html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<span class="dt">></span><br /><span class="kw"><html</span><span class="ot"> xmlns=</span><span class="st">"http://www.w3.org/1999/xhtml"</span><span class="kw">></span><br /><span class="kw"><head></span><br /> <span class="kw"><meta</span><span class="ot"> http-equiv=</span><span class="st">"Content-Type"</span><span class="ot"> content=</span><span class="st">"text/html; charset=utf-8"</span> <span class="kw">/></span><br /> <span class="kw"><meta</span><span class="ot"> name=</span><span class="st">"generator"</span><span class="ot"> content=</span><span class="st">"pandoc"</span> <span class="kw">/></span><br /> <span class="kw"><title></span>Cloud Four: We make the web mobile<span class="kw"></title></span><br /><span class="kw"></head></span><br /><span class="kw"><body></span><br /><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"header"</span><span class="kw">></span><br /><span class="kw"><h1</span><span class="ot"> class=</span><span class="st">"title"</span><span class="kw">></span>Cloud Four: We make the web mobile<span class="kw"></h1></span><br /><span class="kw"></div></span><br /><span class="kw"><h1</span><span class="ot"> id=</span><span class="st">"cloud-four"</span><span class="kw">></span>Cloud Four<span class="kw"></h1></span><br /><span class="kw"><h2</span><span class="ot"> id=</span><span class="st">"we-make-the-mobile---web"</span><span class="kw">></span>We Make the Mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> Web<span class="kw"></h2></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"development"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/dev"</span><span class="ot"> title=</span><span class="st">"Mobile Web Development"</span><span class="kw">></span>Development<span class="kw"></a></h3></span><br /><span class="kw"><p></span>We build the mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> web.<span class="kw"></p></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"training"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/training"</span><span class="ot"> title=</span><span class="st">"Mobile Web Training and Education"</span><span class="kw">></span>Training<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Mobilize your team.<span class="kw"></p></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"consulting"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/strategy"</span><span class="ot"> title=</span><span class="st">"Mobile Web Consulting and Strategy"</span><span class="kw">></span>Consulting<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Strategy for today and tomorrow.<span class="kw"></p></span><br /><span class="kw"><h4</span><span class="ot"> id=</span><span class="st">"read-our-book"</span><span class="kw">></span>Read our Book<span class="kw"></h4></span><br /><span class="kw"><p></span>We don't just make the mobile web, we also wrote a book about it. Buy <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://bit.ly/hf-mw"</span><span class="ot"> title=</span><span class="st">"Head First Mobile Web"</span><span class="kw">><em></span>Head First Mobile Web<span class="kw"></em></a></span> on Amazon.com.<span class="kw"></p></span><br /><span class="kw"><h4</span><span class="ot"> id=</span><span class="st">"find-us"</span><span class="kw">></span>Find Us<span class="kw"></h4></span><br /><span class="kw"><p></span>Catch up with us in the real world:<span class="kw"></p></span><br /><span class="kw"><ul></span><br /><span class="kw"><li></span>Wed, Jan 18: <span class="dv">&quot;</span>Zombie Apocalypse 101<span class="dv">&quot;</span>: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Jason Grigsby"</span><span class="kw">></span>Jason<span class="kw"></a></span> and <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Lyza Danger Gardner"</span><span class="kw">></span>Lyza<span class="kw"></a></span>, WebVisions, NYC<span class="kw"></li></span><br /><span class="kw"><li></span>Mon, Jan 23: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.mobileportland.com"</span><span class="ot"> title=</span><span class="st">"Mobile Portland"</span><span class="kw">></span>Mobile Portland<span class="kw"></a></span> meeting, <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.urbanairship.com"</span><span class="ot"> title=</span><span class="st">"Urban Airship Building"</span><span class="kw">></span>Urban Airship<span class="kw"></a></li></span><br /><span class="kw"></ul></span><br /><span class="kw"><p><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/events"</span><span class="ot"> title=</span><span class="st">"Cloud Four Happenings"</span><span class="kw">></span>More Gigs...<span class="kw"></a></p></span><br /><span class="kw"></body></span><br /><span class="kw"></html></span></code></pre>
<p>The very first line in our markdown source is:</p>
<p><code>% Cloud Four: We make the web mobile</code></p>
<p>Pandoc sees this as metadata and knows to make a <code><title></code> out of it (this is not one of its most elegant features, but it works).</p>
<p><em>But this is XHTML-Transitional</em></p>
<p>Not to fret.</p>
<h4 id="making-it-html5"><a href="#TOC">Making it HTML5</a></h4>
<p><code>$ pandoc --from markdown --to html --standalone --html5 index.mdown > index.html</code></p>
<pre class="sourceCode"><code class="sourceCode html"><br /><span class="dt"><!DOCTYPE </span>html<span class="dt">></span><br /><span class="kw"><html></span><br /><span class="kw"><head></span><br /> <span class="kw"><meta</span><span class="ot"> charset=</span><span class="st">"utf-8"</span> <span class="kw">/></span><br /> <span class="kw"><meta</span><span class="ot"> name=</span><span class="st">"generator"</span><span class="ot"> content=</span><span class="st">"pandoc"</span> <span class="kw">/></span><br /> <span class="kw"><title></span>Cloud Four: We make the web mobile<span class="kw"></title></span><br /> <span class="co"><!--[if lt IE 9]></span><br /><span class="co"> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script></span><br /><span class="co"> <![endif]--></span><br /><span class="kw"></head></span><br /><span class="kw"><body></span><br /><span class="kw"><header></span><br /><span class="kw"><h1</span><span class="ot"> class=</span><span class="st">"title"</span><span class="kw">></span>Cloud Four: We make the web mobile<span class="kw"></h1></span><br /><span class="kw"></header></span><br /><span class="kw"><h1</span><span class="ot"> id=</span><span class="st">"cloud-four"</span><span class="kw">></span>Cloud Four<span class="kw"></h1></span><br /><span class="kw"><h2</span><span class="ot"> id=</span><span class="st">"we-make-the-mobile---web"</span><span class="kw">></span>We Make the Mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> Web<span class="kw"></h2></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"development"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/dev"</span><span class="ot"> title=</span><span class="st">"Mobile Web Development"</span><span class="kw">></span>Development<span class="kw"></a></h3></span><br /><span class="kw"><p></span>We build the mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> web.<span class="kw"></p></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"training"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/training"</span><span class="ot"> title=</span><span class="st">"Mobile Web Training and Education"</span><span class="kw">></span>Training<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Mobilize your team.<span class="kw"></p></span><br /><span class="kw"><h3</span><span class="ot"> id=</span><span class="st">"consulting"</span><span class="kw">><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/strategy"</span><span class="ot"> title=</span><span class="st">"Mobile Web Consulting and Strategy"</span><span class="kw">></span>Consulting<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Strategy for today and tomorrow.<span class="kw"></p></span><br /><span class="kw"><h4</span><span class="ot"> id=</span><span class="st">"read-our-book"</span><span class="kw">></span>Read our Book<span class="kw"></h4></span><br /><span class="kw"><p></span>We don't just make the mobile web, we also wrote a book about it. Buy <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://bit.ly/hf-mw"</span><span class="ot"> title=</span><span class="st">"Head First Mobile Web"</span><span class="kw">><em></span>Head First Mobile Web<span class="kw"></em></a></span> on Amazon.com.<span class="kw"></p></span><br /><span class="kw"><h4</span><span class="ot"> id=</span><span class="st">"find-us"</span><span class="kw">></span>Find Us<span class="kw"></h4></span><br /><span class="kw"><p></span>Catch up with us in the real world:<span class="kw"></p></span><br /><span class="kw"><ul></span><br /><span class="kw"><li></span>Wed, Jan 18: <span class="dv">&quot;</span>Zombie Apocalypse 101<span class="dv">&quot;</span>: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Jason Grigsby"</span><span class="kw">></span>Jason<span class="kw"></a></span> and <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Lyza Danger Gardner"</span><span class="kw">></span>Lyza<span class="kw"></a></span>, WebVisions, NYC<span class="kw"></li></span><br /><span class="kw"><li></span>Mon, Jan 23: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.mobileportland.com"</span><span class="ot"> title=</span><span class="st">"Mobile Portland"</span><span class="kw">></span>Mobile Portland<span class="kw"></a></span> meeting, <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.urbanairship.com"</span><span class="ot"> title=</span><span class="st">"Urban Airship Building"</span><span class="kw">></span>Urban Airship<span class="kw"></a></li></span><br /><span class="kw"></ul></span><br /><span class="kw"><p><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/events"</span><span class="ot"> title=</span><span class="st">"Cloud Four Happenings"</span><span class="kw">></span>More Gigs...<span class="kw"></a></p></span><br /><span class="kw"></body></span><br /><span class="kw"></html></span></code></pre>
<p>Or, if you're feeling <em>especially</em> HTML5-inclined:</p>
<p><code>$ pandoc --from markdown --to html --standalone --html5 --section-divs index.mdown > index.html</code></p>
<p>This wraps heading levels in HTML5 <code><section></code> elements, like this:</p>
<pre class="sourceCode"><code class="sourceCode html"><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"read-our-book"</span><span class="kw">></span><br /><span class="kw"><h4></span>Read our Book<span class="kw"></h4></span><br /><span class="kw"><p></span>We don't just make the mobile web, we also wrote a book about it. Buy <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://bit.ly/hf-mw"</span><span class="ot"> title=</span><span class="st">"Head First Mobile Web"</span><span class="kw">><em></span>Head First Mobile Web<span class="kw"></em></a></span> on Amazon.com.<span class="kw"></p></span><br /><span class="kw"></section></span></code></pre>
<h4 id="but-what-about-snippets-common-to-multiple-pages"><a href="#TOC">But what about snippets common to multiple pages?</a></h4>
<p>So what do we do about headers, footer links, stuff like that?</p>
<p>Well, first we write them in markdown:</p>
<pre><code><br />* [Our Projects](http://www.cloudfour.com/projects "Our Projects")
* [Our Team](http://www.cloudfour.com/about "About us and our team")
* [Mobile Portland](http://www.mobileportland.com "Mobile Portland")
* [Future Friendly](http://futurefriend.ly "Future Friendly")
</code></pre>
<p>Let's say that we put that content above in a file named <code>footer.mdown</code>.</p>
<p>Then we could run:</p>
<p><code>$ pandoc -f markdown -t html footer.mdown > footer.html</code></p>
<p>and then:</p>
<p><code>$ pandoc -f markdown -t html --standalone --html5 --section-divs --include-after-body=footer.html index.mdown > index.html</code></p>
<p>And, voila, we've included the (reusable) footer file at the end of the <code><body></code> of our index.html.</p>
<p><em>But, uh, where is the HTML code and template coming from?</em></p>
<h4 id="making-our-own-html-template-for-pandoc"><a href="#TOC">Making our own HTML template for pandoc</a></h4>
<p>Pandoc ships with a default HTML5 template. But we're probably going to want to make our own, huh? Let's try this:</p>
<pre class="sourceCode"><code class="sourceCode html"><br /><span class="er"><</span>!doctype html><br /><span class="co"><!--[if lt IE 7]> <![endif]--></span><br /><span class="co"><!--[if IE 7]> <![endif]--></span><br /><span class="co"><!--[if IE 8]> <![endif]--></span><br /><span class="co"><!--[if gt IE 8]><!--></span> <span class="co"><!--<![endif]--></span><br /><span class="kw"><head></span><br /> <span class="kw"><meta</span><span class="ot"> charset=</span><span class="st">"utf-8"</span><span class="kw">></span><br /> <span class="kw"><meta</span><span class="ot"> http-equiv=</span><span class="st">"X-UA-Compatible"</span><span class="ot"> content=</span><span class="st">"IE=edge,chrome=1"</span><span class="kw">></span><br /> <span class="kw"><meta</span><span class="ot"> name=</span><span class="st">"viewport"</span><span class="ot"> content=</span><span class="st">"width=device-width,initial-scale=1"</span><span class="kw">></span><br /> <span class="kw"><style</span><span class="ot"> type=</span><span class="st">"text/css"</span><span class="kw">></span><br /> <span class="co">/*</span><![<span class="co">CDATA</span>[<span class="co">*/</span><br /> $highlighting-css$<br /> <span class="co">/*</span>]]><span class="co">*/</span><br /> <span class="kw"></style></span><br /> <span class="kw"><link</span><span class="ot"> rel=</span><span class="st">"stylesheet"</span><span class="ot"> href=</span><span class="st">"$css$"</span><span class="kw">></span><br /> <span class="kw"><title></span>$if(title-prefix)$$title-prefix$ - $endif$$if(pagetitle)$$pagetitle$$endif$<span class="kw"></title></span><br /><span class="kw"></head></span><br /><span class="kw"><body></span><br />$body$<br />$for(include-after)$<br />$include-after$<br />$endfor$<br /><span class="kw"></body></span><br /><span class="kw"></html></span></code></pre>
<p><em>And let's save it as <code>page.html</code>.</em></p>
<p>In this very basic HTML page template, I have:</p>
<ul>
<li>Left some basic placeholder areas in which we can work around various versions of IE (though we haven't yet)</li>
<li>Used some of Pandoc's basic variables. They look like this: <code>$body$</code>. It drops in its own code-syntax CSS if it's needed (<code>$highlighting-css$</code>) and uses the meta-data to inform what the <code><title></code> tag should contain (don't worry if the conditional syntax there is kind of gibberish; it's not cogent to the main points here). You can also see it looping through anything given as <code>--include-after-body</code> arguments.</li>
<li>NOT completed it. It needs to display anything that might be defined as <code>--include-before-body</code> as well as several other features of pandoc. It's a start, for demonstration purposes.</li>
<li>Given it a way to include CSS dynamically using the <code>$css$</code> variable.</li>
</ul>
<p>Now that we have our own HTML5 template, let's run</p>
<p><code>$pandoc -f markdown -t html --standalone --html5 --section-divs --template=page.html --include-after-body=footer.html index.mdown > index.html</code></p>
<p>Let's read that command together, just to make sure we haven't lost the plot.</p>
<p>We're asking markdown to convert <em>from</em> markdown <em>to</em> HTML as a standalone HTML page (not just a fragment) with an HTML5 doctype and corresponding syntax using the template <code>page.html</code>. We're including <code>footer.html</code>, verbatim, at the end of the <code><body></code> element. And we're outputting the whole thing as index.html.</p>
<h4 id="a-segue-way-to-talking-about-css"><a href="#TOC">A segue way to talking about CSS</a></h4>
<p>We're getting close now. But if you were to look at the output, you'd see:</p>
<pre><code><link rel="stylesheet" href="">
</code></pre>
<p>Uh oh! We don't have any CSS?! We need to tell Pandoc <em>one last thing</em>:</p>
<pre><code>$ pandoc -f markdown -t html --standalone --html5 --section-divs --template=page.html --include-after-body=footer.html --css=styles/styles.css index.mdown > index.html
</code></pre>
<p>And now we have a totally reasonable full HTML page:</p>
<pre class="sourceCode"><code class="sourceCode html"><br /><span class="er"><</span>!doctype html><br /><span class="co"><!--[if lt IE 7]> <![endif]--></span><br /><span class="co"><!--[if IE 7]> <![endif]--></span><br /><span class="co"><!--[if IE 8]> <![endif]--></span><br /><span class="co"><!--[if gt IE 8]><!--></span> <span class="co"><!--<![endif]--></span><br /><span class="kw"><head></span><br /> <span class="kw"><meta</span><span class="ot"> charset=</span><span class="st">"utf-8"</span><span class="kw">></span><br /> <span class="kw"><meta</span><span class="ot"> http-equiv=</span><span class="st">"X-UA-Compatible"</span><span class="ot"> content=</span><span class="st">"IE=edge,chrome=1"</span><span class="kw">></span><br /> <span class="kw"><meta</span><span class="ot"> name=</span><span class="st">"viewport"</span><span class="ot"> content=</span><span class="st">"width=device-width,initial-scale=1"</span><span class="kw">></span><br /> <span class="kw"><style</span><span class="ot"> type=</span><span class="st">"text/css"</span><span class="kw">></span><br /> <span class="co">/*</span><![<span class="co">CDATA</span>[<span class="co">*/</span><br /><br /> <span class="co">/*</span>]]><span class="co">*/</span><br /> <span class="kw"></style></span><br /> <span class="kw"><link</span><span class="ot"> rel=</span><span class="st">"stylesheet"</span><span class="ot"> href=</span><span class="st">"styles/styles.css"</span><span class="kw">></span><br /> <span class="kw"><title></span>Cloud Four: We make the web mobile<span class="kw"></title></span><br /><span class="kw"></head></span><br /><span class="kw"><body></span><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"cloud-four"</span><span class="kw">></span><br /><span class="kw"><h1></span>Cloud Four<span class="kw"></h1></span><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"we-make-the-mobile---web"</span><span class="kw">></span><br /><span class="kw"><h2></span>We Make the Mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> Web<span class="kw"></h2></span><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"development"</span><span class="kw">></span><br /><span class="kw"><h3><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/dev"</span><span class="ot"> title=</span><span class="st">"Mobile Web Development"</span><span class="kw">></span>Development<span class="kw"></a></h3></span><br /><span class="kw"><p></span>We build the mobile <span class="dv">&lt;</span>-<span class="dv">&gt;</span> web.<span class="kw"></p></span><br /><span class="kw"></section></span><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"training"</span><span class="kw">></span><br /><span class="kw"><h3><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/training"</span><span class="ot"> title=</span><span class="st">"Mobile Web Training and Education"</span><span class="kw">></span>Training<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Mobilize your team.<span class="kw"></p></span><br /><span class="kw"></section></span><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"consulting"</span><span class="kw">></span><br /><span class="kw"><h3><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/strategy"</span><span class="ot"> title=</span><span class="st">"Mobile Web Consulting and Strategy"</span><span class="kw">></span>Consulting<span class="kw"></a></h3></span><br /><span class="kw"><p></span>Strategy for today and tomorrow.<span class="kw"></p></span><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"read-our-book"</span><span class="kw">></span><br /><span class="kw"><h4></span>Read our Book<span class="kw"></h4></span><br /><span class="kw"><p></span>We don't just make the mobile web, we also wrote a book about it. Buy <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://bit.ly/hf-mw"</span><span class="ot"> title=</span><span class="st">"Head First Mobile Web"</span><span class="kw">><em></span>Head First Mobile Web<span class="kw"></em></a></span> on Amazon.com.<span class="kw"></p></span><br /><span class="kw"></section></span><br /><span class="kw"><section</span><span class="ot"> id=</span><span class="st">"find-us"</span><span class="kw">></span><br /><span class="kw"><h4></span>Find Us<span class="kw"></h4></span><br /><span class="kw"><p></span>Catch up with us in the real world:<span class="kw"></p></span><br /><span class="kw"><ul></span><br /><span class="kw"><li></span>Wed, Jan 18: <span class="dv">&quot;</span>Zombie Apocalypse 101<span class="dv">&quot;</span>: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Jason Grigsby"</span><span class="kw">></span>Jason<span class="kw"></a></span> and <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.example.com"</span><span class="ot"> title=</span><span class="st">"Lyza Danger Gardner"</span><span class="kw">></span>Lyza<span class="kw"></a></span>, WebVisions, NYC<span class="kw"></li></span><br /><span class="kw"><li></span>Mon, Jan 23: <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.mobileportland.com"</span><span class="ot"> title=</span><span class="st">"Mobile Portland"</span><span class="kw">></span>Mobile Portland<span class="kw"></a></span> meeting, <span class="kw"><a</span><span class="ot"> href=</span><span class="st">"http://www.urbanairship.com"</span><span class="ot"> title=</span><span class="st">"Urban Airship Building"</span><span class="kw">></span>Urban Airship<span class="kw"></a></li></span><br /><span class="kw"></ul></span><br /><span class="kw"><p><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/events"</span><span class="ot"> title=</span><span class="st">"Cloud Four Happenings"</span><span class="kw">></span>More Gigs...<span class="kw"></a></p></span><br /><span class="kw"></section></span><br /><span class="kw"></section></span><br /><span class="kw"></section></span><br /><span class="kw"></section></span><br /><span class="kw"><nav></span><br /> <span class="kw"><ul></span><br /> <span class="kw"><li><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/projects"</span><span class="ot"> title=</span><span class="st">"Our Projects"</span><span class="kw">></span>Our Projects<span class="kw"></a></li></span><br /> <span class="kw"><li><a</span><span class="ot"> href=</span><span class="st">"http://www.cloudfour.com/about"</span><span class="ot"> title=</span><span class="st">"About us and our team"</span><span class="kw">></span>Our Team<span class="kw"></a></li></span><br /> <span class="kw"><li><a</span><span class="ot"> href=</span><span class="st">"http://www.mobileportland.com"</span><span class="ot"> title=</span><span class="st">"Mobile Portland"</span><span class="kw">></span>Mobile Portland<span class="kw"></a></li></span><br /> <span class="kw"><li><a</span><span class="ot"> href=</span><span class="st">"http://futurefriend.ly"</span><span class="ot"> title=</span><span class="st">"Future Friendly"</span><span class="kw">></span>Future Friendly<span class="kw"></a></li></span><br /> <span class="kw"></ul></span><br /><span class="kw"></nav></span><br /><span class="kw"></body></span><br /><span class="kw"></html></span></code></pre>
<h3 id="step-2-css"><a href="#TOC">Step 2: CSS</a></h3>
<h4 id="sass-and-scss"><a href="#TOC">Sass and SCSS</a></h4>
<p>SCSS is cool. It stands for <em>Sassy CSS</em> and is the latest version of Sass.</p>
<p>I think showing you an example is probably the quickest way to show what it does. Let's say we dumped the following into a file called <code>styles.scss</code>:</p>
<pre class="sourceCode"><code class="sourceCode css"><br />$cloudfour_blue<span class="dv">:</span> <span class="fl">#709ad0</span>;<br />$accent_green<span class="dv">:</span> <span class="fl">#c4d82d</span>;<br />$accent_brown<span class="dv">:</span> <span class="fl">#78562f</span>;<br />$dark_base<span class="dv">:</span> <span class="fl">#526873</span>;<br />$standard_radius<span class="dv">:</span> 10px;<br /><br />body <span class="kw">{</span><br /> <span class="kw">font-family:</span> helvetica<span class="kw">;</span><br /> <span class="kw">font-size:</span> <span class="dt">95%</span><span class="kw">;</span><br /> <span class="kw">line-height:</span> <span class="dt">1.2em</span><span class="kw">;</span><br /> <span class="kw">color:</span> darken($dark_base, <span class="dt">20%</span>)<span class="kw">;</span><br /> <span class="er">@media</span> <span class="er">screen</span> <span class="er">and</span> <span class="er">(</span><span class="kw">min-width:</span> <span class="dt">600px</span>) {<br /> background-color: lighten($cloudfour_blue, <span class="dt">35%</span>)<span class="kw">;</span><br /> <span class="kw">}</span><br />}<br /><br />h1, h2, h3 <span class="kw">{</span><br /> <span class="kw">color:</span> $cloudfour_blue<span class="kw">;</span><br /><span class="kw">}</span><br /><br />h4 <span class="kw">{</span><br /> <span class="kw">color:</span> darken($accent_green, <span class="dt">15%</span>)<span class="kw">;</span><br /><span class="kw">}</span><br /><br />section, article, header <span class="kw">{</span><br /> <span class="kw">display:</span> <span class="dt">block</span><span class="kw">;</span><br /> <span class="er">a</span> <span class="er">{</span><br /> <span class="kw">color:</span> $cloudfour_blue<span class="kw">;</span><br /> <span class="kw">}</span><br />}</code></pre>
<p>Let's talk about this for a bit.</p>
<ol type="1">
<li>There are <em>variables</em>. I grabbed a few representative hex values from our current site and gave them descriptive names.</li>
<li>There is <em>nesting</em>. Look at the location of that <code>@media</code> rule! This is an imaginary stupid situation—changing the background color depending on screen width—but think about stuff like this. You're writing CSS for a given selector and you realize you want to do something with a media query for the way that selector behaves. With SCSS you can stick the media query right where you are and it will take care of writing the appropriate output CSS. Also check out the way I've made <code><a></code> elements inside <code><section>, <article> and <header></code> elements (arbitrary, admittedly) <code>$cloudfour_blue</code> without having to write the full selector <code>section.a</code> (OK, terrible example, but you get the idea. You can group your stuff logically).</li>
<li>There are <em>functions</em>. Notice how I've used <code>$cloudfour_blue</code> but I've made it lighter, for the background on wider screens: <code>background-color: lighten($cloudfour_blue, 35%);</code>. There are several other examples in there.</li>
<li>I haven't even shown you <code>mixins</code> (<em>chunks</em> of CSS you can reuse) or <code>selector inheritance</code> (major shorthand for saying "I want to start with what's defined in this other selector and then add more stuff to it).</li>
</ol>
<h4 id="what-that-scss-turns-into"><a href="#TOC">What that SCSS turns into</a></h4>
<p>I'm going to run that through the magic SASS machine (OK, it's really a <em>Ruby gem</em> that can be installed with one line in your Terminal on your Mac, really, I swear). My command looks like:</p>
<p><code>$ sass styles.scss styles.css</code></p>
<p>Out comes:</p>
<pre class="sourceCode"><code class="sourceCode css"><br />body <span class="kw">{</span><br /> <span class="kw">font-family:</span> helvetica<span class="kw">;</span><br /> <span class="kw">font-size:</span> <span class="dt">95%</span><span class="kw">;</span><br /> <span class="kw">line-height:</span> <span class="dt">1.2em</span><span class="kw">;</span><br /> <span class="kw">color:</span> <span class="dt">#283237</span><span class="kw">;</span> <span class="kw">}</span><br /> <span class="dv">@media</span> <span class="dv">screen</span> <span class="er">and</span> <span class="er">(min-width:</span> <span class="er">600px)</span> <span class="dv">{</span><br /> body <span class="kw">{</span><br /> <span class="kw">background-color:</span> <span class="dt">#f6f9fc</span><span class="kw">;</span> <span class="kw">}</span> <span class="dv">}</span><br /><br />h1, h2, h3 <span class="kw">{</span><br /> <span class="kw">color:</span> <span class="dt">#709ad0</span><span class="kw">;</span> <span class="kw">}</span><br /><br />h4 <span class="kw">{</span><br /> <span class="kw">color:</span> <span class="dt">#8d9c1d</span><span class="kw">;</span> <span class="kw">}</span><br /><br />section, article, header <span class="kw">{</span><br /> <span class="kw">display:</span> <span class="dt">block</span><span class="kw">;</span> <span class="kw">}</span><br /> section a, article a, header a <span class="kw">{</span><br /> <span class="kw">color:</span> <span class="dt">#709ad0</span><span class="kw">;</span> <span class="kw">}</span></code></pre>
<p>See how SASS expands and writes CSS our browsers will understand?!</p>
<p>Go <a href="http://sass-lang.com/" title="SASS 3 (SCSS)">learn more</a>!!</p>
<div class="footnotes">
<hr />
<ol>
<li id="fn1"><p>Well, almost. The human-readable part is definitely true. The markdown viewer part is a bit dicey on a couple of elements. As I'm on the pandoc mailing list, I plan to raise a few flags on these, especially the code-block-delineation, which is an ugly thing like <code>~~~~{.php}</code> and nested lists; while Pandoc's lists and nested lists are far more powerful than markdown's (and quite human-readable), the way they look in some markdown viewers is not so good. <a href="#fnref1" class="footnoteBackLink">↩</a></p></li>
</ol>
</div>
</nav>
</body>
</html>