Adds Introduction page

Simplified Introdction page

Spiced up home page more, style changes to code examples

_includes/home-banner.html

@@ -1,4 +1,4 @@
-<header class="home--banner">
+<header class="home-banner">
   <h1>Liquid</h1>
   <p>Safe, customer facing template language for flexible web apps.</p>
   <p class="btn-row">

_includes/home-users-grid.html

@@ -0,0 +1,24 @@
+<div class="home-users-grid">
+  <div class="home-users-grid__item">
+    <a href="http://jekyllrb.com/" target="_blank">
+      <img src="/images/jekyll-logo.png" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="http://www.desk.com/" target="_blank">
+      <img src="/images/salesforcedesk-logo.png" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="https://www.zendesk.com/ " target="_blank">
+      <img src="/images/zendesk-logo.png" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="http://500px.com/" target="_blank">
+      <img src="/images/500px-logo.png" />
+    </a>
+  </div>
+</div>
+
+<p class="home-users-blurb">...and <a href="https://github.com/Shopify/liquid/wiki#who-uses-liquid" target="_blank">many more!</a></p>

_sass/main.scss

@@ -9,6 +9,7 @@
 @import "modules/layout";
 @import "modules/buttons";
 @import "modules/home-banner";
+@import "modules/home-users-grid";
 @import "modules/content-area";
 
 @import "vendors/syntax-highlighting";

_sass/modules/_buttons.scss

@@ -1,10 +1,10 @@
 .btn {
   color: $color-white;
-  display: inline-block;
+  display: flex;
   background: $color-blue-5;
+  align-items: center;
   padding: $spacing-unit/4 $spacing-unit/2;
-  width: 200px;
-  border-radius: 4px;
+  border-radius: 8px;
   text-decoration: none;
 
   &:hover {

_sass/modules/_content-area.scss

@@ -13,12 +13,12 @@
     content: "Example";
     display: block;
     padding: 8px 12px;
-    font-weight: bold;
-    color: $color-white;
-    background: $color-blue-5;
-    border-bottom: none;
+    color: $color-slate;
+    background: #fff;
+    border: 1px solid $color-blue-2;
     border-radius: 3px 3px 0 0;
-    box-sizing: border-box;
+    font-size: 16px;
+    font-weight: bold;
   }
 
   // Label every second code block with "Output"

_sass/modules/_home-banner.scss

@@ -1,4 +1,4 @@
-.home--banner {
+.home-banner {
   text-align: center;
   border-bottom: 1px solid lighten($color-slate, 50%);
   padding-bottom: $spacing-unit;

_sass/modules/_home-users-grid.scss

@@ -0,0 +1,20 @@
+.home-users-grid {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: $spacing-unit / 2;
+}
+
+.home-users-grid__item{
+  flex: 1;
+  margin-right: $spacing-unit / 2;
+  max-width: 50%;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.home-users-blurb {
+  text-align: right;
+}

_sass/partials/_defaults.scss

@@ -1,5 +1,5 @@
 $base-font-family: 'Droid Sans', sans-serif;
-$base-font-size:   16px;
+$base-font-size:   18px;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;
 $spacing-unit:     40px;

basics/introduction.md

@@ -0,0 +1,64 @@
+---
+title: Introduction
+---
+
+Liquid code can be categorized into three parts: **objects**, **tags**, and **filters**.
+
+## Objects
+
+**Objects** tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
+
+
+```liquid
+{% raw %}
+{{ page.title }}
+{% endraw %}
+```
+
+```text
+Introduction
+```
+
+In this case, Liquid is rendering the content of an object called `page.title`, and that object contains the text `Introduction`.
+
+## Tags
+
+**Tags** create the logic and control flow for your templates. They are denoted by curly braces and percent signs: `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}`.
+
+Tag markup does not resolve to text. This means that you can assign variables and create conditionals and loops without showing any of the Liquid logic on the page.
+
+```liquid
+{% raw %}
+{% if user %}
+  Hello {{ user.name }}!
+{% endif %}
+
+{% endraw %}
+```
+
+```text
+Hello Adam!
+```
+
+Tags can be categorized into three types:
+
+- [Control flow](/tags/control-flow)
+- [Iteration](/tags/iteration)
+- [Variable assignments](/tags/variable)
+
+You can read more about each type of tag in their respective sections.
+
+
+## Filters
+
+**Filters** modify the output of a Liquid object. They are using within an output and are separated by a `|`.
+
+```liquid
+{% raw %}
+{{ "/my/fancy/url" | append: ".html" }}
+{% endraw %}
+```
+
+```text
+{{ "/my/fancy/url" | append: ".html" }}
+```

index.md

@@ -4,88 +4,13 @@ layout: default
 
 {% include home-banner.html %}
 
-Liquid is an open-source template language created by [Shopify](https://www.shopify.com) and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Liquid is also used in static site generators like [Jekyll](http://jekyllrb.com).
+## What is Liquid?
+
+Liquid is an open-source template language created by [Shopify](https://www.shopify.com) and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
 
 Liquid has been in production use since June 2006 and is now used by many other hosted web applications.
 
-It was developed for usage in Ruby on Rails web applications and integrates seamlessly as a plugin but it also works well as a stand-alone library.
+## Who uses Liquid?
 
-## Introduction
+{% include home-users-grid.html %}
 
-Liquid is a language for writing and rendering templates. This means that you can reduce code duplication by displaying and manipulating content on web pages without changing a site's code.
-
-### Objects
-
-**Objects** tell Liquid where to show content on a page.
-
-Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
-
-For example, you can show basic content like a page title using a Liquid object:
-
-```liquid
-{% raw %}
-{{ page.title }}
-{% endraw %}
-```
-
-```text
-Overview
-```
-
-In this case, Liquid is rendering the content of an object called `page.title`, and that object contains the text `Overview`.
-
-[Filters](/filters) can change the way objects are rendered.
-
-### Tags
-
-**Tags** create the logic and control flow for your template, including variable assignments, conditionals, and loops.
-
-Tags are denoted by curly braces and percent signs: `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}`.
-
-Tag markup does not resolve to text. This means that you can assign variables and create conditionals and loops without showing any of the Liquid logic on the page.
-
-#### Conditionals
-
-Conditionals can change the information Liquid shows using programming logic:
-
-```liquid
-{% raw %}
-{% if user %}
-  Hello {{ user.name }}!
-{% endif %}
-
-{% endraw %}
-```
-
-```text
-Hello Adam!
-```
-
-This conditional statement `if user` checks to see if an object called `user` exists. If the condition is *true* (that is, if there is a `user`), Liquid shows any content that is contained between the `if` and `endif` tags.
-
-In this case, our user's `name` is Adam, so the template prints `Hello Adam!`.
-
-#### Loops
-
-You can also use tags to loop over a list or array of objects:
-
-```liquid
-{% raw %}
-
-{% for item in collection %}
-  I have a {{ item }}
-{% endfor %}
-
-{% endraw %}
-```
-
-```text
-I have a shirt
-I have a pants
-I have a banana
-I have a bucket
-```
-
-The statement `for item in collection` tells Liquid to show the content between the `for` and `endfor` tags one time for every `item` in the `collection` object.
-
-You can use any arbitrary name (this example used `item`) to reference the items to loop through.

tags/control-flow.md

@@ -2,6 +2,8 @@
 title: Control flow
 ---
 
+Control flow tags can change the information Liquid shows using programming logic.
+
 ## case/when
 
 Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.