Liquid
Safe, customer facing template language for flexible web apps.
diff --git a/_includes/home-users-grid.html b/_includes/home-users-grid.html new file mode 100644 index 00000000..22cd1fdb --- /dev/null +++ b/_includes/home-users-grid.html @@ -0,0 +1,24 @@ +
+ +
+ 
+ 
+ 
+ ...and many more!
diff --git a/_sass/main.scss b/_sass/main.scss index 3705bbe0..eb498cd0 100755 --- a/_sass/main.scss +++ b/_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"; diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss index 799ad0f5..cf229443 100644 --- a/_sass/modules/_buttons.scss +++ b/_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 { diff --git a/_sass/modules/_content-area.scss b/_sass/modules/_content-area.scss index 60694e38..11ed206e 100644 --- a/_sass/modules/_content-area.scss +++ b/_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" diff --git a/_sass/modules/_home-banner.scss b/_sass/modules/_home-banner.scss index fcaddf88..cec7ff01 100644 --- a/_sass/modules/_home-banner.scss +++ b/_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; diff --git a/_sass/modules/_home-users-grid.scss b/_sass/modules/_home-users-grid.scss new file mode 100644 index 00000000..54de4b9c --- /dev/null +++ b/_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; +} diff --git a/_sass/partials/_defaults.scss b/_sass/partials/_defaults.scss index a025ebcf..5ff2048d 100644 --- a/_sass/partials/_defaults.scss +++ b/_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; diff --git a/basics/introduction.md b/basics/introduction.md new file mode 100644 index 00000000..ba21eee1 --- /dev/null +++ b/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" }} +``` diff --git a/images/500px-logo.png b/images/500px-logo.png new file mode 100644 index 00000000..7d86372f Binary files /dev/null and b/images/500px-logo.png differ diff --git a/images/jekyll-logo.png b/images/jekyll-logo.png new file mode 100644 index 00000000..374fb947 Binary files /dev/null and b/images/jekyll-logo.png differ diff --git a/images/salesforcedesk-logo.png b/images/salesforcedesk-logo.png new file mode 100644 index 00000000..26666c8d Binary files /dev/null and b/images/salesforcedesk-logo.png differ diff --git a/images/zendesk-logo.png b/images/zendesk-logo.png new file mode 100644 index 00000000..baeca7ad Binary files /dev/null and b/images/zendesk-logo.png differ diff --git a/index.md b/index.md index d60868a0..7ce0a6a5 100644 --- a/index.md +++ b/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. diff --git a/tags/control-flow.md b/tags/control-flow.md index 03c2507d..d7c4c01e 100644 --- a/tags/control-flow.md +++ b/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.