{{ page.title }}

diff --git a/_sass/modules/_base.scss b/_sass/modules/_base.scss index 635fcdcc..afacffb0 100644 --- a/_sass/modules/_base.scss +++ b/_sass/modules/_base.scss @@ -61,12 +61,6 @@ li { } } -/** Headings */ - -h1, h2, h3, h4, h5, h6 { - font-weight: bold; -} - /** Links */ a { color: $color-blue-5; @@ -80,19 +74,22 @@ a { } } +/** Headings */ + h1 { font-size: 2em; + font-weight: 300; } h2 { font-size: 1.5em; - text-decoration: underline; + font-weight: 300; margin-top: $spacing-unit; } h3 { + margin-top: $spacing-unit; font-size: 1em; - text-decoration: underline; } h4 { @@ -112,6 +109,7 @@ blockquote { } pre, code { + font-family: Menlo, Monaco, monospace; font-size: 15px; border-radius: 3px; background-color: lighten($color-blue-1, 0.9); diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss index 1bcdaefb..90e3f797 100644 --- a/_sass/modules/_buttons.scss +++ b/_sass/modules/_buttons.scss @@ -1,5 +1,6 @@ .btn { color: $color-white; + fill: currentColor; display: flex; background: $color-blue-5; align-items: center; @@ -28,6 +29,14 @@ margin-bottom: 0; } } + + svg { + margin-right: $spacing-unit / 4; + width: $base-font-size * 1.5; + height: $base-font-size * 1.5; + vertical-align: middle; + } + } .btn:visited { @@ -49,12 +58,6 @@ } } -.icon { - vertical-align: middle; - margin-right: $spacing-unit / 4; -} - - /*============================================================================ Menu button ==============================================================================*/ @@ -69,4 +72,12 @@ @include tablet-and-up { display: none; } + + svg { + margin-right: $spacing-unit / 4; + width: $base-font-size * 1.2; + height: $base-font-size * 1.2; + vertical-align: middle; + } + } diff --git a/_sass/modules/_home-banner.scss b/_sass/modules/_home-banner.scss index 8c5989db..85fac4c7 100644 --- a/_sass/modules/_home-banner.scss +++ b/_sass/modules/_home-banner.scss @@ -2,14 +2,23 @@ text-align: center; border-bottom: 1px solid lighten($color-slate, 50%); padding-bottom: $spacing-unit; + margin-bottom: $spacing-unit; h1 { - font-weight: bold; + // font-weight: bold; font-size: 4em; + &:after { + content: '💧'; + vertical-align: middle; + } + @include phone-and-up { font-size: 5em; } } -} + p { + color: lighten($color-slate, 20%); + } +} diff --git a/_sass/modules/_layout.scss b/_sass/modules/_layout.scss index 6971064a..44d39a32 100644 --- a/_sass/modules/_layout.scss +++ b/_sass/modules/_layout.scss @@ -70,13 +70,18 @@ body { .sidebar__logo { font-size: $base-font-size * 2; - font-weight: bold; + font-weight: 300; text-align: center; height: $logo-height; line-height: $logo-height; margin-bottom: 0; border-bottom: 1px solid $color-blue-4; + &:after { + content: '💧'; + vertical-align: middle; + } + a { color: $color-white; text-decoration: none; @@ -119,10 +124,10 @@ body { } .section__header { - font-weight: bold; font-size: 1em; text-decoration: none; color: $color-white; + margin-top: 0; margin-bottom: $spacing-unit / 4; } diff --git a/_sass/partials/_defaults.scss b/_sass/partials/_defaults.scss index 5ff2048d..a0674fe1 100644 --- a/_sass/partials/_defaults.scss +++ b/_sass/partials/_defaults.scss @@ -1,6 +1,5 @@ -$base-font-family: 'Droid Sans', sans-serif; +$base-font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; $base-font-size: 18px; $small-font-size: $base-font-size * 0.875; $base-line-height: 1.5; $spacing-unit: 40px; - diff --git a/basics/index.md b/basics/index.md new file mode 100644 index 00000000..9b85eceb --- /dev/null +++ b/basics/index.md @@ -0,0 +1,3 @@ +--- +redirect_to: /liquid/basics/introduction +--- diff --git a/basics/introduction.md b/basics/introduction.md index ed8a7e98..940952af 100644 --- a/basics/introduction.md +++ b/basics/introduction.md @@ -1,7 +1,5 @@ --- title: Introduction -redirect_from: - - /basics/ --- Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters). diff --git a/filters/abs.md b/filters/abs.md index c35489c5..fc23eb6e 100644 --- a/filters/abs.md +++ b/filters/abs.md @@ -1,5 +1,6 @@ --- title: abs +description: Liquid filter that gets the absolute value of a number. --- Returns the absolute value of a number. diff --git a/filters/append.md b/filters/append.md index abd414f7..9c0bc162 100644 --- a/filters/append.md +++ b/filters/append.md @@ -1,5 +1,6 @@ --- title: append +description: Liquid filter that appends a string to another string. --- Concatenates two strings and returns the concatenated value. diff --git a/filters/capitalize.md b/filters/capitalize.md index 1ff06d28..1b160e4a 100644 --- a/filters/capitalize.md +++ b/filters/capitalize.md @@ -1,5 +1,6 @@ --- title: capitalize +description: Liquid filter that capitalizes the first character in a string. --- Makes the first character of a string capitalized. diff --git a/filters/ceil.md b/filters/ceil.md index b9cb03e8..bfecfe48 100644 --- a/filters/ceil.md +++ b/filters/ceil.md @@ -1,5 +1,6 @@ --- title: ceil +description: Liquid filter that gets the ceiling of a number by rounding up to the nearest integer. --- Rounds the input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied. diff --git a/filters/date.md b/filters/date.md index 09f67f1f..5423221e 100644 --- a/filters/date.md +++ b/filters/date.md @@ -1,5 +1,6 @@ --- title: date +description: Liquid filter that prints and formats dates. --- Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](http://strftime.net). diff --git a/filters/default.md b/filters/default.md index 96249a1f..9437cd50 100644 --- a/filters/default.md +++ b/filters/default.md @@ -1,5 +1,6 @@ --- title: default +description: Liquid filter that specifies a fallback in case a value doesn't exist. --- Allows you to specify a fallback in case a value doesn't exist. `default` will show its value if the left side is `nil`, `false`, or empty. diff --git a/filters/divided_by.md b/filters/divided_by.md index fc6abc3c..70997088 100644 --- a/filters/divided_by.md +++ b/filters/divided_by.md @@ -1,5 +1,6 @@ --- title: divided_by +description: Liquid filter that divides a number by another number. --- Divides a number by the specified number. diff --git a/filters/downcase.md b/filters/downcase.md index eaec276e..d08224cd 100644 --- a/filters/downcase.md +++ b/filters/downcase.md @@ -1,5 +1,6 @@ --- title: downcase +description: Liquid filter that coverts a string to lowercase. --- Makes each character in a string lowercase. It has no effect on strings which are already all lowercase. diff --git a/filters/escape.md b/filters/escape.md index 777fd7ad..479325b5 100644 --- a/filters/escape.md +++ b/filters/escape.md @@ -1,5 +1,6 @@ --- title: escape +description: Liquid filter that escapes URL-unsafe characters in a string. --- Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn't change strings that don't have anything to escape. diff --git a/filters/escape_once.md b/filters/escape_once.md index 3edcae35..6ee787ec 100644 --- a/filters/escape_once.md +++ b/filters/escape_once.md @@ -1,5 +1,6 @@ --- title: escape_once +description: Liquid filter that escapes URL-unsafe characters in a string once. --- Escapes a string without changing existing escaped entities. It doesn't change strings that don't have anything to escape. diff --git a/filters/first.md b/filters/first.md index f87479bd..4d80f1ed 100644 --- a/filters/first.md +++ b/filters/first.md @@ -1,5 +1,6 @@ --- title: first +description: Liquid filter that returns the first item of an array. --- Returns the first item of an array. diff --git a/filters/floor.md b/filters/floor.md index dccc10ec..3e6a597a 100644 --- a/filters/floor.md +++ b/filters/floor.md @@ -1,5 +1,6 @@ --- title: floor +description: Liquid filter that gets the floor of a number by rounding down to the nearest integer. --- Rounds a number down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied. diff --git a/filters/index.md b/filters/index.md index 14bda7c3..aec1972a 100644 --- a/filters/index.md +++ b/filters/index.md @@ -1,14 +1,3 @@ --- -title: Filters -type: index +redirect_to: /liquid/filters/abs --- - -**Filters** change the output of a Liquid object. You can append one or more filters to an object by separating the filter and its parameters by a pipe symbol `|`. - -{% assign filter_pages = site.pages | where: 'type', 'filter' %} - -{% for item in filter_pages %} -## [{{ item.title }}]({{ item.url | prepend: site.baseurl }}) - -{{ item.content }} -{% endfor %} diff --git a/filters/join.md b/filters/join.md index c0dee8da..2cd589ce 100644 --- a/filters/join.md +++ b/filters/join.md @@ -1,5 +1,6 @@ --- title: join +description: Liquid filter that joins an array of strings into a single string. --- Combines the items in an array into a single string using the argument as a separator. diff --git a/filters/last.md b/filters/last.md index 5f3c6805..1273078d 100644 --- a/filters/last.md +++ b/filters/last.md @@ -1,5 +1,6 @@ --- title: last +description: Liquid filter that gets the last value in an array. --- Returns the last item of an array. diff --git a/filters/lstrip.md b/filters/lstrip.md index b143bb33..be8c19c6 100644 --- a/filters/lstrip.md +++ b/filters/lstrip.md @@ -1,5 +1,6 @@ --- title: lstrip +description: Liquid filter that removes whitespace from the left side of a string. --- Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words. diff --git a/filters/map.md b/filters/map.md index 61fddb92..9b352a82 100644 --- a/filters/map.md +++ b/filters/map.md @@ -1,5 +1,6 @@ --- title: map +description: Liquid filter that creates an array of values by extracting a named property from an object. --- Creates an array of values by extracting the values of a named property from another object. diff --git a/filters/minus.md b/filters/minus.md index f9d44740..0b0ffc78 100644 --- a/filters/minus.md +++ b/filters/minus.md @@ -1,5 +1,6 @@ --- title: minus +description: Liquid filter that subtracts one number from another. --- Subtracts a number from another number. diff --git a/filters/modulo.md b/filters/modulo.md index bb31570a..38e538c4 100644 --- a/filters/modulo.md +++ b/filters/modulo.md @@ -1,5 +1,6 @@ --- title: modulo +description: Liquid filter that returns the remainder from a division operation. --- Returns the remainder of a division operation. diff --git a/filters/newline_to_br.md b/filters/newline_to_br.md index a936e408..5b694dad 100644 --- a/filters/newline_to_br.md +++ b/filters/newline_to_br.md @@ -1,5 +1,6 @@ --- title: newline_to_br +description: Liquid filter that converts newlines in an input string to HTML
tags. --- Replaces every newline (`\n`) with an HTML line break (`
`). diff --git a/filters/plus.md b/filters/plus.md index 52e97aca..0347f599 100644 --- a/filters/plus.md +++ b/filters/plus.md @@ -1,5 +1,6 @@ --- title: plus +description: Liquid filter that adds a number to another number. --- Adds a number to another number. diff --git a/filters/prepend.md b/filters/prepend.md index 98464b0f..71def9fb 100644 --- a/filters/prepend.md +++ b/filters/prepend.md @@ -1,5 +1,6 @@ --- title: prepend +description: Liquid filter that prepends a string to the beginning of another string. --- Adds the specified string to the beginning of another string. diff --git a/filters/remove.md b/filters/remove.md index 6d517e82..0a294aba 100644 --- a/filters/remove.md +++ b/filters/remove.md @@ -1,5 +1,6 @@ --- title: remove +description: Liquid filter that removes all occurences of a given substring from a string. --- Removes every occurrence of the specified substring from a string. diff --git a/filters/remove_first.md b/filters/remove_first.md index 5f18ff77..ead16b95 100644 --- a/filters/remove_first.md +++ b/filters/remove_first.md @@ -1,5 +1,6 @@ --- title: remove_first +description: Liquid filter that removes the first occurence of a given substring from a string. --- Removes only the first occurrence of the specified substring from a string. diff --git a/filters/replace.md b/filters/replace.md index 823c0914..c01e419e 100644 --- a/filters/replace.md +++ b/filters/replace.md @@ -1,5 +1,6 @@ --- title: replace +description: Liquid filter that replaces all occurences of a given substring in a string. --- Replaces every occurrence of an argument in a string with the second argument. diff --git a/filters/replace_first.md b/filters/replace_first.md index df43519b..d9703e7f 100644 --- a/filters/replace_first.md +++ b/filters/replace_first.md @@ -1,5 +1,6 @@ --- title: replace_first +description: Liquid filter that replaces the first occurrence of a given substring in a string. --- Replaces only the first occurrence of the first argument in a string with the second argument. diff --git a/filters/reverse.md b/filters/reverse.md index c4eb5947..87c3b6b2 100644 --- a/filters/reverse.md +++ b/filters/reverse.md @@ -1,5 +1,6 @@ --- title: reverse +description: Liquid filter that reverses an array, or a string converted to an array. --- Reverses the order of the items in an array. `reverse` cannot reverse a string. diff --git a/filters/round.md b/filters/round.md index 88913eb5..40c83089 100644 --- a/filters/round.md +++ b/filters/round.md @@ -1,5 +1,6 @@ --- title: round +description: Liquid filter that rounds a number to the nearest integer. --- Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places. diff --git a/filters/rstrip.md b/filters/rstrip.md index e2d72841..649c922c 100644 --- a/filters/rstrip.md +++ b/filters/rstrip.md @@ -1,5 +1,6 @@ --- title: rstrip +description: Liquid filter that removes all whitespace from the right side of a string. --- Removes all whitespace (tabs, spaces, and newlines) from the right side of a string. diff --git a/filters/size.md b/filters/size.md index fe2c4c40..797c4106 100644 --- a/filters/size.md +++ b/filters/size.md @@ -1,5 +1,6 @@ --- title: size +description: Liquid filter that returns the number of characters in a string or the number of items in an array. --- Returns the number of characters in a string or the number of items in an array. `size` can also be used with dot notation (for example, `{% raw %}{{ my_string.size }}{% endraw %}`). This allows you to use `size` inside tags such as conditionals. diff --git a/filters/slice.md b/filters/slice.md index 92655956..eefdc41c 100644 --- a/filters/slice.md +++ b/filters/slice.md @@ -1,5 +1,6 @@ --- title: slice +description: Liquid filter that returns a substring from a given position in a string. --- Returns a substring of 1 character beginning at the index specified by the argument passed in. An optional second argument specifies the length of the substring to be returned. diff --git a/filters/sort.md b/filters/sort.md index 9a34de9b..f0074b7b 100644 --- a/filters/sort.md +++ b/filters/sort.md @@ -1,5 +1,6 @@ --- title: sort +description: Liquid filter that sorts an array in case-sensitive order. --- Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive. diff --git a/filters/sort_natural.md b/filters/sort_natural.md new file mode 100644 index 00000000..d45e16f6 --- /dev/null +++ b/filters/sort_natural.md @@ -0,0 +1,20 @@ +--- +title: sort_natural +description: Liquid filter that sorts an array in case-insensitive order. +--- + +Sorts items in an array by a property of an item in the array. + +

Input

+```liquid +{% raw %} +{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %} + +{{ my_array | sort_natural | join: ", " }} +{% endraw %} +``` + +

Output

+```text +giraffe, octopus, Sally Snake, zebra +``` diff --git a/filters/split.md b/filters/split.md index b56218ab..17a72d14 100644 --- a/filters/split.md +++ b/filters/split.md @@ -1,5 +1,6 @@ --- title: split +description: Liquid filter that splits a string into an array using separators. --- Divides an input string into an array using the argument as a separator. `split` is commonly used to convert comma-separated items from a string to an array. diff --git a/filters/strip.md b/filters/strip.md index 97218d74..6885ac4d 100644 --- a/filters/strip.md +++ b/filters/strip.md @@ -1,5 +1,6 @@ --- title: strip +description: Liquid filter that removes whitespace from the left and right sides of a string. --- Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words. diff --git a/filters/strip_html.md b/filters/strip_html.md index 3c9a3d1b..9ca00f08 100644 --- a/filters/strip_html.md +++ b/filters/strip_html.md @@ -1,5 +1,6 @@ --- title: strip_html +description: Liquid filter that removes HTML tags from a string. --- Removes any HTML tags from a string. diff --git a/filters/strip_newlines.md b/filters/strip_newlines.md index 675ff407..c05deaa3 100644 --- a/filters/strip_newlines.md +++ b/filters/strip_newlines.md @@ -1,5 +1,6 @@ --- title: strip_newlines +description: Liquid filter that removes newline characters from a string. --- Removes any newline characters (line breaks) from a string. diff --git a/filters/times.md b/filters/times.md index 76e71c68..634c7e49 100644 --- a/filters/times.md +++ b/filters/times.md @@ -1,5 +1,6 @@ --- title: times +description: Liquid filter that multiplies a number by another number. --- Multiplies a number by another number. diff --git a/filters/truncate.md b/filters/truncate.md index f3ebcbec..8103cb22 100644 --- a/filters/truncate.md +++ b/filters/truncate.md @@ -1,5 +1,6 @@ --- title: truncate +description: Liquid filter that truncates a string to a given number of characters. --- `truncate` shortens a string down to the number of characters passed as a parameter. If the number of characters specified is less than the length of the string, an ellipsis (...) is appended to the string and is included in the character count. diff --git a/filters/truncatewords.md b/filters/truncatewords.md index b2480e2a..0a2d8ef4 100644 --- a/filters/truncatewords.md +++ b/filters/truncatewords.md @@ -1,5 +1,6 @@ --- title: truncatewords +description: Liquid filter that truncates a string to the given number of words. --- Shortens a string down to the number of words passed as the argument. If the specified number of words is less than the number of words in the string, an ellipsis (...) is appended to the string. diff --git a/filters/uniq.md b/filters/uniq.md index 4846437a..e02b4e9d 100644 --- a/filters/uniq.md +++ b/filters/uniq.md @@ -1,5 +1,6 @@ --- title: uniq +description: Liquid filter that removes duplicate items from an array. --- Removes any duplicate elements in an array. diff --git a/filters/upcase.md b/filters/upcase.md index 105d3d1f..1c6112ca 100644 --- a/filters/upcase.md +++ b/filters/upcase.md @@ -1,5 +1,6 @@ --- title: upcase +description: Liquid filter that capitalizes every character in a string. --- Makes each character in a string uppercase. It has no effect on strings which are already all uppercase. diff --git a/filters/url_decode.md b/filters/url_decode.md new file mode 100644 index 00000000..e6f1991c --- /dev/null +++ b/filters/url_decode.md @@ -0,0 +1,18 @@ +--- +title: url_decode +description: Liquid filter that decodes percent-encoded characters in a string. +--- + +Decodes a string that has been encoded as a URL or by [`url_encode`]({{ '/filters/url_encode' | prepend: site.baseurl }}). + +

Input

+```liquid +{% raw %} +{{ "%27Stop%21%27+said+Fred" | url_decode }} +{% endraw %} +``` + +

Output

+```text +'Stop!' said Fred +``` diff --git a/filters/url_encode.md b/filters/url_encode.md index f0f5add9..5a17c813 100644 --- a/filters/url_encode.md +++ b/filters/url_encode.md @@ -1,5 +1,6 @@ --- title: url_encode +description: Liquid filter that encodes URL-unsafe characters in a string. --- Converts any URL-unsafe characters in a string into percent-encoded characters. diff --git a/index.md b/index.md index 7ce0a6a5..1ef72a30 100644 --- a/index.md +++ b/index.md @@ -4,13 +4,10 @@ layout: default {% include home-banner.html %} -## 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. +Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications. -## Who uses Liquid? +## Used by {% include home-users-grid.html %} - diff --git a/tags/control-flow.md b/tags/control-flow.md index bae70802..8b89d83b 100644 --- a/tags/control-flow.md +++ b/tags/control-flow.md @@ -4,30 +4,6 @@ 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. - -

Input

-```liquid -{% raw %} -{% assign handle = 'cake' %} -{% case handle %} - {% when 'cake' %} - This is a cake - {% when 'cookie' %} - This is a cookie - {% else %} - This is not a cake nor a cookie -{% endcase %} -{% endraw %} -``` - -

Output

-```text -This is a cake -``` - ## if Executes a block of code only if a certain condition is `true`. @@ -96,3 +72,27 @@ Adds more conditions within an `if` or `unless` block. ```text Hey Anonymous! ``` + +## case/when + +Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values. + +

Input

+```liquid +{% raw %} +{% assign handle = 'cake' %} +{% case handle %} + {% when 'cake' %} + This is a cake + {% when 'cookie' %} + This is a cookie + {% else %} + This is not a cake nor a cookie +{% endcase %} +{% endraw %} +``` + +

Output

+```text +This is a cake +```