WIP: Adds New Getting Started section

_includes/getting-started-sidebar.html

@@ -0,0 +1,13 @@
+<nav class="nav__side">
+  <ul class="bare-list sidebar-list">
+    <li><a href="#getting-started" class="is-active">Getting Started<i class="lg-right-open-mini arrow"></i></a></li>
+
+    <li>Docs for version {{ site.docs-version }}</li>
+  </ul>
+  <li><a href="https://github.com/peterramsing/lost" class="[ btn btn--turquoise ]" target="_blank"><i class="lg-github"></i> View on Github</a></li>
+  <div class="nav__toggle [ hamburger hamburger--squeeze ]">
+    <div class="hamburger-box">
+      <div class="hamburger-inner"></div>
+    </div>
+  </div>
+</nav>

getting-started.html

@@ -0,0 +1,53 @@
+---
+layout: default
+title: "Getting Started with LostGrid"
+---
+
+{% include getting-started-sidebar.html %}
+
+<div class="wrapper">
+  <div class="section__inner" id="section-wrapper">
+
+    <article class="section--content" id="getting-started">
+        <h2 class="h1">Getting Started</h2>
+
+
+
+{% highlight js %}
+
+
+
+
+{% endhighlight %}
+
+
+    </article>
+
+
+
+    <article class="section--content" id="gulp">
+      <h3 class="h2">Gulp</h3>
+      <p>Here's an example of a Gulp project</p>
+
+      <p><a target="_blank" href="https://github.com/lostgrid/lostgrid-examples/tree/master/gulp">See Example Project</a></p>
+
+      <p>If you're looking for a project with SCSS (or possibly Less), here's an example for that: <a target="_blank" href="https://github.com/lostgrid/lostgrid-examples/tree/master/gulp-scss">SCSS + Gulp Example Project</a></p>
+
+{% highlight js %}
+
+const postcss = require('gulp-postcss');
+const lostgrid = require('lost');
+
+gulp.task('styles', () => {
+  gulp.src('source/main.css')
+    .pipe(postcss([
+      lostgrid()
+    ]))
+    .pipe(gulp.dest('build'));
+})
+
+{% endhighlight %}
+    </article>
+
+   </div>
+</div>

index.html

@@ -12,6 +12,7 @@
         <h1 class="lede">Lost Grid is a powerful grid system built in <a href="http://postcss.org/">PostCSS</a> that works with any preprocessor and even vanilla CSS.</h1>
         <ul class="list--bare list--center">
           <li><a href="/docs.html" class="[ btn btn--khaki ]"><i class="lg-files"></i> Read the docs</a></li>
+          <li><a href="/getting-started.html" class="[ btn btn--khaki ]" target="_blank"><i class="lg-github"></i> Getting Started</a></li>
           <li><a href="https://github.com/peterramsing/lost" class="[ btn btn--turquoise ]" target="_blank"><i class="lg-github"></i> View on Github</a></li>
         </ul>
       </div>