elements inside
+ blocks. */
+pre code, pre kbd, pre samp { font-size: 100%; }
+
+/* Used to denote text that shouldn't be selectable, such as line numbers or
+ shell prompts. Guess which browser this doesn't work in. */
+.noselect {
+ -moz-user-select: -moz-none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+/* -- Lists ----------------------------------------------------------------- */
+dd { margin: 0.2em 0 0.7em 1em; }
+dl { margin: 1em 0; }
+dt { font-weight: bold; }
+
+/* -- Tables ---------------------------------------------------------------- */
+caption, th { text-align: left; }
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+td, th {
+ border: 1px solid #fff;
+ padding: 5px 12px;
+ vertical-align: top;
+}
+
+td { background: #E6E9F5; }
+td dl { margin: 0; }
+td dl dl { margin: 1em 0; }
+td pre:first-child { margin-top: 0; }
+
+th {
+ background: #D2D7E6;/*#97A0BF*/
+ border-bottom: none;
+ border-top: none;
+ color: #000;/*#FFF1D5*/
+ font-family: 'Trebuchet MS', sans-serif;
+ font-weight: bold;
+ line-height: 1.3;
+ white-space: nowrap;
+}
+
+
+
+/* -- Table of Contents ----------------------------------------------------- */
+
+/* The #toc id refers to the single global table of contents, while the .toc
+ class refers to generic TOC lists that could be used throughout the page. */
+
+.toc code, .toc kbd, .toc samp { font-size: 100%; }
+.toc li { font-weight: bold; }
+.toc li li { font-weight: normal; }
+
+/* -- Intro and Example Boxes ----------------------------------------------- */
+/*
+.intro, .example { margin-bottom: 2em; }
+.example {
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ -moz-box-shadow: 0 0 5px #bfbfbf;
+ -webkit-box-shadow: 0 0 5px #bfbfbf;
+ box-shadow: 0 0 5px #bfbfbf;
+ padding: 1em;
+}
+.intro {
+ background: none repeat scroll 0 0 #F0F1F8; border: 1px solid #D4D8EB; padding: 0 1em;
+}
+*/
+
+/* -- Other Styles ---------------------------------------------------------- */
+
+/* These are probably YUI-specific, and should be moved out of Selleck's default
+ theme. */
+
+.button {
+ border: 1px solid #dadada;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ color: #444;
+ display: inline-block;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 92.308%;
+ font-weight: bold;
+ padding: 4px 13px 3px;
+ -moz-text-shadow: 1px 1px 0 #fff;
+ -webkit-text-shadow: 1px 1px 0 #fff;
+ text-shadow: 1px 1px 0 #fff;
+ white-space: nowrap;
+
+ background: #EFEFEF; /* old browsers */
+ background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#efefef), color-stop(51%,#e5e5e5), color-stop(100%,#dfdfdf)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
+}
+
+.button:hover {
+ border-color: #466899;
+ color: #fff;
+ text-decoration: none;
+ -moz-text-shadow: 1px 1px 0 #222;
+ -webkit-text-shadow: 1px 1px 0 #222;
+ text-shadow: 1px 1px 0 #222;
+
+ background: #6396D8; /* old browsers */
+ background: -moz-linear-gradient(top, #6396D8 0%, #5A83BC 50%, #547AB7 51%, #466899 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6396D8), color-stop(50%,#5A83BC), color-stop(51%,#547AB7), color-stop(100%,#466899)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6396D8', endColorstr='#466899',GradientType=0 ); /* ie */
+}
+
+.newwindow { text-align: center; }
+
+.header .version em {
+ display: block;
+ text-align: right;
+}
+
+
+#classdocs .item {
+ border-bottom: 1px solid #466899;
+ margin: 1em 0;
+ padding: 1.5em;
+}
+
+#classdocs .item .params p,
+ #classdocs .item .returns p,{
+ display: inline;
+}
+
+#classdocs .item em code, #classdocs .item em.comment {
+ color: green;
+}
+
+#classdocs .item em.comment a {
+ color: green;
+ text-decoration: underline;
+}
+
+#classdocs .foundat {
+ font-size: 11px;
+ font-style: normal;
+}
+
+.attrs .emits {
+ margin-left: 2em;
+ padding: .5em;
+ border-left: 1px dashed #ccc;
+}
+
+abbr {
+ border-bottom: 1px dashed #ccc;
+ font-size: 80%;
+ cursor: help;
+}
+
+.prettyprint li.L0,
+.prettyprint li.L1,
+.prettyprint li.L2,
+.prettyprint li.L3,
+.prettyprint li.L5,
+.prettyprint li.L6,
+.prettyprint li.L7,
+.prettyprint li.L8 {
+ list-style: decimal;
+}
+
+ul li p {
+ margin-top: 0;
+}
+
+.method .name {
+ font-size: 110%;
+}
+
+.apidocs .methods .extends .method,
+.apidocs .properties .extends .property,
+.apidocs .attrs .extends .attr,
+.apidocs .events .extends .event {
+ font-weight: bold;
+}
+
+.apidocs .methods .extends .inherited,
+.apidocs .properties .extends .inherited,
+.apidocs .attrs .extends .inherited,
+.apidocs .events .extends .inherited {
+ font-weight: normal;
+}
+
+#hd {
+ background: whiteSmoke;
+ background: -moz-linear-gradient(top,#DCDBD9 0,#F6F5F3 100%);
+ background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#DCDBD9),color-stop(100%,#F6F5F3));
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdbd9',endColorstr='#F6F5F3',GradientType=0);
+ border-bottom: 1px solid #DFDFDF;
+ padding: 0 15px 1px 20px;
+ margin-bottom: 15px;
+}
+
+#hd img {
+ margin-right: 10px;
+ vertical-align: middle;
+}
+
+
+/* -- API Docs CSS ---------------------------------------------------------- */
+
+/*
+This file is organized so that more generic styles are nearer the top, and more
+specific styles are nearer the bottom of the file. This allows us to take full
+advantage of the cascade to avoid redundant style rules. Please respect this
+convention when making changes.
+*/
+
+/* -- Generic TabView styles ------------------------------------------------ */
+
+/*
+These styles apply to all API doc tabviews. To change styles only for a
+specific tabview, see the other sections below.
+*/
+
+.yui3-js-enabled .apidocs .tabview {
+ visibility: hidden; /* Hide until the TabView finishes rendering. */
+ _visibility: visible;
+}
+
+.apidocs .tabview.yui3-tabview-content { visibility: visible; }
+
+/* -- Generic Content Styles ------------------------------------------------ */
+
+/* Headings */
+h2, h3, h4, h5, h6 {
+ border: none;
+ color: #333;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+.link-docs {
+ float: right;
+ font-size: 15px;
+ margin: 4px 4px 6px;
+ padding: 6px 30px 5px;
+}
+
+.apidocs { zoom: 1; }
+
+/* Generic box styles. */
+.apidocs .box {
+ border: 1px solid;
+ border-radius: 3px;
+ margin: 1em 0;
+ padding: 0 1em;
+}
+
+/* A flag is a compact, capsule-like indicator of some kind. It's used to
+ indicate private and protected items, item return types, etc. in an
+ attractive and unobtrusive way. */
+.apidocs .flag {
+ background: #bababa;
+ border-radius: 3px;
+ color: #fff;
+ font-size: 11px;
+ margin: 0 0.5em;
+ padding: 2px 4px 1px;
+}
+
+/* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
+.apidocs .meta {
+ background: #f9f9f9;
+ border-color: #efefef;
+ color: #555;
+ font-size: 11px;
+ padding: 3px 6px;
+}
+
+.apidocs .meta p { margin: 0; }
+
+/* Deprecation warning. */
+.apidocs .box.deprecated,
+.apidocs .flag.deprecated {
+ background: #fdac9f;
+ border: 1px solid #fd7775;
+}
+
+.apidocs .box.deprecated p { margin: 0.5em 0; }
+.apidocs .flag.deprecated { color: #333; }
+
+/* Module/Class intro description. */
+.apidocs .intro {
+ background: #f0f1f8;
+ border-color: #d4d8eb;
+}
+
+/* Loading spinners. */
+#bd.loading .apidocs,
+
+#bd.loading .apidocs .content,
+#api-list.loading .yui3-tabview-panel .apis {
+ display: none;
+}
+
+.apidocs .no-visible-items { color: #666; }
+
+/* Generic inline list. */
+.apidocs ul.inline {
+ display: inline;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.apidocs ul.inline li { display: inline; }
+
+/* Comma-separated list. */
+.apidocs ul.commas li:after { content: ','; }
+.apidocs ul.commas li:last-child:after { content: ''; }
+
+/* Keyboard shortcuts. */
+kbd .cmd { font-family: Monaco, Helvetica; }
+
+/* -- Generic Access Level styles ------------------------------------------- */
+.apidocs .item.protected,
+.apidocs .item.private,
+.apidocs .index-item.protected,
+.apidocs .index-item.deprecated,
+.apidocs .index-item.private {
+ display: none;
+}
+
+.show-deprecated .item.deprecated,
+.show-deprecated .index-item.deprecated,
+.show-protected .item.protected,
+.show-protected .index-item.protected,
+.show-private .item.private,
+.show-private .index-item.private {
+ display: block;
+}
+
+.hide-inherited .item.inherited,
+.hide-inherited .index-item.inherited {
+ display: none;
+}
+
+/* -- Generic Item Index styles --------------------------------------------- */
+.apidocs .index { margin: 1.5em 0 3em; }
+
+.apidocs .index h3 {
+ border-bottom: 1px solid #efefef;
+ color: #333;
+ font-size: 13px;
+ margin: 2em 0 0.6em;
+ padding-bottom: 2px;
+}
+
+.apidocs .index .no-visible-items { margin-top: 2em; }
+
+.apidocs .index-list {
+ border-color: #efefef;
+ font-size: 12px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ -moz-column-count: 4;
+ -moz-column-gap: 10px;
+ -moz-column-width: 170px;
+ -ms-column-count: 4;
+ -ms-column-gap: 10px;
+ -ms-column-width: 170px;
+ -o-column-count: 4;
+ -o-column-gap: 10px;
+ -o-column-width: 170px;
+ -webkit-column-count: 4;
+ -webkit-column-gap: 10px;
+ -webkit-column-width: 170px;
+ column-count: 4;
+ column-gap: 10px;
+ column-width: 170px;
+}
+
+.apidocs .no-columns .index-list {
+ -moz-column-count: 1;
+ -ms-column-count: 1;
+ -o-column-count: 1;
+ -webkit-column-count: 1;
+ column-count: 1;
+}
+
+.apidocs .index-item { white-space: nowrap; }
+
+.apidocs .index-item .flag {
+ background: none;
+ border: none;
+ color: #afafaf;
+ display: inline;
+ margin: 0 0 0 0.2em;
+ padding: 0;
+}
+
+/* -- Generic API item styles ----------------------------------------------- */
+.apidocs .args {
+ display: inline;
+ margin: 0 0.5em;
+}
+
+.apidocs .flag.chainable { background: #46ca3b; }
+.apidocs .flag.protected { background: #9b86fc; }
+.apidocs .flag.private { background: #fd6b1b; }
+.apidocs .flag.async { background: #356de4; }
+.apidocs .flag.required { background: #e60923; }
+
+.apidocs .item {
+ border-bottom: 1px solid #efefef;
+ margin: 1.5em 0 2em;
+ padding-bottom: 2em;
+}
+
+.apidocs .item h4,
+.apidocs .item h5,
+.apidocs .item h6 {
+ color: #333;
+ font-family: inherit;
+ font-size: 100%;
+}
+
+.apidocs .item .description p,
+.apidocs .item pre.code {
+ margin: 1em 0 0;
+}
+
+.apidocs .item .meta {
+ background: none;
+ border: none;
+ padding: 0;
+}
+
+.apidocs .item .name {
+ display: inline;
+ font-size: 14px;
+}
+
+.apidocs .item .type,
+.apidocs .item .type a,
+.apidocs .returns-inline {
+ color: #555;
+}
+
+.apidocs .item .type,
+.apidocs .returns-inline {
+ font-size: 11px;
+ margin: 0 0 0 0;
+}
+
+.apidocs .item .type a { border-bottom: 1px dotted #afafaf; }
+.apidocs .item .type a:hover { border: none; }
+
+/* -- Item Parameter List --------------------------------------------------- */
+.apidocs .params-list {
+ list-style: square;
+ margin: 1em 0 0 2em;
+ padding: 0;
+}
+
+.apidocs .param { margin-bottom: 1em; }
+
+.apidocs .param .type,
+.apidocs .param .type a {
+ color: #666;
+}
+
+.apidocs .param .type {
+ margin: 0 0 0 0.5em;
+ *margin-left: 0.5em;
+}
+
+.apidocs .param-name { font-weight: bold; }
+
+/* -- Item "Emits" block ---------------------------------------------------- */
+.apidocs .item .emits {
+ background: #f9f9f9;
+ border-color: #eaeaea;
+}
+
+/* -- Item "Returns" block -------------------------------------------------- */
+.apidocs .item .returns .type,
+.apidocs .item .returns .type a {
+ font-size: 100%;
+ margin: 0;
+}
+
+/* -- Class Constructor block ----------------------------------------------- */
+.apidocs .constructor .item {
+ border: none;
+ padding-bottom: 0;
+}
+
+/* -- File Source View ------------------------------------------------------ */
+.apidocs .file pre.code,
+#doc .apidocs .file pre.prettyprint {
+ background: inherit;
+ border: none;
+ overflow: visible;
+ padding: 0;
+}
+
+.apidocs .L0,
+.apidocs .L1,
+.apidocs .L2,
+.apidocs .L3,
+.apidocs .L4,
+.apidocs .L5,
+.apidocs .L6,
+.apidocs .L7,
+.apidocs .L8,
+.apidocs .L9 {
+ background: inherit;
+}
+
+/* -- Submodule List -------------------------------------------------------- */
+.apidocs .module-submodule-description {
+ font-size: 12px;
+ margin: 0.3em 0 1em;
+}
+
+.apidocs .module-submodule-description p:first-child { margin-top: 0; }
+
+/* -- Sidebar TabView ------------------------------------------------------- */
+#api-tabview { margin-top: 0.6em; }
+
+#api-tabview-filter {
+ border-bottom: none;
+ border-top: none;
+ padding: 0.6em 10px 0 10px;
+}
+
+#api-tabview-panel { border-top: none; }
+#api-filter { width: 97%; }
+
+/* -- Content TabView ------------------------------------------------------- */
+#classdocs .yui3-tabview-panel { border: none; }
+
+/* -- Source File Contents -------------------------------------------------- */
+.prettyprint li.L0,
+.prettyprint li.L1,
+.prettyprint li.L2,
+.prettyprint li.L3,
+.prettyprint li.L5,
+.prettyprint li.L6,
+.prettyprint li.L7,
+.prettyprint li.L8 {
+ list-style: decimal;
+}
+
+
+/*#api-options label { margin-right: 0.6em; }*/
+
+.apis {
+ font-size: 12px;
+ line-height: 1.4;
+ list-style: none;
+ margin: 0;
+ padding: 0.5em 0 0.5em 0.4em;
+}
+
+.apis a {
+ border: 1px solid transparent;
+ display: block;
+ margin: 0 0 0 -4px;
+ padding: 1px 4px 0;
+ text-decoration: none;
+ _border: none;
+ _display: inline;
+}
+
+.apis a:hover,
+.apis a:focus {
+ background: #E8EDFC;
+ background: -moz-linear-gradient(top, #e8edfc 0%, #becef7 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E8EDFC), color-stop(100%,#BECEF7));
+ border-color: #AAC0FA;
+ border-radius: 3px;
+ color: #333;
+ outline: none;
+}
+
+.api-list-item a:hover,
+.api-list-item a:focus {
+ font-weight: bold;
+ text-shadow: 1px 1px 1px #fff;
+}
+
+.apis .message { color: #888; }
+.apis .result a { padding: 3px 5px 2px; }
+
+.apis .result .type {
+ right: 4px;
+ top: 7px;
+}
+
+.api-list-item .yui3-highlight {
+ font-weight: bold;
+}
diff --git a/docs/docs/0.14.0/index.html b/docs/docs/0.14.0/index.html
new file mode 100644
index 000000000..6f29cbbea
--- /dev/null
+++ b/docs/docs/0.14.0/index.html
@@ -0,0 +1,286 @@
+
+
+
+
+ Slate v0
+
+
+
+
+
+
+
+
+
Slate v0
+
+
+ ⚠️ These docs are for Slate v0! To view the docs for the latest version of Slate, go to the Slate documentation website .
+
+
+
Slate is a theme scaffold and command line tool for developing Shopify themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify stores.
+
+
Slate allows you to sync local files with your live shop, deploy to multiple environments at the same time, and organize stylesheets and scripts in a flexible way.
+
+
Getting started
+
+
+Slate works with Node version 6.x , the current LTS (long-term support) release. This version is recommended over older versions of Node.
+
+
+
The steps below walk through installing Slate globally and configuring your development theme to sync with your store. If you want the theme files without the build tools dependency, get the latest zip here .
+
+
Create a new project
+
+
+ Install Slate with npm install -g @shopify/slate.
+ Create a new theme with slate theme theme-name, where theme-name will be a newly created folder.
+
+
+
+ If you already have a theme locally, you can use the slate migrate command and follow these steps instead.
+
+
+
Connect your project with your Shopify store
+
+
+ Edit the config.yml by adding your store’s URL to the development environment.
+
+
+
+ store: the Shopify-specific URL for this store/environment (ie. my-store.myshopify.com)Note: You can complete the rest of the configuration in later steps.
+
+
+
+ Run slate deploy -m to start a manual deploy to your Shopify store.
+
+
+
+ Slate will build a Shopify theme and open your store’s admin.
+ A zip of your project will be created in the project’s upload directory.
+
+
+
+ Upload the theme zip file at Shopify admin/themes .
+
+
+
+
+
+ Edit the config.yml to include the theme id of your new theme.
+
+
+
+ theme_id: the unique id for the theme you want to write to when deploying to this store. You can find this information in the URL of the theme’s online editor at Shopify admin/themes . Alternatively, you can use "live" as shorthand for the published theme.
+
+
+
+ Create a private app from your Shopify admin.
+
+
+
+
+
+ Edit the config.yml to include the password of your new private app.
+
+
+
+ password: the password generated via a private app on this store. Access this information on your Shopify admin/apps/private page.
+Note: You can use the same private app password for any config.yml environment
+as long as it is for the same store.
+
+
+
+ From within your new project folder in your command line, use the Slate commands below to build, sync, and watch your local files.
+
+
+
Slate commands
+
+
Global
+
+
+ slate theme [name] - Generate a new blank themeslate migrate - Convert an existing theme to work with Slateslate -h - Options available in your current directory (differs if not in a theme)slate -v - See your currently installed version of Slate and dependencies
+
+
Theme
+
+
+ slate build — Concatenates JS and SCSS, optimizes SVG icons to be used as snippets, and copies over all other files and folders to a dist folderslate deploy — Builds your dist folder and replaces the theme set in config.ymlslate watch — Listens for changes to your local source files and deploys them to your shopslate start — Runs build, deploy, then watch to get you developing on your shop quicklyslate zip — Builds and compresses your dist to a zip file for easy manual upload
+
+
+ Learn more about all commands and descriptions or how to deploy to multiple environments .
+
+
+
Working with Git repositories
+
+
A new Slate project comes with a .gitignore file. This file is useful if you plan on using Git for version control as it contains a list of files and folders to be ignored when committing to a git repository. Ignored files are both Slate project specific files as well as commonly ignored files on any project.
+
+
For more information on .gitignore files, see GitHub’s documentation: https://help.github.com/articles/ignoring-files/
+
+
+
+
+
+
+
+
diff --git a/docs/docs/0.14.0/js-examples/index.html b/docs/docs/0.14.0/js-examples/index.html
new file mode 100644
index 000000000..0b51af958
--- /dev/null
+++ b/docs/docs/0.14.0/js-examples/index.html
@@ -0,0 +1,707 @@
+
+
+
+
+ JS examples
+
+
+
+
+
+
+
+
+
JS examples
+
+
Trap focus
+
+
It’s important to consider keyboard users when using dynamic modules, such as a modal or popover. If they take over the full screen then it’s best to limit the user’s keyboard access to that module so they don’t end up tabbing through hidden elements on the page.
+
+
Here’s an example of a modal that traps the keyboard focus inside the element when open, and removes the trap when closed.
+
+
slate.a11y.trapFocus({ options });
+slate.a11y.removeTrapFocus({ options });
+
+
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ $containerjQuery object
+ Container to trap focus within
+
+
+ namespacestring
+ Namespace used for new focus event handler
+
+
+ $elementToFocusjQuery object (optional)
+ Set an element to be selected after the focus is trapped. Only used in trapFocus.
+
+
+
+
+
var $modal = $('#Modal');
+
+$('#TriggerModal').on('click', function() {
+ $modal.addClass('is-active');
+
+ slate.a11y.trapFocus({
+ $container: $modal,
+ namespace: 'modal',
+ $elementToFocus: $modal.find('input[type="text"]')
+ });
+});
+
+$('#CloseModal').on('click', function() {
+ $modal.removeClass('is-active');
+
+ slate.a11y.removeTrapFocus({
+ $container: $modal,
+ namespace: 'modal'
+ });
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Responsive tables and videos
+
+
Tables and video embeds do not natively scale well on smaller screens. Slate adds a wrapper class to tables and video embeds that are loaded in from a rich text editor.
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ $tablesjQuery object
+ <table> elements to be made responsive
+
+ tableWrapperClassstring
+ CSS class to apply on the <div> that will wrap each targeted <table> element
+
+
+ $iframesjQuery object
+ <iframe> elements to be made responsive
+
+ iframeWrapperClassstring
+ CSS class to apply on the <div> that will wrap each targeted <iframe> element
+
+
+
+
+
// Wrap RTE tables to make them scrollable
+var tableSelectors = '.rte table';
+
+slate.rte.wrapTable({
+ $tables: $(tableSelectors),
+ tableWrapperClass: 'rte__table-wrapper',
+});
+
+// Wrap RTE videos to make them responsive
+var videoSelectors =
+ '.rte iframe[src*="youtube.com/embed"],' +
+ '.rte iframe[src*="player.vimeo"]';
+
+slate.rte.wrapIframe({
+ $iframes: $(videoSelectors),
+ iframeWrapperClass: 'rte__video-wrapper'
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Slate ships JavaScript to mimic Shopify money formats . This makes handling product prices and cart items in JS simple. (View currency.js source ).
+
+
Slate maps the shop’s money format — defined in Liquid — to a JavaScript variable in layouts/theme.liquid so it can be used regardless of file type.
+
+
In layouts/theme.liquid:
+
+
window.theme.moneyFormat: {{ shop.money_format | json }};
+
+
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ centsstring
+ Price in cents
+
+
+ formatstring
+ shop.money_format setting
+
+
+
+
+
In this example, shop.money_format is ${{amount}} so 1999 cents would be formatted as $19.99.
+
+
var itemPrice = 1999; // cents
+slate.Currency.formatMoney(itemPrice, theme.moneyFormat);
+
+// Returns string
+'$19.99'
+
+
+
+
Image helpers
+
+
+
+
+ Command
+ Usage
+
+
+
+
+ preload slate.Images.preload(images, size)
+
+ imageSize slate.Images.imageSize(src)
+
+ getSizedImageUrl slate.Images.getSizedImageUrl(src, size)
+
+ removeProtocol slate.Images.removeProtocol(path)
+
+
+
+
preload
+
+
Preload a single image or an array of images at a given size. A common use for preloading is reducing the loading delay when enlarging a thumbnail.
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ imagesarray or string
+ Single image URL or list of image URLs
+
+
+ sizestring
+ Size of image to request
+
+
+
+
+
slate.Image.preload(['image-url-1.jpg', 'image-url-2.jpg'], '1024x1024');
+
+
+
+
imageSize
+
+
Get the size of an image based on the URL.
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ srcstring
+ Image URL
+
+
+
+
+
slate.Image.imageSize('https://cdn.shopify.com/s/files/big-ol-image_480x480.jpeg');
+
+// Returns string
+'480x480'
+
+
+
+
getSizedImageUrl
+
+
Adds a Shopify size attribute to a URL
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ srcstring
+ Image URL
+
+
+ sizestring
+ Custom size
+
+
+
+
+
slate.Image.getSizedImageUrl('https://cdn.shopify.com/s/files/big-ol-image.jpeg', '250x250');
+
+// Returns string
+'https://cdn.shopify.com/s/files/big-ol-image_250x250.jpeg'
+
+
+
+
removeProtocol
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ pathstring
+ Image URL
+
+
+
+
+
slate.Image.removeProtocol('https://cdn.shopify.com/s/files/big-ol-image_480x480.jpeg')
+
+// Returns string
+'//cdn.shopify.com/s/files/big-ol-image_480x480.jpeg'
+
+
+
+
Product variants
+
+
The Slate theme has two script files to manage the display of product variants:
+
+
+
+
+ Script
+ Location
+ Description
+
+
+
+
+ variant.js scripts/slateHandles variant change events in any forms that add to cart
+
+
+ product.js scripts/sectionsBehaviour coupled to the theme code of product-based sections
+
+
+
+
+
variant.js
+
+
Slate separates product variant options into multiple <select> elements. When a variant changes, variant.js updates the master select . The master select is the default <select> element that contains all variant IDs needed to properly submit the form.
+
+
Slate’s variant.js also triggers a number of custom events to handle various state changes:
+
+
+
+
+ Events
+ Trigger condition
+
+
+
+
+ variantChangeWhen a variant option’s <select> element is changed.
+
+
+ variantImageChangeWhen the selected variant has a featured image which is not currently displayed.
+
+
+ variantPriceChangeWhen the selected variant has a price or compare_at_price which is different than what is currently displayed.
+
+
+
+
+
product.js
+
+
The theme-specific script of product.js has a number of methods that listen for the above custom events. Each function has access to the newly selected variant object in evt.variant. Customize these functions to fit your theme’s desired behaviour.
+
+
+
+
+ Methods
+ Description
+
+
+
+
+ updateAddToCartState()Update the add to cart button text and enabled/disabled/sold out state
+
+
+ updateProductImage()Replace the main product image src with the associated variant image if it exists
+
+
+ updateProductPrices()Updates the product price and compare_at_price when necessary
+
+
+
+
+
Cart helpers
+
+
In order for customers to build a cart, their browsers must support cookies.
+
+
+
+
+ Methods
+ Description
+
+
+
+
+ cookiesEnabled()Returns true if the browser supports cookies.
+
+
+
+
+
In the theme scaffolding, classes for supports-cookies and supports-no-cookies are toggled on the html element so theme developers can show/hide different content based on browser support.
+
+
if (slate.cart.cookiesEnabled()) {
+ document.documentElement.className = document.documentElement.className.replace('supports-no-cookies', 'supports-cookies');
+}
+
+
+
+
Section events
+
+
Slate comes with a section.js file to help Sections communicate with Shopify’s Theme editor JavaScript API .
+
+
+
+
+ Methods
+ Description
+
+
+
+
+ onUnload()A section has been deleted or is being re-rendered.
+
+
+ onSelect()User has selected the section in the editor’s sidebar.
+
+
+ onDeselect()User has deselected the section in the editor’s sidebar.
+
+
+ onReorder()User has changed the section’s order in the editor’s sidebar.
+
+
+ onBlockSelect()User has selected the block in the editor’s sidebar.
+
+
+ onBlockDeselect()User has deselected the block in the editor’s sidebar.
+
+
+
+
+
As an example, product.js uses the onUnload method to remove all namespaced events when the section is deleted or re-rendered.
+
+
Product.prototype = $.extend({}, Product.prototype, {
+ onUnload: function() {
+ this.$container.off(this.settings.eventNamespace);
+ }
+});
+
+
+
+
Register sections
+
+
Slate provides a register method to properly scope the various Sections used in a theme.
+
+
sections.register(type, constructor);
+
+
+
+
+
+
+ Parameters
+ Type
+ Description
+
+
+
+
+ typestring
+ Unique section type defined by theme developer
+
+
+ constructorfunction
+ Section constructor run in Theme editor and on storefront
+
+
+
+
+
Slate follows a convention of wrapping the content of a Section file in an element with a data-section-type attribute. The type is taken from this attribute’s value.
+
+
// From sections/product.liquid
+<div data-section-id="{{ section.id }}" data-section-type="product">
+ ...
+</div>
+
+
+
+
In the theme.js file, you must import the Section specific JavaScript with the // =require helper, more information here , as it will contain your constructor.
+
+
// =require sections/product.js
+
+$(document).ready(function() {
+ var sections = new slate.Sections();
+ sections.register('product', theme.Product);
+});
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/docs/0.14.0/js-examples/tables-videos/index.html b/docs/docs/0.14.0/js-examples/tables-videos/index.html
new file mode 100644
index 000000000..3a46dd426
--- /dev/null
+++ b/docs/docs/0.14.0/js-examples/tables-videos/index.html
@@ -0,0 +1,77 @@
+
+
+
+ Slate
+
+
+
+
+
Table
+
+
+
+ Product
+ Type
+ Price
+ Quantity
+ Total
+
+
+
+
+ Greta
Hat
$104.96
+ 1
+ $104.96
+
+
+ 77 Ca Skis
Skis
$549.00
+ 2
+ $1098.00
+
+
+ Aera
Hat
$109.95
+ 1
+ $109.95
+
+
+
+
+
Video
+
+
VIDEO
+
+
+
diff --git a/docs/docs/0.14.0/js-examples/trap-focus/index.html b/docs/docs/0.14.0/js-examples/trap-focus/index.html
new file mode 100644
index 000000000..113b39f00
--- /dev/null
+++ b/docs/docs/0.14.0/js-examples/trap-focus/index.html
@@ -0,0 +1,90 @@
+
+
+
+ Slate
+
+
+
+
+
+
+ Trigger modal
+
+Here is some normal page content. There are some links and inputs below to tab through before opening the modal.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet , pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet. Curabitur a felis at sapien ullamcorper fermentum. Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.
+
+
+
+
+
+
+ Close modal
+
+
+
This is the modal content. Below are some links and inputs that you can tab through.
+
+
+
+
+
+
diff --git a/docs/docs/0.14.0/js/demo.js b/docs/docs/0.14.0/js/demo.js
new file mode 100644
index 000000000..cd49e4885
--- /dev/null
+++ b/docs/docs/0.14.0/js/demo.js
@@ -0,0 +1,40 @@
+/*
+ * jQuery throttle / debounce - v1.1 - 3/7/2010
+ * http://benalman.com/projects/jquery-throttle-debounce-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
+
+function resizeIframeToContents(iframe) {
+ iframe.style.height = iframe.contentWindow.document.body.offsetHeight + 5 + 'px';
+};
+
+$(function() {
+ $('.demo-iframe').find('iframe').on('load', function() {
+ resizeIframeToContents(this);
+ });
+
+ $(window).on('resize', $.debounce(250, function() {
+ $('.demo-iframe').find('iframe').each(function() {
+ resizeIframeToContents(this);
+ });
+ }));
+
+ $('.iframe-toggle').on('click', function() {
+ var $el = $(this);
+ var $iframe = $el.parent().next('iframe');
+ var sizeMobile = $el.data('size') === 'mobile';
+ if (sizeMobile) {
+ $iframe.addClass('demo-iframe--mobile');
+ } else {
+ $iframe.removeClass('demo-iframe--mobile');
+ }
+
+ $iframe.one('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd', function() {
+ resizeIframeToContents($iframe[0]);
+ })
+ });
+});
diff --git a/docs/docs/0.14.0/js/tracking.js b/docs/docs/0.14.0/js/tracking.js
new file mode 100644
index 000000000..b2718b1be
--- /dev/null
+++ b/docs/docs/0.14.0/js/tracking.js
@@ -0,0 +1,24 @@
+(function(){
+ ga = window.ga || {};
+ var gaOptions = {
+ 'slateZip' : {
+ hitType: 'event',
+ eventCategory: 'Zip',
+ eventAction: 'download',
+ eventLabel: 'Slate zip file'
+ }
+ }
+
+ function handleTrackedClicks(evt) {
+ var el = evt.target;
+ var gaTrack = el.dataset['gaTrack'];
+ ga('send', gaOptions[gaTrack]);
+ };
+
+ var trackedElements = document.querySelectorAll('[data-ga-track]');
+ var trackedArr = Array.from(trackedElements);
+
+ trackedArr.forEach(function(element){
+ element.addEventListener('click', handleTrackedClicks);
+ });
+})();
diff --git a/docs/docs/0.14.0/theme-scaffold/index.html b/docs/docs/0.14.0/theme-scaffold/index.html
new file mode 100644
index 000000000..5386f0bb5
--- /dev/null
+++ b/docs/docs/0.14.0/theme-scaffold/index.html
@@ -0,0 +1,336 @@
+
+
+
+
+ Theme scaffold
+
+
+
+
+
+
+
+
+
Theme scaffold
+
+
Templates and configuration
+
+
All configuration files, layouts, and liquid templates required for Theme Store submissions are included. See the full guidelines for submission here .
+
+
config/
+ - settings_data.json
+ - settings_schema.json
+layout/
+ - gift_card
+ - password
+ - theme
+templates/
+ - 404
+ - article
+ - blog
+ - cart
+ - collection
+ - gift_card
+ - index
+ - page.contact
+ - page
+ - password
+ - product
+ - search
+ customers/
+ - account
+ - activate_account
+ - addresses
+ - login
+ - order
+ - register
+ - reset_password
+
+
+
+
Also included is a Styles template (page.styles.liquid). This is available to help you visualize your site’s layout and styles with dummy content that is common across themes. This is only intended to be used during development. Remove this template before shipping your theme.
+
+
Sections
+
+
Sections are a way of letting merchants control their own layout and appearance in their themes. Read more about their introduction here and the full docs here . Slate includes two types of sections.
+
+
Static sections
+
+
Statically-included sections allow for in-context settings when that section is visible in the theme editor.
+
+
For example, the product section is included with { % section 'product' % } templates/product.liquid. Any settings defined in the product section will be visible when a merchant visits the product page.
+
+
sections/
+ - header
+ - footer
+ - product
+
+
+
+
Dynamic sections
+
+
Dynamic sections allow merchants to add, edit, and reorder content on their home page. It is highly recommended to read the sections development documentation to understand how limitless the possibilities are. Slate provides three common dynamic sections to act as a starting reference.
+
+
sections/
+ - collection-list
+ - featured-collection
+ - featured-product
+
+
+
+
Sass helpers
+
+
+Slate does not compile Sass to CSS. Slate uploads .scss files to your theme's /assets directory and compilation is done by Shopify. Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive.
+
+
+
Slate is not a CSS framework. Instead it sets you up to start styling your way quickly with a reset and some helper scaffolding. The base folder names can be changed to suit your workflow. If changing or adding folders, make sure to update the import statement in theme.scss to @import url('new-folder/style.scss').
+
+
styles/
+ global/
+ modules/
+ settings
+ tools/
+ vendor/
+
+
+
+
Normalize and reset
+
+
A blank starting point is included with Normalize.css and other helper styles that Shopify’s internal themes team has consistently relied on.
+
+
+ Prevent zooming when inputs are focused on mobile (min 16px font size)
+ Prevent unexpected styles on focused elements
+ IE <select> and <option> style fixes
+ Improve text rendering on some WebKit form fields
+ Use touch-action: manipulation to enable fast tapping
+ Responsive tables and video iframes added by a rich text editor (by adding wrapping classes in JS)
+
+
+
Scaffolding
+
+
Starting a fresh project should not include reinventing the wheel. Slate offers some starting structure to your project that you can choose to use or not.
+
+
+ Map shop settings to Sass variables
+ CSS grid. Example
+
+ There are no grid classes in the templates so you can easily switch to your preferred grid
+
+
+ SVG icon style helpers. Example
+ Responsive tables. Example
+ .btn class with smart defaults. Source Form elements with default, disabled, error, and focus states ready to be styled. Source
+ Blank state SVG styles Example
+
+
+
Sass mixins
+
+
A few helpful Sass mixins are included in Slate to make responsive, cross-browser, and accessibility development easier.
+
+
+ Media query mixin for consistent breakpoint styles. Example
+ Responsive helpers to show/hide content and align text based on breakpoint names. Example
+ Prefixes. Example
+ Visually hide or show content for screen reader accessibility. Example
+
+
+
JavaScript helpers
+
+
Slate provides a number of helper scripts and vendor scripts. The base folder names can be changed to suit your workflow. If changing or adding folders, make sure to update the require statement in theme.js to // =require new-folder/script.js.
+
+
scripts/
+ sections/
+ slate/
+ templates/
+ vendor/
+
+
+
+
+More information about the require directive can be found in the NPM documentation for gulp-include.
+
+
+
Slate scripts
+
+
Slate provides helper scripts to promote accessibility and make working with theme images, currencies, and product variants easier. See JS examples for more details on how to use these scripts.
+
+
+ Accessibility helpers. Example . Source .
+ Force tables and videos to be responsive. Example
+ Easy handling of theme editor events. Example
+ Format currency in JS the same as Liquid allows. Example
+ Helpers for handling images in JS, including getting size based on URL and preloading sets of images. Examples
+ Listen for product variant option changes and setup scaffolding for handling result. Example
+ Detect browser support for cookies. Example
+
+
+
Vendor scripts
+
+
Slate projects include a vendor folder where theme developers are encouraged to place third-party libraries. Versions of jQuery and Modernizr are included in a new project, but you are welcome to change these as you see fit. Be sure to update the require statement in vendor.js as you add and remove libraries.
+
+
Translation keys
+
+
Slate ships with eight languages — English, French (Canadian), Spanish, German, Dutch, Danish, and two dialects of Portuguese (Brazilian and European). Translation keys for these languages can be found in the locales folder. In your theme files, translated strings can be retrieved with the Liquid translation filter t.
+
+
{ { 'products.product.add_to_cart' | t } }
+
+
+
+
You can learn more about using translation keys and strings in our theme development documentation .
+
+
These translation keys allow merchants to control their store’s language settings from the admin. Merchants can set the language of their storefront as well as change the value of individual translation keys. You can learn more about translating your storefront in our theme documentation .
+
+
+
+
+
+
+
+
diff --git a/docs/docs/0.14.0/theme/index.html b/docs/docs/0.14.0/theme/index.html
new file mode 100644
index 000000000..69d9755be
--- /dev/null
+++ b/docs/docs/0.14.0/theme/index.html
@@ -0,0 +1,176 @@
+
+
+
+
+ What's included
+
+
+
+
+
+
+
+
+
What’s included
+
+
Slate is made up of two parts. The first part is a theme scaffold consisting of templates, sections, starter styles, and helper scripts to develop your theme on. The second part is a toolkit of useful commands to sync your local files to your live store.
+
+
Learn more about the theme scaffold and commands .
+
+
Intentionally blank
+
+
Standard liquid tags and logic likely to be used on each template have been included with little to no markup, classes, or other code that you will need to strip out. Below is an image of what Slate looks like out of the box.
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/docs/about.html b/docs/docs/about.html
new file mode 100644
index 000000000..f8b1962f1
--- /dev/null
+++ b/docs/docs/about.html
@@ -0,0 +1,47 @@
+About · Slate Slate is a command line tool for developing Shopify Themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify.
+🚀 Get started with a new Slate project
+Slate empowers developers of all skill levels to build quality Shopify themes. Slate guides developers by providing a tested workflow and opinionated development toolkit, while also accommodating more established developers through advanced configuration.
+For help on setting up the repo locally, building, testing, and contributing
+please see CONTRIBUTING.md .
+About · Slate Slate is a command line tool for developing Shopify Themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify.
+🚀 Get started with a new Slate project
+Slate empowers developers of all skill levels to build quality Shopify themes. Slate guides developers by providing a tested workflow and opinionated development toolkit, while also accommodating more established developers through advanced configuration.
+For help on setting up the repo locally, building, testing, and contributing
+please see CONTRIBUTING.md .
+Asset minification · Slate Slate's build script compiles the theme so that it is fully optimized to run in production. These optimizations include:
+
+Optimized JS via UglifyJS and bundle splitting
+Optimized CSS using cssNano
+Minified HTML
+
+Asset minification · Slate Slate's build script compiles the theme so that it is fully optimized to run in production. These optimizations include:
+
+Optimized JS via UglifyJS and bundle splitting
+Optimized CSS using cssNano
+Minified HTML
+
+Commands · Slate The following is a list of all available API commands for Slate Tools:
+
+Builds a production-ready version of the theme by compiling the files into the dist folder.
+slate-tools build
+Sets process.env to ’production’, which can be used in Slate config to return production only values, e.g.:
+
+'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano());
+ }
+ return plugins;
+},
+Uploads the dist folder to the Shopify store.
+slate-tools deploy [--env=my-custom-env-name] [--skipPrompts] [--replace]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --replaceBy default, the deploy command updates any existing files, and adds any new files to your Shopify store's theme. Use this flag to replace all files on your theme with those of your Slate project. This will delete all files from your Shopify theme which are not in your Slate project
+
+Formats the theme code according to the rules declared in the .eslintrc and .stylelintrc files. By default, it uses ESLint Fix to format JS files, Stylelint Fix to format CSS files and Prettier to format JSON files.
+slate-tools format [--scripts] [--styles] [--json]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --localesRuns linting only on locales files
+
+slate-tools lint [--scripts] [--styles] [--locales]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --jsonRuns linting only on json files
+
+Compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve most of your CSS and JavaScript.
+slate-tools start [--env=my-custom-env-name] [--skipPrompts] [--skipFirstDeploy]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --skipFirstDeploySkips the file upload sequence and simply boots up the local Express server
+
+
+⚠️ Because your CSS and JavaScript assets are being served locally, your theme won’t function on any device outside your network. You want to deploy your assets anytime your theme updates are finalized using slate-tools build && slate-tools deploy.
+
+Compiles the contents of the dist directory and creates a ZIP file in the root of the project.
+slate-tools zip
+Commands · Slate The following is a list of all available API commands for Slate Tools:
+
+Builds a production-ready version of the theme by compiling the files into the dist folder.
+slate-tools build
+Sets process.env to ’production’, which can be used in Slate config to return production only values, e.g.:
+
+'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano());
+ }
+ return plugins;
+},
+Uploads the dist folder to the Shopify store.
+slate-tools deploy [--env=my-custom-env-name] [--skipPrompts] [--replace]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --replaceBy default, the deploy command updates any existing files, and adds any new files to your Shopify store's theme. Use this flag to replace all files on your theme with those of your Slate project. This will delete all files from your Shopify theme which are not in your Slate project
+
+Formats the theme code according to the rules declared in the .eslintrc and .stylelintrc files. By default, it uses ESLint Fix to format JS files, Stylelint Fix to format CSS files and Prettier to format JSON files.
+slate-tools format [--scripts] [--styles] [--json]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --localesRuns linting only on locales files
+
+slate-tools lint [--scripts] [--styles] [--locales]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --jsonRuns linting only on json files
+
+Compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve most of your CSS and JavaScript.
+slate-tools start [--env=my-custom-env-name] [--skipPrompts] [--skipFirstDeploy]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --skipFirstDeploySkips the file upload sequence and simply boots up the local Express server
+
+
+⚠️ Because your CSS and JavaScript assets are being served locally, your theme won’t function on any device outside your network. You want to deploy your assets anytime your theme updates are finalized using slate-tools build && slate-tools deploy.
+
+Compiles the contents of the dist directory and creates a ZIP file in the root of the project.
+slate-tools zip
+Connect to your store · Slate Now that you have a new Slate project, you need to link it to your remote Shopify store by updating the .env file
+.env file
+SLATE_STORE={store-name}.myshopify.com
+
+
+SLATE_PASSWORD=ccf7fb19ed4dc6993ac6355c0c489c7c7
+
+
+SLATE_THEME_ID=32112656003
+
+
+SLATE_IGNORE_FILES=config/settings_data.json
+This refers to the URL of your Shopify store, e.g. store-name.myshopify.com.
+
+Note: the https:// protocol is not included and neither is the trailing slash.
+
+Create a new private app by navigating to your store’s private apps page https://{store-name}.myshopify.com/admin/apps/private , giving the private app a name and setting the Theme templates and theme assets to “Read and write”.
+
+Hit the “Save” button, edit the new private app and click “Show” to view the Password field. This is your SLATE_PASSWORD.
+
+You can view a full list of all available theme IDs for your store by navigating to https://{store-name}.myshopify.com/admin/themes.xml .
+
+Each theme entry will have an id tag. Set the SLATE_THEME_ID to the theme ID you want to deploy to.
+
+Note: When you deploy your theme, Slate will overwrite the existing remote code associated with the SLATE_THEME_ID you defined with your local project’s code, which you may not want. To avoid this, navigate to https://{store-name}.myshopify.com/admin/themes and duplicate an existing theme ID to work from.
+
+This is the only optional setting in the .env file and it enables you to ignore certain files from being deployed to your Shopify store. One example would be to ignore the settings_data.json file to avoid overwriting your theme’s section settings every time you deploy your theme.
+The file paths are relative to the theme’s dist/ directory so ignoring the settings_data.json file would look like the following:
+SLATE_IGNORE_FILES=config/settings_data.json
+.env fileSlate allows you to define multiple environment files. Users can specify the --env flag with slate-tools scripts to use with an .env.{env} file. For example:
+yarn start --env=production
+will look for a .env.production file.
+Connect to your store · Slate Now that you have a new Slate project, you need to link it to your remote Shopify store by updating the .env file
+.env file
+SLATE_STORE={store-name}.myshopify.com
+
+
+SLATE_PASSWORD=ccf7fb19ed4dc6993ac6355c0c489c7c7
+
+
+SLATE_THEME_ID=32112656003
+
+
+SLATE_IGNORE_FILES=config/settings_data.json
+This refers to the URL of your Shopify store, e.g. store-name.myshopify.com.
+
+Note: the https:// protocol is not included and neither is the trailing slash.
+
+Create a new private app by navigating to your store’s private apps page https://{store-name}.myshopify.com/admin/apps/private , giving the private app a name and setting the Theme templates and theme assets to “Read and write”.
+
+Hit the “Save” button, edit the new private app and click “Show” to view the Password field. This is your SLATE_PASSWORD.
+
+You can view a full list of all available theme IDs for your store by navigating to https://{store-name}.myshopify.com/admin/themes.xml .
+
+Each theme entry will have an id tag. Set the SLATE_THEME_ID to the theme ID you want to deploy to.
+
+Note: When you deploy your theme, Slate will overwrite the existing remote code associated with the SLATE_THEME_ID you defined with your local project’s code, which you may not want. To avoid this, navigate to https://{store-name}.myshopify.com/admin/themes and duplicate an existing theme ID to work from.
+
+This is the only optional setting in the .env file and it enables you to ignore certain files from being deployed to your Shopify store. One example would be to ignore the settings_data.json file to avoid overwriting your theme’s section settings every time you deploy your theme.
+The file paths are relative to the theme’s dist/ directory so ignoring the settings_data.json file would look like the following:
+SLATE_IGNORE_FILES=config/settings_data.json
+.env fileSlate allows you to define multiple environment files. Users can specify the --env flag with slate-tools scripts to use with an .env.{env} file. For example:
+yarn start --env=production
+will look for a .env.production file.
+Create a new Slate project · Slate Creating a new Slate project is as simple as running a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+
+Note : The default Slate theme is generated from Shopify/starter-themecustom starter themes for more information on how you can generate a new project from other sources or contributing your own to the community!
+
+Create a new Slate project · Slate Creating a new Slate project is as simple as running a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+
+Note : The default Slate theme is generated from Shopify/starter-themecustom starter themes for more information on how you can generate a new project from other sources or contributing your own to the community!
+
+Create a self-signed SSL certificate · Slate Slate uses a local Express server to serve your assets locally. It's a good idea to create a trusted, self-signed SSL certificate on your device so the assets, served via https, are never blocked.
+
+Run the following commands to install mkcert . See the installation docs for more details.
+
+brew install mkcert
+
+Copy and paste the bash function into your terminal (or into your .bashrc file if you want to have it available in the future):
+
+function ssl-check $f /server.crt
+ ssl_key=$f /server.key
+ b=$(tput bold)
+ c=$(tput sgr0)
+
+ local_ip=$(ipconfig getifaddr $(route get default | grep interface | awk '{print $2}' ))
+
+
+ domains=(
+ "localhost"
+ "$local_ip "
+ )
+
+ if [[ ! -f $ssl_crt ]]; then
+ echo -e "\n🛑 ${b} Couldn't find a Slate SSL certificate:${c} "
+ make_key=true
+ elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip ) ]]; then
+ echo -e "\n🛑 ${b} Your IP Address has changed:${c} "
+ make_key=true
+ else
+ echo -e "\n✅ ${b} Your IP address is still the same.${c} "
+ fi
+
+ if [[ $make_key == true ]]; then
+ echo -e "Generating a new Slate SSL certificate...\n"
+ count=$(( ${#domains[@]} - 1))
+ mkcert ${domains[@]}
+
+
+ test ! -d $f && mkdir $f
+
+
+
+ if [[ $count = 0 ]]; then
+ mv ./localhost.pem $ssl_crt
+ mv ./localhost-key.pem $ssl_key
+ else
+ mv ./localhost+$count .pem $ssl_crt
+ mv ./localhost+$count -key.pem $ssl_key
+ fi
+ fi
+}
+
+Run the function you just declared in step 2:
+
+ssl-check
+
+You now have successfully created a local, self-signed SSL certificate for developing with Slate!
+
+Even after performing the above steps, you might encounter the following errors and warnings when developing with Slate:
+
+An example of https requests to your local asset server being blocked
+
+An example of Chrome warning you of an untrusted https certificate
+This is most likely because your local IP has changed and the self-signed SSL certificate you created is no longer valid. To remove these warnings and errors, simply repeat steps 2 and 3 above to regenerate a new self-signed certificate.
+Create a self-signed SSL certificate · Slate Slate uses a local Express server to serve your assets locally. It's a good idea to create a trusted, self-signed SSL certificate on your device so the assets, served via https, are never blocked.
+
+Run the following commands to install mkcert . See the installation docs for more details.
+
+brew install mkcert
+
+Copy and paste the bash function into your terminal (or into your .bashrc file if you want to have it available in the future):
+
+function ssl-check $f /server.crt
+ ssl_key=$f /server.key
+ b=$(tput bold)
+ c=$(tput sgr0)
+
+ local_ip=$(ipconfig getifaddr $(route get default | grep interface | awk '{print $2}' ))
+
+
+ domains=(
+ "localhost"
+ "$local_ip "
+ )
+
+ if [[ ! -f $ssl_crt ]]; then
+ echo -e "\n🛑 ${b} Couldn't find a Slate SSL certificate:${c} "
+ make_key=true
+ elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip ) ]]; then
+ echo -e "\n🛑 ${b} Your IP Address has changed:${c} "
+ make_key=true
+ else
+ echo -e "\n✅ ${b} Your IP address is still the same.${c} "
+ fi
+
+ if [[ $make_key == true ]]; then
+ echo -e "Generating a new Slate SSL certificate...\n"
+ count=$(( ${#domains[@]} - 1))
+ mkcert ${domains[@]}
+
+
+ test ! -d $f && mkdir $f
+
+
+
+ if [[ $count = 0 ]]; then
+ mv ./localhost.pem $ssl_crt
+ mv ./localhost-key.pem $ssl_key
+ else
+ mv ./localhost+$count .pem $ssl_crt
+ mv ./localhost+$count -key.pem $ssl_key
+ fi
+ fi
+}
+
+Run the function you just declared in step 2:
+
+ssl-check
+
+You now have successfully created a local, self-signed SSL certificate for developing with Slate!
+
+Even after performing the above steps, you might encounter the following errors and warnings when developing with Slate:
+
+An example of https requests to your local asset server being blocked
+
+An example of Chrome warning you of an untrusted https certificate
+This is most likely because your local IP has changed and the self-signed SSL certificate you created is no longer valid. To remove these warnings and errors, simply repeat steps 2 and 3 above to regenerate a new self-signed certificate.
+Create Slate Theme · Slate The create-slate-theme package allows you to create a new Slate project with a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+Note : If you prefer to use NPM, you will need to install create-slate-theme globally before creating a new project:
+npm install -g create-slate-theme
+create-slate-theme my-new-theme
+
+
+
+Options Description
+
+--skipInstallSkips installing theme dependencies which greatly speeds up overall setup time. --sshUses SSH, instead of HTTPS, when cloning a theme to your local directory.
+
+The default Slate theme is generated from Shopify/starter-theme
+Instead, you can reference your own Github repository or local directory starting point.
+To create a new theme from a GitHub repository simply pass the {username}/{repository}:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+If you want to create a theme based on a local directory, reference the path:
+yarn create slate-theme my-new-theme my-own-starter-theme/
+You can share your starting point with the community by publishing your own starter theme to Github.
+For example, Thomas thinks his starter theme is way more clever than Shopify's Starter Theme. So he creates his own, pushes it to a GitHub repository and calls the following command for any of his future Slate projects:
+yarn create slate-theme my-new-theme thomas/way-more-clever-starter-theme
+See custom starter themes for more information on how you can generate a new project from other sources and even contribute your very own to the Slate community!
+Create Slate Theme · Slate The create-slate-theme package allows you to create a new Slate project with a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+Note : If you prefer to use NPM, you will need to install create-slate-theme globally before creating a new project:
+npm install -g create-slate-theme
+create-slate-theme my-new-theme
+
+
+
+Options Description
+
+--skipInstallSkips installing theme dependencies which greatly speeds up overall setup time. --sshUses SSH, instead of HTTPS, when cloning a theme to your local directory.
+
+The default Slate theme is generated from Shopify/starter-theme
+Instead, you can reference your own Github repository or local directory starting point.
+To create a new theme from a GitHub repository simply pass the {username}/{repository}:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+If you want to create a theme based on a local directory, reference the path:
+yarn create slate-theme my-new-theme my-own-starter-theme/
+You can share your starting point with the community by publishing your own starter theme to Github.
+For example, Thomas thinks his starter theme is way more clever than Shopify's Starter Theme. So he creates his own, pushes it to a GitHub repository and calls the following command for any of his future Slate projects:
+yarn create slate-theme my-new-theme thomas/way-more-clever-starter-theme
+See custom starter themes for more information on how you can generate a new project from other sources and even contribute your very own to the Slate community!
+Deploy environments · Slate Manages the environment variables which are needed by Slate to interact with Shopify servers. Can create and run .env files used to store Slate environment variables for development.
+By default, Slate will look for a .env file with environment variables.
+Alternatively, users can specify --env with slate-tools scripts to use associated .env.{env} file. For example:
+$ slate-tools start --env=production
+will look for a .env.production file.
+
+SLATE_STORE=
+
+
+SLATE_PASSWORD=
+
+
+SLATE_THEME_ID=
+
+
+SLATE_IGNORE_FILES=
+Deploy environments · Slate Manages the environment variables which are needed by Slate to interact with Shopify servers. Can create and run .env files used to store Slate environment variables for development.
+By default, Slate will look for a .env file with environment variables.
+Alternatively, users can specify --env with slate-tools scripts to use associated .env.{env} file. For example:
+$ slate-tools start --env=production
+will look for a .env.production file.
+
+SLATE_STORE=
+
+
+SLATE_PASSWORD=
+
+
+SLATE_THEME_ID=
+
+
+SLATE_IGNORE_FILES=
+How to create a development store · Slate Since you can’t run the Shopify platform locally on your computer, everything needs to live on Shopify’s servers. To start developing and testing your theme , you will first need to create a Shopify development store. The easiest way to create a development store is through a Shopify Partner Account.
+As a Shopify Partner , you can create an unlimited number of development stores. A development store is a free Shopify account that comes with a couple of limitations. You can use a development store to test any theme that you create, or to set up a Shopify account for a client.
+
+Visit the Shopify Partner Program page
+Enter your email and fill out the form
+
+Create a new partner account and fill out the form
+
+You are now ready to create your first development store!
+
+
+Once you have your Partner account and your development store running, you will want to fill your store with dummy data. While you can add content manually, Shopify offers some tools to automate that task.
+Shopify has create their own developer tools app (only available to macOS users) to help you build faster with Shopify. One of the many features is the ability to generate dummy data .
+
+Follow the instructions to install the app
+Once the application is installed and you are authenticated, you can search for Data generator
+
+Fill in the different options and click on Start
+
+
+If you don't wish to download an app, Shopify also offers Product CSV files as an alternative. There’s a great article on the Shopify Partners blog how on how to import CSV files in your store .
+Once content is added to your store, you can connect it to your local development environment and start developing !
+How to create a development store · Slate Since you can’t run the Shopify platform locally on your computer, everything needs to live on Shopify’s servers. To start developing and testing your theme , you will first need to create a Shopify development store. The easiest way to create a development store is through a Shopify Partner Account.
+As a Shopify Partner , you can create an unlimited number of development stores. A development store is a free Shopify account that comes with a couple of limitations. You can use a development store to test any theme that you create, or to set up a Shopify account for a client.
+
+Visit the Shopify Partner Program page
+Enter your email and fill out the form
+
+Create a new partner account and fill out the form
+
+You are now ready to create your first development store!
+
+
+Once you have your Partner account and your development store running, you will want to fill your store with dummy data. While you can add content manually, Shopify offers some tools to automate that task.
+Shopify has create their own developer tools app (only available to macOS users) to help you build faster with Shopify. One of the many features is the ability to generate dummy data .
+
+Follow the instructions to install the app
+Once the application is installed and you are authenticated, you can search for Data generator
+
+Fill in the different options and click on Start
+
+
+If you don't wish to download an app, Shopify also offers Product CSV files as an alternative. There’s a great article on the Shopify Partners blog how on how to import CSV files in your store .
+Once content is added to your store, you can connect it to your local development environment and start developing !
+How to create your own Starter theme · Slate We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes team. For cases like this, Slate lets you optionally specify your own Starter Theme. Introduced in Slate v1, starter themes are structured to be used as a starting point whenever creating a new Slate project.
+The easiest way to create your very own starter theme is by customizing an existing one. You can find a list of community made starter themes in the Slate documentation website, or you can use one of Shopify’s starter themes:
+
+Shopify/starter-theme can help you build a theme using a list of best practices and solutions the Shopify Themes Team has come up with and has applied to the majority of Shopify's free themes. Starter Theme provides a whole range of useful features:
+
+Templates with minimal structure
+CSS predefined styles and helper classes
+UI interaction with our theme scripts
+Internationalization-ready for multiple languages
+Responsive images that are performant and optimized for any device
+Social meta tags ready to boost your search engine rankings
+Standard sections that are required in order to submit a theme to the Shopify Theme Store
+
+If you’re someone who likes to develop a theme from scratch, you can take a look at the Shopify/skeleton-theme repository. Skeleton Theme is a barebones theme that gives you the freedom to start a new Slate project with nothing in your way and to customize it however you see fit.
+Whichever starter theme you choose, you can use Create Slate Theme to generate a new Slate project:
+yarn create slate-theme my-new-starter-theme Shopify/starter-theme
+Where Shopify/starter-theme is the name of the repository you wish to use as a starter theme.
+After creating your theme, you can create a repository using Git version control. The Shopify Themes team works a lot with GitHub and we find it extremely convenient for addressing issues, creating releases and collaborating with one another.
+Before being able to develop your theme, you need connect to your store . Once this is done, you can start developing !
+In order to successfully compile your theme with Slate and upload it to Shopify, you need to ensure the list of mandatory files and folders are there. We encourage you to take a look at Shopify's required files and folder to view the complete list of required files and folders.
+After developing and testing your theme, you are ready to set up your project on GitHub and share it with everyone.
+Now that your project is hosted on GitHub, anyone can start a Slate theme with it! To do so, type the following into you terminal:
+yarn create slate-theme my-new-theme-project tobi/custom-starter-theme
+Where tobi/custom-starter-theme would reference as {username}/{repository}
+Don’t forget to add your new starter theme to the list of community themes on the Starter Themes page of the Slate documentation website!
+How to create your own Starter theme · Slate We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes team. For cases like this, Slate lets you optionally specify your own Starter Theme. Introduced in Slate v1, starter themes are structured to be used as a starting point whenever creating a new Slate project.
+The easiest way to create your very own starter theme is by customizing an existing one. You can find a list of community made starter themes in the Slate documentation website, or you can use one of Shopify’s starter themes:
+
+Shopify/starter-theme can help you build a theme using a list of best practices and solutions the Shopify Themes Team has come up with and has applied to the majority of Shopify's free themes. Starter Theme provides a whole range of useful features:
+
+Templates with minimal structure
+CSS predefined styles and helper classes
+UI interaction with our theme scripts
+Internationalization-ready for multiple languages
+Responsive images that are performant and optimized for any device
+Social meta tags ready to boost your search engine rankings
+Standard sections that are required in order to submit a theme to the Shopify Theme Store
+
+If you’re someone who likes to develop a theme from scratch, you can take a look at the Shopify/skeleton-theme repository. Skeleton Theme is a barebones theme that gives you the freedom to start a new Slate project with nothing in your way and to customize it however you see fit.
+Whichever starter theme you choose, you can use Create Slate Theme to generate a new Slate project:
+yarn create slate-theme my-new-starter-theme Shopify/starter-theme
+Where Shopify/starter-theme is the name of the repository you wish to use as a starter theme.
+After creating your theme, you can create a repository using Git version control. The Shopify Themes team works a lot with GitHub and we find it extremely convenient for addressing issues, creating releases and collaborating with one another.
+Before being able to develop your theme, you need connect to your store . Once this is done, you can start developing !
+In order to successfully compile your theme with Slate and upload it to Shopify, you need to ensure the list of mandatory files and folders are there. We encourage you to take a look at Shopify's required files and folder to view the complete list of required files and folders.
+After developing and testing your theme, you are ready to set up your project on GitHub and share it with everyone.
+Now that your project is hosted on GitHub, anyone can start a Slate theme with it! To do so, type the following into you terminal:
+yarn create slate-theme my-new-theme-project tobi/custom-starter-theme
+Where tobi/custom-starter-theme would reference as {username}/{repository}
+Don’t forget to add your new starter theme to the list of community themes on the Starter Themes page of the Slate documentation website!
+How to update Slate to the latest version · Slate Slate is currently in beta and is undergoing heavy development, which makes the release cycle much more frequent. You will want to ensure you are running the latest version of Slate in your Shopify theme by updating the @shopify/slate-tools dependency over time.
+To update @shopify/slate-tools, we recommend using either yarn upgrade or npm install :
+yarn upgrade --latest @shopify/slate-tools
+or
+npm install @shopify/slate-tools@latest
+In addition to updating the dependency inside of the node_modules folder, this command also updates the version of @shopify/slate-tools in your package.json file.
+
+Note: to better understand the updates that are made to Slate, you can check out the Slate changelog to view the list of updates for each release.
+
+How to update Slate to the latest version · Slate Slate is currently in beta and is undergoing heavy development, which makes the release cycle much more frequent. You will want to ensure you are running the latest version of Slate in your Shopify theme by updating the @shopify/slate-tools dependency over time.
+To update @shopify/slate-tools, we recommend using either yarn upgrade or npm install :
+yarn upgrade --latest @shopify/slate-tools
+or
+npm install @shopify/slate-tools@latest
+In addition to updating the dependency inside of the node_modules folder, this command also updates the version of @shopify/slate-tools in your package.json file.
+
+Note: to better understand the updates that are made to Slate, you can check out the Slate changelog to view the list of updates for each release.
+
+Local development · Slate Local development in Shopify Themes is pretty unique, and probably unlike anything you've previously encountered. In fact, with Slate local development you're still deploying and viewing pages from Shopify servers, so technically it's not really local development. Let's explore why Slate takes this approach, and what makes local development in Shopify unique.
+Liquid is a templating language created by Shopify and written in Ruby. It is now available as an open source project on GitHub, and used by many different software projects and companies. Liquid is the backbone of all Shopify themes, and is used to load dynamic content to the pages of online stores.
+Shopify Themes use an extended version of Liquid with a variety of additional objects, tags, and filters. These extensions make it possible for Shopify Theme Liquid to access and manipulate a huge amount of store data, including products, a user's cart, Theme Editor settings, etc.
+Rendering Shopify Liquid locally on a developers machine (in a reliable, sustainable manner) is currently not possible due to the following realities:
+
+The code for all Shopify Liquid features is written in Ruby and is tightly coupled to our databases and servers. In its current state, it would be extremely difficult for us to package this code as an independent library and share it without exposing Shopify's private internal workings.
Shopify Liquid is extended as we release new features, which means it is constantly changing. If we had a separate, local-development Shopify Liquid renderer, we would need to duplicate any new logic which means twice as much work and more potential for error.
+Because it is currently not possible to render Shopify Liquid locally in a reliable manner, Slate relies on Shopify servers to do the work so you can preview your changes as you develop. This means that any changes you make while developing with Slate will be deployed to the theme you have specified .
+We realize that that deploying to Shopify servers introduces a level of risk while developing, such as possibly overwriting files on your live theme or erasing Theme Editor customizations.
+Luckily, Slate comes with a few handy features which help reduce these risks as well as improve the experience of developing with a external server.
+Slate uses deploy environments to specify which store and theme it should be deploying files too. If you are about to deploy to your store's currently published theme , Slate will prompt you before continuing.
+The settings_data.json file is used to keep track of any changes you've made to your theme in the Shopify Theme Editor. It is not uncommon for the settings_data.json file in your Slate project to become out of sync with the setting_data.json file on your store. When this happens and you deploy your Slate project, your store's settings_data.json will be overwritten with the version inside your Slate project. This can result in losing changes you've made in the Theme Editor.
+Slate will detect if you are about to upload settings_data.json, and prompt you to confirm your action and the potential for overwriting out-of-sync changes.
+Slate v1.0 introduces a local server which compiles and serves theme JavaScript and CSS locally. By serving these assets locally, developers don't need to wait for them to be uploaded to Shopify servers to preview the changes they are making. When combined with Hot Module Reloading, developers see changes in their code reflected almost instantly.
+Developers wanting to share an instance of their store with other developers are often confused when they see their store appear broken. Because CSS and JavaScript are being served locally, your theme won’t function on any machine other than the one the Express server is currently running on.
+Local development · Slate Local development in Shopify Themes is pretty unique, and probably unlike anything you've previously encountered. In fact, with Slate local development you're still deploying and viewing pages from Shopify servers, so technically it's not really local development. Let's explore why Slate takes this approach, and what makes local development in Shopify unique.
+Liquid is a templating language created by Shopify and written in Ruby. It is now available as an open source project on GitHub, and used by many different software projects and companies. Liquid is the backbone of all Shopify themes, and is used to load dynamic content to the pages of online stores.
+Shopify Themes use an extended version of Liquid with a variety of additional objects, tags, and filters. These extensions make it possible for Shopify Theme Liquid to access and manipulate a huge amount of store data, including products, a user's cart, Theme Editor settings, etc.
+Rendering Shopify Liquid locally on a developers machine (in a reliable, sustainable manner) is currently not possible due to the following realities:
+
+The code for all Shopify Liquid features is written in Ruby and is tightly coupled to our databases and servers. In its current state, it would be extremely difficult for us to package this code as an independent library and share it without exposing Shopify's private internal workings.
Shopify Liquid is extended as we release new features, which means it is constantly changing. If we had a separate, local-development Shopify Liquid renderer, we would need to duplicate any new logic which means twice as much work and more potential for error.
+Because it is currently not possible to render Shopify Liquid locally in a reliable manner, Slate relies on Shopify servers to do the work so you can preview your changes as you develop. This means that any changes you make while developing with Slate will be deployed to the theme you have specified .
+We realize that that deploying to Shopify servers introduces a level of risk while developing, such as possibly overwriting files on your live theme or erasing Theme Editor customizations.
+Luckily, Slate comes with a few handy features which help reduce these risks as well as improve the experience of developing with a external server.
+Slate uses deploy environments to specify which store and theme it should be deploying files too. If you are about to deploy to your store's currently published theme , Slate will prompt you before continuing.
+The settings_data.json file is used to keep track of any changes you've made to your theme in the Shopify Theme Editor. It is not uncommon for the settings_data.json file in your Slate project to become out of sync with the setting_data.json file on your store. When this happens and you deploy your Slate project, your store's settings_data.json will be overwritten with the version inside your Slate project. This can result in losing changes you've made in the Theme Editor.
+Slate will detect if you are about to upload settings_data.json, and prompt you to confirm your action and the potential for overwriting out-of-sync changes.
+Slate v1.0 introduces a local server which compiles and serves theme JavaScript and CSS locally. By serving these assets locally, developers don't need to wait for them to be uploaded to Shopify servers to preview the changes they are making. When combined with Hot Module Reloading, developers see changes in their code reflected almost instantly.
+Developers wanting to share an instance of their store with other developers are often confused when they see their store appear broken. Because CSS and JavaScript are being served locally, your theme won’t function on any machine other than the one the Express server is currently running on.
+Slate analytics · Slate Slate Analytics emits Slate usage events, performance data, and errors to the Shopify analytics platform. It also manages individual user consent for collecting data as they work with Slate.
+Consent is always asked for new Slate users and if the data we collect has changed in a way that requires a consent reconfirmation. The goal of Slate analytics is to collect non-sensitive, real user metrics which will be used to improve Slate's development experience.
+All emitted events include a performance.mark() for benchmarking and randomly generated process ID for linking multiple events from the same command.
+We will be continually iterating Slate Analytics to catch as many errors as possible. We will never collect a full stack of errors, which may contain sensitive information about the user's file system.
+
+
+Name Payload
+
+slate-analytics:new-userContents of ~/.slaterc (Randomly generated user ID, Email, Tracking consent version)` slate-analytics:renew-consent-promptContents of ~/.slaterc slate-analytics:renew-consent-trueContents of ~/.slaterc
+
+
+
+Name Payload
+
+create-slate-theme:startStarter theme used, --skipInstall value, --verbose flag value, create-slate-theme version create-slate-theme:successcreate-slate-theme version
+
+
+
+Name Payload
+
+slate-tools:cli:startslate.config.js, slate-tools versionslate-tools:build:startWebpack config, slate-tools version slate-tools:build:endWebpack config, slate-tools version slate-tools:deploy:startslate-tools versionslate-tools:deploy:endslate-tools versionslate-tools:deploy:errorslate-tools version, errorslate-tools:deploy:main-themeslate-tools:start:startWebpack config, slate-tools version slate-tools:start:compile-errorsslate-tools version, errorsslate-tools:start:compile-warningsslate-tools version, warnings, compile timeslate-tools:start:compile-successslate-tools version, compile timeslate-tools:start:skip-first-deployslate-tools versionslate-tools:start:sync-startslate-tools versionslate-tools:start:sync-endslate-tools versionslate-tools:start:sync-errorslate-tools versionslate-tools:zip:startslate-tools version
+
+Slate analytics · Slate Slate Analytics emits Slate usage events, performance data, and errors to the Shopify analytics platform. It also manages individual user consent for collecting data as they work with Slate.
+Consent is always asked for new Slate users and if the data we collect has changed in a way that requires a consent reconfirmation. The goal of Slate analytics is to collect non-sensitive, real user metrics which will be used to improve Slate's development experience.
+All emitted events include a performance.mark() for benchmarking and randomly generated process ID for linking multiple events from the same command.
+We will be continually iterating Slate Analytics to catch as many errors as possible. We will never collect a full stack of errors, which may contain sensitive information about the user's file system.
+
+
+Name Payload
+
+slate-analytics:new-userContents of ~/.slaterc (Randomly generated user ID, Email, Tracking consent version)` slate-analytics:renew-consent-promptContents of ~/.slaterc slate-analytics:renew-consent-trueContents of ~/.slaterc
+
+
+
+Name Payload
+
+create-slate-theme:startStarter theme used, --skipInstall value, --verbose flag value, create-slate-theme version create-slate-theme:successcreate-slate-theme version
+
+
+
+Name Payload
+
+slate-tools:cli:startslate.config.js, slate-tools versionslate-tools:build:startWebpack config, slate-tools version slate-tools:build:endWebpack config, slate-tools version slate-tools:deploy:startslate-tools versionslate-tools:deploy:endslate-tools versionslate-tools:deploy:errorslate-tools version, errorslate-tools:deploy:main-themeslate-tools:start:startWebpack config, slate-tools version slate-tools:start:compile-errorsslate-tools version, errorsslate-tools:start:compile-warningsslate-tools version, warnings, compile timeslate-tools:start:compile-successslate-tools version, compile timeslate-tools:start:skip-first-deployslate-tools versionslate-tools:start:sync-startslate-tools versionslate-tools:start:sync-endslate-tools versionslate-tools:start:sync-errorslate-tools versionslate-tools:zip:startslate-tools version
+
+Slate Configuration · Slate Excluding connecting to your store , Slate should work out of the box without any additional configuration. For developers who want to customize the default configurations of Slate, they can do so via a slate.config.js file found in the root of the theme.
+A typical slate.config.js could look something like below:
+const path = require ('path' );
+const newPostCssPlugin = require ('newPostCssPlugin' );
+
+module .exports = {
+
+ 'webpack.babel.enable' : false ,
+
+
+
+
+ 'paths.theme.src' : config =>'paths.theme' ), 'src' ),
+
+
+
+ 'webpack.postcss.plugins' : (config, defaultValue ) => [
+ newPostCssPlugin,
+ ...defaultValue
+ ]
+};
+Sometimes you want a configuration to be different depending on if your running a production build (slate-tools build) or development build (slate-tools start). To do this, you can take advantage of the process.env.NODE_ENV which Slate sets to 'production' or 'development':
+module .exports = {
+ 'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano(config.get('webpack.cssnano.settings' ))
+ }
+
+ return plugins;
+ },
+}
+Configurations are declared within Slate packages, across various schema files. The best way
+to learn about these configurations are to explore these files:
+
+Slate Configuration · Slate Excluding connecting to your store , Slate should work out of the box without any additional configuration. For developers who want to customize the default configurations of Slate, they can do so via a slate.config.js file found in the root of the theme.
+A typical slate.config.js could look something like below:
+const path = require ('path' );
+const newPostCssPlugin = require ('newPostCssPlugin' );
+
+module .exports = {
+
+ 'webpack.babel.enable' : false ,
+
+
+
+
+ 'paths.theme.src' : config =>'paths.theme' ), 'src' ),
+
+
+
+ 'webpack.postcss.plugins' : (config, defaultValue ) => [
+ newPostCssPlugin,
+ ...defaultValue
+ ]
+};
+Sometimes you want a configuration to be different depending on if your running a production build (slate-tools build) or development build (slate-tools start). To do this, you can take advantage of the process.env.NODE_ENV which Slate sets to 'production' or 'development':
+module .exports = {
+ 'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano(config.get('webpack.cssnano.settings' ))
+ }
+
+ return plugins;
+ },
+}
+Configurations are declared within Slate packages, across various schema files. The best way
+to learn about these configurations are to explore these files:
+
+Slate CSSVar Loader · Slate Finds CSS custom properties (variables) in your stylesheets and replaces them with their corresponding Liquid variable found in the provided cssVariablesPath option.
+npm install --save-dev @shopify/slate-cssvar-loader
+module .exports = {
+ module : {
+ rules : [
+ {
+ test : /\.s[ac]ss$/ ,
+ use : [
+ {
+ loader : '@shopify/slate-cssvar-loader'
+ },
+ { loader : 'css-loader' },
+ { loader : 'sass-loader' }
+ ]
+ }
+ ]
+ }
+};
+The slate-cssvar-loader can be configured via the theme's slate.config.js file:
+{
+ "cssVarLoaderEnable" : true ,
+ "cssVarLoaderLiquidPath" : ["src/snippets/css-variables.liquid" ]
+}
+
+cssVarLoaderEnable: Enable/disable CSS Variable loader plugincssVarLoaderLiquidPath: An array of string paths to Liquid files that associate css variables to Liquid variables
+Slate CSSVar Loader · Slate Finds CSS custom properties (variables) in your stylesheets and replaces them with their corresponding Liquid variable found in the provided cssVariablesPath option.
+npm install --save-dev @shopify/slate-cssvar-loader
+module .exports = {
+ module : {
+ rules : [
+ {
+ test : /\.s[ac]ss$/ ,
+ use : [
+ {
+ loader : '@shopify/slate-cssvar-loader'
+ },
+ { loader : 'css-loader' },
+ { loader : 'sass-loader' }
+ ]
+ }
+ ]
+ }
+};
+The slate-cssvar-loader can be configured via the theme's slate.config.js file:
+{
+ "cssVarLoaderEnable" : true ,
+ "cssVarLoaderLiquidPath" : ["src/snippets/css-variables.liquid" ]
+}
+
+cssVarLoaderEnable: Enable/disable CSS Variable loader plugincssVarLoaderLiquidPath: An array of string paths to Liquid files that associate css variables to Liquid variables
+Slate Themes · Slate Slate themes follow a predetermined file structure. Several of the files listed are optional and can be omitted from your project. However, Starter Theme , the default starting point when generating a new theme with Slate, will include all files.
+A Slate project consists of the following file structure:
+├── .babelrc [1]
+├── .env [2]
+├── .eslintrc [3]
+├── .gitignore
+├── .stylelintrc [4]
+├── package.json [5]
+├── slate.config.js [6]
+├── yarn.lock [7]
+└── src
+ ├── assets [8]
+ ├── config [9]
+ ├── layout [9]
+ ├── locales [9]
+ ├── scripts [10]
+ ├── sections [9]
+ ├── snippets [9]
+ ├── styles [11]
+ └── templates [9]
+.babelrc (optional)
+Starter Theme comes with Babel preconfigured with shopify/babel-preset-shopify
+.env
+Slate will use the environment variables declared in this file to connect to deploy files to your Shopify store. For more information, visit the @shopify/slate-env docs
+This file, along with any other .env.{environment} files, contain sensitive information and should not be commited to Github. These environment files are ignored by default in .gitignore.
+.eslintrc (optional)
+Starter Theme comes with ESLint preconfigured with shopify/eslint-plugin-shopify
+.stylelintrc (optional)
+Starter Theme comes with Stylelint preconfigured with shopify/stylelint-config-shopify
+package.json
+A copy of the theme package.json will be included in your new project. It's a good idea to update its contents to match your new project, such as updating the name, version, repository, author and description.
+The package.json includes NPM/Yarn scripts for you to be able to use Slate Tools commands easily (e.g. yarn start).
+slate.config.js
+The Slate config file enables users to customize Slate to their specific needs. For more information, visit the @shopify/slate-config docs
+yarn.lock
+The Shopify Themes Team uses Yarn while developing themes because of its speed. However, Starter Theme works with NPM as well. Simply delete the yarn.lock file and run npm install to install the list of dependencies.
+src/assets/
+Sometimes you need the ability to upload unmodified files to the Shopify server. This is where the assets directory comes in. Any files placed inside this directory will be uploaded, as-is, to Shopify.
+Files can be referenced in your theme by their file name, such as:
+<img src ="{{ my-image.jpg | asset_url }}" />
+You can organize your files within folders inside the assets directory, and still reference them by file name. For example, the following image would still be referenced the exact same as the example above:
+└── assets
+ └── images
+ └── my-image.jpg
+
+⚠ Slate flattens the folders found in the assets directory on build. If you decide to use folders inside your assets directory, avoid duplicate file names because only one file with that file name can exist when the Slate theme is built. The example below shows two images with the same name my-image.jpg resulting in only one of the images being included in the compiled theme
+
+└── src
+ └── assets
+ ├── image-collection-a
+ │ └── my-image.jpg
+ └── image-collection-b
+ └── my-image.jpg
+Compiles to:
+└── dist
+ └── assets
+ └── my-image.jpg
+src/config, src/layout/theme.liquid, src/locales, src/sections, src/snippets, src/templates/*.liquid
+The aforementioned files and folders are required by Shopify for any given theme.
+src/scripts
+This folder constains all your JS modules. See the Template and Layout Bundles page for more details on the contents of src/scripts.
+You can use ES6/ES2015's standard, which allows you to require your modules with the import syntax:
+import { contains } from 'lodash' ;
+import Foo from './modules/foo' ;
+
+src/styles
+Slate fully supports .css, .scss and .sass files and their syntax, including @import.
+You must include your style index file at the top of your theme.js file for Webpack to be able to load your styles into its build process. For example:
+import '../styles/theme.scss' ;
+Liquid variables are accessible in .css, .scss, and .sass files via CSS custom properties that are declared in the layout/theme.liquid. Here's more information on how to use Liquid with CSS custom properties
+Slate Themes · Slate Slate themes follow a predetermined file structure. Several of the files listed are optional and can be omitted from your project. However, Starter Theme , the default starting point when generating a new theme with Slate, will include all files.
+A Slate project consists of the following file structure:
+├── .babelrc [1]
+├── .env [2]
+├── .eslintrc [3]
+├── .gitignore
+├── .stylelintrc [4]
+├── package.json [5]
+├── slate.config.js [6]
+├── yarn.lock [7]
+└── src
+ ├── assets [8]
+ ├── config [9]
+ ├── layout [9]
+ ├── locales [9]
+ ├── scripts [10]
+ ├── sections [9]
+ ├── snippets [9]
+ ├── styles [11]
+ └── templates [9]
+.babelrc (optional)
+Starter Theme comes with Babel preconfigured with shopify/babel-preset-shopify
+.env
+Slate will use the environment variables declared in this file to connect to deploy files to your Shopify store. For more information, visit the @shopify/slate-env docs
+This file, along with any other .env.{environment} files, contain sensitive information and should not be commited to Github. These environment files are ignored by default in .gitignore.
+.eslintrc (optional)
+Starter Theme comes with ESLint preconfigured with shopify/eslint-plugin-shopify
+.stylelintrc (optional)
+Starter Theme comes with Stylelint preconfigured with shopify/stylelint-config-shopify
+package.json
+A copy of the theme package.json will be included in your new project. It's a good idea to update its contents to match your new project, such as updating the name, version, repository, author and description.
+The package.json includes NPM/Yarn scripts for you to be able to use Slate Tools commands easily (e.g. yarn start).
+slate.config.js
+The Slate config file enables users to customize Slate to their specific needs. For more information, visit the @shopify/slate-config docs
+yarn.lock
+The Shopify Themes Team uses Yarn while developing themes because of its speed. However, Starter Theme works with NPM as well. Simply delete the yarn.lock file and run npm install to install the list of dependencies.
+src/assets/
+Sometimes you need the ability to upload unmodified files to the Shopify server. This is where the assets directory comes in. Any files placed inside this directory will be uploaded, as-is, to Shopify.
+Files can be referenced in your theme by their file name, such as:
+<img src ="{{ my-image.jpg | asset_url }}" />
+You can organize your files within folders inside the assets directory, and still reference them by file name. For example, the following image would still be referenced the exact same as the example above:
+└── assets
+ └── images
+ └── my-image.jpg
+
+⚠ Slate flattens the folders found in the assets directory on build. If you decide to use folders inside your assets directory, avoid duplicate file names because only one file with that file name can exist when the Slate theme is built. The example below shows two images with the same name my-image.jpg resulting in only one of the images being included in the compiled theme
+
+└── src
+ └── assets
+ ├── image-collection-a
+ │ └── my-image.jpg
+ └── image-collection-b
+ └── my-image.jpg
+Compiles to:
+└── dist
+ └── assets
+ └── my-image.jpg
+src/config, src/layout/theme.liquid, src/locales, src/sections, src/snippets, src/templates/*.liquid
+The aforementioned files and folders are required by Shopify for any given theme.
+src/scripts
+This folder constains all your JS modules. See the Template and Layout Bundles page for more details on the contents of src/scripts.
+You can use ES6/ES2015's standard, which allows you to require your modules with the import syntax:
+import { contains } from 'lodash' ;
+import Foo from './modules/foo' ;
+
+src/styles
+Slate fully supports .css, .scss and .sass files and their syntax, including @import.
+You must include your style index file at the top of your theme.js file for Webpack to be able to load your styles into its build process. For example:
+import '../styles/theme.scss' ;
+Liquid variables are accessible in .css, .scss, and .sass files via CSS custom properties that are declared in the layout/theme.liquid. Here's more information on how to use Liquid with CSS custom properties
+Start developing · Slate Now comes the fun part! To begin developing your very own theme with Slate's development pipeline, run the following command:
+yarn start
+(or, if you're using npm, npm start)
+This compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve your CSS and JavaScript assets from https://xxx.xxx.xxx.xxx:3001.
+
+
+Note : Because we are running the server on https://, you will either need to create a self-signed SSL Certificate or visit the asset server URL at least once and tell your browser to "trust it". Otherwise, local assets will be blocked and your theme will appear broken.
+
+By default, Slate will look for an .env file in the root of your theme directory. However, users can specify an --env flag to target specific environments. These environment files need to be named .env.{env}.
+For example, the following command will target an .env.production file:
+yarn start --env=production
+Start developing · Slate Now comes the fun part! To begin developing your very own theme with Slate's development pipeline, run the following command:
+yarn start
+(or, if you're using npm, npm start)
+This compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve your CSS and JavaScript assets from https://xxx.xxx.xxx.xxx:3001.
+
+
+Note : Because we are running the server on https://, you will either need to create a self-signed SSL Certificate or visit the asset server URL at least once and tell your browser to "trust it". Otherwise, local assets will be blocked and your theme will appear broken.
+
+By default, Slate will look for an .env file in the root of your theme directory. However, users can specify an --env flag to target specific environments. These environment files need to be named .env.{env}.
+For example, the following command will target an .env.production file:
+yarn start --env=production
+Starter Themes · Slate Slate v1 introduces the concept of Starter Themes, a theme that is specifically structured to be used as a starting point for a new project. Ideally, a Starter Theme contains everything a team or individual needs when producing a theme, including solutions to common problems, 3rd party libraries, and helpful reminders.
+By default, Slate generates a new project using the Shopify Starter Theme . This theme represents the opinionated and preferred starting point for the Shopify Themes Team.
+We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes Team. For cases like this, Slate lets you optionally specify your own Starter Theme. Your Starter Theme can be hosted as Github repo. For example, here is how we specify we want to use Shopify Skeleton Theme as our Starter Theme:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+A Starter Theme can even just be a folder on your computer. For example, here is how we specify we want to use my-old-theme as a Starter Theme:
+yarn create slate-theme my-new-theme my-old-theme/
+You can share your customized Starter Theme with the community by publishing your own starter theme to Github. Add a link to your Starter Theme in the list below for others to see!
+
+Shopify Skeleton Theme - A barebones ☠️starter theme with the required files needed to compile with Slate and upload to Shopify.
+Starter Themes · Slate Slate v1 introduces the concept of Starter Themes, a theme that is specifically structured to be used as a starting point for a new project. Ideally, a Starter Theme contains everything a team or individual needs when producing a theme, including solutions to common problems, 3rd party libraries, and helpful reminders.
+By default, Slate generates a new project using the Shopify Starter Theme . This theme represents the opinionated and preferred starting point for the Shopify Themes Team.
+We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes Team. For cases like this, Slate lets you optionally specify your own Starter Theme. Your Starter Theme can be hosted as Github repo. For example, here is how we specify we want to use Shopify Skeleton Theme as our Starter Theme:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+A Starter Theme can even just be a folder on your computer. For example, here is how we specify we want to use my-old-theme as a Starter Theme:
+yarn create slate-theme my-new-theme my-old-theme/
+You can share your customized Starter Theme with the community by publishing your own starter theme to Github. Add a link to your Starter Theme in the list below for others to see!
+
+Shopify Skeleton Theme - A barebones ☠️starter theme with the required files needed to compile with Slate and upload to Shopify.
+Styles with Liquid · Slate Styling Shopify themes has always been inherently more complex than a typical web project thanks to the common need to combine styling languages with Liquid. The complexity only grows worse when using compiled styling languages like Sass, since including Liquid in Sass results in invalid syntax.
+Liquid is required in your styles if you want your theme to be customizable via the Online Store Editor. For example, if you wanted the background colour of your theme to be customizable, you could add a setting in your config/settings_schema.json and then use the value of that setting in your stylesheet. If you were using vanilla CSS, it might look something like the following:
+styles.css.liquid
+body {
+ background-color : {{ settings.colors.body_background }}
+}
+In order for Shopify to compute the Liquid values inside a stylesheet, you must give the stylesheet a .liquid extension. When a .css.liquid is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a .css stylesheet is made available. For example, if you were to upload a styles.css.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.css' | asset_url }}" rel ="stylesheet" >
+Similar to css.liquid stylesheets, if theme developers want to include Liquid directly in Sass (.scss.liquid files), those stylesheets need to be compiled on Shopify servers. This is because using Liquid in Sass results in invalid Sass syntax that local Sass compilers cannot parse.
+Luckily for developers, Shopify has a Sass compiler built into the platform. When a .scss.liquid file is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a scss.css stylesheet is made available. For example, if you were to upload a styles.scss.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.scss.css' | asset_url }}" rel ="stylesheet" >
+
+Note: Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive. This may cause some issues when trying to work with 3rd party Sass libraries.
+
+Slate introduces a new way of handling styles made possible through CSS custom properties. CSS custom properties are the perfect mechanism to link stylesheets to Theme Editor Liquid settings. They allow you to write valid CSS that plays well with build tools like Sass and PostCSS. CSS custom properties are also supported in all modern browsers, so there's never been a better time than now to use them!
+When local Sass compilation is combined with Slate's Local Development Assets Server, style changes are instantly injected into the page, without waiting for Shopify servers, resulting in a lightning fast development experience.
+To support legacy browsers, Slate includes a transpiler that replaces CSS variables with matching Liquid Variables as a last step in the production build script.
+For an example, take a look at Shopify/starter-theme
+
+We define all of our CSS variables in a snippet called css-variables.liquid which is included in the <head> of the theme.liquid file.
We create each variable like so, using CSS custom properties as described above:
+<style >
+ :root {
+ --color-primary: {{ settings.color_primary }};
+ --color-body-text: {{ settings.color_body_text }};
+ --color-main-background: {{ settings.color_main_bg }};
+ }
+ </style >
+
+What we did here is create a CSS custom property which is tied to the value from the theme editor (that the merchant can change). We can access these variables in our .scss files:
+
+$color-primary : var(--color-primary);
+$color-body : var(--color-main-background);
+
+In doing so, we successfully link up the values from the Shopify Theme Editor to our .scss files without the need of using a .scss.liquid file.
+
+Styles with Liquid · Slate Styling Shopify themes has always been inherently more complex than a typical web project thanks to the common need to combine styling languages with Liquid. The complexity only grows worse when using compiled styling languages like Sass, since including Liquid in Sass results in invalid syntax.
+Liquid is required in your styles if you want your theme to be customizable via the Online Store Editor. For example, if you wanted the background colour of your theme to be customizable, you could add a setting in your config/settings_schema.json and then use the value of that setting in your stylesheet. If you were using vanilla CSS, it might look something like the following:
+styles.css.liquid
+body {
+ background-color : {{ settings.colors.body_background }}
+}
+In order for Shopify to compute the Liquid values inside a stylesheet, you must give the stylesheet a .liquid extension. When a .css.liquid is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a .css stylesheet is made available. For example, if you were to upload a styles.css.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.css' | asset_url }}" rel ="stylesheet" >
+Similar to css.liquid stylesheets, if theme developers want to include Liquid directly in Sass (.scss.liquid files), those stylesheets need to be compiled on Shopify servers. This is because using Liquid in Sass results in invalid Sass syntax that local Sass compilers cannot parse.
+Luckily for developers, Shopify has a Sass compiler built into the platform. When a .scss.liquid file is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a scss.css stylesheet is made available. For example, if you were to upload a styles.scss.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.scss.css' | asset_url }}" rel ="stylesheet" >
+
+Note: Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive. This may cause some issues when trying to work with 3rd party Sass libraries.
+
+Slate introduces a new way of handling styles made possible through CSS custom properties. CSS custom properties are the perfect mechanism to link stylesheets to Theme Editor Liquid settings. They allow you to write valid CSS that plays well with build tools like Sass and PostCSS. CSS custom properties are also supported in all modern browsers, so there's never been a better time than now to use them!
+When local Sass compilation is combined with Slate's Local Development Assets Server, style changes are instantly injected into the page, without waiting for Shopify servers, resulting in a lightning fast development experience.
+To support legacy browsers, Slate includes a transpiler that replaces CSS variables with matching Liquid Variables as a last step in the production build script.
+For an example, take a look at Shopify/starter-theme
+
+We define all of our CSS variables in a snippet called css-variables.liquid which is included in the <head> of the theme.liquid file.
We create each variable like so, using CSS custom properties as described above:
+<style >
+ :root {
+ --color-primary: {{ settings.color_primary }};
+ --color-body-text: {{ settings.color_body_text }};
+ --color-main-background: {{ settings.color_main_bg }};
+ }
+ </style >
+
+What we did here is create a CSS custom property which is tied to the value from the theme editor (that the merchant can change). We can access these variables in our .scss files:
+
+$color-primary : var(--color-primary);
+$color-body : var(--color-main-background);
+
+In doing so, we successfully link up the values from the Shopify Theme Editor to our .scss files without the need of using a .scss.liquid file.
+
+System requirements · Slate Slate is developed and is most stable on MacOS. We hope to officially extend support to Windows and Linux in future.
+A few users have successfully got Slate up and running in Windows Subsystem for Linux. They used the following commands to setup their system:
+sudo apt update && sudo apt -y upgrade
+sudo apt install -y build-essential libssl-dev libpng-dev
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+exit
+nvm install node --lts
+curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+sudo apt update && sudo apt install -y --no-install-recommends yarn
+source ~/.profile
+For more information, visit issue #667 .
+You will need the current LTS (long-term support) release which you can download directly from the Node website .
+We highly recommend using NVM as a Node Version Manager which can easily be installed by running the following command in your terminal:
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+For further documentation on how to install individual Node versions with NVM, visit the GitHub repository .
+Follow the instructions on how to get started with Yarn or npm to make sure you’re using the latest version.
+The Shopify Themes team made a decision in 2017 to migrate all theme repositories, including Slate, over to Yarn. Because of this, installing dependencies for each of our projects has become fast and reliable.
+It’s important to note, both of these packages have their ups and downs and many of the fantastic features that initially launched with Yarn are now available with npm 5+, so feel free to use the one you are most comfortable with.
+System requirements · Slate Slate is developed and is most stable on MacOS. We hope to officially extend support to Windows and Linux in future.
+A few users have successfully got Slate up and running in Windows Subsystem for Linux. They used the following commands to setup their system:
+sudo apt update && sudo apt -y upgrade
+sudo apt install -y build-essential libssl-dev libpng-dev
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+exit
+nvm install node --lts
+curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+sudo apt update && sudo apt install -y --no-install-recommends yarn
+source ~/.profile
+For more information, visit issue #667 .
+You will need the current LTS (long-term support) release which you can download directly from the Node website .
+We highly recommend using NVM as a Node Version Manager which can easily be installed by running the following command in your terminal:
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+For further documentation on how to install individual Node versions with NVM, visit the GitHub repository .
+Follow the instructions on how to get started with Yarn or npm to make sure you’re using the latest version.
+The Shopify Themes team made a decision in 2017 to migrate all theme repositories, including Slate, over to Yarn. Because of this, installing dependencies for each of our projects has become fast and reliable.
+It’s important to note, both of these packages have their ups and downs and many of the fantastic features that initially launched with Yarn are now available with npm 5+, so feel free to use the one you are most comfortable with.
+Template and layout bundles · Slate Template and layout bundles are a build-time optimization which ensures that only the JS and CSS needed for the current page is downloaded and executed. This optimization results in improved page load speed, especially on mobile devices with limited computing power and network capacity.
+In order to take advantage of template and layout bundles, your Slate project's script/ folder must include the following folders:
+└── src
+ └── scripts
+ │ ├── layout
+ │ └── templates
+ ├── layout
+ └── templates
+On build, Slate will look for each file in the scripts/layout and scripts/templates folders and see if there is a matching file in the src/layout and src/templates folders. If there is a match, a template or layout bundle is created for that match.
+Let's take a look at an example file structure and explore how Slate matches files to create bundles:
+└── src
+ └── scripts
+ │ ├── layout
+ │ │ ├── password.js
+ │ │ └── theme.js
+ │ └── templates
+ │ ├── index.js
+ │ └── product.js
+ ├── layout
+ │ └── theme.liquid
+ └── templates
+ ├── collection.liquid
+ ├── index.liquid
+ └── product.liquid
+In the example above, we have a few standard files and folders you might expect to find in a Slate project. We have our main layout file (theme.liquid), three template files (collection.liquid, index.liquid, and product.liquid), and various JS files within our scripts/ folder.
+Upon calling slate-tools build, Slate will look for matching template and layout files inside the scripts/ folder and generate the following JS bundles:
+
+layout.theme.js: Both theme.liquid and theme.js exist.template.index.js: Both index.liquid and index.js exist.template.product.js: Both product.liquid and product.js exist.
+Note that the following bundles are not generated:
+
+layout.password.js: Slate cannot find a layout/password.liquid file.template.collection.js: Slate cannot find a scripts/templates/collection.js file.
+A critical optimization needed for template and layout bundles to be successful is to split shared dependencies between bundles into separate chunks. This reduces the amount of duplicate code included in each bundle and further improves page load performance.
+Let's continue with the file structure from the previous example, and see how shared dependencies are separated:
+index.js
+@import depA from 'depA' ;
+@import depB from 'depB' ;
+product.js
+@import depB from 'depB' ;
+@import depC from 'depC' ;
+In the example above, we have 2 files which each import 2 dependencies. Both files have a shared dependency, depB. Instead of bundling depB into template.index.js and again in template.product.js, Slate splits depB into its own bundle chunk. The resulting generated files are:
+
+template.index.js: Code that is only used on the index template.template.product.js: Code that is only used on the product template.template.index@template.product.js: Code that is used on both index and product templates.
+It's also possible to structure your styles so that only those needed for the current page are loaded. This is made possible by the JS bundling mentioned above. Let's take a look at what a typical Slate project might look like and how it would take advantage of template and layout styles.
+layout/theme.js
+import '../../styles/layout/theme.scss' ;
+product.js
+import '../../styles/templates/product.scss' ;
+Looking at the above examples, we can see that we are importing two different SCSS files. We can expect that theme.scss contains global styles that are used through most of the theme's pages, such as header and navigation styles. product.scss might include styles that are specific to the product template, such as a product image gallery.
+The following imports would generate the following files:
+
+layout.theme.css.liquid
+template.product.css.liquid
+
+
+Unlike JS, we are unable to split shared dependencies between template and layout styles. If you're not careful, this could mean that your users will end up downloading the same styles more than once. Make sure to keep this in mind!
+
+Now that you have template and layout bundles with shared dependency chunking, you'll notice that there are a lot of JS files in your compiled Slate project (found in the dist folder). It would be pretty tedious to code and manage all the <script> tags for each of these assets. So let's have Slate handle this!
+Slate generates script-tags.liquid and styles-tags.liquid snippets which include <script> and <link> tags needed for each bundle. These snippets also include all the liquid logic needed to selectively load these bundles based on the current template and layout. All you need to do is include these snippets in your layout files.
+For example, here is what you would include in your layout/theme.liquid:
+{% include 'style-tags' %} {% include 'script-tags', layout: 'theme' %}
+where the layout option value is the name of the layout.
+Template and layout bundles · Slate Template and layout bundles are a build-time optimization which ensures that only the JS and CSS needed for the current page is downloaded and executed. This optimization results in improved page load speed, especially on mobile devices with limited computing power and network capacity.
+In order to take advantage of template and layout bundles, your Slate project's script/ folder must include the following folders:
+└── src
+ └── scripts
+ │ ├── layout
+ │ └── templates
+ ├── layout
+ └── templates
+On build, Slate will look for each file in the scripts/layout and scripts/templates folders and see if there is a matching file in the src/layout and src/templates folders. If there is a match, a template or layout bundle is created for that match.
+Let's take a look at an example file structure and explore how Slate matches files to create bundles:
+└── src
+ └── scripts
+ │ ├── layout
+ │ │ ├── password.js
+ │ │ └── theme.js
+ │ └── templates
+ │ ├── index.js
+ │ └── product.js
+ ├── layout
+ │ └── theme.liquid
+ └── templates
+ ├── collection.liquid
+ ├── index.liquid
+ └── product.liquid
+In the example above, we have a few standard files and folders you might expect to find in a Slate project. We have our main layout file (theme.liquid), three template files (collection.liquid, index.liquid, and product.liquid), and various JS files within our scripts/ folder.
+Upon calling slate-tools build, Slate will look for matching template and layout files inside the scripts/ folder and generate the following JS bundles:
+
+layout.theme.js: Both theme.liquid and theme.js exist.template.index.js: Both index.liquid and index.js exist.template.product.js: Both product.liquid and product.js exist.
+Note that the following bundles are not generated:
+
+layout.password.js: Slate cannot find a layout/password.liquid file.template.collection.js: Slate cannot find a scripts/templates/collection.js file.
+A critical optimization needed for template and layout bundles to be successful is to split shared dependencies between bundles into separate chunks. This reduces the amount of duplicate code included in each bundle and further improves page load performance.
+Let's continue with the file structure from the previous example, and see how shared dependencies are separated:
+index.js
+@import depA from 'depA' ;
+@import depB from 'depB' ;
+product.js
+@import depB from 'depB' ;
+@import depC from 'depC' ;
+In the example above, we have 2 files which each import 2 dependencies. Both files have a shared dependency, depB. Instead of bundling depB into template.index.js and again in template.product.js, Slate splits depB into its own bundle chunk. The resulting generated files are:
+
+template.index.js: Code that is only used on the index template.template.product.js: Code that is only used on the product template.template.index@template.product.js: Code that is used on both index and product templates.
+It's also possible to structure your styles so that only those needed for the current page are loaded. This is made possible by the JS bundling mentioned above. Let's take a look at what a typical Slate project might look like and how it would take advantage of template and layout styles.
+layout/theme.js
+import '../../styles/layout/theme.scss' ;
+product.js
+import '../../styles/templates/product.scss' ;
+Looking at the above examples, we can see that we are importing two different SCSS files. We can expect that theme.scss contains global styles that are used through most of the theme's pages, such as header and navigation styles. product.scss might include styles that are specific to the product template, such as a product image gallery.
+The following imports would generate the following files:
+
+layout.theme.css.liquid
+template.product.css.liquid
+
+
+Unlike JS, we are unable to split shared dependencies between template and layout styles. If you're not careful, this could mean that your users will end up downloading the same styles more than once. Make sure to keep this in mind!
+
+Now that you have template and layout bundles with shared dependency chunking, you'll notice that there are a lot of JS files in your compiled Slate project (found in the dist folder). It would be pretty tedious to code and manage all the <script> tags for each of these assets. So let's have Slate handle this!
+Slate generates script-tags.liquid and styles-tags.liquid snippets which include <script> and <link> tags needed for each bundle. These snippets also include all the liquid logic needed to selectively load these bundles based on the current template and layout. All you need to do is include these snippets in your layout files.
+For example, here is what you would include in your layout/theme.liquid:
+{% include 'style-tags' %} {% include 'script-tags', layout: 'theme' %}
+where the layout option value is the name of the layout.
+Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions
+
diff --git a/docs/img/oss_logo.png b/docs/img/oss_logo.png
new file mode 100644
index 000000000..8183e289b
Binary files /dev/null and b/docs/img/oss_logo.png differ
diff --git a/docs/img/slate.svg b/docs/img/slate.svg
new file mode 100644
index 000000000..489532225
--- /dev/null
+++ b/docs/img/slate.svg
@@ -0,0 +1 @@
+
+ Slate empowers developers of all skill levels to build quality Shopify
+ themes.
+
+ link .
+
+
diff --git a/docs/js/custom.js b/docs/js/custom.js
new file mode 100644
index 000000000..2e9473569
--- /dev/null
+++ b/docs/js/custom.js
@@ -0,0 +1,46 @@
+const HighlightSidebar = {
+ init() {
+ this.headers = Array.from(
+ document.querySelectorAll('.hash-link')
+ ).reverse();
+ this.sidebarLinks = Array.from(
+ document.querySelectorAll('.toc-headings li')
+ ).reverse();
+
+ this.headersOffsets = this.headers.map(header => {
+ var headerRect = header.getBoundingClientRect();
+ return headerRect.y + window.pageYOffset - 100;
+ });
+
+ this.highlight();
+ },
+ highlight() {
+ const highlightItemIndex = this.headersOffsets.findIndex(offset => {
+ return offset < window.pageYOffset;
+ });
+
+ this.sidebarLinks.forEach(link => {
+ link.classList.remove('is-visible');
+ });
+
+ if (highlightItemIndex === -1) return;
+
+ this.sidebarLinks[highlightItemIndex].classList.add('is-visible');
+ }
+};
+
+document.addEventListener(
+ 'DOMContentLoaded',
+ function() {
+ HighlightSidebar.init();
+ },
+ false
+);
+
+document.addEventListener(
+ 'scroll',
+ function() {
+ HighlightSidebar.highlight();
+ },
+ false
+);
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
new file mode 100644
index 000000000..ccc58e35b
--- /dev/null
+++ b/docs/sitemap.xml
@@ -0,0 +1,30 @@
+
+
+ https://shopify.github.io/slate.shopify.com/versions weekly 0.5
+ https://shopify.github.io/slate.shopify.com/blog/2017/10/24/new-version-1.0.0 weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/26/adding-rss weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/25/testing-rss weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2017/04/10/blog-post-two weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2016/03/11/blog-post weekly 0.3
+ https://shopify.github.io/slate.shopify.com/docs/about hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/asset-minification hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/commands hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/connect-to-your-store hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/create-a-new-slate-project hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/create-a-self-signed-ssl-certificate hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/create-slate-theme hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/how-to-create-a-development-store hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/deploy-environments hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/how-to-create-your-own-starter-theme hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/how-to-update-Slate-to-the-latest-version hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/local-development hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-analytics hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-configuration hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-cssvar-loader hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-themes hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/start-developing hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/starter-themes hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/styles-with-liquid hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/system-requirements hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/template-and-layout-bundles hourly 1.0
+
\ No newline at end of file
diff --git a/docs/versions.html b/docs/versions.html
new file mode 100644
index 000000000..045e13291
--- /dev/null
+++ b/docs/versions.html
@@ -0,0 +1 @@
+Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}
+ {{ include.username }}
+
+
+
+
+
+
diff --git a/docusaurus/v0/_layouts/default.html b/docusaurus/v0/_layouts/default.html
new file mode 100644
index 000000000..f9d9507c6
--- /dev/null
+++ b/docusaurus/v0/_layouts/default.html
@@ -0,0 +1,24 @@
+
+
+
+ {% include head.html %}
+
+
+
+
+
+
+
+ {% include header.html %}
+
+ {{ content }}
+
+
+
+
+
+
+
diff --git a/docusaurus/v0/_layouts/demo.html b/docusaurus/v0/_layouts/demo.html
new file mode 100644
index 000000000..f7a395024
--- /dev/null
+++ b/docusaurus/v0/_layouts/demo.html
@@ -0,0 +1,24 @@
+
+
+
+ {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}
+
+ {{ content }}
+
+
+
diff --git a/docusaurus/v0/_sass/_yuidoc.scss b/docusaurus/v0/_sass/_yuidoc.scss
new file mode 100644
index 000000000..bf1f004d9
--- /dev/null
+++ b/docusaurus/v0/_sass/_yuidoc.scss
@@ -0,0 +1,64 @@
+pre {
+ overflow-x: auto;
+}
+
+pre.code,
+pre.prettyprint {
+ border: 0;
+}
+
+.apidocs__sidebar {
+ border-left: 1px solid $blue--pale;
+ padding-left: 15px;
+
+ h2 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ font-size: 16px;
+ font-weight: $font-weight-bold;
+ text-transform: uppercase;
+ color: $grey--dark;
+ }
+
+ ul {
+ padding-left: 0;
+ list-style: none;
+
+ > li {
+ padding-left: 0;
+ }
+ }
+}
+
+.apidocs {
+ .meta {
+ font-size: 13px;
+ }
+
+ .item {
+ .method-signature {
+ display: inline-block;
+ .name {
+ font-weight: bold;
+ color: $blue--light;
+ font-size: 18px;
+ }
+ }
+
+ .type {
+ font-size: 13px;
+ }
+
+ .returns {
+ h4 {
+ font-weight: bold;
+ }
+ }
+
+ .returns-description {
+ p {
+ display: inline-block;
+ }
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/_bourbon-deprecated-upcoming.scss b/docusaurus/v0/_sass/bourbon/_bourbon-deprecated-upcoming.scss
new file mode 100644
index 000000000..f946b3b45
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/_bourbon-deprecated-upcoming.scss
@@ -0,0 +1,8 @@
+//************************************************************************//
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
+//************************************************************************//
+@mixin inline-block {
+ display: inline-block;
+ @warn "inline-block mixin is deprecated and will be removed in the next major version release";
+}
diff --git a/docusaurus/v0/_sass/bourbon/_bourbon.scss b/docusaurus/v0/_sass/bourbon/_bourbon.scss
new file mode 100644
index 000000000..eea6e21e9
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/_bourbon.scss
@@ -0,0 +1,79 @@
+// Settings
+@import "settings/prefixer";
+@import "settings/px-to-em";
+@import "settings/asset-pipeline";
+
+// Custom Helpers
+@import "helpers/convert-units";
+@import "helpers/gradient-positions-parser";
+@import "helpers/is-num";
+@import "helpers/linear-angle-parser";
+@import "helpers/linear-gradient-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/linear-side-corner-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/radial-gradient-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+@import "helpers/str-to-num";
+
+// Custom Functions
+@import "functions/assign";
+@import "functions/color-lightness";
+@import "functions/flex-grid";
+@import "functions/golden-ratio";
+@import "functions/grid-width";
+@import "functions/modular-scale";
+@import "functions/px-to-em";
+@import "functions/px-to-rem";
+@import "functions/strip-units";
+@import "functions/tint-shade";
+@import "functions/transition-property-name";
+@import "functions/unpack";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/backface-visibility";
+@import "css3/background";
+@import "css3/background-image";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-sizing";
+@import "css3/calc";
+@import "css3/columns";
+@import "css3/filter";
+@import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/font-feature-settings";
+@import "css3/hyphens";
+@import "css3/hidpi-media-query";
+@import "css3/image-rendering";
+@import "css3/keyframes";
+@import "css3/linear-gradient";
+@import "css3/perspective";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";
+@import "css3/placeholder";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/clearfix";
+@import "addons/directional-values";
+@import "addons/ellipsis";
+@import "addons/font-family";
+@import "addons/hide-text";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/prefixer";
+@import "addons/retina-image";
+@import "addons/size";
+@import "addons/timing-functions";
+@import "addons/triangle";
+@import "addons/word-wrap";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";
diff --git a/docusaurus/v0/_sass/bourbon/addons/_button.scss b/docusaurus/v0/_sass/bourbon/addons/_button.scss
new file mode 100644
index 000000000..14a89e480
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_button.scss
@@ -0,0 +1,374 @@
+@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
+
+ @if type-of($style) == string and type-of($base-color) == color {
+ @include buttonstyle($style, $base-color, $text-size, $padding);
+ }
+
+ @if type-of($style) == string and type-of($base-color) == number {
+ $padding: $text-size;
+ $text-size: $base-color;
+ $base-color: #4294f0;
+
+ @if $padding == inherit {
+ $padding: 7px 18px;
+ }
+
+ @include buttonstyle($style, $base-color, $text-size, $padding);
+ }
+
+ @if type-of($style) == color and type-of($base-color) == color {
+ $base-color: $style;
+ $style: simple;
+ @include buttonstyle($style, $base-color, $text-size, $padding);
+ }
+
+ @if type-of($style) == color and type-of($base-color) == number {
+ $padding: $text-size;
+ $text-size: $base-color;
+ $base-color: $style;
+ $style: simple;
+
+ @if $padding == inherit {
+ $padding: 7px 18px;
+ }
+
+ @include buttonstyle($style, $base-color, $text-size, $padding);
+ }
+
+ @if type-of($style) == number {
+ $padding: $base-color;
+ $text-size: $style;
+ $base-color: #4294f0;
+ $style: simple;
+
+ @if $padding == #4294f0 {
+ $padding: 7px 18px;
+ }
+
+ @include buttonstyle($style, $base-color, $text-size, $padding);
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+}
+
+
+// Selector Style Button
+//************************************************************************//
+@mixin buttonstyle($type, $b-color, $t-size, $pad) {
+ // Grayscale button
+ @if $type == simple and $b-color == grayscale($b-color) {
+ @include simple($b-color, true, $t-size, $pad);
+ }
+
+ @if $type == shiny and $b-color == grayscale($b-color) {
+ @include shiny($b-color, true, $t-size, $pad);
+ }
+
+ @if $type == pill and $b-color == grayscale($b-color) {
+ @include pill($b-color, true, $t-size, $pad);
+ }
+
+ @if $type == flat and $b-color == grayscale($b-color) {
+ @include flat($b-color, true, $t-size, $pad);
+ }
+
+ // Colored button
+ @if $type == simple {
+ @include simple($b-color, false, $t-size, $pad);
+ }
+
+ @else if $type == shiny {
+ @include shiny($b-color, false, $t-size, $pad);
+ }
+
+ @else if $type == pill {
+ @include pill($b-color, false, $t-size, $pad);
+ }
+
+ @else if $type == flat {
+ @include flat($b-color, false, $t-size, $pad);
+ }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+ $color: hsl(0, 0, 100%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if is-light($base-color) {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border: grayscale($border);
+ $inset-shadow: grayscale($inset-shadow);
+ $stop-gradient: grayscale($stop-gradient);
+ $text-shadow: grayscale($text-shadow);
+ }
+
+ border: 1px solid $border;
+ border-radius: 3px;
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
+ color: $color;
+ display: inline-block;
+ font-size: $textsize;
+ font-weight: bold;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: $padding;
+ text-decoration: none;
+ text-shadow: 0 1px 0 $text-shadow;
+ background-clip: padding-box;
+
+ &:hover:not(:disabled) {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
+ }
+
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active:not(:disabled),
+ &:focus:not(:disabled) {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ @if $grayscale == true {
+ $border-active: grayscale($border-active);
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ }
+
+ border: 1px solid $border-active;
+ box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
+ }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+ $color: hsl(0, 0, 100%);
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+
+ @if is-light($base-color) {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border: grayscale($border);
+ $border-bottom: grayscale($border-bottom);
+ $fourth-stop: grayscale($fourth-stop);
+ $inset-shadow: grayscale($inset-shadow);
+ $second-stop: grayscale($second-stop);
+ $text-shadow: grayscale($text-shadow);
+ $third-stop: grayscale($third-stop);
+ }
+
+ border: 1px solid $border;
+ border-bottom: 1px solid $border-bottom;
+ border-radius: 5px;
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
+ color: $color;
+ display: inline-block;
+ font-size: $textsize;
+ font-weight: bold;
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+ padding: $padding;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px $text-shadow;
+
+ &:hover:not(:disabled) {
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+ @if $grayscale == true {
+ $first-stop-hover: grayscale($first-stop-hover);
+ $second-stop-hover: grayscale($second-stop-hover);
+ $third-stop-hover: grayscale($third-stop-hover);
+ $fourth-stop-hover: grayscale($fourth-stop-hover);
+ }
+
+ cursor: pointer;
+ @include linear-gradient(top, $first-stop-hover 0%,
+ $second-stop-hover 50%,
+ $third-stop-hover 50%,
+ $fourth-stop-hover 100%);
+ }
+
+ &:active:not(:disabled),
+ &:focus:not(:disabled) {
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+ @if $grayscale == true {
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ }
+
+ box-shadow: inset 0 0 20px 0 $inset-shadow-active;
+ }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+ $color: hsl(0, 0, 100%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+ @if is-light($base-color) {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border-bottom: grayscale($border-bottom);
+ $border-sides: grayscale($border-sides);
+ $border-top: grayscale($border-top);
+ $inset-shadow: grayscale($inset-shadow);
+ $stop-gradient: grayscale($stop-gradient);
+ $text-shadow: grayscale($text-shadow);
+ }
+
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ border-radius: 16px;
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
+ color: $color;
+ display: inline-block;
+ font-size: $textsize;
+ font-weight: normal;
+ line-height: 1;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: $padding;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px $text-shadow;
+ background-clip: padding-box;
+
+ &:hover:not(:disabled) {
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ $border-bottom: grayscale($border-bottom);
+ $border-sides: grayscale($border-sides);
+ $border-top: grayscale($border-top);
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
+ $text-shadow-hover: grayscale($text-shadow-hover);
+ }
+
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ text-shadow: 0 -1px 1px $text-shadow-hover;
+ background-clip: padding-box;
+ }
+
+ &:active:not(:disabled),
+ &:focus:not(:disabled) {
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+ @if $grayscale == true {
+ $active-color: grayscale($active-color);
+ $border-active: grayscale($border-active);
+ $border-bottom-active: grayscale($border-bottom-active);
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ $text-shadow-active: grayscale($text-shadow-active);
+ }
+
+ background: $active-color;
+ border: 1px solid $border-active;
+ border-bottom: 1px solid $border-bottom-active;
+ box-shadow: inset 0 0 6px 3px $inset-shadow-active;
+ text-shadow: 0 -1px 1px $text-shadow-active;
+ }
+}
+
+
+
+// Flat Button
+//************************************************************************//
+@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+ $color: hsl(0, 0, 100%);
+
+ @if is-light($base-color) {
+ $color: hsl(0, 0, 20%);
+ }
+
+ background-color: $base-color;
+ border-radius: 3px;
+ border: none;
+ color: $color;
+ display: inline-block;
+ font-size: inherit;
+ font-weight: bold;
+ padding: 7px 18px;
+ text-decoration: none;
+ background-clip: padding-box;
+
+ &:hover:not(:disabled){
+ $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ }
+
+ background-color: $base-color-hover;
+ cursor: pointer;
+ }
+
+ &:active:not(:disabled),
+ &:focus:not(:disabled) {
+ $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+
+ @if $grayscale == true {
+ $base-color-active: grayscale($base-color-active);
+ }
+
+ background-color: $base-color-active;
+ cursor: pointer;
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_clearfix.scss b/docusaurus/v0/_sass/bourbon/addons/_clearfix.scss
new file mode 100644
index 000000000..783cfbc79
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_clearfix.scss
@@ -0,0 +1,23 @@
+// Modern micro clearfix provides an easy way to contain floats without adding additional markup.
+//
+// Example usage:
+//
+// // Contain all floats within .wrapper
+// .wrapper {
+// @include clearfix;
+// .content,
+// .sidebar {
+// float : left;
+// }
+// }
+
+@mixin clearfix {
+ &:after {
+ content:"";
+ display:table;
+ clear:both;
+ }
+}
+
+// Acknowledgements
+// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
diff --git a/docusaurus/v0/_sass/bourbon/addons/_directional-values.scss b/docusaurus/v0/_sass/bourbon/addons/_directional-values.scss
new file mode 100644
index 000000000..742f1031a
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_directional-values.scss
@@ -0,0 +1,111 @@
+// directional-property mixins are shorthands
+// for writing properties like the following
+//
+// @include margin(null 0 10px);
+// ------
+// margin-right: 0;
+// margin-bottom: 10px;
+// margin-left: 0;
+//
+// - or -
+//
+// @include border-style(dotted null);
+// ------
+// border-top-style: dotted;
+// border-bottom-style: dotted;
+//
+// ------
+//
+// Note: You can also use false instead of null
+
+@function collapse-directionals($vals) {
+ $output: null;
+
+ $A: nth( $vals, 1 );
+ $B: if( length($vals) < 2, $A, nth($vals, 2));
+ $C: if( length($vals) < 3, $A, nth($vals, 3));
+ $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
+
+ @if $A == 0 { $A: 0 }
+ @if $B == 0 { $B: 0 }
+ @if $C == 0 { $C: 0 }
+ @if $D == 0 { $D: 0 }
+
+ @if $A == $B and $A == $C and $A == $D { $output: $A }
+ @else if $A == $C and $B == $D { $output: $A $B }
+ @else if $B == $D { $output: $A $B $C }
+ @else { $output: $A $B $C $D }
+
+ @return $output;
+}
+
+@function contains-falsy($list) {
+ @each $item in $list {
+ @if not $item {
+ @return true;
+ }
+ }
+
+ @return false;
+}
+
+@mixin directional-property($pre, $suf, $vals) {
+ // Property Names
+ $top: $pre + "-top" + if($suf, "-#{$suf}", "");
+ $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
+ $left: $pre + "-left" + if($suf, "-#{$suf}", "");
+ $right: $pre + "-right" + if($suf, "-#{$suf}", "");
+ $all: $pre + if($suf, "-#{$suf}", "");
+
+ $vals: collapse-directionals($vals);
+
+ @if contains-falsy($vals) {
+ @if nth($vals, 1) { #{$top}: nth($vals, 1); }
+
+ @if length($vals) == 1 {
+ @if nth($vals, 1) { #{$right}: nth($vals, 1); }
+ } @else {
+ @if nth($vals, 2) { #{$right}: nth($vals, 2); }
+ }
+
+ // prop: top/bottom right/left
+ @if length($vals) == 2 {
+ @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
+ @if nth($vals, 2) { #{$left}: nth($vals, 2); }
+
+ // prop: top right/left bottom
+ } @else if length($vals) == 3 {
+ @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
+ @if nth($vals, 2) { #{$left}: nth($vals, 2); }
+
+ // prop: top right bottom left
+ } @else if length($vals) == 4 {
+ @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
+ @if nth($vals, 4) { #{$left}: nth($vals, 4); }
+ }
+
+ // prop: top/right/bottom/left
+ } @else {
+ #{$all}: $vals;
+ }
+}
+
+@mixin margin($vals...) {
+ @include directional-property(margin, false, $vals...);
+}
+
+@mixin padding($vals...) {
+ @include directional-property(padding, false, $vals...);
+}
+
+@mixin border-style($vals...) {
+ @include directional-property(border, style, $vals...);
+}
+
+@mixin border-color($vals...) {
+ @include directional-property(border, color, $vals...);
+}
+
+@mixin border-width($vals...) {
+ @include directional-property(border, width, $vals...);
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_ellipsis.scss b/docusaurus/v0/_sass/bourbon/addons/_ellipsis.scss
new file mode 100644
index 000000000..a8ea2a4a8
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_ellipsis.scss
@@ -0,0 +1,7 @@
+@mixin ellipsis($width: 100%) {
+ display: inline-block;
+ max-width: $width;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_font-family.scss b/docusaurus/v0/_sass/bourbon/addons/_font-family.scss
new file mode 100644
index 000000000..31f5d9ca7
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_font-family.scss
@@ -0,0 +1,5 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;
diff --git a/docusaurus/v0/_sass/bourbon/addons/_hide-text.scss b/docusaurus/v0/_sass/bourbon/addons/_hide-text.scss
new file mode 100644
index 000000000..fc7943811
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_hide-text.scss
@@ -0,0 +1,10 @@
+@mixin hide-text {
+ overflow: hidden;
+
+ &:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 100%;
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_html5-input-types.scss b/docusaurus/v0/_sass/bourbon/addons/_html5-input-types.scss
new file mode 100644
index 000000000..9e9324ae0
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_html5-input-types.scss
@@ -0,0 +1,86 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+ 'input[type="number"]',
+ 'input[type="password"]',
+ 'input[type="search"]',
+ 'input[type="tel"]',
+ 'input[type="text"]',
+ 'input[type="url"]',
+
+ // Webkit & Gecko may change the display of these in the future
+ 'input[type="color"]',
+ 'input[type="date"]',
+ 'input[type="datetime"]',
+ 'input[type="datetime-local"]',
+ 'input[type="month"]',
+ 'input[type="time"]',
+ 'input[type="week"]';
+
+// Bare inputs
+//************************************************************************//
+$all-text-inputs: assign-inputs($inputs-list);
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: assign-inputs($inputs-list, hover);
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: assign-inputs($inputs-list, focus);
+
+
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
+//************************************************************************//
+// #{$all-text-inputs}, textarea {
+// border: 1px solid red;
+// }
+
+
+
+//************************************************************************//
+// Generate a variable ($all-button-inputs) with a list of all html5
+// input types that have a button-based input, excluding button.
+//************************************************************************//
+$inputs-button-list: 'input[type="button"]',
+ 'input[type="reset"]',
+ 'input[type="submit"]';
+
+// Bare inputs
+//************************************************************************//
+$all-button-inputs: assign-inputs($inputs-button-list);
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
+
+// Active Pseudo-class
+//************************************************************************//
+$all-button-inputs-active: assign-inputs($inputs-button-list, active);
+
+
+
+// You must use interpolation on the variable:
+// #{$all-button-inputs}
+// #{$all-button-inputs-hover}
+// #{$all-button-inputs-focus}
+// #{$all-button-inputs-active}
+
+// Example
+//************************************************************************//
+// #{$all-button-inputs}, button {
+// border: 1px solid red;
+// }
diff --git a/docusaurus/v0/_sass/bourbon/addons/_position.scss b/docusaurus/v0/_sass/bourbon/addons/_position.scss
new file mode 100644
index 000000000..7de75182b
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_position.scss
@@ -0,0 +1,32 @@
+@mixin position ($position: relative, $coordinates: null null null null) {
+
+ @if type-of($position) == list {
+ $coordinates: $position;
+ $position: relative;
+ }
+
+ $coordinates: unpack($coordinates);
+
+ $top: nth($coordinates, 1);
+ $right: nth($coordinates, 2);
+ $bottom: nth($coordinates, 3);
+ $left: nth($coordinates, 4);
+
+ position: $position;
+
+ @if ($top and $top == auto) or (type-of($top) == number) {
+ top: $top;
+ }
+
+ @if ($right and $right == auto) or (type-of($right) == number) {
+ right: $right;
+ }
+
+ @if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
+ bottom: $bottom;
+ }
+
+ @if ($left and $left == auto) or (type-of($left) == number) {
+ left: $left;
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_prefixer.scss b/docusaurus/v0/_sass/bourbon/addons/_prefixer.scss
new file mode 100644
index 000000000..c32f50275
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_prefixer.scss
@@ -0,0 +1,45 @@
+//************************************************************************//
+// Example: @include prefixer(border-radius, $radii, webkit ms spec);
+//************************************************************************//
+// Variables located in /settings/_prefixer.scss
+
+@mixin prefixer ($property, $value, $prefixes) {
+ @each $prefix in $prefixes {
+ @if $prefix == webkit {
+ @if $prefix-for-webkit {
+ -webkit-#{$property}: $value;
+ }
+ }
+ @else if $prefix == moz {
+ @if $prefix-for-mozilla {
+ -moz-#{$property}: $value;
+ }
+ }
+ @else if $prefix == ms {
+ @if $prefix-for-microsoft {
+ -ms-#{$property}: $value;
+ }
+ }
+ @else if $prefix == o {
+ @if $prefix-for-opera {
+ -o-#{$property}: $value;
+ }
+ }
+ @else if $prefix == spec {
+ @if $prefix-for-spec {
+ #{$property}: $value;
+ }
+ }
+ @else {
+ @warn "Unrecognized prefix: #{$prefix}";
+ }
+ }
+}
+
+@mixin disable-prefix-for-all() {
+ $prefix-for-webkit: false !global;
+ $prefix-for-mozilla: false !global;
+ $prefix-for-microsoft: false !global;
+ $prefix-for-opera: false !global;
+ $prefix-for-spec: false !global;
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_retina-image.scss b/docusaurus/v0/_sass/bourbon/addons/_retina-image.scss
new file mode 100644
index 000000000..3995c1970
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_retina-image.scss
@@ -0,0 +1,31 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
+ @if $asset-pipeline {
+ background-image: image-url("#{$filename}.#{$extension}");
+ }
+ @else {
+ background-image: url("#{$filename}.#{$extension}");
+ }
+
+ @include hidpi {
+ @if $asset-pipeline {
+ @if $retina-filename {
+ background-image: image-url("#{$retina-filename}.#{$extension}");
+ }
+ @else {
+ background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
+ }
+ }
+
+ @else {
+ @if $retina-filename {
+ background-image: url("#{$retina-filename}.#{$extension}");
+ }
+ @else {
+ background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
+ }
+ }
+
+ background-size: $background-size;
+
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_size.scss b/docusaurus/v0/_sass/bourbon/addons/_size.scss
new file mode 100644
index 000000000..a8653799a
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_size.scss
@@ -0,0 +1,16 @@
+@mixin size($size) {
+ $height: nth($size, 1);
+ $width: $height;
+
+ @if length($size) > 1 {
+ $height: nth($size, 2);
+ }
+
+ @if $height == auto or (type-of($height) == number and not unitless($height)) {
+ height: $height;
+ }
+
+ @if $width == auto or (type-of($width) == number and not unitless($width)) {
+ width: $width;
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_timing-functions.scss b/docusaurus/v0/_sass/bourbon/addons/_timing-functions.scss
new file mode 100644
index 000000000..5ecc6f9dc
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_timing-functions.scss
@@ -0,0 +1,32 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
diff --git a/docusaurus/v0/_sass/bourbon/addons/_triangle.scss b/docusaurus/v0/_sass/bourbon/addons/_triangle.scss
new file mode 100644
index 000000000..573954e41
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_triangle.scss
@@ -0,0 +1,83 @@
+@mixin triangle ($size, $color, $direction) {
+ height: 0;
+ width: 0;
+
+ $width: nth($size, 1);
+ $height: nth($size, length($size));
+
+ $foreground-color: nth($color, 1);
+ $background-color: if(length($color) == 2, nth($color, 2), transparent);
+
+ @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+
+ $width: $width / 2;
+ $height: if(length($size) > 1, $height, $height/2);
+
+ @if $direction == up {
+ border-left: $width solid $background-color;
+ border-right: $width solid $background-color;
+ border-bottom: $height solid $foreground-color;
+
+ } @else if $direction == right {
+ border-top: $width solid $background-color;
+ border-bottom: $width solid $background-color;
+ border-left: $height solid $foreground-color;
+
+ } @else if $direction == down {
+ border-left: $width solid $background-color;
+ border-right: $width solid $background-color;
+ border-top: $height solid $foreground-color;
+
+ } @else if $direction == left {
+ border-top: $width solid $background-color;
+ border-bottom: $width solid $background-color;
+ border-right: $height solid $foreground-color;
+ }
+ }
+
+ @else if ($direction == up-right) or ($direction == up-left) {
+ border-top: $height solid $foreground-color;
+
+ @if $direction == up-right {
+ border-left: $width solid $background-color;
+
+ } @else if $direction == up-left {
+ border-right: $width solid $background-color;
+ }
+ }
+
+ @else if ($direction == down-right) or ($direction == down-left) {
+ border-bottom: $height solid $foreground-color;
+
+ @if $direction == down-right {
+ border-left: $width solid $background-color;
+
+ } @else if $direction == down-left {
+ border-right: $width solid $background-color;
+ }
+ }
+
+ @else if ($direction == inset-up) {
+ border-width: $height $width;
+ border-style: solid;
+ border-color: $background-color $background-color $foreground-color;
+ }
+
+ @else if ($direction == inset-down) {
+ border-width: $height $width;
+ border-style: solid;
+ border-color: $foreground-color $background-color $background-color;
+ }
+
+ @else if ($direction == inset-right) {
+ border-width: $width $height;
+ border-style: solid;
+ border-color: $background-color $background-color $background-color $foreground-color;
+ }
+
+ @else if ($direction == inset-left) {
+ border-width: $width $height;
+ border-style: solid;
+ border-color: $background-color $foreground-color $background-color $background-color;
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/addons/_word-wrap.scss b/docusaurus/v0/_sass/bourbon/addons/_word-wrap.scss
new file mode 100644
index 000000000..9734a597c
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/addons/_word-wrap.scss
@@ -0,0 +1,8 @@
+@mixin word-wrap($wrap: break-word) {
+ word-wrap: $wrap;
+
+ @if $wrap == break-word {
+ overflow-wrap: break-word;
+ word-break: break-all;
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_animation.scss b/docusaurus/v0/_sass/bourbon/css3/_animation.scss
new file mode 100644
index 000000000..08c3dbf15
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_animation.scss
@@ -0,0 +1,52 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animations...) {
+ @include prefixer(animation, $animations, webkit moz spec);
+}
+
+// Individual Animation Properties
+@mixin animation-name ($names...) {
+ @include prefixer(animation-name, $names, webkit moz spec);
+}
+
+
+@mixin animation-duration ($times...) {
+ @include prefixer(animation-duration, $times, webkit moz spec);
+}
+
+
+@mixin animation-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out
+ @include prefixer(animation-timing-function, $motions, webkit moz spec);
+}
+
+
+@mixin animation-iteration-count ($values...) {
+// infinite |
+ @include prefixer(animation-iteration-count, $values, webkit moz spec);
+}
+
+
+@mixin animation-direction ($directions...) {
+// normal | alternate
+ @include prefixer(animation-direction, $directions, webkit moz spec);
+}
+
+
+@mixin animation-play-state ($states...) {
+// running | paused
+ @include prefixer(animation-play-state, $states, webkit moz spec);
+}
+
+
+@mixin animation-delay ($times...) {
+ @include prefixer(animation-delay, $times, webkit moz spec);
+}
+
+
+@mixin animation-fill-mode ($modes...) {
+// none | forwards | backwards | both
+ @include prefixer(animation-fill-mode, $modes, webkit moz spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_appearance.scss b/docusaurus/v0/_sass/bourbon/css3/_appearance.scss
new file mode 100644
index 000000000..3eb16e45d
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_appearance.scss
@@ -0,0 +1,3 @@
+@mixin appearance ($value) {
+ @include prefixer(appearance, $value, webkit moz ms o spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_backface-visibility.scss b/docusaurus/v0/_sass/bourbon/css3/_backface-visibility.scss
new file mode 100644
index 000000000..1161fe60d
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_backface-visibility.scss
@@ -0,0 +1,6 @@
+//************************************************************************//
+// Backface-visibility mixin
+//************************************************************************//
+@mixin backface-visibility($visibility) {
+ @include prefixer(backface-visibility, $visibility, webkit spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_background-image.scss b/docusaurus/v0/_sass/bourbon/css3/_background-image.scss
new file mode 100644
index 000000000..6abe88be9
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_background-image.scss
@@ -0,0 +1,42 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image($images...) {
+ $webkit-images: ();
+ $spec-images: ();
+
+ @each $image in $images {
+ $webkit-image: ();
+ $spec-image: ();
+
+ @if (type-of($image) == string) {
+ $url-str: str-slice($image, 0, 3);
+ $gradient-type: str-slice($image, 0, 6);
+
+ @if $url-str == "url" {
+ $webkit-image: $image;
+ $spec-image: $image;
+ }
+
+ @else if $gradient-type == "linear" {
+ $gradients: _linear-gradient-parser($image);
+ $webkit-image: map-get($gradients, webkit-image);
+ $spec-image: map-get($gradients, spec-image);
+ }
+
+ @else if $gradient-type == "radial" {
+ $gradients: _radial-gradient-parser($image);
+ $webkit-image: map-get($gradients, webkit-image);
+ $spec-image: map-get($gradients, spec-image);
+ }
+ }
+
+ $webkit-images: append($webkit-images, $webkit-image, comma);
+ $spec-images: append($spec-images, $spec-image, comma);
+ }
+
+ background-image: $webkit-images;
+ background-image: $spec-images;
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_background.scss b/docusaurus/v0/_sass/bourbon/css3/_background.scss
new file mode 100644
index 000000000..9bce9308b
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_background.scss
@@ -0,0 +1,55 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background($backgrounds...) {
+ $webkit-backgrounds: ();
+ $spec-backgrounds: ();
+
+ @each $background in $backgrounds {
+ $webkit-background: ();
+ $spec-background: ();
+ $background-type: type-of($background);
+
+ @if $background-type == string or list {
+ $background-str: if($background-type == list, nth($background, 1), $background);
+
+ $url-str: str-slice($background-str, 0, 3);
+ $gradient-type: str-slice($background-str, 0, 6);
+
+ @if $url-str == "url" {
+ $webkit-background: $background;
+ $spec-background: $background;
+ }
+
+ @else if $gradient-type == "linear" {
+ $gradients: _linear-gradient-parser("#{$background}");
+ $webkit-background: map-get($gradients, webkit-image);
+ $spec-background: map-get($gradients, spec-image);
+ }
+
+ @else if $gradient-type == "radial" {
+ $gradients: _radial-gradient-parser("#{$background}");
+ $webkit-background: map-get($gradients, webkit-image);
+ $spec-background: map-get($gradients, spec-image);
+ }
+
+ @else {
+ $webkit-background: $background;
+ $spec-background: $background;
+ }
+ }
+
+ @else {
+ $webkit-background: $background;
+ $spec-background: $background;
+ }
+
+ $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
+ $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
+ }
+
+ background: $webkit-backgrounds;
+ background: $spec-backgrounds;
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_border-image.scss b/docusaurus/v0/_sass/bourbon/css3/_border-image.scss
new file mode 100644
index 000000000..e338c2dcd
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_border-image.scss
@@ -0,0 +1,59 @@
+@mixin border-image($borders...) {
+ $webkit-borders: ();
+ $spec-borders: ();
+
+ @each $border in $borders {
+ $webkit-border: ();
+ $spec-border: ();
+ $border-type: type-of($border);
+
+ @if $border-type == string or list {
+ $border-str: if($border-type == list, nth($border, 1), $border);
+
+ $url-str: str-slice($border-str, 0, 3);
+ $gradient-type: str-slice($border-str, 0, 6);
+
+ @if $url-str == "url" {
+ $webkit-border: $border;
+ $spec-border: $border;
+ }
+
+ @else if $gradient-type == "linear" {
+ $gradients: _linear-gradient-parser("#{$border}");
+ $webkit-border: map-get($gradients, webkit-image);
+ $spec-border: map-get($gradients, spec-image);
+ }
+
+ @else if $gradient-type == "radial" {
+ $gradients: _radial-gradient-parser("#{$border}");
+ $webkit-border: map-get($gradients, webkit-image);
+ $spec-border: map-get($gradients, spec-image);
+ }
+
+ @else {
+ $webkit-border: $border;
+ $spec-border: $border;
+ }
+ }
+
+ @else {
+ $webkit-border: $border;
+ $spec-border: $border;
+ }
+
+ $webkit-borders: append($webkit-borders, $webkit-border, comma);
+ $spec-borders: append($spec-borders, $spec-border, comma);
+ }
+
+ -webkit-border-image: $webkit-borders;
+ border-image: $spec-borders;
+ border-style: solid;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
diff --git a/docusaurus/v0/_sass/bourbon/css3/_border-radius.scss b/docusaurus/v0/_sass/bourbon/css3/_border-radius.scss
new file mode 100644
index 000000000..7c1719010
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_border-radius.scss
@@ -0,0 +1,22 @@
+//************************************************************************//
+// Shorthand Border-radius mixins
+//************************************************************************//
+@mixin border-top-radius($radii) {
+ @include prefixer(border-top-left-radius, $radii, spec);
+ @include prefixer(border-top-right-radius, $radii, spec);
+}
+
+@mixin border-bottom-radius($radii) {
+ @include prefixer(border-bottom-left-radius, $radii, spec);
+ @include prefixer(border-bottom-right-radius, $radii, spec);
+}
+
+@mixin border-left-radius($radii) {
+ @include prefixer(border-top-left-radius, $radii, spec);
+ @include prefixer(border-bottom-left-radius, $radii, spec);
+}
+
+@mixin border-right-radius($radii) {
+ @include prefixer(border-top-right-radius, $radii, spec);
+ @include prefixer(border-bottom-right-radius, $radii, spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_box-sizing.scss b/docusaurus/v0/_sass/bourbon/css3/_box-sizing.scss
new file mode 100644
index 000000000..f07e1d412
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_box-sizing.scss
@@ -0,0 +1,4 @@
+@mixin box-sizing ($box) {
+// content-box | border-box | inherit
+ @include prefixer(box-sizing, $box, webkit moz spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_calc.scss b/docusaurus/v0/_sass/bourbon/css3/_calc.scss
new file mode 100644
index 000000000..94d7e4cef
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_calc.scss
@@ -0,0 +1,4 @@
+@mixin calc($property, $value) {
+ #{$property}: -webkit-calc(#{$value});
+ #{$property}: calc(#{$value});
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_columns.scss b/docusaurus/v0/_sass/bourbon/css3/_columns.scss
new file mode 100644
index 000000000..96f601c1a
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_columns.scss
@@ -0,0 +1,47 @@
+@mixin columns($arg: auto) {
+// ||
+ @include prefixer(columns, $arg, webkit moz spec);
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+ @include prefixer(column-count, $int, webkit moz spec);
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+ @include prefixer(column-gap, $length, webkit moz spec);
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+ @include prefixer(column-fill, $arg, webkit moz spec);
+}
+
+@mixin column-rule($arg) {
+// || ||
+ @include prefixer(column-rule, $arg, webkit moz spec);
+}
+
+@mixin column-rule-color($color) {
+ @include prefixer(column-rule-color, $color, webkit moz spec);
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+ @include prefixer(column-rule-style, $style, webkit moz spec);
+}
+
+@mixin column-rule-width ($width: none) {
+ @include prefixer(column-rule-width, $width, webkit moz spec);
+}
+
+@mixin column-span($arg: none) {
+// none || all
+ @include prefixer(column-span, $arg, webkit moz spec);
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+ @include prefixer(column-width, $length, webkit moz spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_filter.scss b/docusaurus/v0/_sass/bourbon/css3/_filter.scss
new file mode 100644
index 000000000..8560d7767
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_filter.scss
@@ -0,0 +1,5 @@
+@mixin filter($function: none) {
+ // [
+ @include prefixer(perspective, $depth, webkit moz spec);
+}
+
+@mixin perspective-origin($value: 50% 50%) {
+ @include prefixer(perspective-origin, $value, webkit moz spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_placeholder.scss b/docusaurus/v0/_sass/bourbon/css3/_placeholder.scss
new file mode 100644
index 000000000..5682fd097
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_placeholder.scss
@@ -0,0 +1,8 @@
+@mixin placeholder {
+ $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
+ @each $placeholder in $placeholders {
+ &:#{$placeholder}-placeholder {
+ @content;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_radial-gradient.scss b/docusaurus/v0/_sass/bourbon/css3/_radial-gradient.scss
new file mode 100644
index 000000000..7a8c3765f
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_radial-gradient.scss
@@ -0,0 +1,39 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($G1, $G2,
+ $G3: null, $G4: null,
+ $G5: null, $G6: null,
+ $G7: null, $G8: null,
+ $G9: null, $G10: null,
+ $pos: null,
+ $shape-size: null,
+ $fallback: null) {
+
+ $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+ $G1: nth($data, 1);
+ $G2: nth($data, 2);
+ $pos: nth($data, 3);
+ $shape-size: nth($data, 4);
+
+ $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
+
+ // Strip deprecated cover/contain for spec
+ $shape-size-spec: _shape-size-stripper($shape-size);
+
+ // Set $G1 as the default fallback color
+ $first-color: nth($full, 1);
+ $fallback-color: nth($first-color, 1);
+
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
+ $fallback-color: $fallback;
+ }
+
+ // Add Commas and spaces
+ $shape-size: if($shape-size, '#{$shape-size}, ', null);
+ $pos: if($pos, '#{$pos}, ', null);
+ $pos-spec: if($pos, 'at #{$pos}', null);
+ $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
+
+ background-color: $fallback-color;
+ background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+ background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_transform.scss b/docusaurus/v0/_sass/bourbon/css3/_transform.scss
new file mode 100644
index 000000000..8cc35963d
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_transform.scss
@@ -0,0 +1,15 @@
+@mixin transform($property: none) {
+// none |
+ @include prefixer(transform, $property, webkit moz ms o spec);
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right | length | %
+// y-axis - top | center | bottom | length | %
+// z-axis - length
+ @include prefixer(transform-origin, $axes, webkit moz ms o spec);
+}
+
+@mixin transform-style ($style: flat) {
+ @include prefixer(transform-style, $style, webkit moz ms o spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_transition.scss b/docusaurus/v0/_sass/bourbon/css3/_transition.scss
new file mode 100644
index 000000000..5ad4c0aed
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_transition.scss
@@ -0,0 +1,77 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all 2s ease-in-out);
+// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
+// @include transition-property (transform, opacity);
+
+@mixin transition ($properties...) {
+ // Fix for vendor-prefix transform property
+ $needs-prefixes: false;
+ $webkit: ();
+ $moz: ();
+ $spec: ();
+
+ // Create lists for vendor-prefixed transform
+ @each $list in $properties {
+ @if nth($list, 1) == "transform" {
+ $needs-prefixes: true;
+ $list1: -webkit-transform;
+ $list2: -moz-transform;
+ $list3: ();
+
+ @each $var in $list {
+ $list3: join($list3, $var);
+
+ @if $var != "transform" {
+ $list1: join($list1, $var);
+ $list2: join($list2, $var);
+ }
+ }
+
+ $webkit: append($webkit, $list1);
+ $moz: append($moz, $list2);
+ $spec: append($spec, $list3);
+ }
+
+ // Create lists for non-prefixed transition properties
+ @else {
+ $webkit: append($webkit, $list, comma);
+ $moz: append($moz, $list, comma);
+ $spec: append($spec, $list, comma);
+ }
+ }
+
+ @if $needs-prefixes {
+ -webkit-transition: $webkit;
+ -moz-transition: $moz;
+ transition: $spec;
+ }
+ @else {
+ @if length($properties) >= 1 {
+ @include prefixer(transition, $properties, webkit moz spec);
+ }
+
+ @else {
+ $properties: all 0.15s ease-out 0s;
+ @include prefixer(transition, $properties, webkit moz spec);
+ }
+ }
+}
+
+@mixin transition-property ($properties...) {
+ -webkit-transition-property: transition-property-names($properties, 'webkit');
+ -moz-transition-property: transition-property-names($properties, 'moz');
+ transition-property: transition-property-names($properties, false);
+}
+
+@mixin transition-duration ($times...) {
+ @include prefixer(transition-duration, $times, webkit moz spec);
+}
+
+@mixin transition-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+ @include prefixer(transition-timing-function, $motions, webkit moz spec);
+}
+
+@mixin transition-delay ($times...) {
+ @include prefixer(transition-delay, $times, webkit moz spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/css3/_user-select.scss b/docusaurus/v0/_sass/bourbon/css3/_user-select.scss
new file mode 100644
index 000000000..1380aa8ba
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/css3/_user-select.scss
@@ -0,0 +1,3 @@
+@mixin user-select($arg: none) {
+ @include prefixer(user-select, $arg, webkit moz ms spec);
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_assign.scss b/docusaurus/v0/_sass/bourbon/functions/_assign.scss
new file mode 100644
index 000000000..9a1db93ef
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_assign.scss
@@ -0,0 +1,11 @@
+@function assign-inputs($inputs, $pseudo: null) {
+ $list : ();
+
+ @each $input in $inputs {
+ $input: unquote($input);
+ $input: if($pseudo, $input + ":" + $pseudo, $input);
+ $list: append($list, $input, comma);
+ }
+
+ @return $list;
+}
\ No newline at end of file
diff --git a/docusaurus/v0/_sass/bourbon/functions/_color-lightness.scss b/docusaurus/v0/_sass/bourbon/functions/_color-lightness.scss
new file mode 100644
index 000000000..8c6df4e25
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_color-lightness.scss
@@ -0,0 +1,13 @@
+// Programatically determines whether a color is light or dark
+// Returns a boolean
+// More details here http://robots.thoughtbot.com/closer-look-color-lightness
+
+@function is-light($hex-color) {
+ $-local-red: red(rgba($hex-color, 1.0));
+ $-local-green: green(rgba($hex-color, 1.0));
+ $-local-blue: blue(rgba($hex-color, 1.0));
+
+ $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
+
+ @return $-local-lightness > .6;
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_flex-grid.scss b/docusaurus/v0/_sass/bourbon/functions/_flex-grid.scss
new file mode 100644
index 000000000..3bbd86657
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_flex-grid.scss
@@ -0,0 +1,39 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+ $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+// The calculation presumes that your column structure will be missing the last gutter:
+//
+// -- column -- gutter -- column -- gutter -- column
+//
+// $fg-column: 60px; // Column Width
+// $fg-gutter: 25px; // Gutter Width
+// $fg-max-columns: 12; // Total Columns For Main Container
+//
+// div {
+// width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
+// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
+//
+// p {
+// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+// float: left;
+// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
+// }
+//
+// blockquote {
+// float: left;
+// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+// }
+// }
\ No newline at end of file
diff --git a/docusaurus/v0/_sass/bourbon/functions/_golden-ratio.scss b/docusaurus/v0/_sass/bourbon/functions/_golden-ratio.scss
new file mode 100644
index 000000000..463d14a00
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_golden-ratio.scss
@@ -0,0 +1,3 @@
+@function golden-ratio($value, $increment) {
+ @return modular-scale($value, $increment, $golden)
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_grid-width.scss b/docusaurus/v0/_sass/bourbon/functions/_grid-width.scss
new file mode 100644
index 000000000..8e63d83d6
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_grid-width.scss
@@ -0,0 +1,13 @@
+@function grid-width($n) {
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+// $gw-column: 100px; // Column Width
+// $gw-gutter: 40px; // Gutter Width
+//
+// div {
+// width: grid-width(4); // returns 520px;
+// margin-left: $gw-gutter; // returns 40px;
+// }
diff --git a/docusaurus/v0/_sass/bourbon/functions/_modular-scale.scss b/docusaurus/v0/_sass/bourbon/functions/_modular-scale.scss
new file mode 100644
index 000000000..afc59eb95
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_modular-scale.scss
@@ -0,0 +1,66 @@
+// Scaling Variables
+$golden: 1.618;
+$minor-second: 1.067;
+$major-second: 1.125;
+$minor-third: 1.2;
+$major-third: 1.25;
+$perfect-fourth: 1.333;
+$augmented-fourth: 1.414;
+$perfect-fifth: 1.5;
+$minor-sixth: 1.6;
+$major-sixth: 1.667;
+$minor-seventh: 1.778;
+$major-seventh: 1.875;
+$octave: 2;
+$major-tenth: 2.5;
+$major-eleventh: 2.667;
+$major-twelfth: 3;
+$double-octave: 4;
+
+@function modular-scale($value, $increment, $ratio) {
+ $v1: nth($value, 1);
+ $v2: nth($value, length($value));
+ $value: $v1;
+
+ // scale $v2 to just above $v1
+ @while $v2 > $v1 {
+ $v2: ($v2 / $ratio); // will be off-by-1
+ }
+ @while $v2 < $v1 {
+ $v2: ($v2 * $ratio); // will fix off-by-1
+ }
+
+ // check AFTER scaling $v2 to prevent double-counting corner-case
+ $double-stranded: $v2 > $v1;
+
+ @if $increment > 0 {
+ @for $i from 1 through $increment {
+ @if $double-stranded and ($v1 * $ratio) > $v2 {
+ $value: $v2;
+ $v2: ($v2 * $ratio);
+ } @else {
+ $v1: ($v1 * $ratio);
+ $value: $v1;
+ }
+ }
+ }
+
+ @if $increment < 0 {
+ // adjust $v2 to just below $v1
+ @if $double-stranded {
+ $v2: ($v2 / $ratio);
+ }
+
+ @for $i from $increment through -1 {
+ @if $double-stranded and ($v1 / $ratio) < $v2 {
+ $value: $v2;
+ $v2: ($v2 / $ratio);
+ } @else {
+ $v1: ($v1 / $ratio);
+ $value: $v1;
+ }
+ }
+ }
+
+ @return $value;
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_px-to-em.scss b/docusaurus/v0/_sass/bourbon/functions/_px-to-em.scss
new file mode 100644
index 000000000..4832245e4
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_px-to-em.scss
@@ -0,0 +1,13 @@
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+
+@function em($pxval, $base: $em-base) {
+ @if not unitless($pxval) {
+ $pxval: strip-units($pxval);
+ }
+ @if not unitless($base) {
+ $base: strip-units($base);
+ }
+ @return ($pxval / $base) * 1em;
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_px-to-rem.scss b/docusaurus/v0/_sass/bourbon/functions/_px-to-rem.scss
new file mode 100644
index 000000000..96b244e4c
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_px-to-rem.scss
@@ -0,0 +1,15 @@
+// Convert pixels to rems
+// eg. for a relational value of 12px write rem(12)
+// Assumes $em-base is the font-size of
+
+@function rem($pxval) {
+ @if not unitless($pxval) {
+ $pxval: strip-units($pxval);
+ }
+
+ $base: $em-base;
+ @if not unitless($base) {
+ $base: strip-units($base);
+ }
+ @return ($pxval / $base) * 1rem;
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_strip-units.scss b/docusaurus/v0/_sass/bourbon/functions/_strip-units.scss
new file mode 100644
index 000000000..6afc6e601
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_strip-units.scss
@@ -0,0 +1,5 @@
+// Srtips the units from a value. e.g. 12px -> 12
+
+@function strip-units($val) {
+ @return ($val / ($val * 0 + 1));
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_tint-shade.scss b/docusaurus/v0/_sass/bourbon/functions/_tint-shade.scss
new file mode 100644
index 000000000..f7172004a
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_tint-shade.scss
@@ -0,0 +1,9 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+ @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+ @return mix(black, $color, $percent);
+}
diff --git a/docusaurus/v0/_sass/bourbon/functions/_transition-property-name.scss b/docusaurus/v0/_sass/bourbon/functions/_transition-property-name.scss
new file mode 100644
index 000000000..54cd42281
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_transition-property-name.scss
@@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+ $new-props: ();
+
+ @each $prop in $props {
+ $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+ }
+
+ @return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+ // put other properties that need to be prefixed here aswell
+ @if $vendor and $prop == transform {
+ @return unquote('-'+$vendor+'-'+$prop);
+ }
+ @else {
+ @return $prop;
+ }
+}
\ No newline at end of file
diff --git a/docusaurus/v0/_sass/bourbon/functions/_unpack.scss b/docusaurus/v0/_sass/bourbon/functions/_unpack.scss
new file mode 100644
index 000000000..377596365
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/functions/_unpack.scss
@@ -0,0 +1,17 @@
+// Convert shorthand to the 4-value syntax
+
+@function unpack($shorthand) {
+ @if length($shorthand) == 1 {
+ @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
+ }
+ @else if length($shorthand) == 2 {
+ @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
+ }
+ @else if length($shorthand) == 3 {
+ @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
+ }
+ @else {
+ @return $shorthand;
+ }
+}
+
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_convert-units.scss b/docusaurus/v0/_sass/bourbon/helpers/_convert-units.scss
new file mode 100644
index 000000000..3443db397
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_convert-units.scss
@@ -0,0 +1,15 @@
+//************************************************************************//
+// Helper function for str-to-num fn.
+// Source: http://sassmeister.com/gist/9647408
+//************************************************************************//
+@function _convert-units($number, $unit) {
+ $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
+ $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
+ $index: index($strings, $unit);
+
+ @if not $index {
+ @warn "Unknown unit `#{$unit}`.";
+ @return false;
+ }
+ @return $number * nth($units, $index);
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_gradient-positions-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_gradient-positions-parser.scss
new file mode 100644
index 000000000..07d30b6cf
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_gradient-positions-parser.scss
@@ -0,0 +1,13 @@
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+ @if $gradient-positions
+ and ($gradient-type == linear)
+ and (type-of($gradient-positions) != color) {
+ $gradient-positions: _linear-positions-parser($gradient-positions);
+ }
+ @else if $gradient-positions
+ and ($gradient-type == radial)
+ and (type-of($gradient-positions) != color) {
+ $gradient-positions: _radial-positions-parser($gradient-positions);
+ }
+ @return $gradient-positions;
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_is-num.scss b/docusaurus/v0/_sass/bourbon/helpers/_is-num.scss
new file mode 100644
index 000000000..71459e140
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_is-num.scss
@@ -0,0 +1,8 @@
+//************************************************************************//
+// Helper for linear-gradient-parser
+//************************************************************************//
+@function _is-num($char) {
+ $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9;
+ $index: index($values, $char);
+ @return if($index, true, false);
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_linear-angle-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_linear-angle-parser.scss
new file mode 100644
index 000000000..e0401ed8d
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_linear-angle-parser.scss
@@ -0,0 +1,25 @@
+// Private function for linear-gradient-parser
+@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
+ $offset: null;
+ $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
+ $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
+
+ @if ($unit-long == "grad") or
+ ($unit-long == "turn") {
+ $offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
+ }
+
+ @else if ($unit-short == "deg") or
+ ($unit-short == "rad") {
+ $offset: if($unit-short == "deg", -90 * 3, 1.6rad);
+ }
+
+ @if $offset {
+ $num: _str-to-num($first-val);
+
+ @return (
+ webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
+ spec-image: $image
+ );
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_linear-gradient-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_linear-gradient-parser.scss
new file mode 100644
index 000000000..12bcdcda8
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_linear-gradient-parser.scss
@@ -0,0 +1,41 @@
+@function _linear-gradient-parser($image) {
+ $image: unquote($image);
+ $gradients: ();
+ $start: str-index($image, "(");
+ $end: str-index($image, ",");
+ $first-val: str-slice($image, $start + 1, $end - 1);
+
+ $prefix: str-slice($image, 0, $start);
+ $suffix: str-slice($image, $end, str-length($image));
+
+ $has-multiple-vals: str-index($first-val, " ");
+ $has-single-position: unquote(_position-flipper($first-val) + "");
+ $has-angle: _is-num(str-slice($first-val, 0, 0));
+
+ @if $has-multiple-vals {
+ $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
+ }
+
+ @else if $has-single-position != "" {
+ $pos: unquote($has-single-position + "");
+
+ $gradients: (
+ webkit-image: -webkit- + $image,
+ spec-image: $prefix + "to " + $pos + $suffix
+ );
+ }
+
+ @else if $has-angle {
+ // Rotate degree for webkit
+ $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
+ }
+
+ @else {
+ $gradients: (
+ webkit-image: -webkit- + $image,
+ spec-image: $image
+ );
+ }
+
+ @return $gradients;
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_linear-positions-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_linear-positions-parser.scss
new file mode 100644
index 000000000..d26383edc
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_linear-positions-parser.scss
@@ -0,0 +1,61 @@
+@function _linear-positions-parser($pos) {
+ $type: type-of(nth($pos, 1));
+ $spec: null;
+ $degree: null;
+ $side: null;
+ $corner: null;
+ $length: length($pos);
+ // Parse Side and corner positions
+ @if ($length > 1) {
+ @if nth($pos, 1) == "to" { // Newer syntax
+ $side: nth($pos, 2);
+
+ @if $length == 2 { // eg. to top
+ // Swap for backwards compatability
+ $degree: _position-flipper(nth($pos, 2));
+ }
+ @else if $length == 3 { // eg. to top left
+ $corner: nth($pos, 3);
+ }
+ }
+ @else if $length == 2 { // Older syntax ("top left")
+ $side: _position-flipper(nth($pos, 1));
+ $corner: _position-flipper(nth($pos, 2));
+ }
+
+ @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+ }
+ @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+ }
+ @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+ }
+ @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+ }
+ $spec: to $side $corner;
+ }
+ @else if $length == 1 {
+ // Swap for backwards compatability
+ @if $type == string {
+ $degree: $pos;
+ $spec: to _position-flipper($pos);
+ }
+ @else {
+ $degree: -270 - $pos; //rotate the gradient opposite from spec
+ $spec: $pos;
+ }
+ }
+ $degree: unquote($degree + ",");
+ $spec: unquote($spec + ",");
+ @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+ if($pos == right, left, null)
+ if($pos == top, bottom, null)
+ if($pos == bottom, top, null);
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_linear-side-corner-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_linear-side-corner-parser.scss
new file mode 100644
index 000000000..86ad88fbb
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_linear-side-corner-parser.scss
@@ -0,0 +1,31 @@
+// Private function for linear-gradient-parser
+@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
+ $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
+ $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
+ $val-3: null;
+ $has-val-3: str-index($val-2, " ");
+
+ @if $has-val-3 {
+ $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
+ $val-2: str-slice($val-2, 0, $has-val-3 - 1);
+ }
+
+ $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
+ $pos: unquote($pos + "");
+
+ // Use old spec for webkit
+ @if $val-1 == "to" {
+ @return (
+ webkit-image: -webkit- + $prefix + $pos + $suffix,
+ spec-image: $image
+ );
+ }
+
+ // Bring the code up to spec
+ @else {
+ @return (
+ webkit-image: -webkit- + $image,
+ spec-image: $prefix + "to " + $pos + $suffix
+ );
+ }
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_radial-arg-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_radial-arg-parser.scss
new file mode 100644
index 000000000..a3a3704af
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_radial-arg-parser.scss
@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+ @each $value in $G1, $G2 {
+ $first-val: nth($value, 1);
+ $pos-type: type-of($first-val);
+ $spec-at-index: null;
+
+ // Determine if spec was passed to mixin
+ @if type-of($value) == list {
+ $spec-at-index: if(index($value, at), index($value, at), false);
+ }
+ @if $spec-at-index {
+ @if $spec-at-index > 1 {
+ @for $i from 1 through ($spec-at-index - 1) {
+ $shape-size: $shape-size nth($value, $i);
+ }
+ @for $i from ($spec-at-index + 1) through length($value) {
+ $pos: $pos nth($value, $i);
+ }
+ }
+ @else if $spec-at-index == 1 {
+ @for $i from ($spec-at-index + 1) through length($value) {
+ $pos: $pos nth($value, $i);
+ }
+ }
+ $G1: null;
+ }
+
+ // If not spec calculate correct values
+ @else {
+ @if ($pos-type != color) or ($first-val != "transparent") {
+ @if ($pos-type == number)
+ or ($first-val == "center")
+ or ($first-val == "top")
+ or ($first-val == "right")
+ or ($first-val == "bottom")
+ or ($first-val == "left") {
+
+ $pos: $value;
+
+ @if $pos == $G1 {
+ $G1: null;
+ }
+ }
+
+ @else if
+ ($first-val == "ellipse")
+ or ($first-val == "circle")
+ or ($first-val == "closest-side")
+ or ($first-val == "closest-corner")
+ or ($first-val == "farthest-side")
+ or ($first-val == "farthest-corner")
+ or ($first-val == "contain")
+ or ($first-val == "cover") {
+
+ $shape-size: $value;
+
+ @if $value == $G1 {
+ $G1: null;
+ }
+
+ @else if $value == $G2 {
+ $G2: null;
+ }
+ }
+ }
+ }
+ }
+ @return $G1, $G2, $pos, $shape-size;
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_radial-gradient-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_radial-gradient-parser.scss
new file mode 100644
index 000000000..6dde50f06
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_radial-gradient-parser.scss
@@ -0,0 +1,50 @@
+@function _radial-gradient-parser($image) {
+ $image: unquote($image);
+ $gradients: ();
+ $start: str-index($image, "(");
+ $end: str-index($image, ",");
+ $first-val: str-slice($image, $start + 1, $end - 1);
+
+ $prefix: str-slice($image, 0, $start);
+ $suffix: str-slice($image, $end, str-length($image));
+
+ $is-spec-syntax: str-index($first-val, "at");
+
+ @if $is-spec-syntax and $is-spec-syntax > 1 {
+ $keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
+ $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
+ $pos: append($pos, $keyword, comma);
+
+ $gradients: (
+ webkit-image: -webkit- + $prefix + $pos + $suffix,
+ spec-image: $image
+ )
+ }
+
+ @else if $is-spec-syntax == 1 {
+ $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
+
+ $gradients: (
+ webkit-image: -webkit- + $prefix + $pos + $suffix,
+ spec-image: $image
+ )
+ }
+
+ @else if str-index($image, "cover") or str-index($image, "contain") {
+ @warn "Radial-gradient needs to be updated to conform to latest spec.";
+
+ $gradients: (
+ webkit-image: null,
+ spec-image: $image
+ )
+ }
+
+ @else {
+ $gradients: (
+ webkit-image: -webkit- + $image,
+ spec-image: $image
+ )
+ }
+
+ @return $gradients;
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_radial-positions-parser.scss b/docusaurus/v0/_sass/bourbon/helpers/_radial-positions-parser.scss
new file mode 100644
index 000000000..6a5b47777
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_radial-positions-parser.scss
@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+ $shape-size: nth($gradient-pos, 1);
+ $pos: nth($gradient-pos, 2);
+ $shape-size-spec: _shape-size-stripper($shape-size);
+
+ $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+ unquote(if($shape-size, "#{$shape-size},", null));
+ $pos-spec: if($pos, "at #{$pos}", null);
+
+ $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+ // Add comma
+ @if ($spec != ' ') {
+ $spec: "#{$spec},"
+ }
+
+ @return $pre-spec $spec;
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_render-gradients.scss b/docusaurus/v0/_sass/bourbon/helpers/_render-gradients.scss
new file mode 100644
index 000000000..576567683
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_render-gradients.scss
@@ -0,0 +1,26 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+ $pre-spec: null;
+ $spec: null;
+ $vendor-gradients: null;
+ @if $gradient-type == linear {
+ @if $gradient-positions {
+ $pre-spec: nth($gradient-positions, 1);
+ $spec: nth($gradient-positions, 2);
+ }
+ }
+ @else if $gradient-type == radial {
+ $pre-spec: nth($gradient-positions, 1);
+ $spec: nth($gradient-positions, 2);
+ }
+
+ @if $vendor {
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+ }
+ @else if $vendor == false {
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+ $vendor-gradients: unquote($vendor-gradients);
+ }
+ @return $vendor-gradients;
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_shape-size-stripper.scss b/docusaurus/v0/_sass/bourbon/helpers/_shape-size-stripper.scss
new file mode 100644
index 000000000..ee5eda422
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_shape-size-stripper.scss
@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+ $shape-size-spec: null;
+ @each $value in $shape-size {
+ @if ($value == "cover") or ($value == "contain") {
+ $value: null;
+ }
+ $shape-size-spec: "#{$shape-size-spec} #{$value}";
+ }
+ @return $shape-size-spec;
+}
diff --git a/docusaurus/v0/_sass/bourbon/helpers/_str-to-num.scss b/docusaurus/v0/_sass/bourbon/helpers/_str-to-num.scss
new file mode 100644
index 000000000..b3d616824
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/helpers/_str-to-num.scss
@@ -0,0 +1,50 @@
+//************************************************************************//
+// Helper function for linear/radial-gradient-parsers.
+// Source: http://sassmeister.com/gist/9647408
+//************************************************************************//
+@function _str-to-num($string) {
+ // Matrices
+ $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
+ $numbers: 0 1 2 3 4 5 6 7 8 9;
+
+ // Result
+ $result: 0;
+ $divider: 0;
+ $minus: false;
+
+ // Looping through all characters
+ @for $i from 1 through str-length($string) {
+ $character: str-slice($string, $i, $i);
+ $index: index($strings, $character);
+
+ @if $character == '-' {
+ $minus: true;
+ }
+
+ @else if $character == '.' {
+ $divider: 1;
+ }
+
+ @else {
+ @if not $index {
+ $result: if($minus, $result * -1, $result);
+ @return _convert-units($result, str-slice($string, $i));
+ }
+
+ $number: nth($numbers, $index);
+
+ @if $divider == 0 {
+ $result: $result * 10;
+ }
+
+ @else {
+ // Move the decimal dot to the left
+ $divider: $divider * 10;
+ $number: $number / $divider;
+ }
+
+ $result: $result + $number;
+ }
+ }
+ @return if($minus, $result * -1, $result);
+}
diff --git a/docusaurus/v0/_sass/bourbon/settings/_asset-pipeline.scss b/docusaurus/v0/_sass/bourbon/settings/_asset-pipeline.scss
new file mode 100644
index 000000000..d481a6afb
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/settings/_asset-pipeline.scss
@@ -0,0 +1 @@
+$asset-pipeline: false !default;
diff --git a/docusaurus/v0/_sass/bourbon/settings/_prefixer.scss b/docusaurus/v0/_sass/bourbon/settings/_prefixer.scss
new file mode 100644
index 000000000..ecab49fb5
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/settings/_prefixer.scss
@@ -0,0 +1,6 @@
+// Variable settings for /addons/prefixer.scss
+$prefix-for-webkit: true !default;
+$prefix-for-mozilla: true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera: true !default;
+$prefix-for-spec: true !default; // required for keyframe mixin
diff --git a/docusaurus/v0/_sass/bourbon/settings/_px-to-em.scss b/docusaurus/v0/_sass/bourbon/settings/_px-to-em.scss
new file mode 100644
index 000000000..f2f9a3e8d
--- /dev/null
+++ b/docusaurus/v0/_sass/bourbon/settings/_px-to-em.scss
@@ -0,0 +1 @@
+$em-base: 16px !default;
diff --git a/docusaurus/v0/_sass/custom/custom.scss b/docusaurus/v0/_sass/custom/custom.scss
new file mode 100644
index 000000000..a7ed48929
--- /dev/null
+++ b/docusaurus/v0/_sass/custom/custom.scss
@@ -0,0 +1,271 @@
+$navy: #30373b;
+$navy--light: #7a8c9b;
+$blue--light: #368aa9;
+$blue--pale: #d3dbe2;
+$grey--dark: #30373b;
+$grey--light: #949595;
+$grey--pale: #F9FAFA;
+$grey--on-dark: #a9a9a9;
+
+$docs--border: #798C9C;
+$docs--code: #5C5C5C;
+$docs--notes: #444444;
+
+body {
+ background: white;
+ font-size: 15px;
+}
+
+body,
+.marketing-markdown {
+ color: #4E5665;
+}
+
+.marketing-markdown {
+ max-width: 900px;
+}
+
+h1 {
+ font-weight: 700;
+ margin-bottom: 33px;
+}
+
+.marketing-markdown h2,
+h2 {
+ margin-top: 40px;
+ margin-bottom: 33px;
+ font-weight: 400;
+}
+
+.body-link,
+main p > a,
+main .marketing-markdown > a,
+.marketing-markdown a:not(.marketing-button):not(.marketing-nav__button) {
+ color: $blue--light;
+ border-bottom: 0;
+}
+
+blockquote,
+.marketing-markdown blockquote,
+pre,
+pre.code,
+pre.prettyprint {
+ margin-left: 0;
+ margin-right: 0;
+ background: $grey--pale;
+ padding: 25px;
+ font-size: 1em;
+ line-height: 1.7;
+ font-weight: normal;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+
+ &:before,
+ &:after {
+ display: none;
+ }
+}
+
+code,
+kbd,
+samp,
+pre,
+pre.code,
+pre.prettyprint,
+.pln {
+ font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
+ font-size: 13px;
+ color: $docs--code;
+}
+
+blockquote,
+.marketing-markdown blockquote {
+ border-left: 3px solid $docs--border;
+ color: $docs--notes;
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+}
+
+.page-header {
+ padding: 0;
+ text-align: left;
+}
+
+.docs-header .npm-logo {
+ height: 14px;
+}
+
+.docs-sidebar {
+ background: $navy;
+ font-size: 18px;
+}
+
+.site-title {
+ &:hover {
+ text-decoration: none;
+ }
+}
+
+.docs-title {
+ font-weight: $font-weight-light;
+
+ @include shopify-breakpoint($desktop-up) {
+ margin-bottom: 40px;
+ }
+
+ a {
+ color: $color-white;
+ }
+}
+
+.docs-nav {
+ li {
+ margin-bottom: 20px;
+ }
+}
+
+.docs-nav__link,
+.docs-sub-nav__link {
+ color: $grey--on-dark;
+ @include font-brandon-medium();
+
+ &.active {
+ color: white;
+ }
+}
+
+.docs-sub-nav {
+ border-left: 3px solid $grey--on-dark;
+ padding-left: 10px;
+ font-size: 13px;
+ margin-top: 10px;
+ margin-left: 5px;
+ display: none;
+
+ li {
+ margin-bottom: 13px;
+ }
+
+ .active ~ & {
+ display: block;
+ }
+}
+
+
+.docs-shopify-logo {
+ a {
+ color: $grey--on-dark;
+ }
+}
+
+.docs-header {
+ border-bottom: 1px solid $blue--pale;
+ padding-top: 15px;
+ margin-bottom: 70px;
+ font-size: 13px;
+
+ a {
+ color: #A0A0A0;
+ }
+
+ img {
+ height: 18px;
+ padding-right: 5px;
+ opacity: 0.8;
+
+ }
+
+ li {
+ display: inline-block;
+ padding-right: 30px;
+ }
+}
+
+#options-form {
+ margin-bottom: 30px;
+}
+
+.marketing-markdown li ul {
+ margin-top: 10px;
+}
+
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ empty-cells: show;
+ border: 1px solid #ddd;
+ background-color: transparent;
+ font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
+ * {
+ border: none;
+ background: none;
+ }
+
+ th {
+ border-bottom: 1px solid #ddd;
+ background-color: #f9f9f9;
+ }
+
+ th,
+ td {
+ padding: 8px 15px;
+ }
+
+}
+
+@include shopify-breakpoint($tablet-down) {
+ table, thead, tbody, th, td, tr {
+ display: block;
+ font-size: 12px;
+ }
+
+ thead tr {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ tr { border: 1px solid #ccc; }
+
+ table td {
+ border: none;
+ border-bottom: 1px solid #eee;
+ position: relative;
+ padding-left: 50%;
+ }
+
+ td:before {
+ position: absolute;
+ top: 6px;
+ left: 6px;
+ width: 45%;
+ padding-right: 10px;
+ white-space: nowrap;
+ }
+
+
+ td:nth-of-type(1):before { content: "Internet Explorer"; }
+ td:nth-of-type(2):before { content: "Chrome, Edge, Firefox"; }
+ td:nth-of-type(3):before { content: "Safari"; }
+ td:nth-of-type(4):before { content: "Opera"; }
+ td:nth-of-type(5):before { content: "iOS"; }
+ td:nth-of-type(6):before { content: "Android"; }
+}
+
+
+.copy-button {
+ padding: 3px 12px 5px;
+ font-size: 1em;
+ width: 100%;
+ position: relative;
+ top: -13px;
+ background: #ccc;
+ border-radius: 0 0 3px 3px;
+}
+
+.u-alignRight {
+ text-align: right;
+}
diff --git a/docusaurus/v0/_sass/custom/layout.scss b/docusaurus/v0/_sass/custom/layout.scss
new file mode 100644
index 000000000..dac8a0524
--- /dev/null
+++ b/docusaurus/v0/_sass/custom/layout.scss
@@ -0,0 +1,170 @@
+body {
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+}
+
+table {
+ margin-bottom: 20px;
+}
+
+main {
+ margin-left: 0;
+ margin-right: 0;
+ max-width: none;
+ min-height: 100vh;
+}
+
+.docs-container {
+ padding: 0;
+
+ @include shopify-breakpoint($desktop-up) {
+ overflow: hidden;
+ min-height: 600px;
+ }
+}
+
+.docs-sidebar {
+ @include shopify-breakpoint($tablet-down) {
+ padding: 60px 30px 15px;
+ }
+
+ @include shopify-breakpoint($desktop-up) {
+ min-height: 100%;
+ width: 300px;
+ padding: 60px 40px 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ padding-bottom: 120px; // ~height of docs-shopify-logo
+ overflow: auto;
+ }
+}
+
+.docs-main {
+ padding: 0 30px;
+
+ @include shopify-breakpoint($desktop-up) {
+ float: left;
+ padding: 0 45px;
+ width: calc(100% - 300px);
+ margin-left: 300px;
+ }
+}
+
+.docs-shopify-logo {
+
+ img {
+ margin-bottom: 10px;
+ max-width: 100px;
+ }
+
+ @include shopify-breakpoint($tablet-down) {
+ background: #232323;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 8px 30px;
+
+ img {
+ margin-bottom: 0;
+ max-width: 80px;
+ }
+
+ p {
+ display: none;
+ }
+ }
+
+ @include shopify-breakpoint($desktop-up) {
+ position: fixed;
+ left: 40px;
+ bottom: 0;
+ width: 220px;
+ background: #30373b;
+ padding-top: 20px;
+ padding-bottom: 40px;
+ }
+
+ p {
+ margin-bottom: 0;
+ font-size: 13px;
+ font-weight: 500;
+ text-decoration: underline;
+ }
+}
+
+.apidocs-container {
+ @include shopify-breakpoint($desktop-up) {
+ position: relative;
+ }
+}
+
+.apidocs__sidebar {
+ @include shopify-breakpoint($desktop-up) {
+ width: 200px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+}
+
+.apidocs {
+ @include shopify-breakpoint($desktop-up) {
+ max-width: calc(100% - 200px);
+ padding-right: 30px;
+ }
+}
+
+.demo-iframe {
+ position: relative;
+ margin: 40px 0;
+
+ &:before {
+ content: "Demo";
+ position: absolute;
+ top: -10px;
+ left: 10px;
+ padding: 0 10px;
+ background-color: white;
+ }
+
+ iframe {
+ margin: 0;
+ border: 1px solid $color-grey-border-on--white;
+ transition: width 0.2s ease-in-out;
+ }
+}
+
+.demo-iframe--mobile {
+ width: 320px;
+}
+
+.demo-iframe__toggles {
+ position: absolute;
+ top: -10px;
+ right: 20px;
+ padding: 0 10px;
+ background-color: white;
+
+ .iframe-toggle + .iframe-toggle {
+ margin-left: 5px;
+ }
+
+ img {
+ width: 20px;
+ height: 20px;
+ padding: 0;
+ margin: 0;
+ }
+}
+
+.demo-image {
+ box-shadow: 0 0 15px 5px #eee;
+}
+
+.demo-image.demo-image--app {
+ margin-bottom: 0;
+}
diff --git a/docusaurus/v0/_sass/demo-variables.scss b/docusaurus/v0/_sass/demo-variables.scss
new file mode 100644
index 000000000..f01cfa9a9
--- /dev/null
+++ b/docusaurus/v0/_sass/demo-variables.scss
@@ -0,0 +1,79 @@
+// Hardcoded values for Slate variables in src/styles/settings/variables.scss
+
+/*================ Color Variables ================*/
+$color-primary: blue;
+
+// Text colors
+$color-body-text: #4E5665;
+
+// Backgrounds
+$color-body: #fff;
+
+// Border colors
+$color-border: #f6f6f6;
+
+// Helper colors for form error states
+$color-disabled: #000;
+$color-disabled-border: #000;
+$color-error: #000;
+$color-error-bg: #000;
+$color-success: #000;
+$color-success-bg: #000;
+
+/*================ Typography Variables ================*/
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+
+$font-stack-header: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-weight-header: $font-weight-bold;
+
+$font-stack-body: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-size-base: 16px; // Henseforth known as 1em
+
+/*============================================================================
+ Grid Breakpoints and Class Names
+ - Do not change the variable names
+==============================================================================*/
+$grid-medium: 750px;
+$grid-large: 990px;
+$grid-widescreen: 1400px;
+$grid-gutter: 30px;
+
+$small: 'small';
+$medium: 'medium';
+$medium-down: 'medium-down';
+$medium-up: 'medium-up';
+$large: 'large';
+$large-down: 'large-down';
+$large-up: 'large-up';
+$widescreen: 'widescreen';
+
+// The `$breakpoints` list is used to build our media queries.
+// You can use these in the media-query mixin.
+$breakpoints: (
+ $small '(max-width: #{$grid-medium - 1})',
+ $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
+ $medium-down '(max-width: #{$grid-large - 1})',
+ $medium-up '(min-width: #{$grid-medium})',
+ $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
+ $large-down '(max-width: #{$grid-widescreen - 1})',
+ $large-up '(min-width: #{$grid-large})',
+ $widescreen '(min-width: #{$grid-widescreen})'
+);
+
+/*============================================================================
+ Generate breakpoint-specific column widths and push classes
+ - Default column widths: $breakpoint-has-widths: ($small, $medium-up);
+ - Default is no push classes
+ - Will not work if `theme/grid.scss` is removed
+==============================================================================*/
+$breakpoint-has-widths: ($small, $medium-up);
+$breakpoint-has-push: ($medium-up);
+
+/*================ Sizing Variables ================*/
+$width-site: 1180px;
+$gutter: 30px;
+
+/*================ Z-Index ================*/
+$z-index-dropdown: 2;
+$z-index-skip-to-content: 10000; // really high to be safe of app markup
diff --git a/docusaurus/v0/_sass/demo.scss b/docusaurus/v0/_sass/demo.scss
new file mode 100644
index 000000000..eb2d0cd5f
--- /dev/null
+++ b/docusaurus/v0/_sass/demo.scss
@@ -0,0 +1,68 @@
+body {
+ padding: 30px;
+}
+
+p:first-child {
+ margin-top: 0;
+}
+
+/*================ General helpers ================*/
+.list--inline {
+ padding: 0;
+ margin: 0;
+
+ li {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+}
+
+/*================ Grid demo styles ================*/
+.grid-demo {
+ background-color: $color-sky--light;
+ font-size: 0.75em;
+ padding: 10px;
+ text-align: center;
+}
+
+/*================ Blank state demos ================*/
+.blank-states-product-demo a {
+ display: inline-block;
+ width: 30%;
+ margin-right: 2%;
+}
+
+/*================ Icon demos ================*/
+.icon-demo .icon {
+ margin-right: 10px;
+}
+
+.icon-demo--color .icon-cart {
+ fill: blue;
+ width: 40px;
+ height: 40px;
+}
+
+// Put icon name below icon
+.icon-demo--full-set {
+ li {
+ position: relative;
+ margin-bottom: 30px;
+ margin-right: 20px;
+
+ &:before {
+ display: block;
+ content: attr(data-name);
+ font-size: 0.8em;
+ padding-top: 25px;
+ }
+ }
+
+ .icon {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+}
diff --git a/docusaurus/v0/_sass/html5bp-custom.scss b/docusaurus/v0/_sass/html5bp-custom.scss
new file mode 100755
index 000000000..60ee4fe18
--- /dev/null
+++ b/docusaurus/v0/_sass/html5bp-custom.scss
@@ -0,0 +1,131 @@
+/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
+
+p, ul,ol {
+ margin: 0;
+ padding: 0;
+}
+
+ul, ol {
+ list-style: none
+}
+
+audio,
+canvas,
+img,
+video {
+ vertical-align: middle;
+}
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+textarea {
+ resize: vertical;
+}
+
+/* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+.ir {
+ background-color: transparent;
+ border: 0;
+ overflow: hidden;
+ text-indent: -9999px;
+}
+
+.ir:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 150%;
+}
+
+.hidden {
+ display: none !important;
+ visibility: hidden;
+}
+
+.visuallyhidden {
+ @include visuallyhidden;
+}
+
+.showvisuallyhidden,
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+ @include showvisuallyhidden;
+}
+
+.invisible {
+ visibility: hidden;
+}
+
+/* ==========================================================================
+ Print styles
+ ========================================================================== */
+
+@media print {
+ * {
+ background: transparent !important;
+ color: #000 !important;
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+
+ .ir a:after,
+ a[href^="javascript:"]:after,
+ a[href^="#"]:after {
+ content: "";
+ }
+
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ thead {
+ display: table-header-group;
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ img {
+ max-width: 100% !important;
+ }
+
+ @page {
+ margin: 0.5cm;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+}
diff --git a/docusaurus/v0/_sass/html5bp/normalize.css b/docusaurus/v0/_sass/html5bp/normalize.css
new file mode 100755
index 000000000..3c000acba
--- /dev/null
+++ b/docusaurus/v0/_sass/html5bp/normalize.css
@@ -0,0 +1,512 @@
+/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+ HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+ display: none;
+}
+
+/* ==========================================================================
+ Base
+ ========================================================================== */
+
+/**
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ * `em` units.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-size: 100%; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Address `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+ font-family: sans-serif;
+}
+
+/**
+ * Address margins handled incorrectly in IE 6/7.
+ */
+
+body {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Links
+ ========================================================================== */
+
+
+
+/* ==========================================================================
+ Typography
+ ========================================================================== */
+
+/**
+ * Address font sizes and margins set differently in IE 6/7.
+ * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+h2 {
+ font-size: 1.5em;
+ margin: 0.83em 0;
+}
+
+h3 {
+ font-size: 1.17em;
+ margin: 1em 0;
+}
+
+h4 {
+ font-size: 1em;
+ margin: 1.33em 0;
+}
+
+h5 {
+ font-size: 0.83em;
+ margin: 1.67em 0;
+}
+
+h6 {
+ font-size: 0.67em;
+ margin: 2.33em 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+blockquote {
+ margin: 1em 40px;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ * Known issue: no IE 6/7 normalization.
+ */
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Address styling not present in IE 6/7/8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+
+p,
+pre {
+ margin: 1em 0;
+}
+
+/**
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+/**
+ * Address CSS quotes not supported in IE 6/7.
+ */
+
+q {
+ quotes: none;
+}
+
+/**
+ * Address `quotes` property not supported in Safari 4.
+ */
+
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* ==========================================================================
+ Lists
+ ========================================================================== */
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+ margin: 1em 0;
+}
+
+dd {
+ margin: 0 0 0 40px;
+}
+
+/**
+ * Address paddings set differently in IE 6/7.
+ */
+
+menu,
+ol,
+ul {
+ padding: 0 0 0 40px;
+}
+
+/**
+ * Correct list images handled incorrectly in IE 7.
+ */
+
+nav ul,
+nav ol {
+ list-style: none;
+ list-style-image: none;
+}
+
+/* ==========================================================================
+ Embedded content
+ ========================================================================== */
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+ border: 0; /* 1 */
+ -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* ==========================================================================
+ Figures
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Forms
+ ========================================================================== */
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+ margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0;
+ white-space: normal; /* 2 */
+ *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ * and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+ font-size: 100%; /* 1 */
+ margin: 0; /* 2 */
+ vertical-align: baseline; /* 3 */
+ *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+ line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ * Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+ *overflow: visible; /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ * Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ *height: 13px; /* 3 */
+ *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+ overflow: auto; /* 1 */
+ vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+ Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets.scss b/docusaurus/v0/_sass/marketing_assets.scss
new file mode 100644
index 000000000..b3d6ea8c1
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets.scss
@@ -0,0 +1,18 @@
+// Core styles, primarily SASS variables, mixins, breakpoints, reset, clearfix,
+// and box-sizing
+@import "marketing_assets/setup";
+
+// Layout - container and top-level elements
+@import "marketing_assets/layout";
+
+// Typography - base fonts, and font sizes
+@import "marketing_assets/typography";
+
+// Grid - grid measurements, grid class generation
+@import "marketing_assets/grid";
+
+// Site modules - buttons, forms, UI elements
+@import "marketing_assets/modules";
+
+// utilities for spacing, typography, colours
+@import "marketing_assets/utils";
diff --git a/docusaurus/v0/_sass/marketing_assets/_grid.scss b/docusaurus/v0/_sass/marketing_assets/_grid.scss
new file mode 100755
index 000000000..9540e4850
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/_grid.scss
@@ -0,0 +1,276 @@
+/*============================================================================
+ Marketing Grid
+==============================================================================*/
+
+// Common grid for all pages with supported variants
+//
+// #PageContainer - Holds all the things, overflow added here to prevent scrollbar
+// - Main body content containers with body bg set, stretch to 1440
+// marketing-nav-wrapper - See
+// footer--main - See
+// page-block - Color blocks, direct descendents of the `main` containers with
+// page-width - Generic container to hold any content, grid or not, stretches to 990
+// grid-container - Container for grid elements, default 990
+//
+// Styleguide Grid Basics.
+
+/*================ Grid Container ================*/
+// Standard grid with tiles that can peak out to left or right at width > 990
+// safe to @extend from individual components
+//
+// .grid-container - Applies to container for grid elements
+//
+// Styleguide Grid Container.
+.grid-container {
+ @include page-container();
+}
+
+// generate-columns mixins can be found in sass_helpers/mixins.scss
+@include shopify-breakpoint($desktop-up) {
+ @include generate-columns;
+}
+
+@include shopify-breakpoint($tablet-only) {
+ @include generate-columns($width: $column--tablet);
+}
+
+// The tablet grid is also 8 columns, but with narrower widths/column.
+// Columns can span a different # of columns across desktop vs tablet using tablet-only classes
+//
+// .grid--tablet-4 - Grid item that will span 4 cols on tablet only
+//
+// Styleguide Grid Tablet.
+@include shopify-breakpoint($tablet-only) {
+ @include generate-columns($prefix: 'grid--tablet-', $width: $column--tablet);
+}
+
+/*================ Grid Item ================*/
+// Defines a grid item
+// **NOT TO BE EXTENDED**, creates way too many classes on account of the generate-columns function
+//
+// .grid-item - Applies to container that acts as a column
+// .grid-X - Where X is the number of columns required. Both classes must be supplied.
+//
+// Styleguide Grid Item.
+.grid-item {
+ float: left;
+ position: relative;
+
+ /*================ Grid Wrapper Helpers ================*/
+ // * For regular grids (eg grids with equal numbers in each row), helpers for row clearing
+ // and removing right-margin that's present on all grid items
+ // * This allows us to avoid having to create row wrappers for the grid
+ // * `nth-child` child selectors are cleared depending on the grid-type
+ //
+ // .grid-container--halves - Applied to 2-col grids
+ // .grid-container--thirds - Applied to 3-col grids
+ // .grid-container--quarters - Applies to 4-col grids
+ //
+ // Styleguide Grid Wrapper Helpers.
+
+ @include shopify-breakpoint($tablet-up) {
+ .grid-container--halves & {
+ @include omega(2n);
+ }
+
+ .grid-container--thirds & {
+ @include omega(3n);
+ }
+
+ .grid-container--quarters & {
+ @include omega(4n);
+ }
+
+ .grid-container--eights & {
+ @include omega(8n);
+ }
+ }
+
+ /*================ Mobile Grid ================*/
+ // Grid becomes only 2 col on mobile,
+ // Cols become %-based
+ // Default mobile behavior is for all cols to span 100% on mobile
+ // Otherwise, a special mobile only 2-col grid is available
+ //
+ // .grid--mobile - Applied to a .grid-item if it's to span 50% on mobile
+ //
+ // Styleguide Grid Mobile.
+
+ @include shopify-breakpoint($mobile) {
+ float: none;
+
+ &.grid--mobile {
+ @include span-columns(2 of 4);
+ @include omega(2n);
+ float: left;
+ }
+
+ &.grid--mobile.grid--last {
+ + .grid-item {
+ clear: none;
+ }
+ }
+ }
+}
+
+/*================ Grid Row Clearing ================*/
+// For irregular grids (eg grids with different column widths),
+// right margin on right-most element in a row is removed via this class
+//
+// .grid--last - Applied to .grid-item to remove right margin
+//
+// Styleguide Grid Last.
+.grid--last {
+ margin-right: 0;
+ // To avoid .row classes
+ + .grid-item {
+ clear: both;
+ }
+}
+
+/*================ Fluid 1/3 Grid ================*/
+// Officially we have an 8 col fixed width grid with fixed cols and margins
+// But there are a few cases where we need a fluid % grid, specifically for 3-col layouts
+// Right Margin is still applied in these cases
+//
+// .grid-item--fluid__third - Applied to grid item that's 1/3 width
+// .grid-item--fluid__two-thirds - Applies to grid item that's 2/3 width
+//
+// Styleguide Grid Fluid 1/3 Grid.
+@include shopify-breakpoint($tablet-up) {
+ .grid-item--fluid__third {
+ @include span-columns(4 of 12);
+ }
+
+ .grid-item--fluid__two-thirds {
+ @include span-columns(8 of 12);
+ }
+}
+
+/*================ Extended Grid ================*/
+// Wide grid with content peeking from both sides by 2 columns worth
+//
+// .grid-container--wide - Container for grid elements in wide grid
+// - Includes left and right padding and negative left margin
+// .grid--wide-left/right - Left/right extended grid content. Gets cut off as window resizes
+// - Includes negative left and right margin
+//
+// Styleguide Extended Grid/Grid Wide Details.
+
+@include shopify-breakpoint($desktop-up) {
+ .grid-container--wide {
+ width: $wide;
+ padding-left: $grid-extendor;
+ padding-right: $grid-extendor;
+ margin-left: -$grid-extendor;
+ }
+
+ .grid-item--wide {
+ @include generate-extended-columns($extendor: $grid-extendor);
+ }
+
+ .grid--wide-right,
+ .grid--wide-left {
+ @extend .grid-item--wide;
+ }
+
+ .grid--wide-left {
+ margin-left: -$grid-extendor;
+ }
+
+ .grid--wide-right {
+ margin-right: -$grid-extendor;
+ }
+}
+
+@include shopify-breakpoint($tablet-only) {
+ .grid--wide-right {
+ margin-right: 0;
+ }
+}
+
+/*================ Flush Grid ================*/
+// Fluid grid with no horizontal margins for when content must be flush with grid edges
+//
+// .grid-item--flush-half - 50% width item
+// .grid-item--flush-third - 33.3% width item
+// .grid-item--flush-quarter - 25% width item
+//
+// Styleguide Flush Grid.
+
+@include shopify-breakpoint($tablet-up) {
+ .grid-item--flush-half {
+ width: percentage(1/2);
+ }
+
+ .grid-item--flush-third {
+ width: percentage(1/3);
+ }
+
+ .grid-item--flush-quarter {
+ width: percentage(1/4);
+ }
+}
+
+/*================ Bordered Grid ================*/
+// grid with borders between items but not around outside edges. Supports 2, 3, and 4-col grids.
+// to be used in combination with flush grid.
+// Total number of grid items must be a multiple of column number OR empty divs must be used to make up the difference.t
+//
+// Styleguide Bordered Grid.
+
+.grid-item--bordered {
+ border-bottom: $border-grey;
+
+ @include shopify-breakpoint($mobile) {
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ @include shopify-breakpoint($tablet-up) {
+ border-right: $border-grey;
+
+ .grid-container--thirds & {
+ &:nth-child(3n) {
+ border-right: 0;
+ }
+
+ &:nth-last-child(-n+3) {
+ border-bottom: 0;
+ }
+ }
+
+ .grid-container--quarters & {
+ &:nth-child(4n) {
+ border-right: 0;
+ }
+
+ &:nth-last-child(-n+4) {
+ border-bottom: 0;
+ }
+ }
+
+ .grid-container--halves & {
+ &:nth-child(2n) {
+ border-right: 0;
+ }
+
+ &:nth-last-child(-n+2) {
+ border-bottom: 0;
+ }
+ }
+ }
+}
+
+/*================ Grid items with bottom margin ================*/
+// Add bottom margin to grid-items on desktop and tablet. Designed for blocks of
+// grid items that span multiple lines that need vertical space between them.
+//
+// Styleguide Grid items with bottom margin
+
+.grid-item--margin-bottom {
+ @include shopify-breakpoint($tablet-up) {
+ margin-bottom: em($gutter);
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/_layout.scss b/docusaurus/v0/_sass/marketing_assets/_layout.scss
new file mode 100755
index 000000000..a8553a077
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/_layout.scss
@@ -0,0 +1,37 @@
+// scss-lint:disable IdSelector SelectorFormat
+#PageContainer {
+ overflow: hidden; // To support overflowing grid on wide screens
+ width: 100%;
+}
+// scss-lint:enable IdSelector SelectorFormat
+
+main,
+.footer--main,
+.page-width {
+ @include page-container();
+}
+
+main {
+ display: block; // IE11 does not understand this as a block-level element
+}
+
+main,
+.marketing-nav-wrapper,
+.footer--main {
+ max-width: $wide;
+}
+
+// Page width denotes content areas inside of main, regardless of if they're in
+// our grid or not
+.page-width {
+ padding-left: $gutter;
+ padding-right: $gutter;
+
+ @include shopify-breakpoint($desktop-up) {
+ width: $desktop;
+ }
+
+ @include shopify-breakpoint($tablet-only) {
+ width: $tablet;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/_modules.scss b/docusaurus/v0/_sass/marketing_assets/_modules.scss
new file mode 100755
index 000000000..847949516
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/_modules.scss
@@ -0,0 +1,41 @@
+/*================ Building Blocks ================*/
+@import 'modules/buttons';
+@import 'modules/forms';
+@import 'modules/icons';
+@import 'modules/picture';
+
+/*================ Site structure & Chrome ================*/
+@import 'modules/nav';
+@import 'modules/footer';
+@import 'modules/drawer';
+@import 'modules/signup';
+@import 'modules/stateful-form';
+
+/*================ Global Modules ================*/
+@import 'modules/page-blocks';
+@import 'modules/section-block';
+@import 'modules/segment-colors';
+@import 'modules/section-heading';
+@import 'modules/page-header';
+@import 'modules/block';
+@import 'modules/bullet';
+@import 'modules/media';
+@import 'modules/image';
+
+/*================ Good candidates for selective inclusion ================*/
+@import 'modules/video';
+@import 'modules/paginated-carousel';
+@import 'modules/padded-grid-box';
+@import 'modules/inline-cta';
+@import 'modules/marketing-input-button-pair';
+
+/*================ JS Modules ================*/
+@import 'modules/sticky-menu';
+@import 'modules/in-page-menu';
+@import 'modules/mobile-nav-select';
+@import 'modules/accordion';
+@import 'modules/slider';
+@import 'modules/modal';
+@import 'modules/popover';
+@import 'modules/window-loaded';
+@import 'modules/responsive-svg';
diff --git a/docusaurus/v0/_sass/marketing_assets/_sass-helpers.scss b/docusaurus/v0/_sass/marketing_assets/_sass-helpers.scss
new file mode 100755
index 000000000..7a8f48675
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/_sass-helpers.scss
@@ -0,0 +1,6 @@
+@import 'bourbon/bourbon';
+@import 'sass_helpers/variables';
+@import 'sass_helpers/mixins';
+@import 'neat/neat';
+@import 'neat/neat-helpers';
+@import 'sass_helpers/breakpoints';
diff --git a/docusaurus/v0/_sass/marketing_assets/_setup.scss b/docusaurus/v0/_sass/marketing_assets/_setup.scss
new file mode 100755
index 000000000..3efa702e2
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/_setup.scss
@@ -0,0 +1,3 @@
+@import 'sass-helpers';
+@import 'html5bp-custom';
+@import 'setup/base';
diff --git a/docusaurus/v0/_sass/marketing_assets/_typography.scss b/docusaurus/v0/_sass/marketing_assets/_typography.scss
new file mode 100755
index 000000000..5126c32af
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/_typography.scss
@@ -0,0 +1,2 @@
+@import 'typography/fonts';
+@import 'typography/typography';
diff --git a/docusaurus/v0/_sass/marketing_assets/_utils.scss b/docusaurus/v0/_sass/marketing_assets/_utils.scss
new file mode 100755
index 000000000..2ace0eb1e
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/_utils.scss
@@ -0,0 +1,4 @@
+@import 'utils/responsive';
+@import 'utils/gutters';
+@import 'utils/alignment';
+@import 'utils/colors';
diff --git a/docusaurus/v0/_sass/marketing_assets/builds/fonts.scss b/docusaurus/v0/_sass/marketing_assets/builds/fonts.scss
new file mode 100755
index 000000000..6d4c34f14
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/builds/fonts.scss
@@ -0,0 +1,2 @@
+@import 'marketing_assets/sass-helpers';
+@import 'marketing_assets/typography/fonts';
diff --git a/docusaurus/v0/_sass/marketing_assets/content/_modules.scss b/docusaurus/v0/_sass/marketing_assets/content/_modules.scss
new file mode 100755
index 000000000..a268b8569
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/content/_modules.scss
@@ -0,0 +1,13 @@
+@import 'marketing_assets/modules/content/article-meta';
+@import 'marketing_assets/modules/content/heading-icon';
+@import 'marketing_assets/modules/content/newsletter-block';
+@import 'marketing_assets/modules/content/preview-links';
+@import 'marketing_assets/modules/content/search-input';
+@import 'marketing_assets/modules/content/article';
+@import 'marketing_assets/modules/content/social-shares';
+@import 'marketing_assets/modules/content/share-bar';
+@import 'marketing_assets/modules/content/marketing-markdown';
+@import 'marketing_assets/modules/content/pagination';
+@import 'marketing_assets/modules/content/link-title';
+@import 'marketing_assets/modules/content/banner';
+@import 'marketing_assets/modules/content/about-author';
diff --git a/docusaurus/v0/_sass/marketing_assets/content/grid/_grid.scss b/docusaurus/v0/_sass/marketing_assets/content/grid/_grid.scss
new file mode 100755
index 000000000..016827a63
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/content/grid/_grid.scss
@@ -0,0 +1,53 @@
+/*============================================================================
+ Content marketing fluid grid
+==============================================================================*/
+
+// 10-column grid for content marketing projects.
+// Fluid at desktop and mobile, fixed on tablet
+//
+// Max-width - 1230px
+// Desktop push - Helper classes to offset columns at desktop
+// Fluid half - Helper class for fluid half column
+//
+// Styleguide Content Grid Basics.
+
+@mixin generate-fluid-columns($prefix: 'grid-', $num: $num-columns) {
+ $i: $num;
+
+ @while $i > 0 {
+ .#{$prefix}#{$i} {
+ @include span-columns($i of $num-columns);
+ }
+
+ .#{$prefix}push-#{$i} {
+ @include shift($i of $num-columns);
+ }
+
+ $i: $i - 1;
+ }
+}
+
+@include shopify-breakpoint($tablet-up) {
+ .grid-item--fluid__half {
+ @include span-columns(4 of 8);
+ }
+}
+
+@include shopify-breakpoint($desktop-up) {
+ .grid--desktop-push-1 {
+ @include shift(1 of 10);
+ }
+
+ .grid--desktop-push-2 {
+ @include shift(2 of 10);
+ }
+}
+
+@include shopify-breakpoint($desktop-up) {
+ @include generate-fluid-columns();
+
+ .page-width {
+ width: 100%;
+ max-width: 1230px; // 10 column with gutters
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/content/setup/_base.scss b/docusaurus/v0/_sass/marketing_assets/content/setup/_base.scss
new file mode 100755
index 000000000..4369c1f0e
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/content/setup/_base.scss
@@ -0,0 +1,25 @@
+.page-block {
+ padding: $gutter 0;
+}
+
+@include shopify-breakpoint($desktop-up) {
+ .site-content {
+ min-height: 100%;
+
+ // Border between main content and sidebar
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: -3.72%;
+ width: 1px;
+ height: 100%;
+ background: $color-grey-border-on--white;
+ }
+ }
+
+ .site-sidebar {
+ padding-left: $gutter;
+ overflow: hidden;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/content/setup/_grid.scss b/docusaurus/v0/_sass/marketing_assets/content/setup/_grid.scss
new file mode 100755
index 000000000..a60e347de
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/content/setup/_grid.scss
@@ -0,0 +1,9 @@
+// Total columns on desktop and tablet
+$grid-columns: 10;
+
+// Page container width, and breakpoint settings
+$tablet: 760px;
+
+// Special measurements
+$grid-extendor: 120px;
+$column--tablet: 43px; // 43 * 10 + gutters = 760px
diff --git a/docusaurus/v0/_sass/marketing_assets/content/setup/_overrides.scss b/docusaurus/v0/_sass/marketing_assets/content/setup/_overrides.scss
new file mode 100755
index 000000000..b18a623e4
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/content/setup/_overrides.scss
@@ -0,0 +1,19 @@
+// Override content typography settings to make the signup heading not look
+// like junk
+.marketing-form--inline__heading {
+ @extend .heading--3;
+ margin-bottom: $gutter;
+}
+
+.modal-container {
+ .modal__heading {
+ font-size: em(24);
+ font-weight: $font-weight-medium;
+ line-height: inherit;
+ margin-bottom: em($gutter-half);
+ }
+
+ .modal {
+ max-width: 990px;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/content/setup/_typography.scss b/docusaurus/v0/_sass/marketing_assets/content/setup/_typography.scss
new file mode 100755
index 000000000..3176f3b1e
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/content/setup/_typography.scss
@@ -0,0 +1,37 @@
+@import 'marketing_assets/sass-helpers';
+
+/*============================================================================
+ Typography defaults
+==============================================================================*/
+$h1-font-size: em(42);
+$h1-font-size--tablet: em(36);
+$h1-font-size--mobile: em(26);
+$h1-margin-bottom: em(10, 42);
+$h1-font-weight: $font-weight-bold;
+$h1-line-height: em(50, 42);
+
+$h2-font-size: em(36);
+$h2-font-size--tablet: em(32);
+$h2-font-size--mobile: em(22);
+$h2-margin-bottom: em(10, 36);
+$h2-font-weight: $font-weight-regular;
+$h2-line-height: em(42, 36);
+
+$h3-font-size: em(24);
+$h3-font-size--tablet: em(22);
+$h3-font-size--mobile: em(20);
+$h3-margin-bottom: em(10, 24);
+$h3-font-weight: $font-weight-regular;
+$h3-line-height: em(30, 24);
+
+$h4-font-size: em(20);
+$h4-font-size--tablet: em(18);
+$h4-margin-bottom: em(10, 20);
+$h4-font-weight: $font-weight-regular;
+$h4-line-height: em(25, 20);
+
+$h5-font-size: em(14);
+$h5-margin-bottom: em(6, 14);
+$h5-font-weight: $font-weight-regular;
+$h5-line-height: em(21, 14);
+$h5-letter-spacing: 0;
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_accordion.scss b/docusaurus/v0/_sass/marketing_assets/modules/_accordion.scss
new file mode 100755
index 000000000..6e9d62aaa
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_accordion.scss
@@ -0,0 +1,43 @@
+/*============================================================================
+ Mobile accordion
+==============================================================================*/
+@include shopify-breakpoint($mobile) {
+ .accordion-item--mobile {
+ &.js-is-active {
+ .accordion-link:after {
+ background-image: asset-svg-url(collapse);
+ }
+ }
+
+ .accordion-link {
+ position: relative;
+ cursor: pointer;
+ display: block;
+
+ width: 100%;
+ text-align: left;
+ min-height: em(20, 16);
+ padding-right: em(20, 16);
+
+ &:after {
+ background-image: asset-svg-url(expand);
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 1px;
+ width: em(20, 16);
+ height: em(20, 16);
+ }
+ }
+
+ .accordion-content {
+ display: none;
+ }
+ }
+}
+
+.accordion-item {
+ .accordion-content {
+ display: none;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_block.scss b/docusaurus/v0/_sass/marketing_assets/modules/_block.scss
new file mode 100755
index 000000000..03009ec49
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_block.scss
@@ -0,0 +1,60 @@
+/*
+Generic helper module for content.
+Text aligns to centre on mobile breakpoint.
+
+.marketing-block--centered - Text-align center at all breakpoints
+.marketing-block--padded - Adds $gutter width of padding to element. Can be used on parent or content element
+.marketing-block--bordered - Adds 1px border
+.marketing-block--rounded - Adds border-radius
+.marketing-block-- - Adds background color, text color, and border as needed. Options: --light and --lowlight
+
+Styleguide Blocks.
+*/
+
+.marketing-block {
+ @include marketing-bg-colors;
+ display: block;
+ border-color: $color-grey-border-on--white;
+
+ @include shopify-breakpoint($mobile) {
+ margin-bottom: em($gutter * 1.5);
+ text-align: center;
+ width: 100%;
+ }
+
+ .icon {
+ margin-bottom: em(12);
+ }
+}
+
+.marketing-block--bordered {
+ border-width: 1px;
+ border-style: solid;
+}
+
+.marketing-block--centered {
+ text-align: center;
+}
+
+.marketing-block--light {
+ border-width: 1px;
+ border-style: solid;
+}
+
+.marketing-block--padded {
+ padding: em($gutter);
+}
+
+.marketing-block--rounded {
+ border-radius: $border-radius;
+}
+
+.marketing-block__content {
+ p:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.marketing-block__img img {
+ width: 100%;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_breadcrumbs.scss b/docusaurus/v0/_sass/marketing_assets/modules/_breadcrumbs.scss
new file mode 100755
index 000000000..62241b0fa
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_breadcrumbs.scss
@@ -0,0 +1,26 @@
+.breadcrumbs {
+ border-bottom: $border-grey;
+ margin-bottom: em($gutter / 2);
+}
+
+.breadcrumbs__item {
+ display: inline-block;
+}
+
+.breadcrumbs__link {
+ color: inherit;
+}
+
+.icon-caret-right {
+ background-image: asset-svg-url(caret-right, $color-grey-text--light);
+}
+
+.breadcrumbs__separator {
+ padding-left: $gutter / 2;
+ padding-right: $gutter / 2;
+ vertical-align: middle;
+
+ .breadcrumbs__item:last-child & {
+ display: none;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_bullet.scss b/docusaurus/v0/_sass/marketing_assets/modules/_bullet.scss
new file mode 100755
index 000000000..f9d6f2253
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_bullet.scss
@@ -0,0 +1,49 @@
+.marketing-bullet-list {
+ margin-bottom: em($gutter);
+ padding-top: em($gutter);
+
+ &:last-child {
+ margin-bottom: em(-$gutter); // offset the margin-bottom of child bullets
+ }
+}
+
+// Icon to the left with short floated next to it. Replalces `features-icon-list__item`.
+// Usually includes a heading with the bullet, provided via ui_module
+//
+// Default style - text top aligned with a heading
+// .marketing-bullet--without-heading - center-aligns bullet with text if no heading
+// .marketing-bullet-list (optional parent) - for padding at top/bottom of list of bullets.
+// .icon & .bullet__content-wrapper - only available children of marketing-bullet
+//
+// Styleguide Bullets
+
+.marketing-bullet {
+ @include clearfix;
+ list-style: none;
+ margin-bottom: em($gutter);
+ position: relative;
+
+ .icon {
+ display: block;
+ margin-bottom: 0;
+ float: left;
+ margin-right: $gutter / 2;
+ }
+}
+
+.marketing-bullet--without-heading {
+ .marketing-bullet__content {
+ @include font-brandon-light;
+ position: absolute;
+ left: em($gutter * 2.5, 18);
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: em(18);
+ line-height: 1;
+ }
+}
+
+.marketing-bullet__content-wrapper {
+ overflow: hidden;
+ display: block;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_buttons.scss b/docusaurus/v0/_sass/marketing_assets/modules/_buttons.scss
new file mode 100755
index 000000000..a30304807
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_buttons.scss
@@ -0,0 +1,100 @@
+/*============================================================================
+ Buttons
+ * reset button elements
+ * in-page links that aren't actually anchors should use these
+ * then use %button as needed
+==============================================================================*/
+
+button {
+ background: none;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ display: inline-block;
+ cursor: pointer;
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+.marketing-button {
+ @include button-bg($color-green);
+ @include font-brandon-medium;
+ transition: all 150ms ease;
+ transition-property: background-color border-color color;
+ user-select: none;
+ appearance: none;
+ display: inline-block;
+ padding: em(14, 18) em(30, 18);
+ border: 0;
+ border-radius: $border-radius;
+ cursor: pointer;
+ color: $color-white;
+ font-size: em(18);
+ text-align: center;
+ white-space: nowrap;
+
+ &:hover,
+ &:focus {
+ color: $color-white;
+ text-decoration: none;
+ }
+
+ &[disabled],
+ .marketing-form--is-loading & {
+ @include button-bg($color-grey-text--light);
+ cursor: not-allowed;
+
+ // Scoping these styles to `button` because they cause problems on `input`.
+ @at-root {
+ button#{&} {
+ position: relative;
+ color: $color-grey-text--light;
+
+ &:hover,
+ &:focus {
+ color: darken($color-grey-text--light, $hover-darken);
+ }
+
+ &::after {
+ @include spinner();
+ left: 50%;
+ }
+ }
+ }
+ }
+}
+
+.marketing-button--lowlight {
+ @include button-bg($color-slate);
+}
+
+.marketing-button--small {
+ padding: em(9) em(30);
+ font-size: em(16);
+ height: auto;
+}
+
+.marketing-button--block {
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+// apply to button or input elements that should look like plain links
+.marketing-button--reset {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ padding: 0;
+ margin: 0;
+ color: inherit;
+ appearance: none;
+}
+
+.marketing-button--pill {
+ padding-top: em(5);
+ padding-bottom: em(5);
+ border-radius: em($gutter);
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_drawer.scss b/docusaurus/v0/_sass/marketing_assets/modules/_drawer.scss
new file mode 100755
index 000000000..eee772664
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_drawer.scss
@@ -0,0 +1,182 @@
+/*============================================================================
+ Main Nav Drawers
+==============================================================================*/
+$bezier-drawer: cubic-bezier(0.4, 0, 0.2, 1);
+$time-drawer: 0.4s;
+$width-drawer: em(280);
+
+.drawer {
+ display: none;
+ position: fixed;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ -webkit-overflow-scrolling: touch;
+ width: $width-drawer;
+ top: 0;
+ bottom: 0;
+ z-index: $z-nav-drawer;
+ background-color: $color-sky--light;
+ font-size: em(16, 15);
+ transition: transform $time-drawer $bezier-drawer;
+
+ .js-drawer-open & {
+ display: block;
+ }
+}
+
+.drawer--left {
+ left: -$width-drawer;
+
+ .js-drawer-open-left & {
+ transform: translateX($width-drawer);
+ }
+}
+
+.drawer--right {
+ right: -$width-drawer;
+
+ .js-drawer-open-right & {
+ transform: translateX(-$width-drawer);
+ }
+
+ h2 {
+ font-size: em(22);
+ }
+}
+
+.drawer__inner {
+ position: relative;
+ min-height: 100%;
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ width: 6px;
+ height: 100%;
+ z-index: 10;
+ }
+
+ .drawer--right & {
+ padding: 0 $gutter;
+
+ &:before {
+ left: 0;
+ border-left: 1px solid $color-sky;
+ background-image: linear-gradient(to left, rgba($color-sky, 0), rgba($color-sky, 0.3));
+ }
+ }
+
+ .drawer--left & {
+ &:before {
+ right: 0;
+ border-right: 1px solid $color-sky;
+ background-image: linear-gradient(to right, rgba($color-sky, 0), rgba($color-sky, 0.3));
+ }
+ }
+
+ .marketing-form__button {
+ @include shopify-breakpoint($tablet-down) {
+ width: 100%;
+ }
+ }
+}
+
+.drawer__close {
+ height: $nav-height;
+ padding: 0 $gutter;
+
+ .drawer--right & {
+ text-align: right;
+ padding-right: 0;
+ }
+
+ .icon {
+ width: em(17px);
+ height: em(17px);
+ height: 100%;
+ }
+}
+
+.drawer__items {
+ padding-bottom: 20px;
+
+ > li {
+ display: block;
+ line-height: 1em;
+ }
+
+ a {
+ @include font-brandon-medium;
+ padding: 10px 0 10px $gutter;
+ display: block;
+ color: $color-grey-body;
+
+ &.active {
+ color: $color-black;
+ }
+
+ &:hover,
+ &:focus {
+ color: $color-slate;
+ }
+ }
+}
+
+/*================ Top Nav list in drawer ================*/
+.drawer__items--primary {
+ padding-bottom: 0;
+ background: $color-white;
+
+ > li {
+ border-top: 1px solid $color-grey-border-on--white;
+
+ > a {
+ background-color: $color-white;
+ padding: 25px 0 25px $gutter;
+
+ &:hover,
+ &:focus {
+ background-color: $color-sky--light;
+ }
+ }
+ }
+}
+
+.drawer__header {
+ display: inline-block;
+ width: em(280 - $gutter * 2, 13);
+ margin: 0 $gutter ($gutter / 2);
+ padding: $gutter 0 ($gutter / 2);
+ border-bottom: 1px solid $color-grey-border-on--white;
+ font-size: em(13);
+ text-transform: uppercase;
+ color: $color-grey-body;
+}
+
+// scss-lint:disable IdSelector SelectorFormat
+#PageContainer:before {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ opacity: 0;
+ background-color: rgba($color-black, 0.6);
+ transition: visibility $time-drawer linear, opacity $time-drawer $bezier-drawer;
+ transform: translateZ(0);
+ content: '';
+ z-index: 999;
+}
+
+/*================ Transitions ================*/
+.js-drawer-open {
+ overflow: hidden;
+
+ #PageContainer:before {
+ visibility: visible;
+ opacity: 1;
+ }
+}
+// scss-lint:enable IdSelector SelectorFormat
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_errors.scss b/docusaurus/v0/_sass/marketing_assets/modules/_errors.scss
new file mode 100755
index 000000000..b2d2d07ed
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_errors.scss
@@ -0,0 +1,16 @@
+/*============================================================================
+ 500, 404 pages
+==============================================================================*/
+main {
+ .page-width {
+ text-align: center;
+ }
+
+ .icon {
+ width: 10em;
+ height: 10em;
+ margin-bottom: 2em;
+
+ background: asset-svg-url(shopify, $color-grey-text--light) no-repeat;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_footer.scss b/docusaurus/v0/_sass/marketing_assets/modules/_footer.scss
new file mode 100755
index 000000000..6f8ba39ae
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_footer.scss
@@ -0,0 +1,185 @@
+$color-footer-background: #222;
+$color-footer-text: $color-grey-heading;
+$color-footer-link: #898989;
+$color-footer-link--hover: $color-white;
+$color-footer-divider: darken($color-grey-body, 20%);
+$color-footer-icon: darken($color-footer-text, 15%);
+
+.footer--main {
+ padding-top: em($gutter * 2);
+ background: $color-footer-background;
+}
+
+.footer-logo {
+ display: block;
+ width: em(115); // Width of footer logo
+ height: em(30); // Height of footer logo
+ content: '';
+ background: asset-svg-url(shopify-logo, $color-footer-icon) no-repeat;
+}
+
+.footer-column {
+ @extend .grid-2;
+ font-size: em(15);
+}
+
+.footer-section {
+ @include clearfix;
+ margin-bottom: em($gutter);
+}
+
+.footer-heading {
+ @include font-brandon-bold;
+ margin: 0 0 em($gutter / 2 - 6);
+ padding-bottom: em($gutter / 2);
+ color: $color-footer-text;
+ border-bottom: 1px solid $color-footer-divider;
+ font-size: em(16);
+}
+
+.footer-link {
+ @include font-brandon-regular;
+ display: block;
+ padding: em(6) 0;
+ color: $color-footer-link;
+ transition: color 300ms ease-in-out;
+
+ &:hover,
+ &:focus {
+ color: $color-footer-link--hover;
+ }
+}
+
+.footer-top {
+ padding-bottom: em($gutter);
+
+ @include shopify-breakpoint($mobile) {
+ .footer-section--help {
+ @include omega;
+ float: right;
+ }
+ }
+}
+
+.footer-bottom {
+ @extend .footer--main;
+ padding: em($gutter) 0;
+ background: $color-footer-background;
+ border-top: 1px solid $color-footer-divider;
+
+ a {
+ color: $color-footer-link;
+ transition: color 300ms ease-in-out;
+
+ @include shopify-breakpoint($desktop-up) {
+ line-height: em($gutter);
+ }
+
+ &:hover {
+ color: $color-footer-link--hover;
+ }
+ }
+}
+
+.footer-bottom-item {
+ @include font-brandon-regular;
+
+ @include shopify-breakpoint($mobile) {
+ margin-bottom: em($gutter / 2);
+ }
+}
+
+.footer-bottom__links > a {
+ line-height: em($gutter);
+ white-space: nowrap;
+
+ @include shopify-breakpoint($mobile) {
+ display: block;
+ }
+}
+
+.footer-country-select {
+ display: inline-block;
+ position: relative;
+ width: auto;
+ line-height: em($gutter);
+
+ > select {
+ @include font-brandon-light;
+ height: auto;
+ width: auto;
+ padding: 0 em(25);
+ font-size: em(15);
+ color: $color-footer-link;
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ appearance: none;
+
+ @include shopify-breakpoint($desktop-up) {
+ height: $gutter;
+ }
+
+ &:focus {
+ color: $color-footer-link--hover;
+ }
+ }
+
+ // IE inherits option colors from the select menu, causing this text to be
+ // illegible on IE
+ option {
+ color: $color-black;
+ }
+
+ &:before {
+ top: 50%;
+ margin-top: em(-6);
+ width: em(12);
+ height: em(12);
+ background-image: asset-svg-url(caret-down, $color-footer-icon);
+ }
+
+ &:after {
+ pointer-events: none;
+ position: absolute;
+ content: '';
+ left: 0;
+ top: 50%;
+ margin-top: em(-8);
+ height: em(16);
+ width: em(16);
+ background: asset-svg-url(globe-simple, $color-footer-icon) no-repeat;
+ background-size: 100% 100%;
+ }
+}
+
+:-moz-any(.footer-country-select):before {
+ display: none;
+}
+
+.footer-social__icon {
+ float: left;
+ width: em(18);
+ height: em(18);
+ margin: em(5) em(8) em(8) 0;
+ padding: 0;
+ white-space: nowrap;
+
+ @include shopify-breakpoint($tablet-down) {
+ margin-right: em(12);
+ }
+
+ .icon {
+ width: 100%;
+ height: 100%;
+ fill: $color-footer-icon;
+ transition: fill 300ms ease-in-out;
+ }
+
+ &:hover,
+ &:focus {
+ .icon {
+ fill: $color-footer-link--hover;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_forms.scss b/docusaurus/v0/_sass/marketing_assets/modules/_forms.scss
new file mode 100755
index 000000000..0f97ec8be
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_forms.scss
@@ -0,0 +1,416 @@
+/*============================================================================
+ Form elements
+==============================================================================*/
+.marketing-form--inline {
+ @include shopify-breakpoint($tablet-up) {
+ text-align: center;
+ }
+
+ .marketing-input-wrapper {
+ text-align: left;
+
+ @include shopify-breakpoint($tablet-up) {
+ margin-bottom: 0;
+ }
+ }
+}
+
+.marketing-form--inline--with-labels {
+ @include shopify-breakpoint($tablet-up) {
+ .marketing-form__button {
+ margin-top: em(23); // Height of label plus margin
+ }
+ }
+}
+
+.marketing-form--inline__heading {
+ text-align: center;
+}
+
+.marketing-form--lowlight {
+ .marketing-label,
+ .marketing-radio-label,
+ .marketing-checkbox-label {
+ color: $color-white;
+ }
+}
+
+/*============================================================================
+ Form inputs
+==============================================================================*/
+.marketing-input-wrapper {
+ position: relative;
+ display: block;
+ margin-bottom: $gutter / 2;
+
+ .marketing-select-wrapper,
+ .marketing-input,
+ .marketing-textarea {
+ margin-bottom: 0;
+ }
+
+ &.js-is-hidden {
+ display: none;
+ }
+}
+
+.marketing-input,
+.marketing-textarea,
+.marketing-select-wrapper > select {
+ @include font-brandon-regular;
+ display: inline-block;
+ height: $input-height;
+ width: 100%;
+ margin: 0 0 ($gutter / 2);
+ padding: $input-padding;
+ color: $color-slate;
+ font-size: em(18);
+ border: 1px solid $color-input-border;
+ border-radius: $border-radius;
+ background-color: $color-white;
+ transition: border-color 0.1s;
+ appearance: none;
+
+ .marketing-block--lowlight &,
+ .marketing-form--lowlight &,
+ .page-block--lowlight & {
+ border-color: transparent;
+ }
+
+ &:focus,
+ &.focus {
+ color: $color-black;
+ // scss-lint:disable ImportantRule
+ // focus border should override all other border styles, no matter what.
+ border: 1px solid $color-input-focus !important;
+ // scss-lint:enable ImportantRule
+
+ // If a field is focused, we should show the field hint
+ // unless an error, or the .is-visible class is present.
+ + .marketing-form__messages .error + .suggest {
+ display: none;
+ }
+
+ + .marketing-form__messages .error + .is-visible {
+ display: block;
+ }
+ }
+
+ &[disabled] {
+ background-color: $color-grey-border-on--white;
+ }
+}
+
+.marketing-input,
+.marketing-textarea {
+ @include placeholder {
+ color: $color-grey-body;
+ }
+}
+
+.marketing-input--error {
+ &,
+ // ensure the `{lowlight} input` styles above are overridden
+ .marketing-block--lowlight &,
+ .marketing-form--lowlight &,
+ .page-block--lowlight & {
+ border: 2px solid $color-red;
+ }
+}
+
+.marketing-textarea {
+ height: auto;
+ min-height: $input-height;
+}
+
+.marketing-select-wrapper {
+ position: relative;
+ display: block;
+ margin-bottom: $gutter / 2;
+
+ > select {
+ margin: 0;
+ padding-right: em(32);
+
+ &::-ms-expand {
+ display: none;
+ }
+ }
+
+ &:before {
+ pointer-events: none;
+ content: '';
+ background-image: asset-svg-url(caret-down, $color-grey-text--light);
+ background-repeat: no-repeat;
+ background-size: 100% auto;
+ background-position: center;
+ height: em(16);
+ width: em(16);
+ margin-bottom: em(-9);
+ display: block;
+ position: absolute;
+ bottom: 50%;
+ right: em(12);
+ z-index: 2;
+ }
+}
+
+:-moz-any(.marketing-select-wrapper):after {
+ position: absolute;
+ right: em(1);
+ top: em(1);
+ height: $input-height - em(2); // em(2) == to clear top/bottom border
+ width: em(32);
+ background-color: $color-white;
+ font-size: em(18);
+ pointer-events: none;
+ z-index: 1;
+ content: '';
+ border-radius: $border-radius;
+}
+
+.marketing-label {
+ @include font-brandon-bold;
+ display: block;
+ margin-bottom: em(8, 13);
+ font-size: em(13);
+ text-transform: uppercase;
+}
+
+.marketing-form__button {
+ height: $input-height;
+}
+
+/*================ Off-screen labels with placeholder ================*/
+.marketing-label--hidden {
+ display: inline; // reset margins and helps FF deal with the input on a SR
+
+ .no-placeholder & {
+ @include showvisuallyhidden;
+ position: absolute;
+ left: 0;
+ top: -20px;
+ }
+}
+
+// Input with inline button.
+.marketing-input-wrapper--inline-button {
+ position: relative;
+ margin-bottom: 0;
+
+ > .marketing-button {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+}
+
+/*============================================================================
+ Inline messaging and errors
+==============================================================================*/
+.marketing-form__messages {
+ font-size: em(13);
+ font-weight: 500;
+
+ .error,
+ .success,
+ .suggest {
+ display: block;
+ padding: em(8, 13) 0 0;
+ transition: opacity, 0.3s ease;
+ }
+
+ .error {
+ color: $color-red;
+
+ a {
+ color: $color-red;
+ border-bottom: 1px solid $color-red;
+ }
+ }
+
+ .success {
+ display: none;
+ color: $color-green;
+
+ a {
+ color: $color-green;
+ border-bottom: 1px solid $color-green;
+ }
+
+ &.is-visible,
+ .marketing-form--has-success & {
+ display: block;
+ }
+ }
+
+ .suggest {
+ display: none;
+ color: $color-grey-heading;
+
+ .marketing-block--lowlight &,
+ .marketing-form--lowlight &,
+ .page-block--lowlight & {
+ color: $color-white;
+ }
+
+ &.is-visible {
+ display: block;
+ }
+ }
+}
+
+.marketing-form__ajax-success {
+ display: none;
+
+ &.js-is-visible {
+ display: block;
+ }
+}
+
+/*============================================================================
+ Checkboxes and radio buttons
+==============================================================================*/
+$marketing-switch-diameter: 20px;
+$marketing-switch-diameter-large: 30px;
+
+%marketing-switch {
+ @include visuallyhidden;
+ margin-bottom: $gutter / 2;
+ float: left;
+
+ &:checked + label:after {
+ position: absolute;
+ left: 0;
+ top: 0;
+ content: '';
+ }
+
+ &:focus,
+ &:focus:checked {
+ + label:before {
+ outline: none;
+ border-color: $color-green;
+ box-shadow: 0 0 4px 0 $color-green;
+ }
+ }
+}
+
+%marketing-switch-label {
+ display: block;
+ text-align: left;
+ position: relative;
+ margin-bottom: $gutter / 2;
+ padding-left: $gutter;
+ line-height: $marketing-switch-diameter;
+ user-select: none;
+
+ &:hover {
+ &:before {
+ border-color: $color-green;
+ }
+ }
+
+ &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: $marketing-switch-diameter;
+ width: $marketing-switch-diameter;
+ background-color: $color-white;
+ border-radius: $border-radius;
+ border: $border-grey;
+ box-shadow: inset 0 1px 3px rgba($color-black, 0.2);
+ transition: border-color 150ms ease;
+ }
+}
+
+%marketing-switch--large {
+ + label {
+ padding-left: $gutter + 10;
+ line-height: $marketing-switch-diameter-large;
+
+ &:before {
+ width: $marketing-switch-diameter-large;
+ height: $marketing-switch-diameter-large;
+ }
+ }
+}
+
+.marketing-checkbox {
+ @extend %marketing-switch;
+
+ &:checked {
+ + label:before {
+ background-color: $color-green;
+ border-color: $color-green;
+ box-shadow: none;
+ }
+
+ + label:after {
+ background-image: asset-svg-url(checked);
+ width: $marketing-switch-diameter;
+ height: $marketing-switch-diameter;
+ }
+ }
+}
+
+.marketing-checkbox-label {
+ @extend %marketing-switch-label;
+}
+
+.marketing-checkbox--large {
+ @extend %marketing-switch--large;
+
+ &:checked + label:after {
+ width: $marketing-switch-diameter-large;
+ height: $marketing-switch-diameter-large;
+ }
+}
+
+.marketing-radio {
+ @extend %marketing-switch;
+
+ &:checked {
+ + label:after {
+ left: $marketing-switch-diameter / 4;
+ top: $marketing-switch-diameter / 4;
+ width: $marketing-switch-diameter / 2;
+ height: $marketing-switch-diameter / 2;
+ border-radius: $marketing-switch-diameter / 2;
+ background-color: $color-green;
+ }
+
+ + label:before {
+ border-color: $color-green;
+ }
+ }
+}
+
+.marketing-radio-label {
+ @extend %marketing-switch-label;
+
+ &:before {
+ border-radius: $marketing-switch-diameter;
+ }
+}
+
+.marketing-radio--large {
+ @extend %marketing-switch--large;
+
+ &:checked + label:after {
+ top: 6px;
+ left: 6px;
+ width: 18px;
+ height: 18px;
+ border-radius: $marketing-switch-diameter-large / 2;
+ }
+}
+
+.marketing-checkbox-label--inline,
+.marketing-radio-label--inline {
+ margin-right: em($gutter / 2);
+ margin-bottom: 0;
+ display: inline-block;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_icons.scss b/docusaurus/v0/_sass/marketing_assets/modules/_icons.scss
new file mode 100755
index 000000000..d985a90fa
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_icons.scss
@@ -0,0 +1,60 @@
+// Add class="icon " to your element. Will cause it to display
+// inline-block, and sets the background size to `contain`
+//
+// .icon - default class, height 1em, width 0.8 em
+// .icon--large - 60x60px
+// .icon--small - 40x40px
+//
+// Styleguide Icons using SASS.
+
+.icon {
+ display: inline-block;
+ height: 1em;
+ width: 0.8em;
+ background-size: contain;
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
+.icon--large {
+ width: 60px;
+ height: 60px;
+}
+
+.icon--small {
+ width: 40px;
+ height: 40px;
+}
+
+// Generate classes to be used to add color to inline SVG icons
+@each $icon-color in $icon-colors {
+ .icon--#{nth($icon-color, 1)} {
+ fill: nth($icon-color, 2);
+ }
+}
+
+// Ensure we can override `fill` attribute colors using the above classes.
+// Qualifying the selector with `svg` to minimize impact on other els.
+// scss-lint:disable QualifyingElement
+svg.icon:not(.icon--full-color) {
+ circle,
+ ellipse,
+ g,
+ line,
+ path,
+ polygon,
+ polyline,
+ rect {
+ fill: inherit;
+ }
+}
+// scss-lint:enable QualifyingElement
+
+$global-icons: (
+ arrow-left,
+ arrow-right,
+ (close, 'white'),
+ close
+);
+
+@include generate-icon-classes($global-icons);
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_image.scss b/docusaurus/v0/_sass/marketing_assets/modules/_image.scss
new file mode 100755
index 000000000..79522ac2b
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_image.scss
@@ -0,0 +1,28 @@
+.lazyload-image {
+ // content-box because some images use padding to add space above/below, which
+ // conflicts with the max-height set on .lazyload-image (see image module).
+ box-sizing: content-box;
+ // display: block because the element is a span, in order to remain valid HTML
+ // when inserted as phrasing content, e.g. inside a p.
+ display: block;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+ margin: auto;
+
+ img {
+ display: block;
+ }
+}
+
+.lazyload-image__placeholder {
+ display: block; // see comment above regarding spans
+ width: 100%;
+ height: 0;
+
+ .lazyloaded + & {
+ // scss-lint:disable ImportantRule
+ display: none !important;
+ // scss-lint:enable ImportantRule
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_in-page-menu.scss b/docusaurus/v0/_sass/marketing_assets/modules/_in-page-menu.scss
new file mode 100755
index 000000000..3167ccae6
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_in-page-menu.scss
@@ -0,0 +1,66 @@
+/*
+Menus for -in-page navigation, either for jumping between sections or
+filtering content.
+
+.in-page-menu--vertical - vertically stacked menu ideal for navigating between
+ sections on the page.
+.in-page-menu--horizontal - horizontal menu ideal for filtering content
+
+Styleguide InPageMenu.
+*/
+
+$active-item-y-offset: 3px;
+
+.in-page-menu {
+ list-style: none;
+ margin-bottom: $gutter;
+
+ a {
+ @include font-brandon-regular;
+ color: $color-grey-body;
+ font-size: em(16);
+ display: block;
+ transition: all 100ms;
+
+ &:hover,
+ &:focus {
+ color: $color-black;
+ }
+
+ &.js-is-active {
+ color: $color-black;
+ }
+ }
+}
+
+
+.in-page-menu--vertical {
+ a {
+ padding-top: em($gutter-half);
+
+ &.js-is-active {
+ @extend .segment-link;
+ @extend .segment-quote;
+ border-left: 2px solid $color-black;
+ margin-top: em($gutter-half - $active-item-y-offset);
+ padding: $active-item-y-offset 0 $active-item-y-offset 10px;
+ }
+ }
+}
+
+.in-page-menu--horizontal {
+ a {
+ border-bottom: 2px solid transparent;
+ margin-right: em($gutter-half);
+ transition: border 0.33s ease-in-out, color 0.33s ease-in-out;
+
+ &.js-is-active {
+ border-color: $color-black;
+ color: $color-black;
+ }
+ }
+
+ li {
+ display: inline-block;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_inline-cta.scss b/docusaurus/v0/_sass/marketing_assets/modules/_inline-cta.scss
new file mode 100755
index 000000000..954bf9d3a
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_inline-cta.scss
@@ -0,0 +1,14 @@
+.inline-cta__heading {
+ font-weight: $font-weight-regular;
+ color: $color-grey-body;
+
+ @include shopify-breakpoint($tablet-up) {
+ display: inline-block;
+ }
+}
+
+.inline-cta__button {
+ @include shopify-breakpoint($tablet-up) {
+ margin-left: $gutter;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_marketing-input-button-pair.scss b/docusaurus/v0/_sass/marketing_assets/modules/_marketing-input-button-pair.scss
new file mode 100755
index 000000000..afcd0e4bf
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_marketing-input-button-pair.scss
@@ -0,0 +1,72 @@
+.marketing-input-button-pair__input,
+.marketing-input-button-pair__button {
+ @include shopify-breakpoint($tablet-up) {
+ float: left;
+ }
+}
+
+// Override mobile margin on .marketing-input-wrapper .marketing-input
+.marketing-input-wrapper .marketing-input-button-pair__input {
+ @include shopify-breakpoint($mobile) {
+ margin-bottom: $gutter / 2;
+ }
+}
+
+.marketing-input-button-pair__input {
+ @include shopify-breakpoint($tablet-up) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+
+.marketing-input-button-pair__button {
+ // Need to set height on button to align cleanly with input borders
+ height: $input-height;
+
+ @include shopify-breakpoint($tablet-up) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+}
+
+.marketing-input-button-pair--medium-button {
+ .marketing-input-button-pair__input {
+ @include shopify-breakpoint($tablet-up) {
+ width: 75%;
+ }
+ }
+
+ .marketing-input-button-pair__button {
+ @include shopify-breakpoint($tablet-up) {
+ width: 25%;
+ }
+ }
+}
+
+.marketing-input-button-pair--large-button {
+ .marketing-input-button-pair__input {
+ @include shopify-breakpoint($tablet-up) {
+ width: 70%;
+ }
+ }
+
+ .marketing-input-button-pair__button {
+ @include shopify-breakpoint($tablet-up) {
+ width: 30%;
+ }
+ }
+}
+
+.marketing-input-button-pair--small-button {
+ .marketing-input-button-pair__input {
+ @include shopify-breakpoint($tablet-up) {
+ width: 85%;
+ }
+ }
+
+ .marketing-input-button-pair__button {
+ @include shopify-breakpoint($tablet-up) {
+ width: 15%;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_media.scss b/docusaurus/v0/_sass/marketing_assets/modules/_media.scss
new file mode 100755
index 000000000..a8bdfb99f
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_media.scss
@@ -0,0 +1,267 @@
+/*
+ Media object (media element with text).
+ CSS classes to help with positioning text-image pairings.
+
+ This module handles positioning of the media and content inside of the media
+ object, while standard grid classes determine the layout of the objects.
+
+ .media__right - float object right, resets right margin (tablet-up)
+ .media__offset - adds top margin (tablet-up) to help with vertical centering
+ .media__last - adds top margin on mobile to help with vertical spacing
+ .media__image--wide-left - floats image to the right, removes max-width on tablet
+ .media__image--wide-right - floats image to the left, removes max-width on tablet
+ .media__image--bottom - 3x negative bottom gutter, snug to page-block bottom tablet-up
+ .media__image--top - 3x negative top margin, snug to page-block top tablet-up
+ .media__image--bottom--desktop - 3x negative bottom gutter, snug to page-block bottom desktop only
+ .media__image--top--desktop - 3x negative top margin, snug to page-block top desktop only
+ .media__image--right-tight - 8x negative left margin, allows right image to overlap content
+ .media__image--overflow - allows image to overflow into content by removing max-width
+ .media--flex-centered - uses flexbox to vertically center image and content
+ .media__center--mobile - text-align: center; on mobile
+
+ Styleguide Media Object.
+*/
+
+/*================ Standard use case ================*/
+// The standard use case for a media object is to offset content to improve
+// vertical alignment with the image element, and add margins where necessary.
+//
+// .media__center--mobile - center aligns media content on mobile
+// .media__offset - adds a 60px top margin on desktop, 15px on tablet
+// .media__last - adds a top margin of 30px on mobile
+//
+// Styleguide Media standard use case.
+
+.media__center--mobile {
+ @include shopify-breakpoint($mobile) {
+ text-align: center;
+ }
+}
+
+.media__offset {
+ @include shopify-breakpoint($desktop-up) {
+ margin-top: em($gutter * 1.5);
+ }
+
+ @include shopify-breakpoint($tablet-only) {
+ margin-top: em($gutter / 2);
+ }
+}
+
+.media__image {
+ @include shopify-breakpoint($mobile) {
+ text-align: center;
+ }
+}
+
+.media__last {
+ @include shopify-breakpoint($mobile) {
+ margin-top: em($gutter);
+ }
+}
+
+/*================ .media--flex-centered ================*/
+// Center all elements in the media object using flexbox (note: browser support
+// is limited, so graceful fallback to base media styles should be tested)
+//
+//
+// Styleguide media--flex-centered.
+
+.media--flex-centered {
+ @include shopify-breakpoint($tablet-up) {
+ .flexbox & {
+ .media__offset {
+ margin-top: 0;
+ }
+ }
+ }
+
+ @include shopify-breakpoint($tablet-up) {
+ display: flex;
+ align-items: center;
+
+ .media__right {
+ order: 2;
+ }
+ }
+}
+
+/*================ .media__right ================*/
+// Media right floats the element to the right on tablet-up. The goal here is to
+// deal with reflow where you want to control the order of items when stacked
+// on mobile.
+//
+//
+// Styleguide media__right.
+
+.media__right {
+ @include shopify-breakpoint($tablet-up) {
+ float: right;
+ margin-right: 0;
+ }
+}
+
+
+
+/*================ .media__image--wide-left ================*/
+// Used in conjunction with a wide left grid, this helper aligns the image to the
+// right, ensuring that it is snug with the .media__offset.
+//
+//
+// Styleguide media__image--wide-left.
+
+.media__image--wide-left img,
+.media__image--wide-left .lazyload-image {
+ @include shopify-breakpoint($tablet-up) {
+ float: right;
+ }
+
+ @include shopify-breakpoint($tablet-only) {
+ max-width: none;
+ }
+}
+
+.media__image--wide-left--mobile img {
+ @include shopify-breakpoint($mobile) {
+ margin-left: -$gutter;
+ }
+}
+
+/*================ .media__image--wide-right ================*/
+// Used in conjunction with a wide right grid, this helper aligns the image to the
+// right, ensuring that it is snug with the .media__offset.
+//
+//
+// Styleguide media__image--wide-right.
+
+.media__image--wide-right img,
+.media__image--wide-right .lazyload-image {
+ @include shopify-breakpoint($tablet-up) {
+ float: left;
+ }
+
+ @include shopify-breakpoint($tablet-only) {
+ max-width: none;
+ }
+}
+
+.media__image--wide-left .lazyload-image,
+.media__image--wide-right .lazyload-image {
+ @include shopify-breakpoint($tablet-up) {
+ overflow: visible;
+ }
+}
+
+.media__image--wide-right--mobile {
+ @include shopify-breakpoint($mobile) {
+ text-align: right;
+
+ img {
+ margin-right: -$gutter;
+ }
+ }
+}
+
+/*================ .media__image--top and .media__image--bottom ================*/
+// Adds a negative top or bottom margin, respectively, to the image to make it
+// snug with the top edge of the wrapping .page-block.
+//
+//
+// Styleguide media__image--top and media__image--bottom.
+
+.media__image--bottom img,
+.media__image--bottom .lazyload-image {
+ @include shopify-breakpoint($tablet-up) {
+ margin-bottom: em(-$gutter * 3);
+ }
+}
+
+.media__image--bottom .lazyload-image img {
+ @include shopify-breakpoint($tablet-up) {
+ margin-bottom: 0;
+ }
+}
+
+.media__image--top img,
+.media__image--top .lazyload-image {
+ @include shopify-breakpoint($tablet-up) {
+ margin-top: em(-$gutter * 3);
+ }
+}
+
+.media__image--top .lazyload-image img {
+ @include shopify-breakpoint($tablet-up) {
+ margin-top: 0;
+ }
+}
+
+.media__image--top--desktop img,
+.media__image--top--desktop .lazyload-image {
+ @include shopify-breakpoint($desktop-up) {
+ margin-top: em(-$gutter * 3);
+ }
+}
+
+.media__image--top--desktop .lazyload-image img {
+ @include shopify-breakpoint($desktop-up) {
+ margin-top: 0;
+ }
+}
+
+.media__image--bottom--desktop img {
+ @include shopify-breakpoint($desktop-up) {
+ margin-bottom: em(-$gutter * 3);
+ }
+}
+
+.media__image--bottom--desktop img,
+.media__image--bottom--desktop .lazyload-image {
+ @include shopify-breakpoint($desktop-up) {
+ margin-bottom: em(-$gutter * 3);
+ }
+}
+
+.media__image--bottom--desktop .lazyload-image img {
+ @include shopify-breakpoint($desktop-up) {
+ margin-bottom: 0;
+ }
+}
+
+// Matches page-block bottom padding on mobile
+.media__image--bottom--mobile img,
+.media__image--bottom--mobile .lazyload-image {
+ @include shopify-breakpoint($mobile) {
+ margin-bottom: em(-$gutter * 2);
+ }
+}
+
+.media__image--bottom--mobile .lazyload-image img {
+ @include shopify-breakpoint($mobile) {
+ margin-bottom: 0;
+ }
+}
+
+/*================ .media__image--right-tight ================*/
+// Adds a negative $gutter * 8 (240px) left margin to an image. Allows it to
+// overlap content area.
+//
+// Styleguide media__image--right-tight.
+
+.media__image--right-tight {
+ @include shopify-breakpoint($tablet-up) {
+ margin-left: em(-$gutter * 8);
+ }
+}
+
+/*================ .media__image--overflow ================*/
+// Removes max-width on the image, allowing it to overflow into the content area
+// on desktop.
+//
+//
+// Styleguide media__image--overflow.
+
+.media__image--overflow img {
+ @include shopify-breakpoint($desktop-up) {
+ max-width: none;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_mobile-nav-select.scss b/docusaurus/v0/_sass/marketing_assets/modules/_mobile-nav-select.scss
new file mode 100755
index 000000000..459c3bca9
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_mobile-nav-select.scss
@@ -0,0 +1,24 @@
+.mobile-nav-select {
+ display: inline-block;
+ margin-bottom: $gutter;
+
+ > select {
+ height: auto;
+ padding-left: em(100); // Space for 'Category:' label
+ padding-right: em(50);
+ color: $color-grey-body;
+ font-weight: $font-weight-regular;
+ }
+}
+
+.mobile-nav-select__title {
+ @include font-brandon-medium;
+ font-size: em(18);
+ height: $input-height - em(2); // em(2) == clear border
+ padding: em($gutter / 2, 18);
+ position: absolute;
+ vertical-align: baseline;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_modal.scss b/docusaurus/v0/_sass/marketing_assets/modules/_modal.scss
new file mode 100755
index 000000000..9040c3779
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_modal.scss
@@ -0,0 +1,104 @@
+$backdrop-opacity: 0.85;
+$modal-max-width: $desktop;
+$modal-min-height: 500px;
+$modal-width: 80%;
+$distance-from-top: 130px;
+
+.js-modal-open {
+ // scss-lint:disable IdSelector SelectorFormat
+ #SiteNavContainer,
+ #PageContainer {
+ display: none;
+ }
+ // scss-lint:enable IdSelector SelectorFormat
+}
+
+.modal-container {
+ background: $color-slate--dark;
+ display: none;
+ min-height: 100vh;
+ left: 0;
+ opacity: 0;
+ overflow: scroll;
+ padding: 0 0 $distance-from-top / 2;
+ top: 0;
+ width: 100%;
+ text-align: center;
+ -webkit-overflow-scrolling: touch;
+ z-index: -1;
+ color: $color-white;
+ transition: opacity 0.2s;
+
+ @include shopify-breakpoint($mobile) {
+ padding: 0 0 $gutter;
+ }
+
+ &.is-transitioning {
+ z-index: 1000;
+ position: fixed;
+ }
+
+ &.js-is-active {
+ display: block;
+ opacity: 1;
+ visibility: visible;
+ z-index: 1000;
+ }
+
+ button:-moz-focusring,
+ a:-moz-focusring {
+ outline: solid $color-white 2px;
+ }
+}
+
+.modal__header {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 100;
+}
+
+.modal__controls {
+ text-align: right;
+}
+
+.modal__close {
+ margin: em(10) em(-10) 0 0;
+ padding: em(10);
+ opacity: 0.7;
+ transition: opacity 300ms ease;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ .icon-close-white {
+ height: 16px;
+ width: 16px;
+ }
+}
+
+.modal {
+ @include force-3d();
+ padding-top: $distance-from-top;
+ position: relative;
+ text-align: left;
+ transition: all 0.18s ease-out;
+ transform: scale(0.85);
+
+ @include shopify-breakpoint($mobile) {
+ padding: ($gutter * 2) $gutter 0;
+ }
+
+ .js-is-active & {
+ transform: scale(1);
+ }
+
+ &:focus {
+ outline: none; // the focus can be silently added, it's only relevent to be able to handle items inside
+ }
+}
+
+.modal__heading {
+ color: $color-white;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_nav.scss b/docusaurus/v0/_sass/marketing_assets/modules/_nav.scss
new file mode 100755
index 000000000..390475edb
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_nav.scss
@@ -0,0 +1,303 @@
+@import 'marketing_assets/sass-helpers';
+
+$nav-open-transition: transform 0.4s linear;
+$nav-close-transition: transform 0.2s linear;
+$nav-opacity: 0.95;
+
+/*============================================================================
+ Main element margins
+==============================================================================*/
+main {
+ background: $color-white;
+}
+
+/*============================================================================
+ Nav wrapper and parent nav elements
+==============================================================================*/
+.marketing-nav-wrapper {
+ width: 100%;
+ margin: 0 auto;
+
+ &.js-is-active .icon-caret-down {
+ display: none;
+ }
+}
+
+.marketing-nav {
+ width: 100%;
+ position: relative;
+ clear: both;
+ height: $nav-height;
+}
+
+/*============================================================================
+ Primary navigation
+==============================================================================*/
+.marketing-nav__primary {
+ background-color: $color-primary-nav-background;
+
+ .page--has-transparent-nav--primary & {
+ margin-top: -$nav-height;
+ transform: translateY($nav-height);
+ z-index: 10;
+ background: transparent;
+ }
+}
+
+/*============================================================================
+ Main nav links
+==============================================================================*/
+.marketing-nav__items {
+ float: left;
+
+ > li {
+ display: inline-block;
+ line-height: $nav-height - 1; // Full height causes overflow
+ }
+
+ .popover {
+ top: $nav-height - 15; // Better vertical spacing for popover menu
+
+ // Explicitly set for secondary nav if it differs from default base class (primary nav) behavior
+ @if ($nav-secondary-height != $nav-height) {
+ .marketing-nav__secondary & {
+ top: $nav-secondary-height - 15;
+ }
+ }
+ }
+}
+
+.marketing-nav__user {
+ position: absolute;
+ top: 0;
+ right: $gutter;
+
+ .marketing-nav__item {
+ padding-right: $gutter-half;
+ }
+
+ li:last-child .marketing-nav__item {
+ padding-right: 0;
+ }
+}
+
+.marketing-nav__item {
+ @include font-brandon-medium;
+ display: inline-block;
+ padding-left: $gutter-half;
+ color: $color-primary-nav-text;
+ font-size: em(16);
+
+ &:hover,
+ &:focus,
+ &.active {
+ color: $color-white;
+ }
+
+ &.popover__arrow {
+ padding-right: $gutter-half;
+ }
+
+ .marketing-nav__secondary & {
+ color: $color-black;
+ opacity: $nav-secondary-item-opacity;
+
+ @include shopify-breakpoint($tablet-up) {
+ color: $color-secondary-nav-text;
+ }
+
+ &:hover,
+ &:focus,
+ &.active {
+ opacity: 1;
+ }
+
+ li:first-child & {
+ padding-left: 0;
+ }
+ }
+}
+
+/*============================================================================
+ Nav CTA button
+==============================================================================*/
+.marketing-nav__button {
+ @extend .marketing-button;
+ @extend .marketing-button--small;
+ line-height: normal;
+
+ @include shopify-breakpoint($tablet-down) {
+ padding-left: em(14);
+ padding-right: em(14);
+ font-size: em(16);
+ }
+
+ @include shopify-breakpoint($mobile) {
+ margin-right: -20px;
+ }
+}
+
+/*============================================================================
+ Secondary navigation
+==============================================================================*/
+.marketing-nav__secondary {
+ border-bottom: 1px solid rgba($color-black, 0.15);
+ background: $color-secondary-nav-background;
+
+ @include shopify-breakpoint($tablet-up) {
+ // Need to remove left padding on first link
+ li:first-child > a {
+ padding-left: 0;
+ }
+
+ .marketing-nav__items {
+ // scss-lint:disable ImportantRule
+ // javascript sets display:none on when toggled on mobile
+ display: block !important;
+ // scss-lint:enable ImportantRule
+ }
+ }
+
+ @include shopify-breakpoint($mobile) {
+ .icon-caret-down {
+ background: transparent asset-svg-url(caret-down, $color-nav-icon) no-repeat right center;
+ position: absolute;
+ top: 50%;
+ right: $gutter-half;
+ transform: translateY(-50%);
+ }
+
+ .marketing-nav__items {
+ position: absolute;
+ background: $color-white;
+ width: 100%;
+ left: 0;
+ box-shadow: 0 2px 4px rgba($color-black, 0.1);
+ display: none;
+ z-index: 10;
+ }
+
+ .marketing-nav__item {
+ display: block;
+ border-bottom: $border-grey;
+ padding: 0 $gutter-half;
+ }
+
+ li {
+ display: block;
+ padding: 0 $gutter-half;
+
+ &:last-child .marketing-nav__item {
+ border-bottom: 0;
+ }
+ }
+ }
+
+ // By default, secondary nav inherits base class (primary nav) behavior.
+ // Explicitly set height on secondary nav if it differs from primary.
+ @if ($nav-secondary-height != $nav-height) {
+ height: $nav-secondary-height;
+
+ .marketing-nav__items > li {
+ line-height: $nav-secondary-height - 1;
+ }
+ }
+}
+
+.marketing-nav__secondary__button {
+ display: none;
+ width: 100%;
+ text-align: left;
+ line-height: $nav-secondary-height;
+ padding-left: $gutter;
+ margin-bottom: 0;
+ font-weight: $font-weight-semibold;
+
+ @include shopify-breakpoint($mobile) {
+ display: block;
+ }
+}
+
+.marketing-nav__secondary__action {
+ color: rgba($color-secondary-nav-text, $nav-secondary-item-opacity);
+}
+
+.marketing-nav__secondary__close {
+ display: none;
+ position: absolute;
+ right: $gutter-half;
+ line-height: $nav-secondary-height;
+ pointer-events: none;
+ top: -$nav-secondary-height + 1;
+
+ @include shopify-breakpoint($tablet-up) {
+ display: none;
+ }
+
+ .js-is-active & {
+ display: block;
+ }
+}
+
+/*============================================================================
+ Nav icons
+==============================================================================*/
+
+.marketing-nav__logo {
+ float: left;
+ margin-right: $gutter-half;
+}
+
+.marketing-nav__logo--full-color {
+ vertical-align: top;
+ margin-top: 10px;
+ width: $shopify-logo-width;
+ height: $shopify-logo-height;
+ background: asset-svg-url(shopify-full-color-white) no-repeat;
+
+ .marketing-nav__primary & {
+ @include shopify-breakpoint($tablet-down) {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ margin-top: 12px;
+ margin-left: -($shopify-logo-width / 2); // center icon by offset half its width
+ margin-right: 0;
+ background-position: center top;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ // bag only on mobile
+ background-image: asset-svg-url(shopify-full-color-bag);
+ margin-left: -(30px / 2);
+ width: 30px;
+ height: 30px;
+ }
+ }
+}
+
+.marketing-nav__hamburger {
+ display: none;
+ margin-top: 15px;
+ width: 24px;
+ height: 22px;
+ background-image: asset-svg-url(hamburger);
+
+ @include shopify-breakpoint($tablet-down) {
+ display: inline-block;
+ }
+}
+
+/*============================================================================
+ Skip Link
+==============================================================================*/
+.skip-to-main.focusable:focus {
+ @include font-brandon-regular;
+ position: absolute;
+ color: $color-white;
+ height: $nav-height;
+ line-height: $nav-height;
+ padding: 0 em(10);
+ background: $color-slate;
+ z-index: $z-nav-main + 11; // in front of the logo
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_padded-grid-box.scss b/docusaurus/v0/_sass/marketing_assets/modules/_padded-grid-box.scss
new file mode 100755
index 000000000..fbc298f4e
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_padded-grid-box.scss
@@ -0,0 +1,30 @@
+/*============================================================================
+ Padded grid box
+ Adds a 120px bleed to both sides of the grid
+==============================================================================*/
+
+$grid-padding: $column + $gutter;
+
+.padded-grid-box {
+ padding: $gutter * 1.5 $gutter $gutter;
+ margin: 0 (-$gutter);
+ background: rgba($color-black, 0.7);
+
+ @include shopify-breakpoint($desktop-up) {
+ padding-left: $grid-padding;
+ padding-right: $grid-padding;
+
+ // Need to account for page-width padding (30px)
+ margin: 0 (-$grid-padding + $gutter) 0 (-$grid-padding);
+ }
+
+ @include shopify-breakpoint($tablet-down) {
+ background: none;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ position: static;
+ max-width: 100%;
+ margin: 0;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_page-blocks.scss b/docusaurus/v0/_sass/marketing_assets/modules/_page-blocks.scss
new file mode 100755
index 000000000..c19695473
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_page-blocks.scss
@@ -0,0 +1,62 @@
+/*
+ Full-width background sections with color or background images
+ These are intented for large full-width sections with a single background-color. Includes vertical padding.
+
+ .page-block - default with vertical padding
+ .page-block--white - with white background
+ .page-block--lowlight - dark section, headings are white if class="lowlight__heading" added
+ .page-block--light - light grey section
+ .page-block--image - block with large bg image applied, shared image styles included. block-specific image to be included separately
+ .page-block--border-top - adds light grey 1px border to top
+
+ Styleguide Page Blocks.
+*/
+.page-block {
+ @include marketing-bg-colors;
+ @include marketing-borders;
+ padding: em($gutter * 3) 0;
+ border-color: $color-grey-border-on--white;
+
+ @include shopify-breakpoint($mobile) {
+ padding: em($gutter * 2) 0;
+ }
+}
+
+/*================ Slate BG Color ================*/
+.page-block--lowlight {
+
+ .section-heading {
+ > h1,
+ > h2 {
+ color: $color-white;
+ }
+ }
+
+ //this needs to be in here for cases of page-block--lowlight also inside a segment bg
+ .lowlight__heading {
+ > p:before {
+ background-color: $color-grey-heading;
+ }
+ }
+}
+
+/*================ Sand BG page block ================*/
+.page-block--sand {
+ // For better contrast
+ .section-heading__subhead {
+ color: $color-grey-body;
+ }
+}
+
+/*================ Blocks with BG images ================*/
+.page-block--image {
+ background-position: top center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+
+ > .page-width {
+ height: 100%;
+ z-index: 1;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_page-header.scss b/docusaurus/v0/_sass/marketing_assets/modules/_page-header.scss
new file mode 100755
index 000000000..d763378d2
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_page-header.scss
@@ -0,0 +1,36 @@
+.page-header {
+ @extend .heading-container;
+ padding: em($gutter * 2) 0;
+
+ .page--has-transparent-nav--primary & {
+ @include shopify-breakpoint($desktop-up) {
+ padding-top: em($nav-height + $gutter);
+ }
+ }
+}
+
+.page-header--flush {
+ padding-bottom: 0;
+}
+
+.page-header--horizon {
+ padding-bottom: 0;
+ margin-bottom: em($gutter * 2);
+
+ img {
+ margin-bottom: em(-$gutter);
+
+ @include shopify-breakpoint($tablet-up) {
+ margin-bottom: em(-$gutter * 2);
+ }
+ }
+}
+
+.page-header__cta {
+ background: rgba($color-black, 0.25);
+}
+
+.page-header--video {
+ position: relative;
+ overflow: hidden;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_paginated-carousel.scss b/docusaurus/v0/_sass/marketing_assets/modules/_paginated-carousel.scss
new file mode 100755
index 000000000..055421044
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_paginated-carousel.scss
@@ -0,0 +1,75 @@
+$carousel-icons: (
+ caret-right,
+ caret-left
+);
+
+@include generate-icon-classes($carousel-icons);
+
+.paginated-carousel {
+ position: relative;
+
+ .carousel-item {
+ position: relative;
+
+ @include shopify-breakpoint($mobile) {
+ position: absolute;
+ top: 0;
+ display: none;
+ float: none;
+ width: auto;
+ margin-right: 0;
+ opacity: 0;
+ transform: translateX(50px);
+ transition: all 300ms ease;
+
+ &.js-is-active {
+ position: static;
+ display: block;
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
+ }
+
+ .carousel-nav {
+ opacity: 0;
+ transition: opacity 300ms ease;
+
+ .js-is-loaded & {
+ opacity: 1;
+ }
+ }
+
+ .carousel-nav-items {
+ text-align: center;
+ }
+
+ .carousel-nav-item {
+ width: em(13);
+ height: em(13);
+ margin: 0 em(4);
+ line-height: em(20);
+ vertical-align: middle;
+ background-color: $color-grey-text--light;
+ border-radius: 50%;
+
+ &.js-is-active {
+ background: $color-black;
+ }
+ }
+
+ .carousel-arrow-left,
+ .carousel-arrow-right {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .carousel-arrow-left {
+ left: 0;
+ }
+
+ .carousel-arrow-right {
+ right: 0;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_picture.scss b/docusaurus/v0/_sass/marketing_assets/modules/_picture.scss
new file mode 100755
index 000000000..9ec6b28d5
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_picture.scss
@@ -0,0 +1,16 @@
+img {
+ max-width: 100%;
+
+ a & {
+ border: 0; // IE fix
+ }
+
+ &[data-srcset] {
+ opacity: 0;
+ transition: opacity 200ms linear;
+
+ &.lazyloaded {
+ opacity: 1;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_popover.scss b/docusaurus/v0/_sass/marketing_assets/modules/_popover.scss
new file mode 100755
index 000000000..d7b83bc98
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_popover.scss
@@ -0,0 +1,219 @@
+$popover-width: em(220);
+$popover-arrow-width: 10px; // In px to avoid rounding errors with ems
+$color-slate--transparent: rgba($color-slate, 0.95);
+
+.popover-wrapper {
+ position: relative;
+ cursor: pointer;
+ display: inline-block;
+
+ &.js-is-active {
+ .popover {
+ display: block;
+ opacity: 1;
+ }
+ }
+}
+
+.popover {
+ position: absolute;
+ z-index: $z-popover;
+ display: none;
+ opacity: 0;
+ width: $popover-width;
+ text-align: left;
+ background-clip: padding-box;
+ transition: opacity 300ms ease-in-out;
+
+ @include shopify-breakpoint($mobile) {
+ transform: translate(-50%, -100%);
+ top: -$popover-arrow-width;
+ left: 50%;
+
+ &::after {
+ left: 50%;
+ border-bottom-width: 0;
+ margin-left: -$popover-arrow-width;
+ }
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border: transparent solid $popover-arrow-width;
+ }
+}
+
+.popover--top {
+ @include shopify-breakpoint($tablet-up) {
+ transform: translateY(-50%, -100%);
+ top: -$popover-arrow-width;
+ left: 50%;
+
+ &::after {
+ left: 50%;
+ border-bottom-width: 0;
+ border-top-color: $color-white;
+ margin-left: -$popover-arrow-width;
+ }
+ }
+}
+
+.popover--right {
+ @include shopify-breakpoint($tablet-up) {
+ left: 100%;
+ top: 50%;
+ margin-left: $popover-arrow-width * 2;
+ transform: translateY(-50%);
+
+ &::after {
+ top: 50%;
+ border-left-width: 0;
+ border-right-color: $color-white;
+ bottom: -$popover-arrow-width;
+ left: -$popover-arrow-width;
+ margin-top: -$popover-arrow-width;
+ }
+ }
+}
+
+.popover--left {
+ @include shopify-breakpoint($tablet-up) {
+ right: 100%;
+ top: 50%;
+ margin-right: $popover-arrow-width * 2;
+ transform: translateY(-50%);
+
+ &::after {
+ top: 50%;
+ border-right-width: 0;
+ border-left-color: $color-white;
+ right: -$popover-arrow-width;
+ bottom: -$popover-arrow-width;
+ margin-top: -$popover-arrow-width;
+ }
+ }
+}
+
+.popover--bottom {
+ @include shopify-breakpoint($tablet-up) {
+ left: 50%;
+ margin-top: $popover-arrow-width;
+ transform: translateX(-50%);
+
+ &::after {
+ left: 50%;
+ border-top-width: 0;
+ border-bottom-color: $color-white;
+ top: -$popover-arrow-width;
+ margin-left: -$popover-arrow-width;
+ }
+ }
+}
+
+
+.popover-wrapper--dark {
+ .popover {
+ &::after {
+ @include shopify-breakpoint($mobile) {
+ border-top-color: $color-slate--transparent;
+ }
+ }
+ }
+
+ .popover--top {
+ &::after {
+ @include shopify-breakpoint($tablet-up) {
+ border-top-color: $color-slate--transparent;
+ }
+ }
+ }
+
+ .popover--right {
+ &::after {
+ @include shopify-breakpoint($tablet-up) {
+ border-right-color: $color-slate--transparent;
+ }
+ }
+ }
+
+ .popover--bottom {
+ &::after {
+ @include shopify-breakpoint($tablet-up) {
+ border-bottom-color: $color-slate--transparent;
+ }
+ }
+ }
+
+ .popover--left {
+ &::after {
+ @include shopify-breakpoint($tablet-up) {
+ border-left-color: $color-slate--transparent;
+ }
+ }
+ }
+
+ .popover-content {
+ background-color: $color-slate--transparent;
+ color: $color-white;
+ }
+}
+
+.popover-content {
+ background-color: $color-white;
+ padding: em(8) em(10);
+ border-radius: $border-radius;
+ box-shadow: 0 0 em(2) em(1) rgba($color-grey-body, 0.4);
+
+ .popover-dropdown & {
+ padding: em($gutter / 2) em($gutter);
+
+ li {
+ display: block;
+ line-height: em(16);
+ }
+
+ a {
+ display: block;
+ position: relative;
+ color: $color-grey-body;
+ padding: em(10) 0;
+
+ &:hover,
+ &:focus,
+ &.active {
+ color: $color-black;
+ }
+ }
+ }
+}
+
+.popover-dropdown {
+ .popover__arrow {
+ &::after {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ margin-top: em(-3);
+ width: $popover-arrow-width;
+ height: em(12);
+ content: '';
+ background-image: asset-svg-url(caret-down, $color-nav-icon);
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ }
+ }
+
+ &.js-is-active {
+ .popover__arrow {
+ color: $color-white;
+
+ &::after {
+ background-image: asset-svg-url(caret-down, $color-white);
+ }
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_responsive-svg.scss b/docusaurus/v0/_sass/marketing_assets/modules/_responsive-svg.scss
new file mode 100755
index 000000000..21a4e381d
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_responsive-svg.scss
@@ -0,0 +1,12 @@
+.responsive-svg {
+ height: 0;
+ position: relative;
+
+ svg {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_section-block.scss b/docusaurus/v0/_sass/marketing_assets/modules/_section-block.scss
new file mode 100755
index 000000000..d4cc6d3cb
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_section-block.scss
@@ -0,0 +1,42 @@
+/*
+ Stackable sections with vertical padding.
+ Intended to separate content sections within a .page-block.
+ When nested directly within .page-width, first section will have top-padding removed, last section will have bottom-padding removed.
+ Page block vs. Section block:
+ More padding: page-block
+ half that much padding: section-block
+ Both can set block color, but should be set on parent page-block when possible.
+ Standard usage will look lke .page-block > .page-width > .section-block + .section-block
+
+ .section-block - default with padding bottom and top
+ .section-block--border-top - adds light grey 1px border to top
+ .section-block--white - white background
+ .section-block--light - light grey background
+ .section-block--lowlight - slate gray background with white text
+
+ Styleguide Section Blocks.
+
+*/
+
+.section-block {
+ @include marketing-borders;
+ @include marketing-bg-colors;
+ padding-top: em($gutter * 1.5);
+ padding-bottom: em($gutter * 1.5);
+ border-color: $color-grey-border-on--white;
+
+ @include shopify-breakpoint($mobile) {
+ padding-top: em($gutter);
+ padding-bottom: em($gutter);
+ }
+}
+
+.page-width {
+ .section-block:first-child:not(:only-child) {
+ padding-top: 0;
+ }
+
+ .section-block:last-child:not(:only-child) {
+ padding-bottom: 0;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_section-heading.scss b/docusaurus/v0/_sass/marketing_assets/modules/_section-heading.scss
new file mode 100755
index 000000000..13778087a
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_section-heading.scss
@@ -0,0 +1,58 @@
+.section-heading__flair {
+ @include section-heading-dash(-16px); // Gutter / 2 plus 1 for visual center
+}
+
+.section-heading {
+ margin-bottom: em($gutter);
+ text-align: center;
+
+ &.section-heading__flair {
+ &:before {
+ top: auto;
+ bottom: -16px; // Gutter / 2 plus 1 for visual center
+ }
+ }
+}
+
+.section-heading__heading {
+ margin-bottom: $gutter; // To ensure flair remains centered on all devices
+}
+
+.section-heading__subhead {
+ color: $color-grey-heading;
+}
+
+.section-heading--flairless {
+ .section-heading__heading {
+ margin-bottom: em(5);
+ }
+
+ .section-heading__flair:before {
+ display: none;
+ }
+}
+
+.section-heading--lowlight {
+ .section-heading__heading,
+ .section-heading__subhead {
+ color: $color-white;
+ }
+
+ .section-heading__flair:before,
+ &.section-heading__flair:before {
+ background: $color-white;
+ }
+}
+
+.section-heading--left {
+ @include shopify-breakpoint($tablet-up) {
+ margin-bottom: 0;
+ text-align: left;
+
+ .section-heading__flair:before,
+ &.section-heading__flair:before {
+ left: 0;
+ margin-left: 0;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_segment-colors.scss b/docusaurus/v0/_sass/marketing_assets/modules/_segment-colors.scss
new file mode 100755
index 000000000..9c0eef0b4
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_segment-colors.scss
@@ -0,0 +1,86 @@
+// To distinguish our segments, headers, links and block quotes, are highlighted.
+// If a whole page belongs to a segment, a body class is applied
+// within the wrapper, add apply class="segment-" to that element
+// eg .segment-link inside .segment-pos will inherit the segment color.
+// Outside of segment pages, elements can be highlighted using
+// segment--elem
+//
+// Styleguide Segment Colors.
+
+/*============================================================================
+ Segment Colors
+
+ Before adding another segment colour, please read and consider the thread
+ on this PR: https://github.com/Shopify/marketing_assets/pull/649
+==============================================================================*/
+$segments: (
+ online: $color-yellow,
+ everywhere: $color-green,
+ pos: $color-blue,
+ facebook: $color-blue-fb,
+ pinterest: $color-red-pinterest,
+ twitter: $color-blue-twitter
+);
+
+@each $segment, $color in $segments {
+ .segment-#{$segment}-heading {
+ color: $color;
+ }
+
+ .segment-#{$segment}-link {
+ color: $color;
+
+ &:hover {
+ color: darken($color, 6%);
+ }
+
+ &:active,
+ &:focus {
+ color: darken($color, 8%);
+ }
+ }
+
+ .segment-#{$segment}-button {
+ background-color: $color;
+
+ &:hover {
+ background-color: darken($color, 6%);
+ }
+
+ &:active,
+ &:focus {
+ background-color: darken($color, 8%);
+ }
+ }
+
+ // scss-lint:disable ImportantRule
+ .segment-#{$segment}-flair {
+ &:before {
+ background-color: $color !important;
+ }
+ }
+ // scss-lint:enable ImportantRule
+
+ .segment-#{$segment} {
+ .segment-quote {
+ border-color: $color;
+ }
+
+ .segment-heading {
+ @extend .segment-#{$segment}-heading;
+ }
+
+ .segment-link {
+ @extend .segment-#{$segment}-link;
+ }
+
+ .section-heading__flair:before,
+ .segment-block {
+ background-color: $color;
+ }
+
+ .segment-button {
+ @extend .segment-#{$segment}-button;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_signup.scss b/docusaurus/v0/_sass/marketing_assets/modules/_signup.scss
new file mode 100755
index 000000000..e43f5bd71
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_signup.scss
@@ -0,0 +1,27 @@
+// one-off exception to 8-column grid, not to be abused!
+.signup-grid-3 {
+ @include shopify-breakpoint($tablet-up) {
+ @include span-columns(3 of 12);
+ }
+}
+
+.signup-modal__content {
+ width: 100%;
+
+ @include shopify-breakpoint($desktop-up) {
+ max-width: 50%;
+ margin: 0 auto;
+ }
+
+ .marketing-form__button {
+ float: right;
+ }
+}
+
+body > .signup--hidden {
+ display: none;
+}
+
+.subdomain {
+ position: relative;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_slider.scss b/docusaurus/v0/_sass/marketing_assets/modules/_slider.scss
new file mode 100755
index 000000000..bf1ad8aeb
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_slider.scss
@@ -0,0 +1,78 @@
+.slider__wrapper {
+ position: relative;
+}
+
+.slider__window {
+ overflow: hidden;
+}
+
+.slider {
+ position: relative;
+ height: 0;
+ left: 0;
+ opacity: 0;
+ transform: translateZ(0);
+ transition: all 0.5s cubic-bezier(0.42, 0, 1, 1);
+
+ &.js-is-active {
+ opacity: 1;
+ }
+}
+
+.slider__item {
+ display: block;
+ position: absolute;
+ top: 0;
+ width: 100%;
+
+ img {
+ max-width: 100%;
+ }
+}
+
+.slider__arrow {
+ position: absolute;
+ top: 50%;
+ border-radius: $border-radius;
+ padding: 16px 18px;
+ width: 65px;
+ text-indent: -9999px;
+ background-color: $color-black;
+ background-size: 24px 19px;
+ background-repeat: no-repeat;
+ background-position: center;
+ transform: translateY(-50%);
+
+ @include shopify-breakpoint($mobile) {
+ display: none;
+ }
+}
+
+.slider__arrow--left {
+ left: -15px;
+ background-image: asset-svg-url(arrow-left, $color-white);
+}
+
+.slider__arrow--right {
+ right: -15px;
+ background-image: asset-svg-url(arrow-right, $color-white);
+}
+
+.slider__pagination {
+ text-align: center;
+ margin-top: 5px;
+}
+
+.slider__pagination__item {
+ transition: background-color 0.2s;
+ width: 30px;
+ height: 3px;
+ background: $color-grey-text--light;
+ display: inline-block;
+ margin: 0 10px;
+ cursor: pointer;
+
+ &.js-is-active {
+ background: $color-black;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_social-icons.scss b/docusaurus/v0/_sass/marketing_assets/modules/_social-icons.scss
new file mode 100755
index 000000000..1d646581b
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_social-icons.scss
@@ -0,0 +1,12 @@
+$social-icons: (
+ social-facebook,
+ social-instagram,
+ social-linkedin,
+ social-pinterest,
+ social-twitter,
+ social-youtube,
+ social-plus
+);
+
+@include generate-icon-classes($social-icons);
+
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_stateful-form.scss b/docusaurus/v0/_sass/marketing_assets/modules/_stateful-form.scss
new file mode 100755
index 000000000..96627785f
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_stateful-form.scss
@@ -0,0 +1,251 @@
+// scss-lint:disable ImportantRule
+$validated-form-input-height: $gutter * 2;
+
+.stateful-form {
+ .marketing-input-wrapper {
+ border: 1px solid $color-input-border;
+ border-radius: $border-radius;
+ background: $color-white;
+
+ &::before,
+ &::after {
+ opacity: 0;
+ right: em(20);
+ content: '';
+ position: absolute;
+ top: em($gutter);
+ z-index: 3;
+ background-size: cover;
+ }
+
+ // :before is used for the error X and success checkmark
+ &::before {
+ transition: opacity 0.4s;
+ }
+
+ // :after is used for the checking spinner
+ &::after {
+ @include spinner($color: $color-grey-body, $size: 18px);
+ left: auto;
+ animation-duration: 0.5s;
+ top: em($gutter);
+ }
+ }
+
+ // Edge shows an X at the right side of input to provide an option to clear
+ // the input. We should hide this to prevent overlap with our X.
+ .marketing-input::-ms-clear {
+ display: none;
+ }
+
+ .js-has-error {
+ border-color: $color-red !important;
+
+ &::before {
+ background-image: asset-svg-url(caution, $color-red);
+ opacity: 1;
+ width: 21px;
+ height: 18px;
+ margin-top: em(-8);
+ }
+
+ &::after {
+ opacity: 0;
+ }
+ }
+
+ .js-has-success {
+ border-color: $color-green !important;
+
+ &::before {
+ margin-top: em(-13);
+ background-image: asset-svg-url(checked, $color-green);
+ opacity: 1;
+ width: em(24, 14);
+ height: em(24, 14);
+ margin-right: em(-5);
+ }
+
+ &::after {
+ opacity: 0;
+ }
+ }
+
+ .js-has-suggestion {
+ border-color: $color-blue-dark !important;
+
+ &::before {
+ display: none;
+ }
+ }
+
+ .js-is-pending {
+ border-color: $color-grey-body !important;
+
+ &::after {
+ @include transition(opacity 0.2s);
+ opacity: 1;
+ }
+
+ &::before {
+ opacity: 0;
+ }
+ }
+
+ .marketing-input {
+ position: relative;
+ height: $validated-form-input-height;
+ z-index: 2;
+ border: 0 !important;
+ padding: 24px em(16, 18) em(8, 18) 20px;
+
+ &:focus {
+ outline: 0;
+ border: 0;
+ }
+ }
+
+ .marketing-form__button {
+ height: $validated-form-input-height + 2; // 2px = total border height
+ }
+
+ .js-is-focused {
+ border-color: $color-input-focus;
+
+ .marketing-input {
+ outline: 0;
+ }
+ }
+
+ .js-is-hidden {
+ display: none;
+ }
+
+ .marketing-label {
+ @include force-3d();
+ @include font-brandon-regular;
+ backface-visibility: hidden;
+ position: absolute;
+ font-size: em(18, 16);
+ left: 20px;
+ top: 30px;
+ color: $color-grey-body;
+ text-transform: none;
+ z-index: 10;
+ cursor: text;
+ transform: translateY(-50%);
+
+ @include shopify-breakpoint($tablet-up) {
+ transition: all 200ms ease;
+ }
+ }
+
+ .js-is-focused,
+ .js-is-filled {
+ .marketing-label {
+ font-size: em(14, 18);
+ transform: translateY(-20px);
+ }
+ }
+
+ .error {
+ color: $color-red;
+ }
+
+ .marketing-form__messages {
+ font-size: em(16);
+ max-height: 0;
+ overflow: hidden;
+ display: block;
+
+ @include shopify-breakpoint($tablet-up) {
+ transition: all 0.3s;
+ }
+
+ .error,
+ .success {
+ display: block;
+ font-size: em(14);
+ padding: em(10, 14) em(10, 14) em(10, 14) em(20, 14);
+ border-radius: 0 0 $border-radius $border-radius;
+ position: relative;
+ min-height: em(37, 14);
+ background: lighten($color-red, 50%);
+
+ &.hide {
+ display: none;
+ }
+ }
+
+ .success {
+ background: $color-grey-border-on--white;
+ color: $color-slate;
+ }
+ }
+
+ // scss-lint:disable MergeableSelector SelectorDepth
+ .js-has-error,
+ .js-has-success {
+ .marketing-form__messages {
+ max-height: $gutter * 3; // for animating
+
+ @include shopify-breakpoint($tablet-up) {
+ transition: all 0.6s;
+ }
+
+ .error::before {
+ display: block;
+ }
+ }
+ }
+
+ .js-has-success:not(.js-has-error) {
+ .marketing-form__messages {
+ max-height: 37px;
+ }
+ }
+
+ .js-is-pending {
+ .marketing-form__messages {
+ max-height: 0;
+
+ @include shopify-breakpoint($tablet-up) {
+ transition: all 0.3s;
+ }
+ }
+ }
+}
+
+.input-mirror {
+ @include font-brandon-regular;
+ font-size: em(18);
+ top: 27px;
+ left: 22px;
+ position: absolute;
+ background: $color-white;
+ color: $color-grey-text--light;
+
+ &::after {
+ content: '.myshopify.com';
+ position: relative;
+ z-index: 101;
+ padding-left: 3px;
+ pointer-events: none;
+ }
+
+ &.hide::after {
+ display: none;
+ }
+}
+
+.subdomain {
+ overflow: hidden;
+
+ .suggest {
+ display: block;
+
+ &.hide {
+ display: none;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_sticky-menu.scss b/docusaurus/v0/_sass/marketing_assets/modules/_sticky-menu.scss
new file mode 100755
index 000000000..6fdc8beba
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_sticky-menu.scss
@@ -0,0 +1,35 @@
+/*============================================================================
+ Sticky Behavior
+==============================================================================*/
+.js-is-sticky-init {
+ @include shopify-breakpoint($tablet-up) {
+ .sticky-menu-content {
+ float: right;
+ }
+ }
+}
+
+.js-is-sticky-container {
+ .sticky-menu {
+ position: fixed;
+ top: 0;
+ }
+}
+
+.js-is-abs-container {
+ .sticky-menu {
+ position: absolute;
+ bottom: 0;
+ top: auto;
+
+ @include shopify-breakpoint($desktop-up) {
+ .page--has-secondary-nav & {
+ top: auto;
+ }
+ }
+ }
+
+ .in-page-menu {
+ margin-bottom: 0;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_tabbed-carousel-nav.scss b/docusaurus/v0/_sass/marketing_assets/modules/_tabbed-carousel-nav.scss
new file mode 100755
index 000000000..04807a3bb
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_tabbed-carousel-nav.scss
@@ -0,0 +1,107 @@
+$carousel-nav-height: 100px;
+
+.tabbed-carousel__nav {
+ position: relative;
+ z-index: 3;
+ height: $carousel-nav-height;
+ border: 1px solid $color-grey-border-on--white;
+ border-radius: $border-radius;
+
+ @include shopify-breakpoint($mobile) {
+ display: none;
+ }
+
+ &.grid-container--thirds {
+ .tabbed-carousel__nav-item {
+ width: 33.33%;
+ }
+ }
+}
+
+.tabbed-carousel__nav-item {
+ @include font-brandon-medium;
+ user-select: none;
+ position: relative;
+ display: inline-block;
+ height: 98px; // Total height of 100px, with a top and bottom 1px border
+ width: 25%;
+ float: left;
+ padding-top: $gutter / 2;
+ background-color: $color-sky--light;
+ text-align: center;
+ transition: color 300ms ease, background-color 300ms ease;
+
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 0;
+ height: 0;
+ border-top: 49px solid transparent;
+ border-left-width: 24px;
+ border-left-style: solid;
+ border-left: 24px solid $color-grey-border-on--white;
+ border-bottom: 49px solid transparent;
+ transition: border-color 300ms ease;
+ }
+
+ &:before {
+ border-left-color: $color-grey-border-on--white;
+ }
+
+ &:after {
+ left: -1px;
+ border-left-color: $color-sky--light;
+ }
+
+ &:first-child {
+ padding-left: 0;
+
+ &:before,
+ &:after {
+ display: none;
+ }
+ }
+
+ .icon {
+ display: block;
+ margin: 0 auto 10px;
+ fill: $color-grey-text--light;
+ }
+
+ &:focus,
+ &:hover,
+ &.js-is-active {
+ background: $color-white;
+
+ .icon {
+ .segment-online & {
+ fill: $color-yellow;
+ }
+
+ .segment-pos & {
+ fill: $color-blue;
+ }
+
+ .segment-mobile &,
+ .segment-everywhere & {
+ fill: $color-green;
+ }
+ }
+
+ + .tabbed-carousel__nav-item:after {
+ border-left-color: $color-white;
+ }
+ }
+
+ &.js-is-active {
+ color: $color-black;
+ }
+
+ &:focus {
+ outline: none;
+ border-bottom: solid 1px;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_tabbed-carousel.scss b/docusaurus/v0/_sass/marketing_assets/modules/_tabbed-carousel.scss
new file mode 100755
index 000000000..0cf2b55e8
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_tabbed-carousel.scss
@@ -0,0 +1,267 @@
+// Tabbed Carousel
+// Carousel with tab-like menu, plus arrows to advance at FULL desktop only
+//
+// Contains Image + text. Utilize media classes to position content and images.
+//
+// .tabbed-carousel - default style, fixed height set in CSS
+// .tabbed-carousel.page-block--lowlight - dark carousel
+// .tabbed-carousel__items - list of slides
+// .tabbed-carousel__item - child of list, single slide
+// .tabbed-carousel__item-header - slide header
+// .tabbed-carousel__item-text - slide text
+// .tabbed-carousel__item-image - slide image, extends to wide grid and gracefully gets cut
+//
+// Styleguide Tabbed Carousel.
+
+/*================ Tabbed carousel dark variant ================*/
+.tabbed-carousel.page-block--lowlight {
+
+ .tabbed-carousel__nav {
+ border-color: $color-grey-text--light;
+ }
+
+ .tabbed-carousel__nav-item {
+ background-color: $color-slate--dark;
+ color: $color-grey-text--light;
+
+ &:before {
+ border-left-color: $color-grey-text--light;
+ }
+
+ &:after {
+ border-left-color: $color-slate--dark;
+ }
+
+ &:focus,
+ &:hover,
+ &.js-is-active {
+ background: $color-slate;
+ color: $color-white;
+
+ + .tabbed-carousel__nav-item:after {
+ border-left-color: $color-slate;
+ }
+ }
+ }
+
+ .tabbed-carousel__item-text {
+ h4 {
+ color: $color-white;
+ }
+ }
+}
+
+/*============================================================================
+ Tabbed carousel items
+==============================================================================*/
+
+/*================ Transitions ================*/
+.tabbed-carousel__item {
+ transition: opacity 300ms ease 0s;
+
+ @include shopify-breakpoint($tablet-up) {
+ @include clearfix;
+ opacity: 0;
+ z-index: 0;
+ display: none;
+
+ .tabbed-carousel__item-header {
+ opacity: 0;
+ transition: opacity 300ms ease 300ms, transform 500ms ease 300ms;
+ transform: translateY(30px);
+ }
+
+ .tabbed-carousel__item-text {
+ opacity: 0;
+ transition: opacity 300ms ease 400ms, transform 500ms ease 400ms;
+ transform: translateY(30px);
+ }
+
+ .tabbed-carousel__item-image {
+ opacity: 0;
+ transition: opacity 500ms ease 500ms;
+ transition-property: opacity, transform;
+ transform: translateX(20px);
+ }
+
+ &.js-is-active {
+ opacity: 1;
+ z-index: 1;
+ display: block;
+
+ .tabbed-carousel__item-text {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .tabbed-carousel__item-header {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .tabbed-carousel__item-image {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
+ }
+
+ /*================ Mobile ================*/
+ @include shopify-breakpoint($mobile) {
+ padding: 15px 0 10px;
+ margin-bottom: 0;
+ border-top: 1px solid $color-grey-border-on--white;
+
+ .tabbed-carousel__item-header {
+ padding-right: 20px;
+ margin-bottom: 5px;
+ }
+ }
+}
+
+.segment-online {
+ .tabbed-carousel__nav-item {
+ &:focus {
+ border-bottom: solid 1px $color-yellow;
+ }
+ }
+}
+
+.segment-pos {
+ .tabbed-carousel__nav-item {
+ &:focus {
+ border-bottom: solid 1px $color-blue;
+ }
+ }
+}
+
+.segment-mobile {
+ .tabbed-carousel__nav-item {
+ &:focus {
+ border-bottom: solid 1px $color-green;
+ }
+ }
+}
+
+/*============================================================================
+ Tabbed carousel item content
+==============================================================================*/
+.tabbed-carousel__item-image {
+ z-index: 1;
+}
+
+.tabbed-carousel__item-content {
+ z-index: 2;
+}
+
+.tabbed-carousel__mobile-image {
+ margin: em($gutter) 0;
+}
+
+.tabbed-carousel__item-text {
+ @include shopify-breakpoint($mobile) {
+ padding-top: em(10);
+ }
+
+ > p {
+ margin-bottom: em(25);
+
+ &:last-child {
+ margin-bottom: em(15);
+ }
+ }
+}
+
+/*============================================================================
+ Tabbed carousel nav arrows
+==============================================================================*/
+
+// Places the arrows just outside of the wide container
+$carousel-arrow-offset: -($grid-extendor) - 10;
+
+%tabbed-carousel-nav-arrow {
+ content: '';
+ position: absolute;
+ top: 50%;
+ max-width: 64px;
+ min-width: 64px;
+ height: 50px;
+ margin-top: -25px;
+ z-index: 2;
+ background: $color-black;
+ border-radius: $border-radius;
+ padding: 16px 18px;
+ overflow: hidden;
+ white-space: nowrap;
+ transition: max-width 333ms;
+
+ &:before {
+ width: 24px;
+ height: 11px;
+ display: block;
+ position: absolute;
+ top: 20px;
+ content: '';
+ }
+
+ &:focus,
+ &:hover {
+ max-width: 200px;
+
+ .tab-label {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ }
+
+ .tab-label {
+ @include font-brandon-black;
+ pointer-events: none;
+ display: inline-block;
+ opacity: 0;
+ color: $color-white;
+ font-size: em(12);
+ text-transform: uppercase;
+ transition: opacity 300ms, transform 300ms;
+ }
+}
+
+.tabbed-carousel__nav-prev {
+ @extend %tabbed-carousel-nav-arrow;
+ display: none;
+
+ @include shopify-breakpoint($wide) {
+ display: inline-block;
+ left: $carousel-arrow-offset;
+ }
+
+ &:before {
+ background-image: asset-svg-url('arrow-left');
+ left: 18px;
+ }
+
+ > span {
+ padding-left: 32px;
+ transform: translateX(100%);
+ }
+}
+
+.tabbed-carousel__nav-next {
+ @extend %tabbed-carousel-nav-arrow;
+ display: none;
+
+ @include shopify-breakpoint($wide) {
+ display: block;
+ right: $carousel-arrow-offset;
+ }
+
+ &:before {
+ background-image: asset-svg-url('arrow-right');
+ right: 18px;
+ }
+
+ > span {
+ padding-right: 32px;
+ transform: translateX(-100%);
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_video.scss b/docusaurus/v0/_sass/marketing_assets/modules/_video.scss
new file mode 100755
index 000000000..b22b57ffa
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_video.scss
@@ -0,0 +1,49 @@
+.background-video,
+.background-video--fallback {
+ opacity: 0;
+ visibility: hidden;
+ z-index: -1;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ min-height: 100%;
+ min-width: 100%;
+ max-width: none;
+ overflow: hidden;
+ transition: opacity 1s ease-in;
+ transform: translateX(-50%);
+
+ @include shopify-breakpoint($mobile) {
+ min-width: 0;
+ min-height: 0;
+ height: 100%;
+ opacity: 1;
+ }
+
+ &.js-is-active {
+ opacity: 1;
+ visibility: visible;
+ z-index: 0;
+ }
+}
+
+.inline-video,
+.inline-video--fallback {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
+.responsive-video-wrapper {
+ position: relative;
+ height: 0;
+ padding-top: 56.25%; // 16:9 aspect ratio
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/_window-loaded.scss b/docusaurus/v0/_sass/marketing_assets/modules/_window-loaded.scss
new file mode 100755
index 000000000..92fae09c6
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/_window-loaded.scss
@@ -0,0 +1,8 @@
+.js-window-loading {
+ opacity: 0;
+ transition: opacity 300ms ease-in-out;
+
+ .js-is-loaded & {
+ opacity: 1;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_about-author.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_about-author.scss
new file mode 100755
index 000000000..18bf908d7
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_about-author.scss
@@ -0,0 +1,17 @@
+.about-author {
+ @include clearfix();
+ margin-bottom: em(20);
+
+ + .about-author {
+ padding-top: em($gutter);
+ border-top: $border-grey;
+ }
+}
+
+.about-author__image {
+ float: left;
+}
+
+.about-author__content {
+ margin-left: em(90 + 20); // Image width plus 20px gutter
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_article-meta.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_article-meta.scss
new file mode 100755
index 000000000..b6031df19
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_article-meta.scss
@@ -0,0 +1,54 @@
+.article__meta {
+ @include font-brandon-regular;
+ margin-bottom: em(5, 13);
+ font-size: em(13);
+
+ > li {
+ position: relative;
+ display: inline-block;
+ margin-right: $gutter / 2;
+
+ &:after {
+ content: '';
+ position: absolute;
+ right: -16px;
+ top: 50%;
+ margin: -1px 5px 0; // Visual vertical center
+ width: 4px;
+ height: 4px;
+ border-radius: 2px;
+ background-color: $color-sky;
+ }
+
+ &:last-child:after {
+ display: none;
+ }
+ }
+
+ a {
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+}
+
+.article__meta__twitter {
+ width: 20px;
+ height: 20px;
+ margin-bottom: 0;
+ vertical-align: top;
+ background-image: asset-svg-url('twitter', $color-grey-body);
+ opacity: 0.8;
+ transition: opacity 300ms ease;
+
+ &:hover,
+ &:focus {
+ opacity: 1;
+ }
+}
+
+.article__meta--primary {
+ @include font-brandon-bold;
+ font-size: em(14);
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_article.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_article.scss
new file mode 100755
index 000000000..b6a2b1778
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_article.scss
@@ -0,0 +1,110 @@
+//==============================================================================
+// Article show
+//==============================================================================
+
+.article__title {
+ margin-bottom: em(20, 42);
+ padding-bottom: em(20, 42);
+ border-bottom: $border-grey;
+
+ @include shopify-breakpoint($tablet-up) {
+ margin-top: em($gutter / 2, 42);
+ }
+}
+
+.article__header {
+ @include clearfix;
+ margin-bottom: 20px;
+
+ .article__meta {
+ @include shopify-breakpoint($tablet-up) {
+ float: left;
+ line-height: em(25);
+ }
+ }
+}
+
+.article__header__heading {
+ float: left;
+}
+
+.article__image--featured {
+ margin-bottom: em($gutter);
+
+ @include shopify-breakpoint($mobile) {
+ margin-left: -$gutter;
+ margin-right: -$gutter;
+ }
+
+ > img {
+ width: 100%;
+ }
+}
+
+//==============================================================================
+// Article index
+//==============================================================================
+
+.article--index {
+ margin-bottom: em(38); // results in a total of 45px below index articles
+ overflow: hidden;
+ transform: translate3d(0, 0, 0); // Prevent flicker during transitions
+
+ > a {
+ display: inline-block;
+ }
+
+ .article__content {
+ display: none;
+ }
+}
+
+.article--index__image {
+ display: block;
+ margin-bottom: em(9);
+ position: relative;
+ overflow: hidden;
+
+ @include shopify-breakpoint($mobile) {
+ width: 100%;
+ }
+
+ img {
+ width: 100%;
+ transition: transform 0.35s;
+ transform-origin: 50% 50%;
+ backface-visibility: hidden;
+ }
+
+ &:hover,
+ &:focus {
+ img {
+ transform: scale(1.02);
+ }
+ }
+}
+
+.article--index__title {
+ margin-bottom: em(7, 24);
+
+ > a {
+ color: $color-slate;
+
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+}
+
+.article--index__heading {
+ margin-bottom: $gutter;
+ padding-bottom: 20px;
+ border-bottom: $border-grey;
+
+ span {
+ display: block;
+ font-size: em(20, 42);
+ line-height: 1em;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_banner.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_banner.scss
new file mode 100755
index 000000000..02e0efa55
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_banner.scss
@@ -0,0 +1,9 @@
+.banner {
+ padding-bottom: 10px;
+ margin-bottom: 30px;
+ border-bottom: $border-grey;
+}
+
+.banner--hidden {
+ @include visuallyhidden;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_chapters.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_chapters.scss
new file mode 100755
index 000000000..6e200abcc
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_chapters.scss
@@ -0,0 +1,72 @@
+$chapter-nav-height: 70px;
+
+.chapter-nav {
+ position: relative;
+ margin-bottom: em($gutter);
+
+ @include shopify-breakpoint($tablet-up) {
+ display: table;
+ width: 100%;
+ }
+}
+
+.chapter-nav__thumbnail {
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ height: $chapter-nav-height - 20; // 20px = top and bottom padding
+ width: auto;
+}
+
+.chapter-nav__title {
+ display: table-cell;
+ vertical-align: middle;
+ height: $chapter-nav-height;
+ padding: 10px;
+
+ > h2 {
+ margin: 0 0 0 em(50);
+ }
+}
+
+.chapter-nav__social {
+ white-space: nowrap;
+ display: block;
+ padding: em(10);
+
+ @include shopify-breakpoint($mobile) {
+ border-top: 1px solid $color-grey-body;
+ }
+
+ @include shopify-breakpoint($tablet-up) {
+ text-align: right;
+ padding: 0 em($gutter);
+ display: table-cell;
+ vertical-align: middle;
+ height: $chapter-nav-height;
+ padding-right: em($gutter);
+ }
+}
+
+.chapter__serial {
+ color: $color-grey-text--light;
+}
+
+.chapter-header__heading {
+ margin-bottom: em(20, 42);
+}
+
+// Guide header iframe dimensions
+.chapter-header__video {
+ width: 100%;
+ min-height: 250px;
+ margin-bottom: em($gutter);
+
+ @include shopify-breakpoint($tablet-up) {
+ height: 450px;
+ }
+
+ @include shopify-breakpoint($desktop-up) {
+ height: 525px;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_guides.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_guides.scss
new file mode 100755
index 000000000..2f0f958fc
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_guides.scss
@@ -0,0 +1,222 @@
+//==============================================================================
+// Video guide index page
+//==============================================================================
+
+.guide--index__video {
+ position: relative;
+ display: block;
+ margin-bottom: em(15);
+
+ @include shopify-breakpoint($desktop-up) {
+ &:hover,
+ &:focus {
+ .guide--index__video__overlay {
+ opacity: 1;
+ }
+ }
+ }
+
+ > img {
+ width: 100%;
+ }
+
+ .icon-video-play {
+ width: 90px;
+ height: 90px;
+ background-image: asset-svg-url('video-play-solid', $color-white);
+ }
+}
+
+.guide--index__video__play {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ text-align: center;
+ transform: translateX(-50%) translateY(-50%);
+}
+
+.guide--index__video__overlay {
+ background: rgba($color-slate--dark, 0.6);
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ transition: opacity 300ms ease;
+
+ @include shopify-breakpoint($desktop-up) {
+ opacity: 0;
+ }
+}
+
+//==============================================================================
+// Guide show page
+//==============================================================================
+
+.guide-header {
+ margin-bottom: $gutter;
+ overflow: hidden;
+ min-height: 450px;
+ text-align: center;
+
+ @include shopify-breakpoint($desktop-up) {
+ padding-bottom: 0;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ margin: {
+ left: -$gutter;
+ right: -$gutter;
+ };
+
+ padding: {
+ left: 0;
+ right: 0;
+ }
+ }
+
+ p {
+ margin: em(20) 0 em($gutter);
+ }
+}
+
+.guide-header__wrapper {
+ padding-top: 0;
+}
+
+.guide-header__image {
+ @include shopify-breakpoint($tablet-up) {
+ position: absolute;
+ bottom: 0;
+ }
+
+ img {
+ @include shopify-breakpoint($tablet-up) {
+ width: 100%;
+ max-width: 300px;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ width: auto;
+ max-height: 200px;
+ }
+ }
+}
+
+.guide-header--video {
+ .guide-header__content {
+ @include shopify-breakpoint($desktop-up) {
+ min-height: 450px;
+ padding: em(60);
+ z-index: 2;
+ }
+ }
+}
+
+.guide-header--video__image {
+ @include shopify-breakpoint($desktop-up) {
+ img {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: auto;
+ }
+ }
+}
+
+.guide__download-pdf {
+ display: inline-block;
+ margin-left: 5px;
+}
+
+.guide__download-pdf__link {
+ @extend .body-link;
+ margin-left: 5px;
+ color: $color-white;
+}
+
+//==============================================================================
+// Guide chapter table
+//==============================================================================
+
+.guide-chapter {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ position: relative;
+ padding: em(20) em($gutter * 1.5) em(20) 0;
+ border-top: $border-grey;
+
+ &:after {
+ position: absolute;
+ right: $gutter / 2;
+ top: 50%;
+ width: 16px;
+ height: 16px;
+ margin-top: -8px;
+ content: '';
+ background: asset-svg-url(caret-right, $color-grey-text--light) no-repeat center center;
+ transform: translateX(-4px);
+ transition: transform 150ms ease;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ &:after {
+ transform: translateX(0);
+ }
+ }
+
+ &:last-child {
+ border-bottom: $border-grey;
+ }
+
+ &.guide-chapter--index {
+ border-bottom: 0;
+ }
+}
+
+.guide-chapter--list {
+ @include shopify-breakpoint($desktop-up) {
+ padding-left: em($gutter / 2);
+ transition: background-color 150ms ease;
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: $color-sky--light;
+ }
+ }
+}
+
+.guide-chapter__content {
+ display: table-cell;
+ vertical-align: middle;
+ width: 100%;
+}
+
+.guide-chapter__title {
+ display: inline;
+ margin: 0 5px 0 0;
+}
+
+.guide-chapter__description {
+ margin: 10px 0 0;
+}
+
+.guide-chapter--thumbnail {
+ height: em(90);
+
+ .guide-chapter__content {
+ padding-left: 105px;
+ }
+}
+
+.guide-chapter__thumbnail {
+ position: absolute;
+ top: em(20);
+ width: 90px;
+ left: 0;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_heading-icon.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_heading-icon.scss
new file mode 100755
index 000000000..73a376096
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_heading-icon.scss
@@ -0,0 +1,13 @@
+// Sidebar / section heading for content marketing
+// Contains a tiny icon and h5 style heading
+
+.heading-icon {
+ margin-bottom: em(20);
+
+ > .icon {
+ width: 16px;
+ height: 21px; // matches line height of heading
+ vertical-align: top;
+ margin-right: em(10);
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_link-title.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_link-title.scss
new file mode 100755
index 000000000..dc5e4d9cd
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_link-title.scss
@@ -0,0 +1,9 @@
+// For links containing multiple elements, this helper class underlines text
+// with the link__title class wrapped inside of the link.
+
+.link__title {
+ a:hover &,
+ a:focus & {
+ text-decoration: underline;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_marketing-markdown.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_marketing-markdown.scss
new file mode 100755
index 000000000..550bc735f
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_marketing-markdown.scss
@@ -0,0 +1,111 @@
+$color-blog-body: #444;
+
+.marketing-markdown {
+ @extend p;
+ margin-top: 10px;
+ padding-bottom: 10px;
+ color: $color-blog-body;
+
+ h2 {
+ @extend .heading--3;
+ margin: em(30, 28) 0 em(22, 28);
+ font-size: em(28);
+ line-height: em(34, 28);
+ clear: both;
+ }
+
+ h3 {
+ @extend .heading--4;
+ margin-top: em(20);
+ }
+
+ h4 {
+ margin-top: em(20);
+ }
+
+ p,
+ ul,
+ ol {
+ margin-bottom: em(20);
+ }
+
+ a:not(.marketing-button) {
+ @extend .body-link;
+ padding-bottom: 0;
+ }
+
+ ul {
+ padding-left: em(20);
+ list-style: disc outside;
+
+ > li {
+ padding-left: 5px;
+ }
+ }
+
+ ol {
+ list-style-type: none;
+ counter-reset: ol-counter;
+
+ > li {
+ position: relative;
+ padding-left: em(35);
+
+ &:before {
+ @include font-brandon-bold;
+ position: absolute;
+ left: 0;
+ min-width: $gutter;
+ content: counter(ol-counter)'.';
+ counter-increment: ol-counter;
+ color: $color-slate;
+ }
+ }
+ }
+
+ li {
+ margin-bottom: 10px;
+ }
+
+ img,
+ iframe {
+ margin-top: em(10);
+ margin-bottom: em($gutter);
+ }
+
+ hr {
+ margin: $gutter 0;
+ height: 1px;
+ background: $color-grey-border-on--white;
+ border: 0;
+ }
+
+ blockquote {
+ @include font-brandon-black;
+ padding-left: $gutter;
+ color: $color-green;
+ border-left: 3px solid $color-green;
+ font-size: em(36);
+ line-height: em(44, 36);
+
+ &:before {
+ content: '\201C';
+ }
+
+ &:after {
+ content: '\201D';
+ }
+ }
+
+ .right-align {
+ float: right;
+ margin: 0 0 $gutter $gutter;
+ clear: right;
+ }
+
+ .left-align {
+ float: left;
+ margin: 0 $gutter $gutter 0;
+ clear: left;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_newsletter-block.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_newsletter-block.scss
new file mode 100755
index 000000000..04596e106
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_newsletter-block.scss
@@ -0,0 +1,111 @@
+.newsletter-block {
+ position: relative;
+ background-image: image-url('content/newsletter-bg.gif');
+ padding: $gutter;
+ margin: $gutter 0;
+ text-align: center;
+ min-height: 210px;
+ transform: translate3d(0, 0, 0); // Prevent flicker during transitions
+
+ @include shopify-breakpoint($mobile) {
+ margin-left: -$gutter;
+ margin-right: -$gutter;
+ }
+}
+
+// Sidebar styling
+.newsletter-block--sidebar {
+ margin-left: -$gutter;
+
+ .newsletter__heading {
+ font-size: em(16);
+ line-height: em(24);
+ }
+
+ .newsletter__subhead {
+ font-size: em(14);
+ }
+
+ .newsletter__rss {
+ display: block;
+ font-size: em(14);
+
+ > a {
+ color: $color-grey-text--light;
+ }
+
+ .icon {
+ margin-bottom: 0;
+ vertical-align: top;
+ }
+ }
+}
+
+.newsletter__heading {
+ font-size: em(24);
+ -webkit-font-smoothing: antialiased;
+}
+
+.newsletter__disclaimer {
+ margin-top: em(20);
+ font-size: em(13);
+}
+
+.newsletter__rss {
+ display: none;
+}
+
+.newsletter__subhead {
+ @include font-brandon-light;
+ font-size: em(18);
+ color: $color-grey-border-on--white;
+}
+
+.newsletter__form {
+ max-width: em(400);
+ position: relative;
+ margin: 0 auto;
+}
+
+.newsletter-block__content {
+ transition: all 300ms ease;
+ max-height: 400px;
+
+ .js-success & {
+ opacity: 0;
+ max-height: 0;
+ overflow: hidden;
+ }
+}
+
+.newsletter__email {
+ height: 40px;
+ font-size: em(14);
+}
+
+.newsletter__submit {
+ font-size: em(14);
+ height: 40px;
+}
+
+.newsletter__form__success {
+ height: 0;
+ max-height: 0;
+ opacity: 0;
+ overflow: hidden;
+ visibility: hidden;
+ transition: all 300ms ease;
+ transition-delay: 240ms;
+
+ > p {
+ font-size: em(14);
+ }
+
+ .js-success & {
+ height: auto;
+ opacity: 1;
+ visibility: visible;
+ overflow: visible;
+ max-height: 400px;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_pagination.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_pagination.scss
new file mode 100755
index 000000000..cdb18241b
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_pagination.scss
@@ -0,0 +1,46 @@
+.pagination {
+ @include clearfix;
+ padding-top: $gutter / 2;
+ border-top: $border-grey;
+ text-align: center;
+
+ li {
+ display: inline-block;
+ }
+
+ a {
+ display: inline-block;
+ padding: 15px;
+ transition: color 300ms ease;
+
+ &:hover,
+ &:focus {
+ color: $color-black;
+ }
+ }
+}
+
+.pagination__numbered-links {
+ width: 75%;
+ margin: 0 auto;
+}
+
+.pagination__prev {
+ float: left;
+
+ > a {
+ padding-left: 0;
+ }
+}
+
+.pagination__next {
+ float: right;
+
+ > a {
+ padding-right: 0;
+ }
+}
+
+.pagination__current-page > a {
+ color: $color-black;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_preview-links.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_preview-links.scss
new file mode 100755
index 000000000..c8afb9455
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_preview-links.scss
@@ -0,0 +1,32 @@
+.preview-links {
+ margin: 0 0 $gutter (-$gutter);
+ padding: 0 0 ($gutter / 2) $gutter;
+ border-bottom: $border-grey;
+
+ a {
+ display: block;
+ margin-bottom: $gutter / 2;
+ border-bottom: $border-grey;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+
+ h4 {
+ margin-bottom: em(5, 16);
+ font-size: em(16);
+ }
+}
+
+// Alternate popular links styling for the time being until we can fix issues
+// outlined here: https://github.com/Shopify/blog-theme/issues/45
+.preview-links--description {
+ p {
+ margin-bottom: 0;
+ }
+
+ > a {
+ padding-bottom: em(12);
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_search-input.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_search-input.scss
new file mode 100755
index 000000000..15a241c55
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_search-input.scss
@@ -0,0 +1,24 @@
+$search-input-height: 38px;
+
+.search-form {
+ position: relative;
+ margin-bottom: $gutter;
+}
+
+.search-form__input {
+ font-family: $font-body-family;
+ height: $search-input-height;
+ font-size: em(14);
+ border-radius: $search-input-height / 2;
+ padding: 0 16px 0 40px;
+}
+
+.search-form__submit {
+ position: absolute;
+ top: ($search-input-height - 16) / 2;
+ left: 16px;
+ width: 16px;
+ height: 16px;
+ background-size: contain;
+ background-image: asset-svg-url(search, $color-green);
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_share-bar.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_share-bar.scss
new file mode 100755
index 000000000..57f0e01ec
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_share-bar.scss
@@ -0,0 +1,62 @@
+$share-bar-height: em(25);
+
+.share-bar {
+ position: fixed;
+ z-index: $z-nav-drawer - 1;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ padding: $share-bar-height / 2;
+ background-color: $color-black;
+ transform: translateY(100%);
+ transition: transform 350ms ease-out;
+
+ .js-is-loaded & {
+ transform: translateY(0);
+ }
+}
+
+.share-bar__networks {
+ height: $share-bar-height;
+
+ // Using this technique to justify the icons evenly across the bar width:
+ // http://www.barrelny.com/blog/text-align-justify-and-rwd/
+ text-align: justify;
+
+ &:after {
+ content: '';
+ display: inline-block;
+ width: 100%;
+ }
+}
+
+.share-bar__network {
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+}
+
+.share-bar__icon {
+ width: $share-bar-height;
+ height: $share-bar-height;
+}
+
+.share-bar__icon--email {
+ background-image: asset-svg-url('email-reverse', $color-white);
+}
+
+.share-bar__icon--buffer {
+ background-image: asset-svg-url('buffer-fullbleed', $color-white);
+}
+
+.share-bar__icon--facebook {
+ background-image: asset-svg-url('facebook-fullbleed', $color-white);
+}
+
+.share-bar__icon--twitter {
+ background-image: asset-svg-url('twitter-fullbleed', $color-white);
+}
+
+.share-bar__icon--linkedin {
+ background-image: asset-svg-url('linkedin-fullbleed', $color-white);
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_social-shares.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_social-shares.scss
new file mode 100755
index 000000000..b4bf618d9
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_social-shares.scss
@@ -0,0 +1,84 @@
+.social-shares {
+ @include font-brandon-bold;
+ line-height: 1; // reduce extra whitespace below inline-block buttons
+
+ .article__header & {
+ @include shopify-breakpoint($tablet-up) {
+ float: right;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ margin-top: em($gutter / 2);
+ }
+ }
+}
+
+.social-shares--full {
+ padding: $gutter 0;
+ margin-bottom: $gutter;
+ clear: both;
+ border: $border-grey;
+ border-width: 1px 0;
+
+ .social-shares__icon {
+ @include shopify-breakpoint($tablet-up) {
+ width: auto;
+ padding: 0 8px 0 $gutter;
+
+ > .visuallyhidden {
+ @include showvisuallyhidden;
+ }
+ }
+ }
+}
+
+.social-shares__icon {
+ width: em(25, 14);
+ height: em(25, 14);
+ margin-bottom: 0;
+ line-height: em(25, 14);
+ font-size: em(14);
+ border-radius: $border-radius;
+ background-position: left center;
+ color: $color-white;
+
+ @include shopify-breakpoint($mobile) {
+ width: em(36, 14);
+ height: em(36, 14);
+ line-height: em(36, 14);
+ margin-right: em(10, 14);
+ float: left;
+ }
+}
+
+.social-shares__count {
+ margin-right: 10px;
+
+ &,
+ > span {
+ vertical-align: top;
+ }
+}
+
+.social-shares__count--with-icons {
+ line-height: em(25);
+
+ @include shopify-breakpoint($mobile) {
+ line-height: em(36, 14);
+ }
+}
+
+.icon-facebook--square {
+ @include button-bg(map-get($icon-colors, 'blue_fb'));
+ background-image: asset-svg-url('facebook', $color-white);
+}
+
+.icon-twitter--square {
+ @include button-bg(map-get($icon-colors, 'blue_twitter'));
+ background-image: asset-svg-url('twitter', $color-white);
+}
+
+.icon-linkedin--square {
+ @include button-bg(map-get($icon-colors, 'blue_linkedin'));
+ background-image: asset-svg-url('linkedin', $color-white);
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/modules/content/_truncated-text.scss b/docusaurus/v0/_sass/marketing_assets/modules/content/_truncated-text.scss
new file mode 100755
index 000000000..29108dd07
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/modules/content/_truncated-text.scss
@@ -0,0 +1,34 @@
+.truncated-text {
+ max-height: 300px;
+ position: relative;
+ overflow: hidden;
+ margin-bottom: em($gutter * 1.5);
+
+ &:before {
+ background-image: linear-gradient(rgba($color-white, 0), $color-white 60%);
+ content: '';
+ width: 100%;
+ height: 150px;
+ position: absolute;
+ bottom: 0;
+ }
+
+ &.js-is-active {
+ max-height: none;
+
+ &:before {
+ display: none;
+ }
+ }
+}
+
+.truncated-text__toggle {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+
+ .js-is-active & {
+ display: none;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/_typography.scss b/docusaurus/v0/_sass/marketing_assets/plus/_typography.scss
new file mode 100755
index 000000000..eb9a6fe40
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/_typography.scss
@@ -0,0 +1,248 @@
+@import 'variables';
+
+body {
+ font-family: $font-body-family;
+ color: $color-text;
+}
+
+/*============================================================================
+ Headers
+==============================================================================*/
+h1,
+.heading--1 {
+ font-size: $h1-font-size;
+ line-height: $h1-line-height;
+ font-weight: $h1-font-weight;
+ color: $color-white;
+ margin: $h1-margin;
+ -webkit-font-smoothing: antialiased;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h1-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h1-font-size--mobile;
+ }
+}
+
+/*================ Title ================*/
+h2,
+.heading--2 {
+ font-size: $h2-font-size;
+ line-height: $h2-line-height;
+ font-weight: $h2-font-weight;
+ color: $color-dark;
+ margin: $h2-margin;
+ -webkit-font-smoothing: antialiased;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h2-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h2-font-size--mobile;
+ }
+}
+
+/*================ Surtitle ================*/
+h3,
+.heading--3 {
+ font-size: $h3-font-size;
+ font-weight: $h3-font-weight;
+ color: $color-highlight;
+ text-transform: uppercase;
+ margin: $h3-margin;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h3-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h3-font-size--mobile;
+ }
+}
+
+/*================ Form Titles ================*/
+h4,
+.heading--4 {
+ font-size: $h4-font-size;
+ font-weight: $h4-font-weight;
+ margin: $h4-margin;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h4-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h4-font-size--mobile;
+ }
+}
+
+/*================ Centered Title================*/
+
+.heading--centered {
+ text-align: center;
+
+ @include shopify-breakpoint ($mobile) {
+ text-align: left;
+ }
+}
+
+/*================ Case Study Title ================*/
+
+.heading--case-study {
+ font-size: em(58);
+ line-height: em(69, 58);
+ font-weight: $h2-font-weight;
+ color: $color-dark;
+ margin: $h2-margin;
+ -webkit-font-smoothing: antialiased;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h2-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h2-font-size--mobile;
+ }
+}
+
+/*============================================================================
+ Body Copy
+==============================================================================*/
+
+/*================ Default copy ================*/
+p {
+ line-height: em(30, 16);
+ font-size: em(18);
+ font-weight: $font-weight-light;
+ color: $color-text;
+ margin-bottom: em(30);
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: em(14);
+ }
+
+ + ul {
+ margin-top: -(em(16));
+ }
+}
+
+/*================ Quotes ================*/
+blockquote {
+ margin: $vertical-unit 0 0;
+
+ p {
+ font-weight: $font-weight-light;
+ margin: 0 0 $vertical-unit / 4;
+ font-size: em(22);
+ line-height: 1.6em;
+ color: $color-dark;
+ -webkit-font-smoothing: antialiased;
+ quotes: '\201C''\201D''\2018''\2019';
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: em(16);
+ }
+
+ @include shopify-breakpoint($desktop-up) {
+ font-size: em(22);
+ }
+
+ &:before {
+ color: $color-light;
+ content: open-quote;
+ font-size: 2em;
+ font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
+ line-height: 0.1em;
+ margin: 0 0.1em 0 -0.425em;
+ vertical-align: -0.3em;
+ }
+
+ &:after {
+ color: $color-light;
+ content: close-quote;
+ font-size: 2em;
+ font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
+ line-height: 0.1em;
+ margin-left: 0.1em;
+ vertical-align: -0.3em;
+ }
+ }
+}
+
+/*================ Case Study Markdown Content ================*/
+.plus-case-study-markdown {
+
+ p {
+ font-size: em(20);
+ line-height: em(32, 20);
+ font-weight: $font-weight-light;
+
+ @include shopify-breakpoint ($mobile) {
+ font-size: em(16);
+ }
+ }
+
+ blockquote {
+ margin: $vertical-unit 0;
+
+ p {
+ font-size: em(22);
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: em(26);
+ }
+
+ @include shopify-breakpoint($desktop-up) {
+ font-size: em(36);
+ }
+ }
+ }
+}
+
+/*================ Author position/title ================*/
+.quote-attribution {
+ font-size: em(14);
+ font-weight: $font-weight-light;
+ font-style: normal;
+ line-height: 1.6;
+}
+
+.quote-attribution__author {
+ font-weight: $font-weight-bold;
+ display: block;
+ text-transform: uppercase;
+}
+
+.quote-attribution__brand-logo {
+ width: 100%;
+ min-height: 50px;
+}
+
+/*================ Bulleted lists ================*/
+ul {
+ list-style-type: disc;
+}
+
+ol {
+ list-style-type: decimal;
+}
+
+ul,
+ol {
+ font-size: em(18);
+ font-weight: $font-weight-light;
+ line-height: em(22, 12);
+ margin-left: em(22);
+ margin-bottom: em(30);
+
+ li {
+ margin-top: em(10);
+ margin-bottom: em(10);
+ }
+}
+
+
+
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/_variables.scss b/docusaurus/v0/_sass/marketing_assets/plus/_variables.scss
new file mode 100755
index 000000000..acb68ecd3
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/_variables.scss
@@ -0,0 +1,4 @@
+@import 'variables/colors';
+@import 'variables/fonts';
+@import 'variables/measurements';
+@import 'variables/typography';
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/modules/_buttons.scss b/docusaurus/v0/_sass/marketing_assets/plus/modules/_buttons.scss
new file mode 100755
index 000000000..5e10a8054
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/modules/_buttons.scss
@@ -0,0 +1,133 @@
+/*============================================================================
+ Base styles
+==============================================================================*/
+%plus-button {
+ background: none;
+ border: 0;
+ display: inline-block;
+ cursor: pointer;
+ color: $color-white;
+ padding: ($vertical-unit / 2) ($horizontal-unit * 1.5);
+ font-weight: $font-weight-light;
+ font-size: em(16);
+
+ @include shopify-breakpoint($tablet-down) {
+ font-size: em(14);
+ padding: ($vertical-unit / 2) ($horizontal-unit);
+ }
+}
+
+/*================ Button Icon ================*/
+.plus-button__icon {
+ padding: 0 ($horizontal-unit / 6);
+ color: $color-white;
+ position: relative;
+ z-index: 1;
+ display: inline-block;
+ transform: translateY(-1px);
+ transition: all 0.2s ease-in;
+ opacity: 0.5;
+ backface-visibility: hidden;
+
+ .plus-image-button & {
+ position: absolute;
+ top: $vertical-unit / 2;
+ right: $horizontal-unit / 2; //offset icon width
+ }
+
+ &:before,
+ &:after {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background: $color-white;
+ content: '';
+ z-index: -1;
+ margin-top: -6px;
+ transition: all 0.1s ease-in;
+ backface-visibility: hidden;
+ }
+
+ .plus-button__icon-wrapper--transparent &:before,
+ .plus-button__icon-wrapper--transparent &:after {
+ background: $color-text;
+ }
+
+ &:before {
+ transform: rotate(-90deg);
+ }
+
+ &:after {
+ transform: rotate(180deg);
+ }
+
+ .plus-button__icon-wrapper:hover &,
+ .plus-button__icon-wrapper:focus & {
+ opacity: 1;
+ transform: translate(2px, -2px) scale(0.8);
+ }
+
+ .plus-button__icon-wrapper:hover &:before,
+ .plus-button__icon-wrapper:focus &:before {
+ transform: translateY(-2.5px) rotate(-145deg);
+ }
+
+ .plus-button__icon-wrapper:hover &:after,
+ .plus-button__icon-wrapper:focus &:after {
+ transform: translateY(3px) rotate(145deg);
+ }
+}
+
+.plus-button__icon-wrapper {
+ position: relative;
+}
+
+/*============================================================================
+ Button Styles
+==============================================================================*/
+.plus-button {
+ @extend %plus-button;
+ background: $color-interactive;
+ position: relative;
+ overflow: hidden;
+
+ &:hover,
+ &:focus {
+ background: $color-highlight;
+ color: $color-white;
+ }
+
+ &:active {
+ background: $color-interactive;
+ }
+}
+
+/*================ Highlight Button: Used in main CTA ================*/
+.plus-button--highlight {
+ background-color: $color-highlight;
+
+ &:hover,
+ &:focus {
+ background-color: $color-interactive;
+ }
+
+ &:active {
+ background-color: $color-highlight;
+ }
+}
+
+/*================ Tertiary Button ================*/
+.plus-button--tertiary {
+ background-color: $color-dark;
+
+ &:hover,
+ &:focus {
+ background-color: $color-highlight;
+ }
+
+ &:active {
+ background-color: $color-dark;
+ }
+}
+
+
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/modules/_navigation.scss b/docusaurus/v0/_sass/marketing_assets/plus/modules/_navigation.scss
new file mode 100755
index 000000000..b7bf18cbf
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/modules/_navigation.scss
@@ -0,0 +1,279 @@
+@import 'marketing_assets/sass-helpers';
+@import 'marketing_assets/plus/variables';
+
+//Animation settings
+$animation-duration: 0.2s;
+$animation-delay: 0.3s;
+
+/*============================================================================
+ Desktop Nav
+==============================================================================*/
+.marketing-nav-wrapper {
+ height: $plus-nav-height;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ overflow: visible;
+ z-index: $z-nav-main;
+}
+
+.marketing-nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: $z-nav-main;
+ width: 100%;
+ height: $plus-nav-height;
+ margin: 0 auto;
+ background-color: rgba($color-body-bg, 0.9);
+}
+
+.marketing-nav__items {
+ position: absolute;
+ top: 0;
+ right: $gutter;
+ list-style: none;
+
+ @include shopify-breakpoint($tablet-up) {
+ // scss-lint:disable ImportantRule
+ display: block !important;
+ // scss-lint:enable ImportantRule
+ }
+
+ > li {
+ margin: 0;
+ display: inline-block;
+ }
+}
+
+.marketing-nav__item {
+ display: inline-block;
+ color: $color-text;
+ font-weight: $font-weight-light;
+ font-size: em(16, 18);
+ margin-left: em(20);
+ padding-top: em(6);
+ line-height: em(50);
+ transition: all $animation-duration ease-in-out;
+
+ &:hover,
+ &:focus {
+ box-shadow: inset 0 6px 0 0 $color-highlight;
+ }
+
+ &:active {
+ transition: none;
+ box-shadow: inset 0 6px 0 0 $color-interactive;
+ }
+
+ &.active {
+ color: $color-highlight;
+
+ @include shopify-breakpoint($tablet-up) {
+ box-shadow: inset 0 6px 0 0 $color-highlight;
+ }
+ }
+}
+
+.marketing-nav__item--get-started {
+ color: $color-interactive;
+ font-weight: $font-weight-regular;
+}
+
+.plus-nav__logo:hover,
+.plus-nav__logo:focus {
+ background: asset-svg-url(plus-logo-blue) 0 0 no-repeat;
+}
+
+.plus-nav__logo,
+.plus-nav__logo:active {
+ display: block;
+ width: $plus-logo-width;
+ margin-top: em(20);
+ height: $plus-logo-height;
+ background: asset-svg-url(plus-logo) 0 0 no-repeat;
+ background-size: 100%;
+ float: left;
+ transition: none;
+}
+
+/*============================================================================
+ Mobile Nav
+==============================================================================*/
+.js-drawer-open {
+ overflow: hidden;
+}
+
+.drawer {
+ display: none;
+ opacity: 0;
+ position: fixed;
+ z-index: $z-nav-main + 1;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: rgba($color-dark, 0.9);
+ transition: opacity $animation-duration $animation-delay ease-in;
+
+ .js-drawer-open-left & {
+ transition-delay: 0;
+ display: block;
+ opacity: 1;
+ }
+
+ &:before {
+ display: block;
+ content: '';
+ background: asset-svg-url(plus-logo-white) 0 0 no-repeat;
+ width: $plus-logo-width;
+ top: em(20);
+ left: $gutter;
+ height: em(30);
+ position: fixed;
+ }
+}
+
+.drawer__items {
+ width: 100%;
+ margin-left: 0;
+ margin-top: $plus-nav-height;
+
+ > li {
+ margin: 0;
+ list-style: none;
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.3s 0.1s ease-in-out;
+
+ &:nth-child(2) {
+ transition: all 0.4s 0.1s ease-in-out;
+ }
+
+ &:nth-child(3) {
+ transition: all 0.5s 0.1s ease-in-out;
+ }
+
+ &:nth-child(4) {
+ transition: all 0.6s 0.1s ease-in-out;
+ }
+
+ &:nth-child(5) {
+ transition: all 0.7s 0.1s ease-in-out;
+ }
+
+ .js-drawer-open-left & {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ a {
+ color: $color-white;
+ font-weight: $font-weight-thin;
+ padding: em(15) 0;
+ display: block;
+ text-align: center;
+ font-size: em(22);
+
+ &:hover,
+ &:focus {
+ color: $color-highlight;
+ }
+ }
+}
+
+/*================ Mobile nav button ================*/
+.marketing-nav__hamburger {
+ position: absolute;
+ top: 15px;
+ right: 25px;
+ width: 35px;
+ height: 30px;
+ background: none;
+ display: none;
+ border: 0;
+ text-indent: 100%;
+ z-index: $z-nav-main;
+ cursor: pointer;
+ box-sizing: content-box;
+
+ @include shopify-breakpoint($mobile) {
+ display: block;
+ }
+
+ &:before {
+ content: '';
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ width: 25px;
+ height: 4px;
+ background: $color-interactive;
+ box-shadow: 0 8px 0 0 $color-interactive, 0 16px 0 0 $color-interactive;
+ transform: translateX(0);
+ transition: transform $animation-duration ease-in-out;
+ }
+
+ &:active:before,
+ &:focus:before {
+ background: $color-highlight;
+ box-shadow: 0 8px 0 0 $color-highlight, 0 16px 0 0 $color-highlight;
+ }
+
+ .js-drawer-open-left &:before {
+ transform: translateX(100px);
+ }
+}
+
+%icon-close-bars {
+ position: absolute;
+ top: 0;
+ right: 10px;
+ content: '';
+ display: block;
+ width: 4px; //match height of hamburger menu bars
+ height: 25px;
+ background: $color-white;
+ cursor: pointer;
+}
+
+.icon-close {
+ position: fixed;
+ top: 17px; //place X in the middle of the button
+ right: $gutter;
+ width: 25px;
+ height: 25px;
+ border: 0;
+ background: none;
+ z-index: $z-nav-main;
+ transform: translateX(100px);
+ transition: transform $animation-duration ease-in-out;
+
+ &:before {
+ @extend %icon-close-bars;
+ transform: rotate(45deg);
+ }
+
+ &:after {
+ @extend %icon-close-bars;
+ transform: rotate(135deg);
+ }
+
+ &:focus,
+ &:active {
+ &:before,
+ &:after {
+ background: $color-highlight;
+ }
+ }
+
+ .js-drawer-open-left & {
+ transition-delay: $animation-duration;
+ transform: translateX(0);
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/variables/_colors.scss b/docusaurus/v0/_sass/marketing_assets/plus/variables/_colors.scss
new file mode 100755
index 000000000..0321b1917
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/variables/_colors.scss
@@ -0,0 +1,12 @@
+/*============================================================================
+ Colors
+==============================================================================*/
+
+$color-dark: #282828; // dark colour
+$color-interactive: #00536e; // interaction color (clickable)
+$color-highlight: #c39e47; // highlight color
+$color-text: #666560; // default text colour
+$color-body-bg: #f2f2f0; // body background colour
+$color-white: #fff; // white
+$color-light: #b2aea6; // lightest
+$color-banner-bg: #3f3e3a; // banner background colour
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/variables/_fonts.scss b/docusaurus/v0/_sass/marketing_assets/plus/variables/_fonts.scss
new file mode 100755
index 000000000..e00ffeef0
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/variables/_fonts.scss
@@ -0,0 +1,6 @@
+/*============================================================================
+ Fonts
+==============================================================================*/
+$font-body-family: "Roboto", Helvetica, Arial, sans-serif;
+$font-body-size: em(16);
+$font-body-color: $color-text;
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/variables/_measurements.scss b/docusaurus/v0/_sass/marketing_assets/plus/variables/_measurements.scss
new file mode 100755
index 000000000..f02cf0fe2
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/variables/_measurements.scss
@@ -0,0 +1,15 @@
+/*============================================================================
+ MEASUREMENTS: Values that affect the plus layout and blocks
+==============================================================================*/
+/*================ navigation ================*/
+$plus-nav-height: em(65);
+$plus-logo-width: em(120);
+$plus-logo-height: em(30);
+
+/*================ Page Blocks ================*/
+$vertical-unit: 40px;
+$horizontal-unit: 30px;
+$block-margin: 2px;
+
+/*================ Max page width ================*/
+$plus-max-page-width: 1210px;
diff --git a/docusaurus/v0/_sass/marketing_assets/plus/variables/_typography.scss b/docusaurus/v0/_sass/marketing_assets/plus/variables/_typography.scss
new file mode 100755
index 000000000..77663c985
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/plus/variables/_typography.scss
@@ -0,0 +1,31 @@
+/*============================================================================
+ Typography defaults
+==============================================================================*/
+
+$h1-font-size: em(54);
+$h1-font-size--tablet: em(44);
+$h1-font-size--mobile: em(42);
+$h1-font-weight: $font-weight-thin;
+$h1-line-height: em(70, 54);
+$h1-margin: 0 0 em(16) 0;
+
+$h2-font-size: em(44);
+$h2-font-size--tablet: em(32);
+$h2-font-size--mobile: em(36);
+$h2-font-weight: $font-weight-thin;
+$h2-line-height: em(60, 44);
+$h2-margin: 0 0 em(6) 0;
+
+$h3-font-size: em(15);
+$h3-font-size--tablet: em(14);
+$h3-font-size--mobile: em(12);
+$h3-font-weight: $font-weight-bold;
+$h3-line-height: inherit;
+$h3-margin: 0 0 em(16) 0;
+
+$h4-font-size: em(22);
+$h4-font-size--tablet: em(22);
+$h4-font-size--mobile: em(22);
+$h4-font-weight: $font-weight-light;
+$h4-line-height: inherit;
+$h4-margin: em(12) 0 em(6) 0;
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/_breakpoints.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/_breakpoints.scss
new file mode 100755
index 000000000..a9106162e
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/_breakpoints.scss
@@ -0,0 +1,31 @@
+/*============================================================================
+ Breakpoints - Set in em to cover browser font-size adjustments
+==============================================================================*/
+$desktop: 990px !default; // Includes left/right padding
+$tablet: 750px !default; // Includes left/right padding
+$wide: 1440px !default; // This is a "wide" view for any design details present at wide screen, does not include padding
+
+// Used for phone only
+$mobile : new-breakpoint(max-width em($tablet - 1) 4);
+
+// Used for tablet only
+$tablet-only : new-breakpoint(min-width em($tablet) max-width em($desktop - 1) 8);
+
+// Combines tablet and mobile, typically for style alone, not layout
+$tablet-down: new-breakpoint(max-width em($desktop - 1) 8);
+
+// Combines tablet and desktop up
+$tablet-up: new-breakpoint(min-width em($tablet) 8);
+
+// The actual desktop size & up, 990
+$desktop-up: new-breakpoint(min-width em($desktop) 8);
+
+// Anything below the wide size of grid
+$desktop-down: new-breakpoint(max-width em($desktop) 8);
+
+// Will spit out the content of the rule, enclosed by the media query
+@mixin shopify-breakpoint($breakpoint) {
+ @include media($breakpoint) {
+ @content;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/_mixins.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/_mixins.scss
new file mode 100755
index 000000000..d9d1e7248
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/_mixins.scss
@@ -0,0 +1,5 @@
+@import 'mixins/global';
+@import 'mixins/icons';
+@import 'mixins/typography';
+@import 'mixins/grid';
+@import 'mixins/utils';
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/_variables.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/_variables.scss
new file mode 100755
index 000000000..6c76b0883
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/_variables.scss
@@ -0,0 +1,4 @@
+@import 'variables/colors';
+@import 'variables/typography';
+@import 'variables/measurements';
+@import 'variables/grid';
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_global.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_global.scss
new file mode 100755
index 000000000..1f9c88fad
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_global.scss
@@ -0,0 +1,131 @@
+/*============================================================================
+ Global Mixins used within page-specific and application stylesheets
+==============================================================================*/
+
+$hover-darken: 6%;
+$active-darken: 10%;
+
+@mixin button-bg ($bg-color) {
+ background-color: $bg-color;
+
+ &:hover {
+ background-color: darken($bg-color, $hover-darken);
+ }
+
+ &:active,
+ &:focus {
+ background-color: darken($bg-color, $active-darken);
+ }
+}
+
+@mixin section-heading-dash($top: auto, $bottom: auto) {
+ position: relative;
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: $top;
+ bottom: $bottom;
+ left: 50%;
+ height: 3px;
+ width: 30px;
+ margin-left: -15px;
+ display: block;
+ background-color: $color-green;
+ }
+}
+
+// Based on the mixin of the same name in Bourbon, but with the specified
+// `background-size` applied for both 2x _and_ 1x media, and defaults for
+// $retina-suffix and $asset-pipeline that suit our most common needs.
+//
+// https://github.com/thoughtbot/bourbon/blob/v4.0.2/app/assets/stylesheets/addons/_retina-image.scss
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: -2x, $asset-pipeline: true) {
+ @if $asset-pipeline {
+ background-image: image-url("#{$filename}.#{$extension}");
+ } @else {
+ background-image: url("#{$filename}.#{$extension}");
+ }
+
+ @include hidpi {
+ @if $asset-pipeline {
+ @if $retina-filename {
+ background-image: image-url("#{$retina-filename}.#{$extension}");
+ } @else {
+ background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
+ }
+ } @else {
+ @if $retina-filename {
+ background-image: url("#{$retina-filename}.#{$extension}");
+ } @else {
+ background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
+ }
+ }
+ }
+
+ background-size: $background-size;
+}
+
+/*============================================================================
+-Background colours
+-==============================================================================*/
+
+@mixin marketing-bg-colors {
+ &--white {
+ background: $color-white;
+ color: $color-grey-body;
+ }
+
+ &--light {
+ background: $color-sky--light;
+ color: $color-grey-body;
+ }
+
+ &--lowlight {
+ background-color: $color-slate;
+ color: $color-grey-text--light;
+ }
+
+ &--sand {
+ background: $color-sand;
+ color: $color-grey-body;
+ }
+}
+
+/*============================================================================
+Borders
+==============================================================================*/
+
+@mixin marketing-borders {
+ &--border-top {
+ border-top-width: 1px;
+ border-top-style: solid;
+ }
+}
+
+@mixin spinner($size: 24px, $color: $color-white) {
+ @at-root {
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+ }
+
+ content: '';
+ display: block;
+ width: $size;
+ height: $size;
+ position: absolute;
+ top: 50%;
+ margin-left: - $size / 2;
+ margin-top: - $size / 2;
+ border-radius: 50%;
+ border: 3px solid $color;
+ border-top-color: transparent;
+ animation: spin 1s infinite linear;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_grid.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_grid.scss
new file mode 100755
index 000000000..4749bd097
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_grid.scss
@@ -0,0 +1,53 @@
+/*============================================================================
+ Col Generators
+==============================================================================*/
+
+// Hack because can't override columns default param in mixin without doing this
+// I don't know why.
+$num-columns: $grid-columns;
+
+// generates grid classes with format `grid-${n}`, "n" being the number of columns spanned. Ex grid-6 spans half of a 12-column grid.
+// also generates `grid-push-${n}` classes to be used in conjunction with `grid=${n}` to offset an element from left by n columns
+@mixin generate-columns($prefix: 'grid-', $num: $num-columns, $width: $column) {
+ $i: $num;
+
+ @while $i > 0 {
+ .#{$prefix}#{$i} {
+ width: ($width + $gutter) * $i - $gutter;
+
+ @if $i < $num {
+ margin-right: $gutter;
+ }
+ }
+
+ .#{$prefix}push-#{$i} {
+ margin-left: ($width + $gutter) * $i;
+ }
+
+ $i: $i - 1;
+ }
+}
+
+@mixin generate-extended-columns($prefix: 'grid-', $num: $grid-columns, $width: $column, $extendor: 0) {
+ $i: $num;
+
+ @while $i > 0 {
+ &.#{$prefix}#{$i} {
+ $base-width: ($width + $gutter) * $i - $gutter;
+ @if $extendor {
+ width: $base-width + $extendor;
+ } @else {
+ width: $base-width;
+ }
+ }
+
+ $i: $i - 1;
+ }
+}
+
+@mixin page-container() {
+ @include clearfix;
+ margin-left: auto;
+ margin-right: auto;
+ position: relative;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_icons.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_icons.scss
new file mode 100755
index 000000000..5f2a3d693
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_icons.scss
@@ -0,0 +1,15 @@
+@mixin generate-icon-classes($list, $colors: $icon-colors) {
+ @each $icon in $list {
+ @if length($icon) > 1 {
+ .icon-#{nth($icon, 1)}-#{nth($icon, 2)} {
+ background-image: asset-svg-url(nth($icon, 1), map-get($colors, nth($icon, 2)));
+ background-repeat: no-repeat;
+ }
+ } @else {
+ .icon-#{$icon} {
+ background-image: asset-svg-url($icon);
+ background-repeat: no-repeat;
+ }
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_typography.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_typography.scss
new file mode 100755
index 000000000..6eeb8773d
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_typography.scss
@@ -0,0 +1,35 @@
+@mixin font-brandon-light {
+ font-family: $font-brandon-family;
+ font-weight: $font-weight-light;
+ -webkit-font-smoothing: auto;
+}
+
+@mixin font-brandon-regular {
+ font-family: $font-brandon-family;
+ font-weight: $font-weight-regular;
+ -webkit-font-smoothing: antialiased;
+}
+
+@mixin font-brandon-medium {
+ font-family: $font-brandon-family;
+ font-weight: $font-weight-medium;
+ -webkit-font-smoothing: antialiased;
+}
+
+@mixin font-brandon-bold {
+ font-family: $font-brandon-family;
+ font-weight: $font-weight-bold;
+ -webkit-font-smoothing: antialiased;
+}
+
+@mixin font-brandon-black {
+ font-family: $font-brandon-family;
+ font-weight: $font-weight-black;
+ -webkit-font-smoothing: antialiased;
+}
+
+@mixin opentype-features-display {
+ font-kerning: normal;
+ font-variant-ligatures: common-ligatures, contextual, discretionary-ligatures;
+ font-feature-settings: 'kern', 'liga', 'clig', 'calt', 'dlig';
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_utils.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_utils.scss
new file mode 100755
index 000000000..689ec54c9
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/mixins/_utils.scss
@@ -0,0 +1,39 @@
+@mixin force-3d() {
+ transform: translate3d(0, 0, 0);
+ backface-visibility: hidden;
+ perspective: 1000;
+}
+
+@mixin visuallyhidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+@mixin showvisuallyhidden {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+}
+
+@mixin pretty-focus-styles() {
+ outline: thin dotted;
+ outline-offset: 3px;
+ outline-color: $color-grey-body;
+}
+
+// Vertically center content within a parent node
+// that has position: relative and a height.
+@mixin vertically-centered {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_colors.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_colors.scss
new file mode 100755
index 000000000..9f2fc4c5f
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_colors.scss
@@ -0,0 +1,66 @@
+/*============================================================================
+ Colors
+==============================================================================*/
+
+// Product Colors
+$color-green: #7ab55c; // Everywhere highlight, copy link & bold
+$color-yellow: #ebb129; // Online highlight
+$color-blue: #368aa9; // POS highlight
+
+$color-black: #000; // Text hover/active for footer/nav links
+$color-white: #fff; // Background form inputs, white page blocks
+
+/*================ Text ================*/
+$color-grey-body: #767676; // Text on white & $color-sky--light, default text & link color
+$color-grey-text--light: #a9a9a9; // Text on $color-slate, main nav & input borders.
+$color-grey-heading: #949494; // Page subheadings & form suggestions on light backgrounds
+
+/*============================================================================
+ Backgrounds
+==============================================================================*/
+$color-sky: #ced3d3; // Background body, never for text
+$color-sky--light: #f9fafa; // Background grey page blocks & footer, never for text
+$color-slate: #30373b; // Background dark grey blocks & main nav bar, Text for form inputs
+$color-slate--dark: #2a2c2e; // Background active state against $color-slate, eg dark tabbed menu
+$color-sand: #f1f1e9; // Background for sand blocks, useful for alternating between white blocks
+
+$color-grey-border-on--white: #e5e5e5; // border on white background, blog sidebar text color on $slate
+
+$color-table-header: #f8f8f8; // element backgrounds and els meant to be styled like them
+
+/*================ Forms ================*/
+$color-red: #c23628; // Form error states
+$color-input-focus: #00baff; // Form field focus
+$color-input-border: $color-grey-text--light; // Input border color
+$color-blue-dark: #206882; // form suggestion text + border color
+
+/*================ Icon colours ================*/
+$color-blue-light: #5fb6d5; // POS icon on slate
+$color-blue-fb: #385a98; // Facebook icons
+$color-blue-twitter: #55acee; // Twitter icons
+$color-blue-linkedin: #0976b4; // LinkedIn icons
+$color-red-pinterest: #cc2127; // Pinterest icons
+$color-blue-bab: #32a0c8; // Build a business icons
+
+$icon-colors: (
+ 'grey': $color-grey-text--light,
+ 'black': $color-black,
+ 'white': $color-white,
+ 'yellow': $color-yellow,
+ 'green': $color-green,
+ 'blue': $color-blue,
+ 'blue_light': $color-blue-light,
+ 'blue_fb': $color-blue-fb,
+ 'blue_twitter': $color-blue-twitter,
+ 'blue_linkedin': $color-blue-linkedin,
+ 'blue_bab': $color-blue-bab,
+ 'red_pinterest': $color-red-pinterest
+);
+
+/*================ Nav colors ================*/
+
+$color-primary-nav-background: $color-slate !default;
+$color-primary-nav-text: $color-grey-text--light !default;
+$color-secondary-nav-background: $color-white !default;
+$color-secondary-nav-text: $color-black !default;
+$color-nav-icon: $color-grey-text--light !default;
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_grid.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_grid.scss
new file mode 100755
index 000000000..6ba3be276
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_grid.scss
@@ -0,0 +1,27 @@
+/*============================================================================
+ Grid Requirements:
+ * 8 column grid with 2 columns on either side as optional extended grid area
+ only visible on larger screens
+ * Configurable (ie through something similar to this file)
+ * Different grid per breakpoint, ideally defined in isolation inside the
+ breakpoint for minimal CSS undo-ing (ie. don't have to undo mobile styles
+ once on desktop, vice versa)
+ * Supports a mobile-first dev approach, with fallback for IE8
+ * Nestable
+ * Flexible for how containers react across breakpoints.
+ Same container may collapse in different ways on different pages
+==============================================================================*/
+
+/*============================================================================
+ Grid Measurements
+==============================================================================*/
+$column: 90px;
+$gutter: 30px;
+$gutter-half: $gutter / 2;
+
+$column--tablet: 60px !default;
+
+$grid-columns: 8 !default;
+
+// Extra $gutter * 0.5 to account for additional container padding to make 1440px
+$grid-extendor: $column * 2 + $gutter * 2.5 !default;
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_measurements.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_measurements.scss
new file mode 100755
index 000000000..571003263
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_measurements.scss
@@ -0,0 +1,27 @@
+/*============================================================================
+ Global Components - vars that are handy across the site
+==============================================================================*/
+/*================ Z Index ================*/
+// TODO We should move this to a smarter mixin
+$z-nav-sub: 989;
+$z-nav-main: 999;
+$z-nav-drawer: 1000;
+$z-popover: 1001;
+
+/*================ Nav ================*/
+$nav-height: 55px !default;
+$nav-top-padding: 12px !default;
+$nav-secondary-height: $nav-height !default;
+$nav-secondary-item-opacity: 0.55 !default;
+
+/*================ Forms ================*/
+$input-height: em(54, 18) !default;
+$input-padding: em(14, 18) em(16, 18) !default;
+
+/*================ Borders ================*/
+$border-grey: 1px solid $color-grey-border-on--white !default;
+$border-radius: 3px !default;
+
+/*================ Shopify logo ================*/
+$shopify-logo-width: 110px !default;
+$shopify-logo-height: 30px !default;
diff --git a/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_typography.scss b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_typography.scss
new file mode 100755
index 000000000..0cb4a806c
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/sass_helpers/variables/_typography.scss
@@ -0,0 +1,56 @@
+/*============================================================================
+ Font Weights
+==============================================================================*/
+$font-weight-thin: 100;
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-black: 900;
+
+
+/*============================================================================
+ Font Families
+==============================================================================*/
+$font-brandon-family: "Brandon", Helvetica, Arial, sans-serif;
+$font-body-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+$font-body-size: em(16);
+$font-body-color: $color-grey-body;
+
+
+/*============================================================================
+ Headings
+==============================================================================*/
+$h1-font-size: em(42) !default;
+$h1-font-size--tablet: em(36) !default;
+$h1-font-size--mobile: em(26) !default;
+$h1-margin-bottom: em(36, 42) !default;
+$h1-font-weight: $font-weight-medium !default;
+$h1-line-height: inherit !default;
+
+$h2-font-size: em(24) !default;
+$h2-font-size--tablet: em(22) !default;
+$h2-font-size--mobile: em(18) !default;
+$h2-margin-bottom: em(18, 24) !default;
+$h2-font-weight: $font-weight-medium !default;
+$h2-line-height: inherit !default;
+
+$h3-font-size: em(24) !default;
+$h3-font-size--tablet: em(22) !default;
+$h3-font-size--mobile: em(20) !default;
+$h3-margin-bottom: em(18, 24) !default;
+$h3-font-weight: $font-weight-light !default;
+$h3-line-height: inherit !default;
+
+$h4-font-size: em(19) !default;
+$h4-font-size--tablet: em(18) !default;
+$h4-margin-bottom: em(10, 19) !default;
+$h4-font-weight: $font-weight-medium !default;
+$h4-line-height: inherit !default;
+
+$h5-font-size: em(13) !default;
+$h5-margin-bottom: em(6, 13) !default;
+$h5-font-weight: $font-weight-black !default;
+$h5-line-height: inherit !default;
+$h5-letter-spacing: 0.2em !default;
diff --git a/docusaurus/v0/_sass/marketing_assets/setup/_base.scss b/docusaurus/v0/_sass/marketing_assets/setup/_base.scss
new file mode 100755
index 000000000..9c091bc5f
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/setup/_base.scss
@@ -0,0 +1,30 @@
+// box sizing for before and after elements
+*:before,
+*:after {
+ @include box-sizing(border-box);
+}
+
+.clearfix {
+ @include clearfix;
+}
+
+/*============================================================================
+ Animation Helpers
+ Force block on elements in transition, useful for transitions ending in display: none
+ Used with preparetransition.js
+==============================================================================*/
+
+.is-transitioning {
+ // scss-lint:disable ImportantRule
+ display: block !important;
+ visibility: visible !important;
+ // scss-lint:enable ImportantRule
+}
+
+/*============================================================================
+ Focus Helper
+ used only if using JS a11y-helpers to silently move focus on page
+==============================================================================*/
+.js-focus-hidden:focus {
+ outline: none;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/styleguide/content.scss b/docusaurus/v0/_sass/marketing_assets/styleguide/content.scss
new file mode 100755
index 000000000..481afa38c
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/styleguide/content.scss
@@ -0,0 +1 @@
+@import 'marketing_assets_content';
diff --git a/docusaurus/v0/_sass/marketing_assets/styleguide/styleguide.css.scss b/docusaurus/v0/_sass/marketing_assets/styleguide/styleguide.css.scss
new file mode 100755
index 000000000..004bf4bd9
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/styleguide/styleguide.css.scss
@@ -0,0 +1,461 @@
+/*
+ *= require styleguide/prism
+ */
+
+@import 'marketing_assets';
+
+/*================ Module Imports ================*/
+// needed since modules likely depend on vars
+@import 'marketing_assets/modules/tabbed-carousel-nav';
+@import 'marketing_assets/modules/tabbed-carousel';
+@import 'marketing_assets/modules/breadcrumbs';
+@import 'marketing_assets/modules/content/truncated-text';
+
+/*============================================================================
+ Styleguide Nav
+==============================================================================*/
+
+.page--has-styleguide-nav {
+ .marketing-nav__hamburger {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: $gutter;
+ }
+
+ .marketing-nav__logo {
+ margin-left: 50px;
+ }
+}
+
+/*============================================================================
+ Autocomplete search
+==============================================================================*/
+
+.autocomplete-suggestions {
+ border: $border-grey;
+ border-radius: $border-radius;
+ overflow-y: scroll;
+ background: $color-white;
+}
+
+.styleguide-search {
+ padding-top: $gutter;
+ margin-bottom: -$gutter * 1.5;
+}
+
+.autocomplete-suggestion {
+ padding: $input-padding;
+
+ &.autocomplete-selected {
+ background: $color-sky--light;
+ }
+}
+
+/*============================================================================
+ Styleguide Content
+==============================================================================*/
+.styleguide-content {
+ > p {
+ color: $color-grey-body;
+ max-width: 730px;
+ }
+
+ .styleguide-link {
+ color: darken($color-green, 10%);
+ border: 0;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ > h1,
+ > h2,
+ > h3,
+ > ul {
+ a {
+ border: 0;
+ color: darken($color-green, 10%);
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ h2,
+ h3,
+ h4,
+ p,
+ li {
+ > code {
+ font-size: 1.3em;
+ background: $color-grey-border-on--white;
+ }
+ }
+
+ hr {
+ margin: $gutter * 1.5 0;
+ background: $color-grey-border-on--white;
+ border: 0;
+ height: 1px;
+ }
+
+ ul {
+ list-style: disc;
+ list-style-position: inside;
+ padding-left: 1em;
+ }
+
+ > ol {
+ list-style-type: decimal;
+ list-style-position: inside;
+ }
+
+ .styleguide-table {
+ border-collapse: collapse;
+ margin-bottom: $gutter;
+
+ th,
+ td {
+ text-align: left;
+ background: $color-grey-border-on--white;
+ padding: 10px;
+ }
+ }
+
+ // Page-specific overrides
+ .marketing-nav__items {
+ margin-bottom: 0;
+ padding-left: 0;
+ }
+
+ .page--has-transparent-nav--primary .marketing-nav__secondary {
+ display: none;
+ }
+
+ .in-page-menu {
+ list-style: none;
+ padding-left: 0;
+ }
+}
+
+.styleguide__link-list {
+ column-count: 4;
+ column-width: em(180);
+
+ p {
+ // Prevent link borders from wrapping up the top of the next column
+ display: inline-block;
+ width: 100%;
+ }
+}
+
+/*============================================================================
+ Code Styles
+==============================================================================*/
+// scss-lint:disable QualifyingElement
+pre[class*='language-'] {
+ margin-top: $gutter;
+ margin-bottom: $gutter * 2;
+ clear: both; // accounts for the fact some modules are floated by default
+ font-size: 14px;
+ border: solid 1px $color-grey-heading;
+}
+
+.token.comment {
+ color: $color-red;
+}
+
+/*================ KSS Blocks ================*/
+.styleguide-kss {
+ border-bottom: 1px solid $color-grey-border-on--white;
+ padding-bottom: $gutter;
+ margin-bottom: $gutter;
+
+ pre.language-css {
+ display: inline-block;
+ font-size: em(14);
+ padding: 0 0.5em;
+ margin: 0 0 5px;
+ }
+}
+
+.styleguide-kss__modifier {
+ ul,
+ li {
+ list-style: none;
+ }
+}
+
+.styleguide-kss__modifier-description {
+ font-size: em(14);
+ padding: 0.5em;
+ vertical-align: top;
+ font-style: italic;
+}
+
+/*================ Styleguide Demo Modules ================*/
+.styleguide-links {
+ @include font-brandon-regular;
+ text-align: center;
+ margin: $gutter 0;
+ padding-bottom: $gutter / 2;
+ border-bottom: 1px solid $color-grey-border-on--white;
+
+ a {
+ display: inline-block;
+ margin-bottom: 10px;
+ color: $color-red;
+ margin-left: $gutter / 2;
+ margin-right: $gutter / 2;
+ }
+}
+
+.styleguide-demo {
+ margin-bottom: $gutter;
+}
+
+/*============================================================================
+ Modules - overrrides to better showcase styles
+==============================================================================*/
+
+/*================ Grid ================*/
+.styleguide-page-grid {
+ .styleguide-grid-item {
+ @include font-brandon-regular;
+ height: 100px;
+ padding-top: 10px;
+ margin-bottom: 30px;
+ background: $color-grey-body;
+ font-size: 14px;
+ text-align: center;
+ color: $color-white;
+
+ > .styleguide-grid-item {
+ margin-top: -10px;
+ }
+ }
+
+ .styleguide-padded-grid-box .styleguide-grid-item {
+ background: none;
+ }
+}
+
+/*================ Picture ================*/
+.styleguide-page-picture {
+ picture {
+ > img {
+ width: 500px;
+ }
+ }
+}
+
+/*================ Carousel ================*/
+.styleguide-carousel {
+ .carousel-item {
+ display: none;
+
+ &.js-is-active {
+ display: block;
+ }
+ }
+
+ .carousel-nav-item.js-is-active {
+ color: $color-green;
+ }
+}
+
+/*================ Color Page ================*/
+.styleguide-color {
+ margin-bottom: $gutter;
+ text-align: left;
+}
+
+.styleguide-color__block {
+ border: solid 1px $color-sky;
+ width: 90px;
+ height: 90px;
+ display: inline-block;
+ margin: 0;
+}
+
+.styleguide-color__text {
+ font-size: 80px;
+ display: inline-block;
+ font-weight: bold;
+}
+
+.styleguide-color__label {
+ @include font-brandon-regular;
+ color: $color-black;
+
+ .language-css {
+ font-size: 11.5px;
+ padding: 5px 2px;
+ margin: 0 0 10px;
+ }
+}
+
+.styleguide-color__color {
+ font-size: 12px;
+ font-style: italic;
+}
+
+.styleguide-color__usage {
+ margin-bottom: 5px;
+}
+
+/*================ Segment Page ================*/
+// overrides to add spacing between demos
+.styleguide-page-segments {
+ .styleguide-segment-example {
+ margin-bottom: 10px;
+ }
+
+ .segment-block {
+ padding: 0 8px;
+
+ > h2 {
+ color: $color-white;
+ margin-bottom: 0;
+ line-height: 100px;
+ }
+ }
+}
+
+/*================ Icons ================*/
+.styleguide-icon {
+ float: left;
+ text-align: center;
+ width: 150px;
+ height: 240px;
+ margin: 10px;
+ padding: $gutter 10px 0;
+ background-color: $color-grey-border-on--white;
+
+ > .icon {
+ margin-bottom: 14px;
+ }
+
+ .styleguide-icon__heading {
+ font-weight: 700;
+ }
+
+ > p {
+ display: block;
+ font-size: em(12);
+ margin: 3px 0 0;
+ }
+
+ > .styleguide-icon__info {
+ margin: 0;
+ }
+
+ &.js-hidden {
+ display: none;
+ }
+}
+
+.icon-styleguide-placholder {
+ background-image: asset-svg-url(shopify, $color-black);
+}
+
+/*================ Typography ================*/
+.styleguide-typography__block {
+ background: $color-sky;
+ padding: 15px;
+ margin-bottom: 30px;
+}
+
+/*================ Page Header ===============*/
+.page-header--some-custom-class {
+ @include retina-image('styleguide/about-video-placeholder', cover, 'jpg', $retina-suffix: '-@2x');
+}
+
+/*============================================================================
+YUI Docs output
+==============================================================================*/
+
+// scss-lint:disable MergeableSelector
+.styleguide-content .yuidocs__params {
+ list-style-position: outside;
+}
+// scss-lint:enable MergeableSelector
+
+.yuidocs__code-heading {
+ font-family: monospace;
+}
+
+h5.yuidocs__code-heading {
+ text-transform: none;
+ letter-spacing: normal;
+ margin-bottom: 0;
+}
+
+h3.yuidocs__code-heading {
+ font-size: em(28);
+}
+
+h4.yuidocs__code-heading {
+ font-size: em(24);
+ background: $color-sky--light;
+}
+
+.yuidocs__heading {
+ color: $color-green;
+}
+
+.yuidocs__args {
+ color: $color-grey-heading;
+}
+
+.yuidocs__type {
+ color: $color-grey-heading;
+ font-style: italic;
+}
+
+.yuidocs__label,
+.yuidocs__type {
+ font-size: em(12);
+ font-family: $font-body-family;
+}
+
+.yuidocs__label {
+ padding: em(2) em(6);
+ color: $color-white;
+ background: $color-grey-text--light;
+ border-radius: $border-radius;
+}
+// scss-lint:enable QualifyingElement
+
+.styleguide-examples {
+ max-width: 930px;
+ position: relative;
+ margin: ($gutter * 1.5) auto 0;
+}
+
+.styleguide-examples__tab {
+ display: none;
+
+ &.js-is-active {
+ display: block;
+ }
+}
+
+.styleguide-examples__toggle {
+ @include font-brandon-medium;
+ position: absolute;
+ top: 1px;
+ right: 1px;
+ padding: 8px 10px;
+ background: $color-grey-body;
+ color: $color-white;
+ border-bottom-left-radius: $border-radius;
+
+ &:hover,
+ &:focus {
+ background: darken($color-grey-body, 10%);
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/typography/_fonts.scss b/docusaurus/v0/_sass/marketing_assets/typography/_fonts.scss
new file mode 100755
index 000000000..daa634c86
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/typography/_fonts.scss
@@ -0,0 +1,24 @@
+@charset 'UTF-8';
+
+@mixin generate-font-faces($variants, $url-prefix: 'https://cdn.shopify.com/shopify-marketing_assets/static/') {
+ @each $family, $weight-key, $weight-var in $variants {
+ @font-face {
+ font-family: $family;
+ src: url("#{$url-prefix}#{$family}--#{$weight-key}.woff2") format('woff2'),
+ url("#{$url-prefix}#{$family}--#{$weight-key}.woff") format('woff');
+ font-style: normal;
+ font-weight: $weight-var;
+ }
+ }
+}
+
+// font family name, font weight keyword, font weight var
+$font-face-variants: (
+ ('Brandon', 'light', $font-weight-light),
+ ('Brandon', 'regular', $font-weight-regular),
+ ('Brandon', 'medium', $font-weight-medium),
+ ('Brandon', 'bold', $font-weight-bold),
+ ('Brandon', 'black', $font-weight-black),
+);
+
+@include generate-font-faces($font-face-variants);
diff --git a/docusaurus/v0/_sass/marketing_assets/typography/_typography.scss b/docusaurus/v0/_sass/marketing_assets/typography/_typography.scss
new file mode 100755
index 000000000..129aca2ef
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/typography/_typography.scss
@@ -0,0 +1,221 @@
+/*============================================================================
+ Typography defaults
+==============================================================================*/
+
+/*================ Default ================*/
+body {
+ margin: 0;
+ padding: 0;
+ background: $color-sky;
+ font-family: $font-body-family;
+ font-size: $font-body-size;
+ color: $font-body-color;
+ font-weight: $font-weight-regular;
+ -webkit-font-smoothing: antialiased;
+
+ @include shopify-breakpoint($tablet-down) {
+ font-size: em(15);
+ }
+}
+
+/*================ Headers ================*/
+h1,
+h2,
+h3,
+h4,
+h5 {
+ margin-top: 0;
+}
+
+h1,
+.heading--1 {
+ @include font-brandon-medium();
+ @include opentype-features-display();
+ display: block;
+ margin-bottom: $h1-margin-bottom;
+ color: $color-slate;
+ font-size: $h1-font-size;
+ line-height: $h1-line-height;
+ font-weight: $h1-font-weight;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h1-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h1-font-size--mobile;
+ }
+}
+
+
+h2,
+.heading--2 {
+ @include font-brandon-medium();
+ @include opentype-features-display();
+ display: block;
+ margin-bottom: $h2-margin-bottom;
+ color: $color-slate;
+ font-size: $h2-font-size;
+ line-height: $h2-line-height;
+ font-weight: $h2-font-weight;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h2-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h2-font-size--mobile;
+ }
+}
+
+h3,
+.heading--3 {
+ @include font-brandon-light();
+ display: block;
+ font-size: $h3-font-size;
+ margin-bottom: $h3-margin-bottom;
+ color: $color-slate;
+ line-height: $h3-line-height;
+ font-weight: $h3-font-weight;
+
+ @include shopify-breakpoint($tablet-only) {
+ font-size: $h3-font-size--tablet;
+ }
+
+ @include shopify-breakpoint($mobile) {
+ font-size: $h3-font-size--mobile;
+ }
+}
+
+h4,
+.heading--4 {
+ @include font-brandon-medium();
+ display: block;
+ margin-bottom: $h4-margin-bottom;
+ color: $color-slate;
+ font-size: $h4-font-size;
+ line-height: $h4-line-height;
+ font-weight: $h4-font-weight;
+
+ @include shopify-breakpoint($tablet-down) {
+ font-size: $h4-font-size--tablet;
+ }
+}
+
+h5,
+.heading--5 {
+ @include font-brandon-black();
+ display: block;
+ margin-bottom: $h5-margin-bottom;
+ color: $color-slate;
+ font-size: $h5-font-size;
+ line-height: $h5-line-height;
+ font-weight: $h5-font-weight;
+ text-transform: uppercase;
+ letter-spacing: $h5-letter-spacing;
+}
+
+a {
+ text-decoration: none;
+ cursor: pointer;
+ color: $color-grey-body;
+}
+
+/*============================================================================
+ Body Copy
+==============================================================================*/
+.txt--minor {
+ font-size: em(14);
+ line-height: em(20, 14);
+}
+
+.txt--major {
+ @include font-brandon-light();
+ font-size: em(19);
+}
+
+.body-link {
+ padding-bottom: em(3, 16);
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ color: $color-green;
+ transition: border-color 150ms ease-in-out;
+
+ &:hover,
+ &:focus {
+ border-bottom-color: transparent;
+ }
+}
+
+main {
+ p,
+ ul,
+ ol {
+ margin-bottom: em($gutter / 2);
+ line-height: em(24);
+ font-size: em(16);
+ }
+
+ p > a {
+ @extend .body-link;
+ }
+}
+
+.marketing-quote {
+ margin: $gutter 0;
+}
+
+.marketing-quote__content {
+ @include font-brandon-light();
+ margin: 0;
+ padding: em(16, 24) 0 em(16, 24) $gutter;
+ font-size: em(24);
+ color: $color-black;
+ border-left: solid 2px $color-sky;
+}
+
+.marketing-quote__footer {
+ text-align: right;
+}
+
+.marketing-quote__cite {
+ font-style: normal;
+}
+
+// Should be removed, but too many deps
+.heading-container {
+ text-align: center;
+}
+
+.section-intro {
+ @include clearfix;
+ border: 1px solid rgba($color-black, 0.2);
+ border-width: 1px 0;
+ padding: em(36) 0;
+}
+
+/*============================================================================
+ Lowlight Typography
+==============================================================================*/
+.lowlight__heading {
+ // scss-lint:disable ImportantRule
+ color: $color-white !important;
+ // scss-lint:enable ImportantRule
+}
+
+.lowlight__quote {
+ border-color: $color-grey-text--light;
+}
+
+/*============================================================================
+ Lists
+==============================================================================*/
+.numbered-list {
+ list-style: decimal;
+ list-style-position: outside;
+ margin-left: 2.5em;
+
+ li {
+ margin-bottom: 0.5em;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/utils/_alignment.scss b/docusaurus/v0/_sass/marketing_assets/utils/_alignment.scss
new file mode 100755
index 000000000..c52cce7ee
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/utils/_alignment.scss
@@ -0,0 +1,17 @@
+.text-center {
+ text-align: center;
+}
+
+.text-left {
+ text-align: left;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.text-center--mobile {
+ @include shopify-breakpoint($mobile) {
+ text-align: center;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/utils/_colors.scss b/docusaurus/v0/_sass/marketing_assets/utils/_colors.scss
new file mode 100755
index 000000000..25aefe7e1
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/utils/_colors.scss
@@ -0,0 +1,7 @@
+.text-white {
+ color: $color-white;
+}
+
+.text-slate {
+ color: $color-slate;
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/utils/_gutters.scss b/docusaurus/v0/_sass/marketing_assets/utils/_gutters.scss
new file mode 100755
index 000000000..3ad4e2659
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/utils/_gutters.scss
@@ -0,0 +1,25 @@
+.gutter-bottom {
+ margin-bottom: $gutter;
+}
+
+.gutter-bottom--reset {
+ //scss-lint:disable ImportantRule
+ margin-bottom: 0 !important;
+ //scss-lint:enable ImportantRule
+}
+
+.gutter-bottom--half {
+ margin-bottom: $gutter-half;
+}
+
+@include shopify-breakpoint($mobile) {
+ .gutter-bottom--reset--mobile {
+ //scss-lint:disable ImportantRule
+ margin-bottom: 0 !important;
+ //scss-lint:enable ImportantRule
+ }
+
+ .gutter-bottom--mobile {
+ margin-bottom: $gutter;
+ }
+}
diff --git a/docusaurus/v0/_sass/marketing_assets/utils/_responsive.scss b/docusaurus/v0/_sass/marketing_assets/utils/_responsive.scss
new file mode 100755
index 000000000..7972d4ca0
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets/utils/_responsive.scss
@@ -0,0 +1,41 @@
+/*============================================================================
+ Responsive Helpers
+==============================================================================*/
+/*================ Selectively show/hide content ================*/
+// scss-lint:disable ImportantRule
+.display--mobile,
+.display--tablet,
+.display--desktop {
+ display: none !important;
+}
+
+@include shopify-breakpoint($desktop) {
+ .display--desktop {
+ display: block !important;
+ }
+
+ .hide--desktop {
+ display: none !important;
+ }
+}
+
+@include shopify-breakpoint($tablet-only) {
+ .display--tablet {
+ display: block !important;
+ }
+
+ .hide--tablet {
+ display: none !important;
+ }
+}
+
+@include shopify-breakpoint($mobile) {
+ .display--mobile {
+ display: block !important;
+ }
+
+ .hide--mobile {
+ display: none !important;
+ }
+}
+// scss-lint:enable ImportantRule
diff --git a/docusaurus/v0/_sass/marketing_assets_content.scss b/docusaurus/v0/_sass/marketing_assets_content.scss
new file mode 100755
index 000000000..a13ca16c6
--- /dev/null
+++ b/docusaurus/v0/_sass/marketing_assets_content.scss
@@ -0,0 +1,35 @@
+//==============================================================================
+// Setup default variable values for grid and typography
+//==============================================================================
+@import "marketing_assets/content/setup/grid";
+@import "marketing_assets/content/setup/typography";
+
+//==============================================================================
+// Import marketing_assets
+//==============================================================================
+
+@import "marketing_assets";
+@import "marketing_assets/content/setup/base";
+@import "marketing_assets/content/setup/overrides";
+
+//==============================================================================
+// Import content modules
+//==============================================================================
+
+@import "marketing_assets/content/grid/grid";
+@import "marketing_assets/content/modules";
+
+//==============================================================================
+// Generate content icons
+//==============================================================================
+
+$content-icons: (
+ (resources, 'green'),
+ (blog-updates, 'green'),
+ (popular, 'green'),
+ (checked, 'green'),
+ (rss, 'grey'),
+ (twitter, 'grey')
+);
+
+@include generate-icon-classes($content-icons);
diff --git a/docusaurus/v0/_sass/neat/_neat-helpers.scss b/docusaurus/v0/_sass/neat/_neat-helpers.scss
new file mode 100644
index 000000000..9c182d2ee
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/_neat-helpers.scss
@@ -0,0 +1,8 @@
+// Functions
+@import "functions/private";
+@import "functions/new-breakpoint";
+
+// Settings
+@import "settings/grid";
+@import "settings/visual-grid";
+@import "settings/disable-warnings";
diff --git a/docusaurus/v0/_sass/neat/_neat.scss b/docusaurus/v0/_sass/neat/_neat.scss
new file mode 100644
index 000000000..eef5b9fd3
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/_neat.scss
@@ -0,0 +1,23 @@
+// Neat 1.7.4
+// http://neat.bourbon.io
+// Copyright 2012-2015 thoughtbot, inc.
+// MIT License
+
+// Helpers
+@import "neat-helpers";
+
+// Grid
+@import "grid/private";
+@import "grid/box-sizing";
+@import "grid/omega";
+@import "grid/outer-container";
+@import "grid/span-columns";
+@import "grid/row";
+@import "grid/shift";
+@import "grid/pad";
+@import "grid/fill-parent";
+@import "grid/media";
+@import "grid/to-deprecate";
+@import "grid/visual-grid";
+@import "grid/display-context";
+@import "grid/direction-context";
diff --git a/docusaurus/v0/_sass/neat/functions/_new-breakpoint.scss b/docusaurus/v0/_sass/neat/functions/_new-breakpoint.scss
new file mode 100644
index 000000000..41ab95564
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/functions/_new-breakpoint.scss
@@ -0,0 +1,49 @@
+@charset "UTF-8";
+
+/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
+///
+/// @param {List} $query
+/// A list of media query features and values. Each `$feature` should have a corresponding `$value`.
+///
+/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
+///
+/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
+///
+/// @param {Number (unitless)} $total-columns [$grid-columns]
+/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
+///
+/// @example scss - Usage
+/// $mobile: new-breakpoint(max-width 480px 4);
+///
+/// .element {
+/// @include media($mobile) {
+/// @include span-columns(4);
+/// }
+/// }
+///
+/// @example css - CSS Output
+/// @media screen and (max-width: 480px) {
+/// .element {
+/// display: block;
+/// float: left;
+/// margin-right: 7.42297%;
+/// width: 100%;
+/// }
+/// .element:last-child {
+/// margin-right: 0;
+/// }
+/// }
+
+@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
+ @if length($query) == 1 {
+ $query: $default-feature nth($query, 1) $total-columns;
+ } @else if is-even(length($query)) {
+ $query: append($query, $total-columns);
+ }
+
+ @if is-not(belongs-to($query, $visual-grid-breakpoints)) {
+ $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
+ }
+
+ @return $query;
+}
diff --git a/docusaurus/v0/_sass/neat/functions/_private.scss b/docusaurus/v0/_sass/neat/functions/_private.scss
new file mode 100644
index 000000000..872d4dc58
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/functions/_private.scss
@@ -0,0 +1,114 @@
+// Not function for Libsass compatibility
+// https://github.com/sass/libsass/issues/368
+@function is-not($value) {
+ @return if($value, false, true);
+}
+
+// Checks if a number is even
+@function is-even($int) {
+ @return $int % 2 == 0;
+}
+
+// Checks if an element belongs to a list or not
+@function belongs-to($tested-item, $list) {
+ @return is-not(not-belongs-to($tested-item, $list));
+}
+
+@function not-belongs-to($tested-item, $list) {
+ @return is-not(index($list, $tested-item));
+}
+
+// Contains display value
+@function contains-display-value($query) {
+ @return belongs-to(table, $query)
+ or belongs-to(block, $query)
+ or belongs-to(inline-block, $query)
+ or belongs-to(inline, $query);
+}
+
+// Parses the first argument of span-columns()
+@function container-span($span: $span) {
+ @if length($span) == 3 {
+ $container-columns: nth($span, 3);
+ @return $container-columns;
+ } @else if length($span) == 2 {
+ $container-columns: nth($span, 2);
+ @return $container-columns;
+ }
+
+ @return $grid-columns;
+}
+
+@function container-shift($shift: $shift) {
+ $parent-columns: $grid-columns !default !global;
+
+ @if length($shift) == 3 {
+ $container-columns: nth($shift, 3);
+ @return $container-columns;
+ } @else if length($shift) == 2 {
+ $container-columns: nth($shift, 2);
+ @return $container-columns;
+ }
+
+ @return $parent-columns;
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+ $transparent: transparent;
+
+ $column-width: flex-grid(1, $grid-columns);
+ $gutter-width: flex-gutter($grid-columns);
+ $column-offset: $column-width;
+
+ $values: ($transparent 0, $color 0);
+
+ @for $i from 1 to $grid-columns*2 {
+ @if is-even($i) {
+ $values: append($values, $transparent $column-offset, comma);
+ $values: append($values, $color $column-offset, comma);
+ $column-offset: $column-offset + $column-width;
+ } @else {
+ $values: append($values, $color $column-offset, comma);
+ $values: append($values, $transparent $column-offset, comma);
+ $column-offset: $column-offset + $gutter-width;
+ }
+ }
+
+ @return $values;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+ $direction: null;
+
+ @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
+ $direction: direction-from-layout($layout);
+ } @else {
+ $direction: direction-from-layout($default);
+ }
+
+ @return $direction;
+}
+
+@function direction-from-layout($layout) {
+ $direction: null;
+
+ @if to-upper-case($layout) == "LTR" {
+ $direction: right;
+ } @else {
+ $direction: left;
+ }
+
+ @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+ $opposite-direction: left;
+
+ @if $direction == "left" {
+ $opposite-direction: right;
+ }
+
+ @return $opposite-direction;
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_box-sizing.scss b/docusaurus/v0/_sass/neat/grid/_box-sizing.scss
new file mode 100644
index 000000000..b6d3fec33
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_box-sizing.scss
@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@if $border-box-sizing == true {
+ html { // http://bit.ly/1qk2tVR
+ box-sizing: border-box;
+ }
+
+ * {
+ &,
+ &::after,
+ &::before {
+ box-sizing: inherit;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_direction-context.scss b/docusaurus/v0/_sass/neat/grid/_direction-context.scss
new file mode 100644
index 000000000..7b0d46e8b
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_direction-context.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+/// Changes the direction property used by other mixins called in the code block argument.
+///
+/// @param {String} $direction [left-to-right]
+/// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
+///
+/// @example scss - Usage
+/// @include direction-context(right-to-left) {
+/// .right-to-left-block {
+/// @include span-columns(6);
+/// }
+/// }
+///
+/// @example css - CSS Output
+/// .right-to-left-block {
+/// float: right;
+/// ...
+/// }
+
+@mixin direction-context($direction: left-to-right) {
+ $scope-direction: $layout-direction;
+
+ @if to-lower-case($direction) == "left-to-right" {
+ $layout-direction: LTR !global;
+ } @else if to-lower-case($direction) == "right-to-left" {
+ $layout-direction: RTL !global;
+ }
+
+ @content;
+
+ $layout-direction: $scope-direction !global;
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_display-context.scss b/docusaurus/v0/_sass/neat/grid/_display-context.scss
new file mode 100644
index 000000000..ed9b0637d
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_display-context.scss
@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+/// Changes the display property used by other mixins called in the code block argument.
+///
+/// @param {String} $display [block]
+/// Display value to be used within the block. Can be `table` or `block`.
+///
+/// @example scss
+/// @include display-context(table) {
+/// .display-table {
+/// @include span-columns(6);
+/// }
+/// }
+///
+/// @example css
+/// .display-table {
+/// display: table-cell;
+/// ...
+/// }
+
+@mixin display-context($display: block) {
+ $scope-display: $container-display-table;
+ $container-display-table: $display == table !global;
+
+ @content;
+
+ $container-display-table: $scope-display !global;
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_fill-parent.scss b/docusaurus/v0/_sass/neat/grid/_fill-parent.scss
new file mode 100644
index 000000000..415f0b1e5
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_fill-parent.scss
@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+/// Forces the element to fill its parent container.
+///
+/// @example scss - Usage
+/// .element {
+/// @include fill-parent;
+/// }
+///
+/// @example css - CSS Output
+/// .element {
+/// width: 100%;
+/// box-sizing: border-box;
+/// }
+
+@mixin fill-parent() {
+ width: 100%;
+
+ @if $border-box-sizing == false {
+ box-sizing: border-box;
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_media.scss b/docusaurus/v0/_sass/neat/grid/_media.scss
new file mode 100644
index 000000000..bd516e99a
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_media.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+
+/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).
+///
+/// @param {List} $query
+/// A list of media query features and values, where each `$feature` should have a corresponding `$value`.
+/// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
+///
+/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
+///
+/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).
+///
+///
+/// @param {Number (unitless)} $total-columns [$grid-columns]
+/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
+///
+/// @example scss - Usage
+/// .responsive-element {
+/// @include media(769px) {
+/// @include span-columns(6);
+/// }
+/// }
+///
+/// .new-context-element {
+/// @include media(min-width 320px max-width 480px, 6) {
+/// @include span-columns(6);
+/// }
+/// }
+///
+/// @example css - CSS Output
+/// @media screen and (min-width: 769px) {
+/// .responsive-element {
+/// display: block;
+/// float: left;
+/// margin-right: 2.35765%;
+/// width: 48.82117%;
+/// }
+///
+/// .responsive-element:last-child {
+/// margin-right: 0;
+/// }
+/// }
+///
+/// @media screen and (min-width: 320px) and (max-width: 480px) {
+/// .new-context-element {
+/// display: block;
+/// float: left;
+/// margin-right: 4.82916%;
+/// width: 100%;
+/// }
+///
+/// .new-context-element:last-child {
+/// margin-right: 0;
+/// }
+/// }
+
+@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {
+ @if length($query) == 1 {
+ @media screen and ($default-feature: nth($query, 1)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns !global;
+ @content;
+ $grid-columns: $default-grid-columns !global;
+ }
+ } @else {
+ $loop-to: length($query);
+ $media-query: "screen and ";
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns !global;
+
+ @if is-not(is-even(length($query))) {
+ $grid-columns: nth($query, $loop-to) !global;
+ $loop-to: $loop-to - 1;
+ }
+
+ $i: 1;
+ @while $i <= $loop-to {
+ $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
+
+ @if ($i + 1) != $loop-to {
+ $media-query: $media-query + "and ";
+ }
+
+ $i: $i + 2;
+ }
+
+ @media #{$media-query} {
+ @content;
+ $grid-columns: $default-grid-columns !global;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_omega.scss b/docusaurus/v0/_sass/neat/grid/_omega.scss
new file mode 100644
index 000000000..80f918ab7
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_omega.scss
@@ -0,0 +1,87 @@
+@charset "UTF-8";
+
+/// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts.
+///
+/// @param {List} $query [block]
+/// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`).
+///
+/// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature.
+///
+/// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead.
+///
+/// @example scss - Usage
+/// .element {
+/// @include omega;
+/// }
+///
+/// .nth-element {
+/// @include omega(4n);
+/// }
+///
+/// @example css - CSS Output
+/// .element {
+/// margin-right: 0;
+/// }
+///
+/// .nth-element:nth-child(4n) {
+/// margin-right: 0;
+/// }
+///
+/// .nth-element:nth-child(4n+1) {
+/// clear: left;
+/// }
+
+@mixin omega($query: block, $direction: default) {
+ $table: belongs-to(table, $query);
+ $auto: belongs-to(auto, $query);
+
+ @if $direction != default {
+ @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin.");
+ } @else {
+ $direction: get-direction($layout-direction, $default-layout-direction);
+ }
+
+ @if $table {
+ @include -neat-warn("The omega mixin no longer removes padding in table layouts.");
+ }
+
+ @if length($query) == 1 {
+ @if $auto {
+ &:last-child {
+ margin-#{$direction}: 0;
+ }
+ }
+
+ @else if contains-display-value($query) and $table == false {
+ margin-#{$direction}: 0;
+ }
+
+ @else {
+ @include nth-child($query, $direction);
+ }
+ } @else if length($query) == 2 {
+ @if $auto {
+ &:last-child {
+ margin-#{$direction}: 0;
+ }
+ } @else {
+ @include nth-child(nth($query, 1), $direction);
+ }
+ } @else {
+ @include -neat-warn("Too many arguments passed to the omega() mixin.");
+ }
+}
+
+@mixin nth-child($query, $direction) {
+ $opposite-direction: get-opposite-direction($direction);
+
+ &:nth-child(#{$query}) {
+ margin-#{$direction}: 0;
+ }
+
+ @if type-of($query) == number and unit($query) == "n" {
+ &:nth-child(#{$query}+1) {
+ clear: $opposite-direction;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_outer-container.scss b/docusaurus/v0/_sass/neat/grid/_outer-container.scss
new file mode 100644
index 000000000..31b0c6415
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_outer-container.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+/// Makes an element a outer container by centering it in the viewport, clearing its floats, and setting its `max-width`.
+/// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested.
+///
+/// @param {Number [unit]} $local-max-width [$max-width]
+/// Max width to be applied to the element. Can be a percentage or a measure.
+///
+/// @example scss - Usage
+/// .element {
+/// @include outer-container(100%);
+/// }
+///
+/// @example css - CSS Output
+/// .element {
+/// *zoom: 1;
+/// max-width: 100%;
+/// margin-left: auto;
+/// margin-right: auto;
+/// }
+///
+/// .element:before, .element:after {
+/// content: " ";
+/// display: table;
+/// }
+///
+/// .element:after {
+/// clear: both;
+/// }
+
+@mixin outer-container($local-max-width: $max-width) {
+ @include clearfix;
+ max-width: $local-max-width;
+ margin: {
+ left: auto;
+ right: auto;
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_pad.scss b/docusaurus/v0/_sass/neat/grid/_pad.scss
new file mode 100644
index 000000000..d697e1b99
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_pad.scss
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+/// Adds padding to the element.
+///
+/// @param {List} $padding [flex-gutter()]
+/// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value.
+///
+/// @example scss - Usage
+/// .element {
+/// @include pad(30px -20px 10px default);
+/// }
+///
+/// @example css - CSS Output
+/// .element {
+/// padding: 30px -20px 10px 2.35765%;
+/// }
+
+@mixin pad($padding: flex-gutter()) {
+ $padding-list: null;
+ @each $value in $padding {
+ $value: if($value == 'default', flex-gutter(), $value);
+ $padding-list: join($padding-list, $value);
+ }
+ padding: $padding-list;
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_private.scss b/docusaurus/v0/_sass/neat/grid/_private.scss
new file mode 100644
index 000000000..4c4e18c17
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_private.scss
@@ -0,0 +1,35 @@
+$parent-columns: $grid-columns !default;
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$container-display-table: false !default;
+$layout-direction: LTR !default;
+
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+ $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($width / $container-width);
+}
+
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($gutter / $container-width);
+}
+
+@function grid-width($n) {
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+@function get-parent-columns($columns) {
+ @if $columns != $grid-columns {
+ $parent-columns: $columns !global;
+ } @else {
+ $parent-columns: $grid-columns !global;
+ }
+
+ @return $parent-columns;
+}
+
+@function is-display-table($container-is-display-table, $display) {
+ @return $container-is-display-table == true or $display == table;
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_row.scss b/docusaurus/v0/_sass/neat/grid/_row.scss
new file mode 100644
index 000000000..4d913a925
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_row.scss
@@ -0,0 +1,52 @@
+@charset "UTF-8";
+
+/// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout.
+///
+/// @param {String} $display [default]
+/// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`.
+///
+/// @param {String} $direction [$default-layout-direction]
+/// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left).
+///
+/// @example scss - Usage
+/// .element {
+/// @include row();
+/// }
+///
+/// @example css - CSS Output
+/// .element {
+/// *zoom: 1;
+/// display: block;
+/// }
+///
+/// .element:before, .element:after {
+/// content: " ";
+/// display: table;
+/// }
+///
+/// .element:after {
+/// clear: both;
+/// }
+
+@mixin row($display: default, $direction: $default-layout-direction) {
+ @if $direction != $default-layout-direction {
+ @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin.");
+ }
+
+ $layout-direction: $direction !global;
+
+ @if $display != default {
+ @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin.");
+ }
+
+ @if $display == table {
+ display: table;
+ @include fill-parent;
+ table-layout: fixed;
+ $container-display-table: true !global;
+ } @else {
+ @include clearfix;
+ display: block;
+ $container-display-table: false !global;
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_shift.scss b/docusaurus/v0/_sass/neat/grid/_shift.scss
new file mode 100644
index 000000000..c0f24cd8e
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_shift.scss
@@ -0,0 +1,50 @@
+@charset "UTF-8";
+
+/// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction.
+///
+/// @param {Number (unitless)} $n-columns [1]
+/// Number of columns by which the element shifts.
+///
+/// @example scss - Usage
+/// .element {
+/// @include shift(-3);
+/// }
+///
+/// @example css - CSS output
+/// .element {
+/// margin-left: -25.58941%;
+/// }
+
+@mixin shift($n-columns: 1) {
+ @include shift-in-context($n-columns);
+}
+
+/// Translates an element horizontally by a number of columns, in a specific nesting context.
+///
+/// @param {List} $shift
+/// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`).
+///
+/// The two values can be separated with any string such as `of`, `/`, etc.
+///
+/// @example scss - Usage
+/// .element {
+/// @include shift(-3 of 6);
+/// }
+///
+/// @example css - CSS output
+/// .element {
+/// margin-left: -52.41458%;
+/// }
+
+@mixin shift-in-context($shift: $columns of $container-columns) {
+ $n-columns: nth($shift, 1);
+ $parent-columns: container-shift($shift) !global;
+
+ $direction: get-direction($layout-direction, $default-layout-direction);
+ $opposite-direction: get-opposite-direction($direction);
+
+ margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+
+ // Reset nesting context
+ $parent-columns: $grid-columns !global;
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_span-columns.scss b/docusaurus/v0/_sass/neat/grid/_span-columns.scss
new file mode 100644
index 000000000..a7f9b0031
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_span-columns.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+
+/// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.
+///
+/// @param {List} $span
+/// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional).
+///
+/// If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid.
+///
+/// The values can be separated with any string such as `of`, `/`, etc.
+///
+/// `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns.
+///
+/// @param {String} $display [block]
+/// Sets the display property of the element. By default it sets the display property of the element to `block`.
+///
+/// If passed `block-collapse`, it also removes the margin gutter by adding it to the element width.
+///
+/// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.
+///
+/// @example scss - Usage
+/// .element {
+/// @include span-columns(6);
+///
+/// .nested-element {
+/// @include span-columns(2 of 6);
+/// }
+/// }
+///
+/// @example css - CSS Output
+/// .element {
+/// display: block;
+/// float: left;
+/// margin-right: 2.35765%;
+/// width: 48.82117%;
+/// }
+///
+/// .element:last-child {
+/// margin-right: 0;
+/// }
+///
+/// .element .nested-element {
+/// display: block;
+/// float: left;
+/// margin-right: 4.82916%;
+/// width: 30.11389%;
+/// }
+///
+/// .element .nested-element:last-child {
+/// margin-right: 0;
+/// }
+
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+ $columns: nth($span, 1);
+ $container-columns: container-span($span);
+
+ $parent-columns: get-parent-columns($container-columns) !global;
+
+ $direction: get-direction($layout-direction, $default-layout-direction);
+ $opposite-direction: get-opposite-direction($direction);
+
+ $display-table: is-display-table($container-display-table, $display);
+
+ @if $display-table {
+ display: table-cell;
+ width: percentage($columns / $container-columns);
+ } @else {
+ float: #{$opposite-direction};
+
+ @if $display != no-display {
+ display: block;
+ }
+
+ @if $display == collapse {
+ @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead.");
+ }
+
+ @if $display == collapse or $display == block-collapse {
+ width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+ &:last-child {
+ width: flex-grid($columns, $container-columns);
+ }
+
+ } @else {
+ margin-#{$direction}: flex-gutter($container-columns);
+ width: flex-grid($columns, $container-columns);
+
+ &:last-child {
+ margin-#{$direction}: 0;
+ }
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_to-deprecate.scss b/docusaurus/v0/_sass/neat/grid/_to-deprecate.scss
new file mode 100644
index 000000000..aeea0795b
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_to-deprecate.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+ @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.");
+
+ @if length($query) == 1 {
+ @media screen and ($default-feature: nth($query, 1)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ } @else if length($query) == 2 {
+ @media screen and (nth($query, 1): nth($query, 2)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ } @else if length($query) == 3 {
+ @media screen and (nth($query, 1): nth($query, 2)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: nth($query, 3);
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ } @else if length($query) == 4 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ } @else if length($query) == 5 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: nth($query, 5);
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ } @else {
+ @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details.");
+ }
+}
+
+@mixin nth-omega($nth, $display: block, $direction: default) {
+ @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead.");
+ @include omega($nth $display, $direction);
+}
+
+/// Resets the active display property to `block`. Particularly useful when changing the display property in a single row.
+///
+/// @example scss - Usage
+/// .element {
+/// @include row(table);
+/// // Context changed to table display
+/// }
+///
+/// @include reset-display;
+/// // Context is reset to block display
+
+@mixin reset-display {
+ $container-display-table: false !global;
+ @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin.");
+}
+
+/// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row.
+///
+/// @example scss - Usage
+/// .element {
+/// @include row($direction: RTL);
+/// // Context changed to right-to-left
+/// }
+///
+/// @include reset-layout-direction;
+/// // Context is reset to left-to-right
+
+@mixin reset-layout-direction {
+ $layout-direction: $default-layout-direction !global;
+ @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin.");
+}
+
+/// Resets both the active layout direction and the active display property.
+///
+/// @example scss - Usage
+/// .element {
+/// @include row(table, RTL);
+/// // Context changed to table table and right-to-left
+/// }
+///
+/// @include reset-all;
+/// // Context is reset to block display and left-to-right
+
+@mixin reset-all {
+ @include reset-display;
+ @include reset-layout-direction;
+}
diff --git a/docusaurus/v0/_sass/neat/grid/_visual-grid.scss b/docusaurus/v0/_sass/neat/grid/_visual-grid.scss
new file mode 100644
index 000000000..1192d8288
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/grid/_visual-grid.scss
@@ -0,0 +1,42 @@
+@charset "UTF-8";
+
+@mixin grid-column-gradient($values...) {
+ background-image: -webkit-linear-gradient(left, $values);
+ background-image: -moz-linear-gradient(left, $values);
+ background-image: -ms-linear-gradient(left, $values);
+ background-image: -o-linear-gradient(left, $values);
+ background-image: unquote("linear-gradient(to left, #{$values})");
+}
+
+@if $visual-grid == true or $visual-grid == yes {
+ body:before {
+ @include grid-column-gradient(gradient-stops($grid-columns));
+ content: "";
+ display: inline-block;
+ height: 100%;
+ left: 0;
+ margin: 0 auto;
+ max-width: $max-width;
+ opacity: $visual-grid-opacity;
+ pointer-events: none;
+ position: fixed;
+ right: 0;
+ width: 100%;
+
+ @if $visual-grid-index == back {
+ z-index: -1;
+ }
+
+ @else if $visual-grid-index == front {
+ z-index: 9999;
+ }
+
+ @each $breakpoint in $visual-grid-breakpoints {
+ @if $breakpoint {
+ @include media($breakpoint) {
+ @include grid-column-gradient(gradient-stops($grid-columns));
+ }
+ }
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/settings/_disable-warnings.scss b/docusaurus/v0/_sass/neat/settings/_disable-warnings.scss
new file mode 100644
index 000000000..3f9b92a6a
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/settings/_disable-warnings.scss
@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+/// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag.
+///
+/// @type Bool
+
+$disable-warnings: false !default;
+
+@mixin -neat-warn($message) {
+ @if $disable-warnings == false {
+ @warn "#{$message}";
+ }
+}
diff --git a/docusaurus/v0/_sass/neat/settings/_grid.scss b/docusaurus/v0/_sass/neat/settings/_grid.scss
new file mode 100644
index 000000000..e2029d01d
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/settings/_grid.scss
@@ -0,0 +1,51 @@
+@charset "UTF-8";
+
+/// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with a `!global` flag.
+///
+/// @type Number (Unit)
+
+$column: modular-scale(3, 1em, $golden) !default;
+
+/// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with the `!global` flag.
+///
+/// @type Number (Unit)
+
+$gutter: modular-scale(1, 1em, $golden) !default;
+
+/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag.
+///
+/// @type Number (Unitless)
+
+$grid-columns: 12 !default;
+
+/// Sets the max-width property of the element that includes `outer-container()`. Set with the `!global` flag.
+///
+/// @type Number (Unit)
+///
+$max-width: 1200px !default;
+
+/// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag.
+///
+/// @type Bool
+///
+/// @example css - CSS Output
+/// html {
+/// box-sizing: border-box; }
+///
+/// *, *::after, *::before {
+/// box-sizing: inherit;
+/// }
+
+$border-box-sizing: true !default;
+
+/// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag.
+///
+/// @type String
+
+$default-feature: min-width; // Default @media feature for the breakpoint() mixin
+
+///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag.
+///
+///@type String
+
+$default-layout-direction: LTR !default;
diff --git a/docusaurus/v0/_sass/neat/settings/_visual-grid.scss b/docusaurus/v0/_sass/neat/settings/_visual-grid.scss
new file mode 100644
index 000000000..9cd1815a2
--- /dev/null
+++ b/docusaurus/v0/_sass/neat/settings/_visual-grid.scss
@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+/// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag.
+///
+/// @type Bool
+
+$visual-grid: false !default;
+
+/// Sets the visual grid color. Set with `!global` flag.
+///
+/// @type Color
+
+$visual-grid-color: #eee !default;
+
+/// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag.
+///
+/// @type String
+
+$visual-grid-index: back !default;
+
+/// Sets the opacity property of the visual grid. Set with `!global` flag.
+///
+/// @type Number (unitless)
+
+$visual-grid-opacity: 0.4 !default;
+
+$visual-grid-breakpoints: () !default;
diff --git a/docusaurus/v0/_sass/slate/global/blank-states.scss b/docusaurus/v0/_sass/slate/global/blank-states.scss
new file mode 100644
index 000000000..074e0846f
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/blank-states.scss
@@ -0,0 +1,36 @@
+$color-blankstate: rgba($color-body-text, 0.35);
+$color-blankstate-border: rgba($color-body-text, 0.2);
+$color-blankstate-background: rgba($color-body-text, 0.1);
+
+.placeholder-svg {
+ display: block;
+ fill: $color-blankstate;
+ background-color: $color-blankstate-background;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ border: 1px solid $color-blankstate-border;
+}
+
+.placeholder-svg--small {
+ width: 480px;
+}
+
+.placeholder-noblocks {
+ padding: 40px;
+ text-align: center;
+}
+
+// Mimic a background image by wrapping the placeholder svg with this class
+.placeholder-background {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ .icon {
+ border: 0;
+ }
+}
diff --git a/docusaurus/v0/_sass/slate/global/forms.scss b/docusaurus/v0/_sass/slate/global/forms.scss
new file mode 100644
index 000000000..2822dc5ca
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/forms.scss
@@ -0,0 +1,63 @@
+/*============================================================================
+ Form scaffolding
+ - Selectors setup for you to style form elements how you want
+ - Focus, error, and disabled states are set to be extended
+==============================================================================*/
+input,
+textarea,
+select {
+ border: 1px solid $color-border;
+ border-radius: 0;
+ max-width: 100%;
+
+ &:focus {
+ // You should add some focus styles
+ }
+
+ &[disabled] {
+ cursor: default;
+ background-color: $color-disabled;
+ border-color: $color-disabled-border;
+ }
+}
+
+textarea {
+ min-height: 100px;
+}
+
+/*================ Custom select style ================*/
+select {
+ @include prefix(appearance, none, webkit moz spec);
+ background-position: right center;
+ background: {
+ image: url($svg-select-icon);
+ repeat: no-repeat;
+ position: right 10px center;
+ color: transparent;
+ }
+ padding-right: 28px;
+ text-indent: 0.01px;
+ text-overflow: '';
+ cursor: pointer;
+
+ /*================ Hide the svg arrow in IE9 ================*/
+ .ie9 & {
+ padding-right: 10px;
+ background-image: none;
+ }
+}
+
+select::-ms-expand {
+ display: none;
+}
+
+/*================ Error styles ================*/
+input,
+select,
+textarea {
+ &.input-error {
+ border-color: $color-error;
+ background-color: $color-error-bg;
+ color: $color-error;
+ }
+}
diff --git a/docusaurus/v0/_sass/slate/global/grid.scss b/docusaurus/v0/_sass/slate/global/grid.scss
new file mode 100644
index 000000000..1925e6cc0
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/grid.scss
@@ -0,0 +1,211 @@
+/*============================================================================
+ Grid
+ - Based on CSS Wizardry grid
+==============================================================================*/
+
+.grid {
+ @include clearfix();
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ margin-left: -$grid-gutter;
+}
+
+.grid__item {
+ float: left;
+ padding-left: $grid-gutter;
+ width: 100%;
+
+ &[class*='--push'] {
+ position: relative;
+ }
+}
+
+/*============================================================================
+ Reversed grids allow you to structure your source in the opposite
+ order to how your rendered layout will appear.
+==============================================================================*/
+.grid--rev {
+ direction: rtl;
+ text-align: left;
+
+ > .grid__item {
+ direction: ltr;
+ text-align: left;
+ float: right;
+ }
+}
+
+/*============================================================================
+ Grid Columns
+ - Create width classes, prepended by the breakpoint name.
+==============================================================================*/
+// sass-lint:disable brace-style empty-line-between-blocks
+@mixin grid-column-generator($breakpoint: '') {
+ /** Whole */
+ .#{$breakpoint}one-whole { width: 100%; }
+
+ /* Halves */
+ .#{$breakpoint}one-half { width: percentage(1 / 2); }
+
+ /* Thirds */
+ .#{$breakpoint}one-third { width: percentage(1 / 3); }
+ .#{$breakpoint}two-thirds { width: percentage(2 / 3); }
+
+ /* Quarters */
+ .#{$breakpoint}one-quarter { width: percentage(1 / 4); }
+ .#{$breakpoint}two-quarters { width: percentage(2 / 4); }
+ .#{$breakpoint}three-quarters { width: percentage(3 / 4); }
+
+ /* Fifths */
+ .#{$breakpoint}one-fifth { width: percentage(1 / 5); }
+ .#{$breakpoint}two-fifths { width: percentage(2 / 5); }
+ .#{$breakpoint}three-fifths { width: percentage(3 / 5); }
+ .#{$breakpoint}four-fifths { width: percentage(4 / 5); }
+
+ /* Sixths */
+ .#{$breakpoint}one-sixth { width: percentage(1 / 6); }
+ .#{$breakpoint}two-sixths { width: percentage(2 / 6); }
+ .#{$breakpoint}three-sixths { width: percentage(3 / 6); }
+ .#{$breakpoint}four-sixths { width: percentage(4 / 6); }
+ .#{$breakpoint}five-sixths { width: percentage(5 / 6); }
+
+ /* Eighths */
+ .#{$breakpoint}one-eighth { width: percentage(1 / 8); }
+ .#{$breakpoint}two-eighths { width: percentage(2 / 8); }
+ .#{$breakpoint}three-eighths { width: percentage(3 / 8); }
+ .#{$breakpoint}four-eighths { width: percentage(4 / 8); }
+ .#{$breakpoint}five-eighths { width: percentage(5 / 8); }
+ .#{$breakpoint}six-eighths { width: percentage(6 / 8); }
+ .#{$breakpoint}seven-eighths { width: percentage(7 / 8); }
+
+ /* Tenths */
+ .#{$breakpoint}one-tenth { width: percentage(1 / 10); }
+ .#{$breakpoint}two-tenths { width: percentage(2 / 10); }
+ .#{$breakpoint}three-tenths { width: percentage(3 / 10); }
+ .#{$breakpoint}four-tenths { width: percentage(4 / 10); }
+ .#{$breakpoint}five-tenths { width: percentage(5 / 10); }
+ .#{$breakpoint}six-tenths { width: percentage(6 / 10); }
+ .#{$breakpoint}seven-tenths { width: percentage(7 / 10); }
+ .#{$breakpoint}eight-tenths { width: percentage(8 / 10); }
+ .#{$breakpoint}nine-tenths { width: percentage(9 / 10); }
+
+ /* Twelfths */
+ .#{$breakpoint}one-twelfth { width: percentage(1 / 12); }
+ .#{$breakpoint}two-twelfths { width: percentage(2 / 12); }
+ .#{$breakpoint}three-twelfths { width: percentage(3 / 12); }
+ .#{$breakpoint}four-twelfths { width: percentage(4 / 12); }
+ .#{$breakpoint}five-twelfths { width: percentage(5 / 12); }
+ .#{$breakpoint}six-twelfths { width: percentage(6 / 12); }
+ .#{$breakpoint}seven-twelfths { width: percentage(7 / 12); }
+ .#{$breakpoint}eight-twelfths { width: percentage(8 / 12); }
+ .#{$breakpoint}nine-twelfths { width: percentage(9 / 12); }
+ .#{$breakpoint}ten-twelfths { width: percentage(10 / 12); }
+ .#{$breakpoint}eleven-twelfths { width: percentage(11 / 12); }
+}
+
+/*================ Grid push classes ================*/
+@mixin grid-push-generator($breakpoint: '') {
+ /* Halves */
+ .#{$breakpoint}push-one-half { left: percentage(1 / 2); }
+
+ /* Thirds */
+ .#{$breakpoint}push-one-third { left: percentage(1 / 3); }
+ .#{$breakpoint}push-two-thirds { left: percentage(2 / 3); }
+
+ /* Quarters */
+ .#{$breakpoint}push-one-quarter { left: percentage(1 / 4); }
+ .#{$breakpoint}push-two-quarters { left: percentage(2 / 4); }
+ .#{$breakpoint}push-three-quarters { left: percentage(3 / 4); }
+
+ /* Fifths */
+ .#{$breakpoint}push-one-fifth { left: percentage(1 / 5); }
+ .#{$breakpoint}push-two-fifths { left: percentage(2 / 5); }
+ .#{$breakpoint}push-three-fifths { left: percentage(3 / 5); }
+ .#{$breakpoint}push-four-fifths { left: percentage(4 / 5); }
+
+ /* Sixths */
+ .#{$breakpoint}push-one-sixth { left: percentage(1 / 6); }
+ .#{$breakpoint}push-two-sixths { left: percentage(2 / 6); }
+ .#{$breakpoint}push-three-sixths { left: percentage(3 / 6); }
+ .#{$breakpoint}push-four-sixths { left: percentage(4 / 6); }
+ .#{$breakpoint}push-five-sixths { left: percentage(5 / 6); }
+
+ /* Eighths */
+ .#{$breakpoint}push-one-eighth { left: percentage(1 / 8); }
+ .#{$breakpoint}push-two-eighths { left: percentage(2 / 8); }
+ .#{$breakpoint}push-three-eighths { left: percentage(3 / 8); }
+ .#{$breakpoint}push-four-eighths { left: percentage(4 / 8); }
+ .#{$breakpoint}push-five-eighths { left: percentage(5 / 8); }
+ .#{$breakpoint}push-six-eighths { left: percentage(6 / 8); }
+ .#{$breakpoint}push-seven-eighths { left: percentage(7 / 8); }
+
+ /* Tenths */
+ .#{$breakpoint}push-one-tenth { left: percentage(1 / 10); }
+ .#{$breakpoint}push-two-tenths { left: percentage(2 / 10); }
+ .#{$breakpoint}push-three-tenths { left: percentage(3 / 10); }
+ .#{$breakpoint}push-four-tenths { left: percentage(4 / 10); }
+ .#{$breakpoint}push-five-tenths { left: percentage(5 / 10); }
+ .#{$breakpoint}push-six-tenths { left: percentage(6 / 10); }
+ .#{$breakpoint}push-seven-tenths { left: percentage(7 / 10); }
+ .#{$breakpoint}push-eight-tenths { left: percentage(8 / 10); }
+ .#{$breakpoint}push-nine-tenths { left: percentage(9 / 10); }
+
+ /* Twelfths */
+ .#{$breakpoint}push-one-twelfth { left: percentage(1 / 12); }
+ .#{$breakpoint}push-two-twelfths { left: percentage(2 / 12); }
+ .#{$breakpoint}push-three-twelfths { left: percentage(3 / 12); }
+ .#{$breakpoint}push-four-twelfths { left: percentage(4 / 12); }
+ .#{$breakpoint}push-five-twelfths { left: percentage(5 / 12); }
+ .#{$breakpoint}push-six-twelfths { left: percentage(6 / 12); }
+ .#{$breakpoint}push-seven-twelfths { left: percentage(7 / 12); }
+ .#{$breakpoint}push-eight-twelfths { left: percentage(8 / 12); }
+ .#{$breakpoint}push-nine-twelfths { left: percentage(9 / 12); }
+ .#{$breakpoint}push-ten-twelfths { left: percentage(10 / 12); }
+ .#{$breakpoint}push-eleven-twelfths { left: percentage(11 / 12); }
+}
+
+/*================ Clearfix helper on uniform grids ================*/
+@mixin grid-uniform-clearfix($breakpoint: '') {
+ .grid--uniform {
+ .#{$breakpoint}one-half:nth-child(2n+1),
+ .#{$breakpoint}one-third:nth-child(3n+1),
+ .#{$breakpoint}one-quarter:nth-child(4n+1),
+ .#{$breakpoint}one-fifth:nth-child(5n+1),
+ .#{$breakpoint}one-sixth:nth-child(6n+1),
+ .#{$breakpoint}two-sixths:nth-child(3n+1),
+ .#{$breakpoint}three-sixths:nth-child(2n+1),
+ .#{$breakpoint}one-eighth:nth-child(8n+1),
+ .#{$breakpoint}two-eighths:nth-child(4n+1),
+ .#{$breakpoint}four-eighths:nth-child(2n+1),
+ .#{$breakpoint}five-tenths:nth-child(2n+1),
+ .#{$breakpoint}one-twelfth:nth-child(12n+1),
+ .#{$breakpoint}two-twelfths:nth-child(6n+1),
+ .#{$breakpoint}three-twelfths:nth-child(4n+1),
+ .#{$breakpoint}four-twelfths:nth-child(3n+1),
+ .#{$breakpoint}six-twelfths:nth-child(2n+1) { clear: both; }
+ }
+}
+// sass-lint:enable brace-style empty-line-between-blocks
+
+/*================ Build Base Grid Classes ================*/
+@include grid-column-generator();
+@include responsive-display-helper();
+@include responsive-text-align-helper();
+
+/*================ Build Responsive Grid Classes ================*/
+@each $breakpoint in $breakpoint-has-widths {
+ @include media-query($breakpoint) {
+ @include grid-column-generator('#{$breakpoint}--');
+ @include grid-uniform-clearfix('#{$breakpoint}--');
+ @include responsive-display-helper('#{$breakpoint}--');
+ @include responsive-text-align-helper('#{$breakpoint}--');
+ }
+}
+
+/*================ Build Grid Push Classes ================*/
+@each $breakpoint in $breakpoint-has-push {
+ @include media-query($breakpoint) {
+ @include grid-push-generator('#{$breakpoint}--');
+ }
+}
diff --git a/docusaurus/v0/_sass/slate/global/helper-classes.scss b/docusaurus/v0/_sass/slate/global/helper-classes.scss
new file mode 100644
index 000000000..70e004b32
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/helper-classes.scss
@@ -0,0 +1,54 @@
+/*================ Helper Classes ================*/
+.clearfix {
+ @include clearfix();
+}
+
+.visually-hidden {
+ @include visually-hidden();
+}
+
+.js-focus-hidden:focus {
+ outline: none;
+}
+
+.label-hidden {
+ @include visually-hidden();
+
+ // No placeholders, so force show labels
+ .no-placeholder & {
+ @include visually-shown();
+ }
+}
+
+.visually-shown {
+ @include visually-shown();
+}
+
+// Only show when JS is not supported
+.no-js:not(html) {
+ display: none;
+
+ .no-js & {
+ display: block;
+ }
+}
+
+// Only show when JS is supported
+.js {
+ .no-js & {
+ display: none;
+ }
+}
+
+/*============================================================================
+ Skip to content button
+ - Overrides .visually-hidden when focused
+==============================================================================*/
+.skip-link:focus {
+ @include visually-shown(absolute);
+ color: $color-body-text;
+ background-color: $color-body;
+ padding: $gutter / 2;
+ z-index: $z-index-skip-to-content;
+ transition: none;
+}
diff --git a/docusaurus/v0/_sass/slate/global/icons.scss b/docusaurus/v0/_sass/slate/global/icons.scss
new file mode 100644
index 000000000..6907aa6fa
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/icons.scss
@@ -0,0 +1,58 @@
+/*================ Icons ================*/
+.icon {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ fill: currentColor;
+
+ .no-svg & {
+ display: none;
+ }
+}
+
+.icon--wide {
+ width: 40px;
+}
+
+svg,
+symbol {
+ &.icon:not(.icon--full-color) {
+ circle,
+ ellipse,
+ g,
+ line,
+ path,
+ polygon,
+ polyline,
+ rect {
+ fill: inherit;
+ stroke: inherit;
+ }
+ }
+
+}
+
+/*============================================================================
+ A generic way to visually hide content while
+ remaining accessible to screen readers (h5bp.com)
+==============================================================================*/
+.icon-fallback-text {
+ @include visually-hidden();
+
+ .no-svg & {
+ @include visually-shown(static);
+ }
+}
+
+/*================ Payment Icons ================*/
+.payment-icons {
+ @include prefix('user-select', 'none', moz ms webkit spec);
+ cursor: default;
+}
+
+/*================ Shopify icon on password page ================*/
+.icon-shopify-logo {
+ width: 1.5 * $font-size-base * 120 / 35;
+ height: 1.5 * $font-size-base;
+}
diff --git a/docusaurus/v0/_sass/slate/global/layout.scss b/docusaurus/v0/_sass/slate/global/layout.scss
new file mode 100644
index 000000000..82bfed46a
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/layout.scss
@@ -0,0 +1,12 @@
+/*================ General layout styles ================*/
+body,
+html {
+ background-color: $color-body;
+}
+
+.page-width {
+ @include clearfix();
+ max-width: $width-site;
+ padding: 0 $gutter;
+ margin: 0 auto;
+}
diff --git a/docusaurus/v0/_sass/slate/global/links-buttons.scss b/docusaurus/v0/_sass/slate/global/links-buttons.scss
new file mode 100644
index 000000000..90fe24996
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/links-buttons.scss
@@ -0,0 +1,12 @@
+/*================ Links & Buttons ================*/
+.btn {
+ @include prefix('user-select', 'none', moz ms webkit spec);
+ @include prefix(appearance, none, webkit moz spec);
+ display: inline-block;
+ width: auto;
+ text-decoration: none;
+ text-align: center;
+ vertical-align: middle;
+ white-space: nowrap;
+ border: 0;
+}
diff --git a/docusaurus/v0/_sass/slate/global/normalize.scss b/docusaurus/v0/_sass/slate/global/normalize.scss
new file mode 100644
index 000000000..f359bf822
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/normalize.scss
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ * without disabling user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+ // sass-lint:disable no-color-literals
+ background: #ff0;
+ color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+ border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+// sass-lint:disable single-line-per-selector
+button,
+html input[type='button'], /* 1 */
+input[type='reset'],
+input[type='submit'] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type='checkbox'],
+input[type='radio'] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type='search'] {
+ -webkit-appearance: textfield; /* 1 */
+ box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ // sass-lint:disable no-color-literals
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/docusaurus/v0/_sass/slate/global/responsive-tables.scss b/docusaurus/v0/_sass/slate/global/responsive-tables.scss
new file mode 100644
index 000000000..b92976cef
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/responsive-tables.scss
@@ -0,0 +1,57 @@
+/*============================================================================
+ Responsive tables, defined with .responsive-table on table element.
+==============================================================================*/
+@include media-query($small) {
+ .responsive-table {
+ width: 100%;
+
+ thead {
+ display: none;
+ }
+
+ tr {
+ display: block;
+ }
+
+ // IE9 table layout fixes
+ tr,
+ td {
+ float: left;
+ clear: both;
+ width: 100%;
+ }
+
+ th,
+ td {
+ display: block;
+ text-align: right;
+ padding: $gutter / 2;
+ margin: 0;
+ }
+
+ td::before {
+ content: attr(data-label);
+ float: left;
+ text-align: center;
+ padding-right: 10px;
+ }
+ }
+
+ // Add a keyline between rows
+ .responsive-table-row + .responsive-table-row,
+ tfoot > .responsive-table-row:first-child {
+ position: relative;
+ margin-top: 10px;
+ padding-top: $gutter / 2;
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: $gutter / 2;
+ right: $gutter / 2;
+ border-bottom: 1px solid $color-border;
+ }
+ }
+}
diff --git a/docusaurus/v0/_sass/slate/global/rte.scss b/docusaurus/v0/_sass/slate/global/rte.scss
new file mode 100644
index 000000000..dc8013d7b
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/rte.scss
@@ -0,0 +1,73 @@
+/*================ Rich Text Editor ================*/
+.rte {
+ img {
+ height: auto;
+ }
+
+ table {
+ table-layout: fixed;
+ }
+
+ ul,
+ ol {
+ margin: 0 0 ($gutter / 2) $gutter;
+ }
+
+ // Match the styles from RTE nested lists
+ ul {
+ list-style: disc outside;
+
+ ul {
+ list-style: circle outside;
+
+ ul {
+ list-style: square outside;
+ }
+ }
+ }
+}
+
+.text-center.rte,
+.text-center .rte {
+ ul,
+ ol {
+ margin-left: 0;
+ list-style-position: inside;
+ }
+}
+
+// allow table to scroll for tables in the RTE since we don't know
+// how many columns they will contain. Class added by JS.
+// sass-lint:disable no-misspelled-properties
+.rte-table {
+ max-width: 100%;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+// This class is wrapped around YouTube/Vimeo embeds in the RTE
+// to make them responsive and prevent layout breaking
+.rte__video-wrapper {
+ position: relative;
+ overflow: hidden;
+ max-width: 100%;
+ padding-bottom: 56.25%;
+ height: 0;
+ height: auto;
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+// This class is wrapped around tables in the RTE
+// to prevent layout breaking with a scrollable parent
+.rte__table-wrapper {
+ max-width: 100%;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
diff --git a/docusaurus/v0/_sass/slate/global/slate-reset.scss b/docusaurus/v0/_sass/slate/global/slate-reset.scss
new file mode 100644
index 000000000..a45af8210
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/global/slate-reset.scss
@@ -0,0 +1,72 @@
+/*================ Slate specific reset ================*/
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body,
+input,
+textarea,
+button,
+select {
+ -webkit-font-smoothing: antialiased;
+ -webkit-text-size-adjust: 100%;
+}
+
+a:focus {
+ color: inherit;
+}
+
+img {
+ max-width: 100%;
+}
+
+/*================ Form element helpers ================*/
+form {
+ margin: 0;
+}
+
+// Prevent zoom on touch devices in active inputs
+@include media-query($medium-down) {
+ input,
+ textarea,
+ select {
+ font-size: 16px;
+ }
+}
+
+button,
+input[type="submit"],
+label[for] {
+ cursor: pointer;
+}
+
+optgroup {
+ font-weight: $font-weight-bold;
+}
+
+// Force option color (affects IE only)
+option {
+ color: $color-body-text;
+ background-color: $color-body;
+}
+
+// hide outline on focus for elements which are given focus by JS
+[tabindex='-1']:focus {
+ outline: none;
+}
+
+/*============================================================================
+ Fast Tap
+ enables no-delay taps (FastClick-esque) on supporting browsers
+==============================================================================*/
+a,
+button,
+[role="button"],
+input,
+label,
+select,
+textarea {
+ touch-action: manipulation;
+}
diff --git a/docusaurus/v0/_sass/slate/modules/gift-card-template.scss b/docusaurus/v0/_sass/slate/modules/gift-card-template.scss
new file mode 100644
index 000000000..cac9d0951
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/modules/gift-card-template.scss
@@ -0,0 +1,36 @@
+/*================ Giftcard Template ================*/
+.giftcard-qr {
+ img {
+ display: block;
+ margin: 0 auto;
+ }
+}
+
+.apple-wallet-image {
+ display: block;
+ margin: 0 auto;
+}
+
+/*================ Print Giftcard Styles ================*/
+@media print {
+ @page {
+ margin: 0.5cm;
+ }
+
+ p {
+ orphans: 3;
+ widows: 3;
+ }
+
+ html,
+ body {
+ // sass-lint:disable no-color-literals
+ background-color: #fff;
+ color: #000;
+ }
+
+ .print-giftcard,
+ .apple-wallet {
+ display: none;
+ }
+}
diff --git a/docusaurus/v0/_sass/slate/modules/site-header.scss b/docusaurus/v0/_sass/slate/modules/site-header.scss
new file mode 100644
index 000000000..82e5c83fe
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/modules/site-header.scss
@@ -0,0 +1,8 @@
+/*================ Site Header ================*/
+.site-logo {
+ display: block;
+
+ img {
+ display: block;
+ }
+}
diff --git a/docusaurus/v0/_sass/slate/settings/variables.scss.liquid b/docusaurus/v0/_sass/slate/settings/variables.scss.liquid
new file mode 100644
index 000000000..483a8545b
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/settings/variables.scss.liquid
@@ -0,0 +1,80 @@
+/*================ Color Variables ================*/
+$color-primary: {{ settings.color_primary }};
+
+// Text colors
+$color-body-text: {{ settings.color_body_text }};
+
+// Backgrounds
+$color-body: #fff;
+
+// Border colors
+$color-border: #f6f6f6;
+
+// Helper colors for form error states
+$color-disabled: #000;
+$color-disabled-border: #000;
+$color-error: #000;
+$color-error-bg: #000;
+$color-success: #000;
+$color-success-bg: #000;
+
+/*================ Typography Variables ================*/
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+
+$font-stack-header: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-weight-header: $font-weight-bold;
+
+$font-stack-body: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-size-base: {{ settings.type_base_size }};
+
+/*============================================================================
+ Grid Breakpoints and Class Names
+ - Do not change the variable names
+==============================================================================*/
+$grid-medium: 750px;
+$grid-large: 990px;
+$grid-widescreen: 1400px;
+$grid-gutter: 30px;
+
+$small: 'small';
+$medium: 'medium';
+$medium-down: 'medium-down';
+$medium-up: 'medium-up';
+$large: 'large';
+$large-down: 'large-down';
+$large-up: 'large-up';
+$widescreen: 'widescreen';
+
+// The `$breakpoints` list is used to build our media queries.
+// You can use these in the media-query mixin.
+$breakpoints: (
+ $small '(max-width: #{$grid-medium - 1})',
+ $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
+ $medium-down '(max-width: #{$grid-large - 1})',
+ $medium-up '(min-width: #{$grid-medium})',
+ $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
+ $large-down '(max-width: #{$grid-widescreen - 1})',
+ $large-up '(min-width: #{$grid-large})',
+ $widescreen '(min-width: #{$grid-widescreen})'
+);
+
+/*============================================================================
+ Generate breakpoint-specific column widths and push classes
+ - Default column widths: $breakpoint-has-widths: ($small, $medium-up);
+ - Default is no push classes
+ - Will not work if `styles/global/grid.scss` is removed
+==============================================================================*/
+$breakpoint-has-widths: ($small, $medium-up);
+$breakpoint-has-push: ();
+
+/*================ Sizing Variables ================*/
+$width-site: 1180px;
+$gutter: 30px;
+
+/*================ Z-Index ================*/
+$z-index-dropdown: 2;
+$z-index-skip-to-content: 10000; // really high to be safe of app markup
+
+/*================ SVG ================*/
+$svg-select-icon: #{'{{ "ico-select.svg" | asset_url }}'};
diff --git a/docusaurus/v0/_sass/slate/theme.scss b/docusaurus/v0/_sass/slate/theme.scss
new file mode 100644
index 000000000..6bb66c2fa
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/theme.scss
@@ -0,0 +1,27 @@
+/*============================================================================
+ [replace with theme name] | Built with Slate
+ - You cannot use native CSS/Sass @imports in this file without a build script
+==============================================================================*/
+
+/*================ UTILS ================*/
+@import url('tools/mixins.scss');
+
+/*================ SETTINGS ================*/
+@import url('settings/variables.scss.liquid');
+
+/*================ COMMON ================*/
+@import url('global/normalize.scss');
+@import url('global/slate-reset.scss');
+@import url('global/helper-classes.scss');
+@import url('global/grid.scss');
+@import url('global/layout.scss');
+@import url('global/icons.scss');
+@import url('global/rte.scss');
+@import url('global/responsive-tables.scss');
+@import url('global/links-buttons.scss');
+@import url('global/forms.scss');
+@import url('global/blank-states.scss');
+
+/*================ MODULES ================*/
+@import url('modules/site-header.scss');
+@import url('modules/gift-card-template.scss');
diff --git a/docusaurus/v0/_sass/slate/tools/mixins.scss b/docusaurus/v0/_sass/slate/tools/mixins.scss
new file mode 100644
index 000000000..48322827c
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/tools/mixins.scss
@@ -0,0 +1,119 @@
+/*================ Mixins ================*/
+@mixin clearfix() {
+ &::after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+
+ // sass-lint:disable
+ *zoom: 1;
+}
+
+/*============================================================================
+ Prefix mixin for generating vendor prefixes.
+ Based on https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/addons/_prefixer.scss
+
+ Usage:
+ // Input:
+ .element {
+ @include prefix(transform, scale(1), ms webkit spec);
+ }
+
+ // Output:
+ .element {
+ -ms-transform: scale(1);
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+==============================================================================*/
+@mixin prefix($property, $value, $prefixes) {
+ @each $prefix in $prefixes {
+ @if $prefix == webkit {
+ -webkit-#{$property}: $value;
+ } @else if $prefix == moz {
+ -moz-#{$property}: $value;
+ } @else if $prefix == ms {
+ -ms-#{$property}: $value;
+ } @else if $prefix == o {
+ -o-#{$property}: $value;
+ } @else if $prefix == spec {
+ #{$property}: $value;
+ } @else {
+ @warn 'Unrecognized prefix: #{$prefix}';
+ }
+ }
+}
+
+/*================ Media Query Mixin ================*/
+@mixin media-query($media-query) {
+ $breakpoint-found: false;
+
+ @each $breakpoint in $breakpoints {
+ $name: nth($breakpoint, 1);
+ $declaration: nth($breakpoint, 2);
+
+ @if $media-query == $name and $declaration {
+ $breakpoint-found: true;
+
+ @media only screen and #{$declaration} {
+ @content;
+ }
+ }
+ }
+
+ @if $breakpoint-found == false {
+ @warn 'Breakpoint "#{$media-query}" does not exist';
+ }
+}
+
+/*================ Responsive Show/Hide Helper ================*/
+@mixin responsive-display-helper($breakpoint: '') {
+ // sass-lint:disable no-important
+ .#{$breakpoint}show {
+ display: block !important;
+ }
+
+ .#{$breakpoint}hide {
+ display: none !important;
+ }
+}
+
+
+/*================ Responsive Text Alignment Helper ================*/
+@mixin responsive-text-align-helper($breakpoint: '') {
+ // sass-lint:disable no-important
+ .#{$breakpoint}text-left {
+ text-align: left !important;
+ }
+
+ .#{$breakpoint}text-right {
+ text-align: right !important;
+ }
+
+ .#{$breakpoint}text-center {
+ text-align: center !important;
+ }
+}
+
+@mixin visually-hidden() {
+ // sass-lint:disable no-important
+ position: absolute !important;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ width: 1px;
+ margin: -1px;
+ padding: 0;
+ border: 0;
+}
+
+@mixin visually-shown($position: inherit) {
+ // sass-lint:disable no-important
+ position: $position !important;
+ overflow: auto;
+ clip: auto;
+ width: auto;
+ height: auto;
+ margin: 0;
+}
diff --git a/docusaurus/v0/_sass/slate/vendor/README.md b/docusaurus/v0/_sass/slate/vendor/README.md
new file mode 100644
index 000000000..9a60433f9
--- /dev/null
+++ b/docusaurus/v0/_sass/slate/vendor/README.md
@@ -0,0 +1 @@
+# vendor.css files can be added to this directory (will not be linted, can be raw css or scss [<= 3.2] files)
\ No newline at end of file
diff --git a/docusaurus/v0/_sass/syntax_highlighting.scss b/docusaurus/v0/_sass/syntax_highlighting.scss
new file mode 100644
index 000000000..12301616a
--- /dev/null
+++ b/docusaurus/v0/_sass/syntax_highlighting.scss
@@ -0,0 +1,66 @@
+/**
+ * Syntax highlighting styles
+ */
+.highlight,
+.prettyprint {
+
+ .c, .com { color: #998; font-style: italic } // Comment
+ // .err { color: #a61717; background-color: #e3d2d2 } // Error
+ .k { font-weight: bold } // Keyword
+ .o { font-weight: bold } // Operator
+ .cm { color: #998; font-style: italic } // Comment.Multiline
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
+ .c1 { color: #998; font-style: italic } // Comment.Single
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+ .ge { font-style: italic } // Generic.Emph
+ .gr { color: #a00 } // Generic.Error
+ .gh { color: #999 } // Generic.Heading
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+ .go { color: #888 } // Generic.Output
+ .gp { color: #555 } // Generic.Prompt
+ .gs { font-weight: bold } // Generic.Strong
+ .gu { color: #aaa } // Generic.Subheading
+ .gt { color: #a00 } // Generic.Traceback
+ .kc { font-weight: bold } // Keyword.Constant
+ .kd, .kwd { font-weight: bold } // Keyword.Declaration
+ .kp { font-weight: bold } // Keyword.Pseudo
+ .kr { font-weight: bold } // Keyword.Reserved
+ .kt { color: #458; font-weight: bold } // Keyword.Type
+ .m { color: #099 } // Literal.Number
+ .s { color: #d14 } // Literal.String
+ .na { color: #008080 } // Name.Attribute
+ .nb { color: #0086B3 } // Name.Builtin
+ .nc { color: #458; font-weight: bold } // Name.Class
+ .no { color: #008080 } // Name.Constant
+ .ni { color: #800080 } // Name.Entity
+ .ne { color: #900; font-weight: bold } // Name.Exception
+ .nf { color: #900; font-weight: bold } // Name.Function
+ .nn { color: #555 } // Name.Namespace
+ .nt { color: #000080 } // Name.Tag
+ .nv { color: #008080 } // Name.Variable
+ .ow { font-weight: bold } // Operator.Word
+ .w { color: #bbb } // Text.Whitespace
+ .mf { color: #099 } // Literal.Number.Float
+ .mh { color: #099 } // Literal.Number.Hex
+ .mi, .lit { color: #099 } // Literal.Number.Integer
+ .mo { color: #099 } // Literal.Number.Oct
+ .sb { color: #d14 } // Literal.String.Backtick
+ .sc { color: #d14 } // Literal.String.Char
+ .sd { color: #d14 } // Literal.String.Doc
+ .s2 { color: #d14 } // Literal.String.Double
+ .se { color: #d14 } // Literal.String.Escape
+ .sh { color: #d14 } // Literal.String.Heredoc
+ .si { color: #d14 } // Literal.String.Interpol
+ .sx { color: #d14 } // Literal.String.Other
+ .sr { color: #009926 } // Literal.String.Regex
+ .s1, .str { color: #d14 } // Literal.String.Single
+ .ss { color: #990073 } // Literal.String.Symbol
+ .bp { color: #999 } // Name.Builtin.Pseudo
+ .vc { color: #008080 } // Name.Variable.Class
+ .vg { color: #008080 } // Name.Variable.Global
+ .vi { color: #008080 } // Name.Variable.Instance
+ .il { color: #099 } // Literal.Number.Integer.Long
+}
diff --git a/docusaurus/v0/assets/images/app-credentials.jpg b/docusaurus/v0/assets/images/app-credentials.jpg
new file mode 100644
index 000000000..05b96967e
Binary files /dev/null and b/docusaurus/v0/assets/images/app-credentials.jpg differ
diff --git a/docusaurus/v0/assets/images/app-permission.jpg b/docusaurus/v0/assets/images/app-permission.jpg
new file mode 100644
index 000000000..4d203e9e6
Binary files /dev/null and b/docusaurus/v0/assets/images/app-permission.jpg differ
diff --git a/docusaurus/v0/assets/images/desktop.png b/docusaurus/v0/assets/images/desktop.png
new file mode 100755
index 000000000..f552385a5
Binary files /dev/null and b/docusaurus/v0/assets/images/desktop.png differ
diff --git a/docusaurus/v0/assets/images/fresh-install.jpg b/docusaurus/v0/assets/images/fresh-install.jpg
new file mode 100644
index 000000000..cf1367f03
Binary files /dev/null and b/docusaurus/v0/assets/images/fresh-install.jpg differ
diff --git a/docusaurus/v0/assets/images/github-logo.png b/docusaurus/v0/assets/images/github-logo.png
new file mode 100644
index 000000000..307da048b
Binary files /dev/null and b/docusaurus/v0/assets/images/github-logo.png differ
diff --git a/docusaurus/v0/assets/images/mobile.png b/docusaurus/v0/assets/images/mobile.png
new file mode 100755
index 000000000..fb72f0e22
Binary files /dev/null and b/docusaurus/v0/assets/images/mobile.png differ
diff --git a/docusaurus/v0/assets/images/npm-logo.png b/docusaurus/v0/assets/images/npm-logo.png
new file mode 100644
index 000000000..a04c49e0a
Binary files /dev/null and b/docusaurus/v0/assets/images/npm-logo.png differ
diff --git a/docusaurus/v0/assets/images/shopify-logo-large.png b/docusaurus/v0/assets/images/shopify-logo-large.png
new file mode 100644
index 000000000..e98ab1240
Binary files /dev/null and b/docusaurus/v0/assets/images/shopify-logo-large.png differ
diff --git a/docusaurus/v0/assets/images/shopify-logo.png b/docusaurus/v0/assets/images/shopify-logo.png
new file mode 100644
index 000000000..4631c2318
Binary files /dev/null and b/docusaurus/v0/assets/images/shopify-logo.png differ
diff --git a/docusaurus/v0/assets/images/theme-id.png b/docusaurus/v0/assets/images/theme-id.png
new file mode 100644
index 000000000..f23a7eab3
Binary files /dev/null and b/docusaurus/v0/assets/images/theme-id.png differ
diff --git a/docusaurus/v0/commands/index.md b/docusaurus/v0/commands/index.md
new file mode 100644
index 000000000..bf70718e4
--- /dev/null
+++ b/docusaurus/v0/commands/index.md
@@ -0,0 +1,150 @@
+---
+layout: default
+---
+
+# Commands
+
+## Global commands
+
+| Command | Usage |
+| :------ | :---- |
+| [theme](#theme) | `slate theme [name] [--options]` |
+| [migrate](#migrate) | `slate migrate [--options]` |
+| [help](#help) | `slate -h` |
+| [version](#version) | `slate -v` |
+
+### theme
+
+```
+slate theme [name]
+```
+
+Generate a new blank theme. The `name` argument is required for the new theme directory.
+
+##### Options
+```
+--yarn install theme dependencies with yarn instead of npm
+```
+
+> **Note about Yarn:** While Yarn is not the default installer for dependencies, it is worth noting that Yarn has significant performance improvements and we do recommend installing dependencies via `--yarn`. [Read more about installing Yarn](https://yarnpkg.com/en/docs/install).
+
+### migrate
+```
+slate migrate
+```
+
+Converts an existing theme to work with Slate. Run this command from your project root to install dependencies and restructure your theme files into a `src/` directory. Empty `icons/`, `styles/`, and `scripts/` folders will also be created.
+
+A `config.yml` will also be created in your root directory which is required for [build commands](#build-commands) and [sync commands](#sync-commands).
+
+##### Options
+```
+--yarn install theme dependencies with yarn instead of npm
+```
+
+### help
+
+```
+slate [command] -h, slate [command] --help
+```
+
+Outputs help information for Slate (`slate --help`) or a specific command (`slate deploy --help`).
+
+### version
+
+```
+slate -v, slate --version
+```
+
+Outputs the current version of Slate and its dependencies installed on your system.
+
+## Build commands
+
+Slate's source theme files are in the root `src` folder. These are the files you edit and will be compiled to a Shopify-compatible theme in the `dist` folder. You can do this a few different ways.
+
+| Command | Usage |
+| :------ | :---- |
+| [build](#build) | `slate build` |
+| [test](#test) | `slate test` |
+| [zip](#zip) | `slate zip` |
+
+### build
+
+```
+slate build
+```
+
+Compile theme files and assets into a Shopify theme, found in the `dist` folder. No files will be uploaded to your shop.
+
+### test
+
+```
+slate test
+```
+
+Uses the [@shopify/theme-lint](https://github.com/Shopify/theme-lint) package to run translation tests on your locales found in the `/src/locales` folder. The package checks for untranslated keys inside of your Liquid templates, missing translation keys in specific locale files, and translation key HTML validity.
+
+### zip
+
+```
+slate zip
+```
+
+Performs a fresh build of your theme and zips it into a file that's compatible with Shopify. The zip file can be found within an `upload` folder that is generated within your theme project root folder. The zip is overwritten each time you use this command and is not meant to be used for versioning.
+
+## Sync commands
+
+| Command | Usage |
+| :------ | :---- |
+| [deploy](#deploy) | `slate deploy [--options]` |
+| [watch](#watch) | `slate watch [--options]` |
+| [start](#start) | `slate start [--options]` |
+
+### deploy
+
+```
+slate deploy [--options]
+```
+
+Performs a fresh build followed by a full deploy; replacing existing files on the remote server and replacing them with the full set of build files, and removing remote files that are no longer in use.
+
+##### Options
+
+```
+-e, --env deploy to a comma-separated list of environments
+-m, --manual disable auto-deployment of the theme files
+```
+
+Deploy to a specific environment with the `-e` flag (short for `--env`) plus the environment name: `slate deploy -e staging`. You can deploy to multiple environments at once with comma-separated values: `slate deploy -e development,staging,production`.
+
+Running `slate deploy --manual` will instead create a new zip file of your theme (see [slate zip](#zip)) and open the admin themes page as defined by your environment where you can then manually install your theme from the zip file.
+
+### watch
+
+```
+slate watch [--options]
+```
+
+Sets up the watchers for all theme assets and deploys the compiled versions to your specified environment (default is `development`). Also opens a [Browsersync](https://browsersync.io/) window with live reloading after changing and saving a file.
+
+##### Options
+```
+-e, --env deploy to a specific environment
+-n, --nosync disable Browsersync
+```
+
+> **Note about Browsersync on HTTPS:** The first time you run `slate watch` or `start` you will get an unsafe connection browser notice. This is expected because all Shopify stores run on HTTPS but no certificate exists for your localhost. Proceed through this warning to view your store.
+
+### start
+
+```
+slate start [--options]
+```
+
+Performs a full deploy of your theme (see [slate deploy](#deploy)) and starts the watchers (see [slate watch](#watch)).
+
+##### Options
+```
+-e, --env deploy to a comma-separated list of environments
+-n, --nosync disable Browsersync
+```
diff --git a/docusaurus/v0/css-examples/blank-states/index.md b/docusaurus/v0/css-examples/blank-states/index.md
new file mode 100644
index 000000000..a9882022e
--- /dev/null
+++ b/docusaurus/v0/css-examples/blank-states/index.md
@@ -0,0 +1,22 @@
+---
+layout: demo
+---
+
+
+
+Lifestyle SVG
+
+
Payment icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Social icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
General icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% include iframe-toggles.html %}
+
+
+
+```
+
+
+ 1
+
+
+
+
+ 2.1
+
+
+ 2.2
+
+
+ 2.3
+
+
+ 2.4
+
+
+ 2.5
+
+
+ 2.6
+
+
+
+
+
+
+ 3.1
+
+
+ 3.2
+
+
+ 3.3
+
+
+ 3.4
+
+
+ 3.5
+
+
+ 3.6
+
+
+ 3.7
+
+
+
+
+ {% include iframe-toggles.html %}
+
+
+
+```
+
+```
+
+## SVG icons
+
+Slate uses SVG icons for easy maintainability. Place your SVG icons in `src/icons`, preface the filename with the name `icon-`. E.g. `icon-cart.svg`, and the icons will become available for use as snippets in your theme.
+
+> Note: your SVG must use the case sensitive `viewBox` property otherwise it will not be compiled properly
+
+Usage in Liquid:
+```
+{% raw %}{% include 'icon-cart' %}{% endraw %}
+```
+
+Style it with CSS. All icons will have an `.icon` class added along with its filename.
+```
+.icon-cart {
+ fill: blue;
+}
+```
+
+
+
+
+
+Below is a list of all available icons and their respective names.
+
+
+
+
+
+It is recommended to set descriptive text that also acts as a fallback for icons. See the [demo for visually hiding text and icon fallback text](#visually-hide).
+
+### Update icons manually
+
+If you need to add an icon to a live shop without Slate's build tools, follow these steps:
+
+1. Create an SVG icon.
+2. Change the file from an `.svg` extension to `.liquid` and place it in `snippets/`. Make sure the file name starts with `icon-` for consistency.
+3. Add `aria-hidden="true"`, `focusable="false"`, and role="presentation" to the `svg` element
+5. Add `class="icon"` to the `svg` element.
+6. Add a class the same name as the file name to the `svg`. E.g. `icon-cart`
+7. Remove any unneeded elements like `DOCTYPE` and ``.
+8. Include your new icon with `{% raw %}{% include 'icon-cart' %}{% endraw %}`.
+
+## Responsive tables
+
+For proper accessibility, tabular data should be built as a table. Tables are notoriously difficult to build responsively, and while there are a lot of ways to do it, Slate includes a basic approach of adding the column labels as data attributes. Test the demo below in mobile mode to see it in action.
+
+> Responsive tables are built into `cart.liquid`, `customers/order.liquid`, and `customers/account.liquid` templates.
+
+
+ {% include iframe-toggles.html %}
+
+
+
+```
+
+```
+
+## Blank states
+
+It is important to show off some of your theme's layouts and features on a fresh install, but you don't always have shop information available to use as defaults (yet... stay tuned on that one). Global SVGs have been made available to use as dummy content until the merchant is ready to customize the layouts.
+
+There are 6 product, 6 collection, 2 lifestyle, 1 logo, and 1 generic image available to be used. These are their filenames — replace the `x` with a number:
+
+```
+- image.svg
+- logo.svg
+- collection-x.svg
+- product-x.svg
+- lifestyle-x.svg
+```
+
+`styles/global/blank-states.scss` uses your theme colors to style the SVGs with your theme.
+
+
+ {% include iframe-toggles.html %}
+
+
+
+```
+// Show dummy products
+{% raw %}{% for i in (1..3) %}{% endraw %}
+
+ {% raw %}{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}{% endraw %}
+ {% raw %}{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}{% endraw %}
+ Example product title
+
+{% raw %}{% endfor %}{% endraw %}
+
+// Show a lifestyle image if the image setting is not set
+{% raw %}{% if section.settings.image == blank %}{% endraw %}
+ {% raw %}{{ 'lifestyle-1' placeholder_svg_tag: 'placeholder-svg' }}{% endraw %}
+{% raw %}{% else %}{% endraw %}
+ {% raw %}{{ section.settings.image | img_tag }}{% endraw %}
+{% raw %}{% endif %}{% endraw %}
+```
+
+## Sass mixins
+
+### Prefix
+
+Based on [Bourbon](https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/addons/_prefixer.scss), generate specific prefixes as needed.
+
+```
+* {
+ @include prefix(box-sizing, border-box, webkit moz spec);
+}
+
+Output:
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+```
+
+### Text alignment per breakpoint
+
+Change the text alignment based on breakpoint. Only breakpoints that have a [width enabled]({{ '/css-examples/#grid' | prepend: site.baseurl }}) will generate text alignment classes.
+
+```
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales.
+
+```
+
+
+ {% include iframe-toggles.html %}
+
+
+
+
+### Visibility per breakpoint
+
+Quickly show or hide content based on enabled breakpoints with the class `breakpoint-name--hide` or `breakpoint-name--show`. Only breakpoints that have a [width enabled]({{ '/css-examples/#grid' | prepend: site.baseurl }}) will generate show and hide classes.
+
+```
+This red div is only visible below the medium breakpoint
+This green div is not visible on the small breakpoint
+Even with display none set, this blue div will appear above the large breakpoint.
+```
+
+
+ {% include iframe-toggles.html %}
+
+
+
+### Visually hide
+
+Sometimes it is necessary to visually hide content while keeping it accessible in the DOM. This is useful for hiding descriptive text for icons or form labels that you do not want shown. Screen readers, for example, do not read placeholder text on inputs as their label so the `label` element is required.
+
+```
+// Visually hidden text
+Email
+Cart icon
+```
+
+
+
+
diff --git a/docusaurus/v0/css-examples/responsive-table/index.md b/docusaurus/v0/css-examples/responsive-table/index.md
new file mode 100644
index 000000000..ed024ff5f
--- /dev/null
+++ b/docusaurus/v0/css-examples/responsive-table/index.md
@@ -0,0 +1,67 @@
+---
+layout: demo
+---
+
+
diff --git a/docusaurus/v0/css-examples/show-hide/index.md b/docusaurus/v0/css-examples/show-hide/index.md
new file mode 100644
index 000000000..71fa7800b
--- /dev/null
+++ b/docusaurus/v0/css-examples/show-hide/index.md
@@ -0,0 +1,15 @@
+---
+layout: demo
+---
+
+
+
+This red div is only visible below the medium breakpoint
+This green div is not visible on the small breakpoint
+Even with display none set, this blue div will appear above the large breakpoint.
diff --git a/docusaurus/v0/css-examples/text-align/index.md b/docusaurus/v0/css-examples/text-align/index.md
new file mode 100644
index 000000000..f8145c052
--- /dev/null
+++ b/docusaurus/v0/css-examples/text-align/index.md
@@ -0,0 +1,7 @@
+---
+layout: demo
+---
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales.
+
diff --git a/docusaurus/v0/css-examples/visually-hidden/index.md b/docusaurus/v0/css-examples/visually-hidden/index.md
new file mode 100644
index 000000000..2f2cff68c
--- /dev/null
+++ b/docusaurus/v0/css-examples/visually-hidden/index.md
@@ -0,0 +1,20 @@
+---
+layout: demo
+---
+
+Visually hidden input label
+Email
+
+ Visually hidden descriptive text for icons use the icon-fallback-text class.visually-hidden, but will show the text when SVGs are not supported thanks to Modernizr.
+
+Cart icon
+
+When SVGs are not supported, no-svg is added to the html tag. The same code as above would instead show this:
+
diff --git a/docusaurus/v0/css/demos.scss b/docusaurus/v0/css/demos.scss
new file mode 100644
index 000000000..7558fbc9c
--- /dev/null
+++ b/docusaurus/v0/css/demos.scss
@@ -0,0 +1,36 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+
+@import
+ "marketing_assets/sass-helpers",
+ "demo",
+ "demo-variables"
+;
+
+/*
+ GitHub pages does not allow you to import scss files outside of the `docs/`
+ folder (even though it works locally). This means we can't reference Slate's src/ folder with:
+ "../../src/styles/tools/mixins.scss".
+
+ Instead, we can use the live URL.
+ Since the repo is currently private this won't work either (yet).
+ "https://raw.githubusercontent.com/Shopify/slate/master/src/styles/tools/mixins.scss"
+
+ Until that repo is made public, I've added the contents of `/src/styles/`
+ to `/docs/_sass` in the `slate/` folder. We can switch to live URLs after that.
+*/
+
+@import
+ "slate/tools/mixins.scss",
+ "slate/global/normalize.scss",
+ "slate/global/slate-reset.scss",
+ "slate/global/helper-classes.scss",
+ "slate/global/layout.scss",
+ "slate/global/grid.scss",
+ "slate/global/icons.scss",
+ "slate/global/rte.scss",
+ "slate/global/responsive-tables.scss",
+ "slate/global/blank-states.scss"
+;
diff --git a/docusaurus/v0/css/main.scss b/docusaurus/v0/css/main.scss
new file mode 100644
index 000000000..71a86e727
--- /dev/null
+++ b/docusaurus/v0/css/main.scss
@@ -0,0 +1,12 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+
+@import
+ "syntax_highlighting",
+ "marketing_assets/sass-helpers",
+ "custom/custom",
+ "custom/layout",
+ "yuidoc"
+;
diff --git a/docusaurus/v0/css/prettify.min.css b/docusaurus/v0/css/prettify.min.css
new file mode 100644
index 000000000..b317a7cda
--- /dev/null
+++ b/docusaurus/v0/css/prettify.min.css
@@ -0,0 +1 @@
+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
diff --git a/docusaurus/v0/css/yuidoc.css b/docusaurus/v0/css/yuidoc.css
new file mode 100644
index 000000000..8d02fb853
--- /dev/null
+++ b/docusaurus/v0/css/yuidoc.css
@@ -0,0 +1,687 @@
+/*
+Font sizes for all selectors other than the body are given in percentages,
+with 100% equal to 13px. To calculate a font size percentage, multiply the
+desired size in pixels by 7.6923076923.
+
+Here's a quick lookup table:
+
+10px - 76.923%
+11px - 84.615%
+12px - 92.308%
+13px - 100%
+14px - 107.692%
+15px - 115.385%
+16px - 123.077%
+17px - 130.769%
+18px - 138.462%
+19px - 146.154%
+20px - 153.846%
+*/
+
+
+.hidden {
+ display: none;
+}
+
+a:hover { text-decoration: underline; }
+
+/* "Jump to Table of Contents" link is shown to assistive tools, but hidden from
+ sight until it's focused. */
+.jump {
+ position: absolute;
+ padding: 3px 6px;
+ left: -99999px;
+ top: 0;
+}
+
+.jump:focus { left: 40%; }
+/* -- Code and examples ----------------------------------------------------- */
+code, kbd, pre, samp {
+ font-family: Menlo, Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
+ font-size: 92.308%;
+ line-height: 1.35;
+}
+
+p code, p kbd, p samp, li code {
+ background: #FCFBFA;
+ border: 1px solid #EFEEED;
+ padding: 0 3px;
+}
+
+a code, a kbd, a samp,
+pre code, pre kbd, pre samp,
+table code, table kbd, table samp,
+.intro code, .intro kbd, .intro samp,
+.toc code, .toc kbd, .toc samp {
+ background: none;
+ border: none;
+ padding: 0;
+}
+
+pre.code, pre.terminal, pre.cmd {
+ overflow-x: auto;
+ *overflow-x: scroll;
+ padding: 0.3em 0.6em;
+}
+
+pre.code {
+ background: #FCFBFA;
+ border: 1px solid #EFEEED;
+ border-left-width: 5px;
+}
+
+pre.terminal, pre.cmd {
+ background: #F0EFFC;
+ border: 1px solid #D0CBFB;
+ border-left: 5px solid #D0CBFB;
+}
+
+/* Don't reduce the font size of // elements inside
+ blocks. */
+pre code, pre kbd, pre samp { font-size: 100%; }
+
+/* Used to denote text that shouldn't be selectable, such as line numbers or
+ shell prompts. Guess which browser this doesn't work in. */
+.noselect {
+ -moz-user-select: -moz-none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+/* -- Lists ----------------------------------------------------------------- */
+dd { margin: 0.2em 0 0.7em 1em; }
+dl { margin: 1em 0; }
+dt { font-weight: bold; }
+
+/* -- Tables ---------------------------------------------------------------- */
+caption, th { text-align: left; }
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+td, th {
+ border: 1px solid #fff;
+ padding: 5px 12px;
+ vertical-align: top;
+}
+
+td { background: #E6E9F5; }
+td dl { margin: 0; }
+td dl dl { margin: 1em 0; }
+td pre:first-child { margin-top: 0; }
+
+th {
+ background: #D2D7E6;/*#97A0BF*/
+ border-bottom: none;
+ border-top: none;
+ color: #000;/*#FFF1D5*/
+ font-family: 'Trebuchet MS', sans-serif;
+ font-weight: bold;
+ line-height: 1.3;
+ white-space: nowrap;
+}
+
+
+
+/* -- Table of Contents ----------------------------------------------------- */
+
+/* The #toc id refers to the single global table of contents, while the .toc
+ class refers to generic TOC lists that could be used throughout the page. */
+
+.toc code, .toc kbd, .toc samp { font-size: 100%; }
+.toc li { font-weight: bold; }
+.toc li li { font-weight: normal; }
+
+/* -- Intro and Example Boxes ----------------------------------------------- */
+/*
+.intro, .example { margin-bottom: 2em; }
+.example {
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ -moz-box-shadow: 0 0 5px #bfbfbf;
+ -webkit-box-shadow: 0 0 5px #bfbfbf;
+ box-shadow: 0 0 5px #bfbfbf;
+ padding: 1em;
+}
+.intro {
+ background: none repeat scroll 0 0 #F0F1F8; border: 1px solid #D4D8EB; padding: 0 1em;
+}
+*/
+
+/* -- Other Styles ---------------------------------------------------------- */
+
+/* These are probably YUI-specific, and should be moved out of Selleck's default
+ theme. */
+
+.button {
+ border: 1px solid #dadada;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ color: #444;
+ display: inline-block;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 92.308%;
+ font-weight: bold;
+ padding: 4px 13px 3px;
+ -moz-text-shadow: 1px 1px 0 #fff;
+ -webkit-text-shadow: 1px 1px 0 #fff;
+ text-shadow: 1px 1px 0 #fff;
+ white-space: nowrap;
+
+ background: #EFEFEF; /* old browsers */
+ background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#efefef), color-stop(51%,#e5e5e5), color-stop(100%,#dfdfdf)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
+}
+
+.button:hover {
+ border-color: #466899;
+ color: #fff;
+ text-decoration: none;
+ -moz-text-shadow: 1px 1px 0 #222;
+ -webkit-text-shadow: 1px 1px 0 #222;
+ text-shadow: 1px 1px 0 #222;
+
+ background: #6396D8; /* old browsers */
+ background: -moz-linear-gradient(top, #6396D8 0%, #5A83BC 50%, #547AB7 51%, #466899 100%); /* firefox */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6396D8), color-stop(50%,#5A83BC), color-stop(51%,#547AB7), color-stop(100%,#466899)); /* webkit */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6396D8', endColorstr='#466899',GradientType=0 ); /* ie */
+}
+
+.newwindow { text-align: center; }
+
+.header .version em {
+ display: block;
+ text-align: right;
+}
+
+
+#classdocs .item {
+ border-bottom: 1px solid #466899;
+ margin: 1em 0;
+ padding: 1.5em;
+}
+
+#classdocs .item .params p,
+ #classdocs .item .returns p,{
+ display: inline;
+}
+
+#classdocs .item em code, #classdocs .item em.comment {
+ color: green;
+}
+
+#classdocs .item em.comment a {
+ color: green;
+ text-decoration: underline;
+}
+
+#classdocs .foundat {
+ font-size: 11px;
+ font-style: normal;
+}
+
+.attrs .emits {
+ margin-left: 2em;
+ padding: .5em;
+ border-left: 1px dashed #ccc;
+}
+
+abbr {
+ border-bottom: 1px dashed #ccc;
+ font-size: 80%;
+ cursor: help;
+}
+
+.prettyprint li.L0,
+.prettyprint li.L1,
+.prettyprint li.L2,
+.prettyprint li.L3,
+.prettyprint li.L5,
+.prettyprint li.L6,
+.prettyprint li.L7,
+.prettyprint li.L8 {
+ list-style: decimal;
+}
+
+ul li p {
+ margin-top: 0;
+}
+
+.method .name {
+ font-size: 110%;
+}
+
+.apidocs .methods .extends .method,
+.apidocs .properties .extends .property,
+.apidocs .attrs .extends .attr,
+.apidocs .events .extends .event {
+ font-weight: bold;
+}
+
+.apidocs .methods .extends .inherited,
+.apidocs .properties .extends .inherited,
+.apidocs .attrs .extends .inherited,
+.apidocs .events .extends .inherited {
+ font-weight: normal;
+}
+
+#hd {
+ background: whiteSmoke;
+ background: -moz-linear-gradient(top,#DCDBD9 0,#F6F5F3 100%);
+ background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#DCDBD9),color-stop(100%,#F6F5F3));
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdbd9',endColorstr='#F6F5F3',GradientType=0);
+ border-bottom: 1px solid #DFDFDF;
+ padding: 0 15px 1px 20px;
+ margin-bottom: 15px;
+}
+
+#hd img {
+ margin-right: 10px;
+ vertical-align: middle;
+}
+
+
+/* -- API Docs CSS ---------------------------------------------------------- */
+
+/*
+This file is organized so that more generic styles are nearer the top, and more
+specific styles are nearer the bottom of the file. This allows us to take full
+advantage of the cascade to avoid redundant style rules. Please respect this
+convention when making changes.
+*/
+
+/* -- Generic TabView styles ------------------------------------------------ */
+
+/*
+These styles apply to all API doc tabviews. To change styles only for a
+specific tabview, see the other sections below.
+*/
+
+.yui3-js-enabled .apidocs .tabview {
+ visibility: hidden; /* Hide until the TabView finishes rendering. */
+ _visibility: visible;
+}
+
+.apidocs .tabview.yui3-tabview-content { visibility: visible; }
+
+/* -- Generic Content Styles ------------------------------------------------ */
+
+/* Headings */
+h2, h3, h4, h5, h6 {
+ border: none;
+ color: #333;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+.link-docs {
+ float: right;
+ font-size: 15px;
+ margin: 4px 4px 6px;
+ padding: 6px 30px 5px;
+}
+
+.apidocs { zoom: 1; }
+
+/* Generic box styles. */
+.apidocs .box {
+ border: 1px solid;
+ border-radius: 3px;
+ margin: 1em 0;
+ padding: 0 1em;
+}
+
+/* A flag is a compact, capsule-like indicator of some kind. It's used to
+ indicate private and protected items, item return types, etc. in an
+ attractive and unobtrusive way. */
+.apidocs .flag {
+ background: #bababa;
+ border-radius: 3px;
+ color: #fff;
+ font-size: 11px;
+ margin: 0 0.5em;
+ padding: 2px 4px 1px;
+}
+
+/* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
+.apidocs .meta {
+ background: #f9f9f9;
+ border-color: #efefef;
+ color: #555;
+ font-size: 11px;
+ padding: 3px 6px;
+}
+
+.apidocs .meta p { margin: 0; }
+
+/* Deprecation warning. */
+.apidocs .box.deprecated,
+.apidocs .flag.deprecated {
+ background: #fdac9f;
+ border: 1px solid #fd7775;
+}
+
+.apidocs .box.deprecated p { margin: 0.5em 0; }
+.apidocs .flag.deprecated { color: #333; }
+
+/* Module/Class intro description. */
+.apidocs .intro {
+ background: #f0f1f8;
+ border-color: #d4d8eb;
+}
+
+/* Loading spinners. */
+#bd.loading .apidocs,
+
+#bd.loading .apidocs .content,
+#api-list.loading .yui3-tabview-panel .apis {
+ display: none;
+}
+
+.apidocs .no-visible-items { color: #666; }
+
+/* Generic inline list. */
+.apidocs ul.inline {
+ display: inline;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.apidocs ul.inline li { display: inline; }
+
+/* Comma-separated list. */
+.apidocs ul.commas li:after { content: ','; }
+.apidocs ul.commas li:last-child:after { content: ''; }
+
+/* Keyboard shortcuts. */
+kbd .cmd { font-family: Monaco, Helvetica; }
+
+/* -- Generic Access Level styles ------------------------------------------- */
+.apidocs .item.protected,
+.apidocs .item.private,
+.apidocs .index-item.protected,
+.apidocs .index-item.deprecated,
+.apidocs .index-item.private {
+ display: none;
+}
+
+.show-deprecated .item.deprecated,
+.show-deprecated .index-item.deprecated,
+.show-protected .item.protected,
+.show-protected .index-item.protected,
+.show-private .item.private,
+.show-private .index-item.private {
+ display: block;
+}
+
+.hide-inherited .item.inherited,
+.hide-inherited .index-item.inherited {
+ display: none;
+}
+
+/* -- Generic Item Index styles --------------------------------------------- */
+.apidocs .index { margin: 1.5em 0 3em; }
+
+.apidocs .index h3 {
+ border-bottom: 1px solid #efefef;
+ color: #333;
+ font-size: 13px;
+ margin: 2em 0 0.6em;
+ padding-bottom: 2px;
+}
+
+.apidocs .index .no-visible-items { margin-top: 2em; }
+
+.apidocs .index-list {
+ border-color: #efefef;
+ font-size: 12px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ -moz-column-count: 4;
+ -moz-column-gap: 10px;
+ -moz-column-width: 170px;
+ -ms-column-count: 4;
+ -ms-column-gap: 10px;
+ -ms-column-width: 170px;
+ -o-column-count: 4;
+ -o-column-gap: 10px;
+ -o-column-width: 170px;
+ -webkit-column-count: 4;
+ -webkit-column-gap: 10px;
+ -webkit-column-width: 170px;
+ column-count: 4;
+ column-gap: 10px;
+ column-width: 170px;
+}
+
+.apidocs .no-columns .index-list {
+ -moz-column-count: 1;
+ -ms-column-count: 1;
+ -o-column-count: 1;
+ -webkit-column-count: 1;
+ column-count: 1;
+}
+
+.apidocs .index-item { white-space: nowrap; }
+
+.apidocs .index-item .flag {
+ background: none;
+ border: none;
+ color: #afafaf;
+ display: inline;
+ margin: 0 0 0 0.2em;
+ padding: 0;
+}
+
+/* -- Generic API item styles ----------------------------------------------- */
+.apidocs .args {
+ display: inline;
+ margin: 0 0.5em;
+}
+
+.apidocs .flag.chainable { background: #46ca3b; }
+.apidocs .flag.protected { background: #9b86fc; }
+.apidocs .flag.private { background: #fd6b1b; }
+.apidocs .flag.async { background: #356de4; }
+.apidocs .flag.required { background: #e60923; }
+
+.apidocs .item {
+ border-bottom: 1px solid #efefef;
+ margin: 1.5em 0 2em;
+ padding-bottom: 2em;
+}
+
+.apidocs .item h4,
+.apidocs .item h5,
+.apidocs .item h6 {
+ color: #333;
+ font-family: inherit;
+ font-size: 100%;
+}
+
+.apidocs .item .description p,
+.apidocs .item pre.code {
+ margin: 1em 0 0;
+}
+
+.apidocs .item .meta {
+ background: none;
+ border: none;
+ padding: 0;
+}
+
+.apidocs .item .name {
+ display: inline;
+ font-size: 14px;
+}
+
+.apidocs .item .type,
+.apidocs .item .type a,
+.apidocs .returns-inline {
+ color: #555;
+}
+
+.apidocs .item .type,
+.apidocs .returns-inline {
+ font-size: 11px;
+ margin: 0 0 0 0;
+}
+
+.apidocs .item .type a { border-bottom: 1px dotted #afafaf; }
+.apidocs .item .type a:hover { border: none; }
+
+/* -- Item Parameter List --------------------------------------------------- */
+.apidocs .params-list {
+ list-style: square;
+ margin: 1em 0 0 2em;
+ padding: 0;
+}
+
+.apidocs .param { margin-bottom: 1em; }
+
+.apidocs .param .type,
+.apidocs .param .type a {
+ color: #666;
+}
+
+.apidocs .param .type {
+ margin: 0 0 0 0.5em;
+ *margin-left: 0.5em;
+}
+
+.apidocs .param-name { font-weight: bold; }
+
+/* -- Item "Emits" block ---------------------------------------------------- */
+.apidocs .item .emits {
+ background: #f9f9f9;
+ border-color: #eaeaea;
+}
+
+/* -- Item "Returns" block -------------------------------------------------- */
+.apidocs .item .returns .type,
+.apidocs .item .returns .type a {
+ font-size: 100%;
+ margin: 0;
+}
+
+/* -- Class Constructor block ----------------------------------------------- */
+.apidocs .constructor .item {
+ border: none;
+ padding-bottom: 0;
+}
+
+/* -- File Source View ------------------------------------------------------ */
+.apidocs .file pre.code,
+#doc .apidocs .file pre.prettyprint {
+ background: inherit;
+ border: none;
+ overflow: visible;
+ padding: 0;
+}
+
+.apidocs .L0,
+.apidocs .L1,
+.apidocs .L2,
+.apidocs .L3,
+.apidocs .L4,
+.apidocs .L5,
+.apidocs .L6,
+.apidocs .L7,
+.apidocs .L8,
+.apidocs .L9 {
+ background: inherit;
+}
+
+/* -- Submodule List -------------------------------------------------------- */
+.apidocs .module-submodule-description {
+ font-size: 12px;
+ margin: 0.3em 0 1em;
+}
+
+.apidocs .module-submodule-description p:first-child { margin-top: 0; }
+
+/* -- Sidebar TabView ------------------------------------------------------- */
+#api-tabview { margin-top: 0.6em; }
+
+#api-tabview-filter {
+ border-bottom: none;
+ border-top: none;
+ padding: 0.6em 10px 0 10px;
+}
+
+#api-tabview-panel { border-top: none; }
+#api-filter { width: 97%; }
+
+/* -- Content TabView ------------------------------------------------------- */
+#classdocs .yui3-tabview-panel { border: none; }
+
+/* -- Source File Contents -------------------------------------------------- */
+.prettyprint li.L0,
+.prettyprint li.L1,
+.prettyprint li.L2,
+.prettyprint li.L3,
+.prettyprint li.L5,
+.prettyprint li.L6,
+.prettyprint li.L7,
+.prettyprint li.L8 {
+ list-style: decimal;
+}
+
+
+/*#api-options label { margin-right: 0.6em; }*/
+
+.apis {
+ font-size: 12px;
+ line-height: 1.4;
+ list-style: none;
+ margin: 0;
+ padding: 0.5em 0 0.5em 0.4em;
+}
+
+.apis a {
+ border: 1px solid transparent;
+ display: block;
+ margin: 0 0 0 -4px;
+ padding: 1px 4px 0;
+ text-decoration: none;
+ _border: none;
+ _display: inline;
+}
+
+.apis a:hover,
+.apis a:focus {
+ background: #E8EDFC;
+ background: -moz-linear-gradient(top, #e8edfc 0%, #becef7 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E8EDFC), color-stop(100%,#BECEF7));
+ border-color: #AAC0FA;
+ border-radius: 3px;
+ color: #333;
+ outline: none;
+}
+
+.api-list-item a:hover,
+.api-list-item a:focus {
+ font-weight: bold;
+ text-shadow: 1px 1px 1px #fff;
+}
+
+.apis .message { color: #888; }
+.apis .result a { padding: 3px 5px 2px; }
+
+.apis .result .type {
+ right: 4px;
+ top: 7px;
+}
+
+.api-list-item .yui3-highlight {
+ font-weight: bold;
+}
diff --git a/docusaurus/v0/index.md b/docusaurus/v0/index.md
new file mode 100644
index 000000000..320a46c57
--- /dev/null
+++ b/docusaurus/v0/index.md
@@ -0,0 +1,87 @@
+---
+layout: default
+---
+
+# Slate v0
+
+> ⚠️ **These docs are for Slate v0!** To view the docs for the latest version of Slate, go to the [Slate documentation website](https://shopify.github.io/slate/docs/about).
+
+Slate is a theme scaffold and command line tool for developing Shopify themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify stores.
+
+Slate allows you to sync local files with your live shop, deploy to multiple environments at the same time, and organize stylesheets and scripts in a flexible way.
+
+## Getting started
+
+
+Slate works with Node version 6.x , the current LTS (long-term support) release. This version is recommended over older versions of Node.
+
+
+The steps below walk through installing Slate globally and configuring your development theme to sync with your store. If you want the theme files without the build tools dependency, get the latest zip here .
+
+### Create a new project
+
+1. Install Slate with `npm install -g @shopify/slate`.
+2. Create a new theme with `slate theme theme-name`, where `theme-name` will be a newly created folder.
+
+* If you already have a theme locally, you can use the `slate migrate` command and [follow these steps](/slate/commands/#migrate) instead.
+
+### Connect your project with your Shopify store
+
+1. Edit the `config.yml` by adding your store's URL to the `development` environment.
+
+* **store:** the Shopify-specific URL for this store/environment (ie. my-store.myshopify.com)
+* Note: You can complete the rest of the configuration in later steps.
+
+2. Run `slate deploy -m` to start a manual deploy to your Shopify store.
+
+* Slate will build a Shopify theme and open your store's admin.
+* A zip of your project will be created in the project's `upload` directory.
+
+3. Upload the theme zip file at Shopify [admin/themes](https://shopify.com/admin/themes).
+
+* Not sure how to upload a theme zip? Learn how at [Upload a theme from your computer](https://help.shopify.com/manual/using-themes/install-themes#upload-a-theme-from-your-computer).
+
+4. Edit the `config.yml` to include the theme id of your new theme.
+
+* **theme_id:** the unique id for the theme you want to write to when deploying to this store. You can find this information in the URL of the theme's online editor at Shopify [admin/themes](https://shopify.com/admin/themes). Alternatively, you can use `"live"` as shorthand for the published theme.
+
+ {% include iframe-toggles.html %}
+
+
+
+## Responsive tables and videos
+
+Tables and video embeds do not natively scale well on smaller screens. Slate adds a wrapper class to tables and video embeds that are loaded in from a rich text editor.
+
+| Parameters | Type | Description |
+| :------------------- | :------------ | :------------ |
+| `$tables` | jQuery object | ` ` elements to be made responsive |
+| `tableWrapperClass` | string | CSS class to apply on the `` that will wrap each targeted `
` element |
+| `$iframes` | jQuery object | `
+
+
+## Format currency
+
+Slate ships JavaScript to mimic [Shopify money formats](https://help.shopify.com/manual/payment-settings/currency-formatting#currency-formatting-options). This makes handling product prices and cart items in JS simple. ([View currency.js source](https://github.com/Shopify/slate/blob/master/packages/slate-theme/src/scripts/slate/currency.js)).
+
+Slate maps the shop's money format — defined in Liquid — to a JavaScript variable in `layouts/theme.liquid` so it can be used regardless of file type.
+
+In layouts/theme.liquid:
+
+```
+window.theme.moneyFormat: {% raw %}{{ shop.money_format | json }}{% endraw %};
+```
+
+| Parameters | Type | Description |
+| :-------------- | :-------------- | :------------- |
+| `cents` | string | Price in cents |
+| `format` | string | shop.money_format setting |
+
+In this example, `shop.money_format` is {% raw %}`${{amount}}`{% endraw %} so 1999 cents would be formatted as $19.99.
+
+```
+var itemPrice = 1999; // cents
+slate.Currency.formatMoney(itemPrice, theme.moneyFormat);
+
+// Returns string
+'$19.99'
+```
+
+## Image helpers
+
+| Command | Usage |
+| :------ | :---- |
+| [preload](#preload) | `slate.Images.preload(images, size)` |
+| [imageSize](#imagesize) | `slate.Images.imageSize(src)` |
+| [getSizedImageUrl](#getsizedimageurl) | `slate.Images.getSizedImageUrl(src, size)` |
+| [removeProtocol](#removeprotocol) | `slate.Images.removeProtocol(path)` |
+
+### preload
+
+Preload a single image or an array of images at a given size. A common use for preloading is reducing the loading delay when enlarging a thumbnail.
+
+| Parameters | Type | Description |
+| :----------------- | :-------------- | :------------ |
+| `images` | array or string | Single image URL or list of image URLs |
+| `size` | string | Size of image to request |
+
+```
+slate.Image.preload(['image-url-1.jpg', 'image-url-2.jpg'], '1024x1024');
+```
+
+### imageSize
+
+Get the size of an image based on the URL.
+
+| Parameters | Type | Description |
+| :-------------- | :-------------- | :------------ |
+| `src` | string | Image URL |
+
+```
+slate.Image.imageSize('https://cdn.shopify.com/s/files/big-ol-image_480x480.jpeg');
+
+// Returns string
+'480x480'
+```
+
+### getSizedImageUrl
+
+Adds a Shopify size attribute to a URL
+
+| Parameters | Type | Description |
+| :-------------- | :-------------- | :------------ |
+| `src` | string | Image URL |
+| `size` | string | Custom size |
+
+```
+slate.Image.getSizedImageUrl('https://cdn.shopify.com/s/files/big-ol-image.jpeg', '250x250');
+
+// Returns string
+'https://cdn.shopify.com/s/files/big-ol-image_250x250.jpeg'
+```
+
+### removeProtocol
+
+| Parameters | Type | Description |
+| :-------------- | :-------------- | :------------ |
+| `path` | string | Image URL |
+
+```
+slate.Image.removeProtocol('https://cdn.shopify.com/s/files/big-ol-image_480x480.jpeg')
+
+// Returns string
+'//cdn.shopify.com/s/files/big-ol-image_480x480.jpeg'
+```
+
+## Product variants
+
+The Slate theme has two script files to manage the display of product variants:
+
+| Script | Location | Description |
+| :-------------- | :-------------- | :------------ |
+| [variant.js](#variantjs) | `scripts/slate` | Handles variant change events in any forms that add to cart |
+| [product.js](#productjs) | `scripts/sections` | Behaviour coupled to the theme code of product-based sections |
+
+### variant.js
+
+Slate separates product variant options into multiple `` elements. When a variant changes, `variant.js` updates the *master select*. The master select is the default `` element that contains all variant IDs needed to properly submit the form.
+
+Slate's `variant.js` also triggers a number of custom events to handle various state changes:
+
+| Events | Trigger condition |
+| :-------------- | :-------------- |
+| `variantChange` | When a variant option's `` element is changed. |
+| `variantImageChange` | When the selected variant has a featured image which is not currently displayed. |
+| `variantPriceChange` | When the selected variant has a price or compare_at_price which is different than what is currently displayed. |
+
+### product.js
+
+The theme-specific script of `product.js` has a number of methods that listen for the above custom events. Each function has access to the newly selected variant object in `evt.variant`. Customize these functions to fit your theme's desired behaviour.
+
+| Methods | Description |
+| :-------------- | :-------------- |
+| `updateAddToCartState()` | Update the add to cart button text and enabled/disabled/sold out state |
+| `updateProductImage()` | Replace the main product image `src` with the associated variant image if it exists |
+| `updateProductPrices()` | Updates the product price and compare_at_price when necessary |
+
+## Cart helpers
+
+In order for customers to build a cart, their browsers must support cookies.
+
+| Methods | Description |
+| :-------------- | :-------------- |
+| `cookiesEnabled()` | Returns `true` if the browser supports cookies. |
+
+In the theme scaffolding, classes for `supports-cookies` and `supports-no-cookies` are toggled on the `html` element so theme developers can show/hide different content based on browser support.
+
+```
+if (slate.cart.cookiesEnabled()) {
+ document.documentElement.className = document.documentElement.className.replace('supports-no-cookies', 'supports-cookies');
+}
+```
+
+## Section events
+
+Slate comes with a `section.js` file to help Sections communicate with Shopify's [Theme editor JavaScript API](https://help.shopify.com/themes/development/theme-editor/sections#theme-editor-javascript-api).
+
+| Methods | Description |
+| :-------------- | :-------------- |
+| `onUnload()` | A section has been deleted or is being re-rendered. |
+| `onSelect()` | User has selected the section in the editor's sidebar. |
+| `onDeselect()` | User has deselected the section in the editor's sidebar. |
+| `onReorder()` | User has changed the section's order in the editor's sidebar. |
+| `onBlockSelect()` | User has selected the block in the editor's sidebar. |
+| `onBlockDeselect()` | User has deselected the block in the editor's sidebar. |
+
+As an example, `product.js` uses the `onUnload` method to remove all namespaced events when the section is deleted or re-rendered.
+
+```
+Product.prototype = $.extend({}, Product.prototype, {
+ onUnload: function() {
+ this.$container.off(this.settings.eventNamespace);
+ }
+});
+```
+
+### Register sections
+
+Slate provides a `register` method to properly scope the various Sections used in a theme.
+
+```
+sections.register(type, constructor);
+```
+
+| Parameters | Type | Description |
+| :-------------- | :-------------- | :------------- |
+| `type` | string | Unique section type defined by theme developer |
+| `constructor` | function | Section constructor run in Theme editor and on storefront |
+
+Slate follows a convention of wrapping the content of a Section file in an element with a `data-section-type` attribute. The `type` is taken from this attribute's value.
+
+{% raw %}
+```
+// From sections/product.liquid
+
+ ...
+
+```
+{% endraw %}
+
+In the `theme.js` file, you must import the Section specific JavaScript with the `// =require` helper, [more information here](https://www.npmjs.com/package/gulp-include), as it will contain your `constructor`.
+
+```
+// =require sections/product.js
+
+$(document).ready(function() {
+ var sections = new slate.Sections();
+ sections.register('product', theme.Product);
+});
+```
diff --git a/docusaurus/v0/js-examples/tables-videos/index.md b/docusaurus/v0/js-examples/tables-videos/index.md
new file mode 100644
index 000000000..64aefe09c
--- /dev/null
+++ b/docusaurus/v0/js-examples/tables-videos/index.md
@@ -0,0 +1,57 @@
+---
+layout: demo
+---
+
+
+
+
+
Table
+
+
+
+ Product
+ Type
+ Price
+ Quantity
+ Total
+
+
+
+
+ Greta
Hat
$104.96
+ 1
+ $104.96
+
+
+ 77 Ca Skis
Skis
$549.00
+ 2
+ $1098.00
+
+
+ Aera
Hat
$109.95
+ 1
+ $109.95
+
+
+
+
+
Video
+
+
VIDEO
+
+ Trigger modal
+
+Here is some normal page content. There are some links and inputs below to tab through before opening the modal.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet , pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet. Curabitur a felis at sapien ullamcorper fermentum. Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.
+
+
+
+
+
+
+ Close modal
+
+
+
This is the modal content. Below are some links and inputs that you can tab through.
+
+
+
+
+Slate does not compile Sass to CSS. Slate uploads .scss files to your theme's /assets directory and compilation is done by Shopify. Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive.
+
+
+**Slate is not a CSS framework.** Instead it sets you up to start styling your way quickly with a reset and some helper scaffolding. The base folder names can be changed to suit your workflow. If changing or adding folders, make sure to update the `import` statement in `theme.scss` to `@import url('new-folder/style.scss')`.
+
+```
+styles/
+ global/
+ modules/
+ settings
+ tools/
+ vendor/
+```
+
+### Normalize and reset
+
+A blank starting point is included with [Normalize.css](https://necolas.github.io/normalize.css/) and other helper styles that Shopify's internal themes team has consistently relied on.
+
+* Prevent zooming when inputs are focused on mobile (min 16px font size)
+* Prevent unexpected styles on focused elements
+* IE `` and `` style fixes
+* Improve text rendering on some WebKit form fields
+* Use `touch-action: manipulation` to enable fast tapping
+* Responsive tables and video iframes added by a rich text editor (by adding wrapping classes in JS)
+
+### Scaffolding
+
+Starting a fresh project should not include reinventing the wheel. Slate offers some starting structure to your project that you can choose to use or not.
+
+* Map shop settings to Sass variables
+* CSS grid. [Example]({{ '/css-examples/#grid' | prepend: site.baseurl }})
+ * There are no grid classes in the templates so you can easily switch to your preferred grid
+* SVG icon style helpers. [Example]({{ '/css-examples/#svg-icons' | prepend: site.baseurl }})
+* Responsive tables. [Example]({{ '/css-examples/#responsive-tables' | prepend: site.baseurl }})
+* `.btn` class with smart defaults. [Source](https://github.com/Shopify/slate/blob/master/packages/slate-theme/src/styles/global/links-buttons.scss)
+* Form elements with default, disabled, error, and focus states ready to be styled. [Source](https://github.com/Shopify/slate/blob/master/packages/slate-theme/src/styles/global/forms.scss)
+* Blank state SVG styles [Example]({{ '/css-examples/#blank-states' | prepend: site.baseurl }})
+
+### Sass mixins
+
+A few helpful Sass mixins are included in Slate to make responsive, cross-browser, and accessibility development easier.
+
+* Media query mixin for consistent breakpoint styles. [Example]({{ '/css-examples/#media-query-mixin' | prepend: site.baseurl }})
+* Responsive helpers to show/hide content and align text based on breakpoint names. [Example]({{ '/css-examples/#visibility-per-breakpoint' | prepend: site.baseurl }})
+* Prefixes. [Example]({{ '/css-examples/#prefix' | prepend: site.baseurl }})
+* Visually hide or show content for screen reader accessibility. [Example]({{ '/css-examples/#visually-hide' | prepend: site.baseurl }})
+
+## JavaScript helpers
+
+Slate provides a number of helper scripts and vendor scripts. The base folder names can be changed to suit your workflow. If changing or adding folders, make sure to update the `require` statement in `theme.js` to `// =require new-folder/script.js`.
+
+```
+scripts/
+ sections/
+ slate/
+ templates/
+ vendor/
+```
+
+
+More information about the require directive can be found in the NPM documentation for gulp-include.
+
+
+### Slate scripts
+
+Slate provides helper scripts to promote accessibility and make working with theme images, currencies, and product variants easier. See [JS examples]({{ '/js-examples/' | prepend: site.baseurl }}) for more details on how to use these scripts.
+
+* Accessibility helpers. [Example]({{ '/js-examples/#trap-focus' | prepend: site.baseurl }}). [Source](https://github.com/Shopify/slate/blob/master/packages/slate-theme/src/scripts/slate/a11y.js).
+* Force tables and videos to be responsive. [Example]({{ '/js-examples/#responsive-tables-and-videos' | prepend: site.baseurl }})
+* Easy handling of theme editor events. [Example]({{ '/js-examples/#section-events' | prepend: site.baseurl }})
+* Format currency in JS the same as Liquid allows. [Example]({{ '/js-examples/#format-currency' | prepend: site.baseurl }})
+* Helpers for handling images in JS, including getting size based on URL and preloading sets of images. [Examples]({{ '/js-examples/#image-helpers' | prepend: site.baseurl }})
+* Listen for product variant option changes and setup scaffolding for handling result. [Example]({{ '/js-examples/#product-variants' | prepend: site.baseurl }})
+* Detect browser support for cookies. [Example]({{ '/js-examples/#cart-helpers' | prepend: site.baseurl }})
+
+### Vendor scripts
+
+Slate projects include a `vendor` folder where theme developers are encouraged to place third-party libraries. Versions of jQuery and [Modernizr](https://modernizr.com/) are included in a new project, but you are welcome to change these as you see fit. Be sure to update the `require` statement in `vendor.js` as you add and remove libraries.
+
+## Translation keys
+
+Slate ships with eight languages — English, French (Canadian), Spanish, German, Dutch, Danish, and two dialects of Portuguese (Brazilian and European). Translation keys for these languages can be found in the `locales` folder. In your theme files, translated strings can be retrieved with the Liquid translation filter `t`.
+
+{% raw %}
+
+```
+{{ 'products.product.add_to_cart' | t }}
+```
+
+{% endraw %}
+
+You can learn more about using [translation keys and strings in our theme development documentation](https://help.shopify.com/themes/development/internationalizing/translation-filter).
+
+These translation keys allow merchants to control their store's language settings from the admin. Merchants can set the language of their storefront as well as change the value of individual translation keys. You can learn more about [translating your storefront in our theme documentation ](https://help.shopify.com/manual/sell-online/online-store/translate-theme).
diff --git a/docusaurus/v0/theme/index.md b/docusaurus/v0/theme/index.md
new file mode 100644
index 000000000..f920115d9
--- /dev/null
+++ b/docusaurus/v0/theme/index.md
@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+# What's included
+
+Slate is made up of two parts. The first part is a theme scaffold consisting of templates, sections, starter styles, and helper scripts to develop your theme on. The second part is a toolkit of useful commands to sync your local files to your live store.
+
+Learn more about the [theme scaffold](/slate/theme-scaffold) and [commands](/slate/commands).
+
+## Intentionally blank
+
+Standard liquid tags and logic likely to be used on each template have been included with little to no markup, classes, or other code that you will need to strip out. Below is an image of what Slate looks like out of the box.
+
+Blog Title · Slate Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+
+Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut.
+Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra.
+Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum.
+Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis.
+
Blog Title · Slate Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+
+Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut.
+Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra.
+Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum.
+Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis.
+
New Blog Post · Slate Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+
+Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut.
+Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra.
+Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum.
+Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis.
+
New Blog Post · Slate Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+
+Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut.
+Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra.
+Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum.
+Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis.
+
Adding RSS Support - RSS Truncation Test · Slate 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
+This should be truncated.
+
+This line should never render in XML.
+
Adding RSS Support - RSS Truncation Test · Slate 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
+This should be truncated.
+
+This line should never render in XML.
+
Adding RSS Support · Slate This is a test post.
+A whole bunch of other information.
+
Adding RSS Support · Slate This is a test post.
+A whole bunch of other information.
+
New Version 1.0.0 · Slate This blog post will test file name parsing issues when periods are present.
+
New Version 1.0.0 · Slate This blog post will test file name parsing issues when periods are present.
+
+ https://shopify.github.io/slate.shopify.com/blog
+ Slate Blog
+ 2017-10-24T06:00:00Z
+ Feed for Node.js
+ The best place to stay up-to-date with the latest Slate news and events.
+ https://shopify.github.io/slate.shopify.com/img/slate.svg
+ Copyright © 2018 Shopify
+
+ <![CDATA[New Version 1.0.0]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/10/24/new-version-1.0.0.html
+ 2017-10-24T06:00:00Z
+ This blog post will test file name parsing issues when periods are present. ]]>
+
+ Eric Nakagawa
+ http://twitter.com/ericnakagawa
+
+
+
+ <![CDATA[Adding RSS Support]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/26/adding-rss.html
+ 2017-09-26T06:00:00Z
+ This is a test post. A whole bunch of other information.
]]>
+
+ Eric Nakagawa
+ http://twitter.com/ericnakagawa
+
+
+
+ <![CDATA[Adding RSS Support - RSS Truncation Test]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/25/testing-rss.html
+ 2017-09-25T06:00:00Z
+ 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
+This should be truncated.
+]]>
+
+ Eric Nakagawa
+ http://twitter.com/ericnakagawa
+
+
+
+ <![CDATA[New Blog Post]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/04/10/blog-post-two.html
+ 2017-04-10T06:00:00Z
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+]]>
+
+ Blog Author
+ http://twitter.com/
+
+
+
+ <![CDATA[Blog Title]]>
+ https://shopify.github.io/slate.shopify.com/blog/2016/03/11/blog-post.html
+ 2016-03-11T06:00:00Z
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+]]>
+
+ Blog Author
+ http://twitter.com/
+
+
+
\ No newline at end of file
diff --git a/docusaurus/v1/build/slate/blog/feed.xml b/docusaurus/v1/build/slate/blog/feed.xml
new file mode 100644
index 000000000..0e2bd03c0
--- /dev/null
+++ b/docusaurus/v1/build/slate/blog/feed.xml
@@ -0,0 +1,56 @@
+
+
+
+ Slate Blog
+ The best place to stay up-to-date with the latest Slate news and events.
+ Tue, 24 Oct 2017 06:00:00 GMT
+ http://blogs.law.harvard.edu/tech/rss
+ Feed for Node.js
+
+ Slate Blog
+ https://shopify.github.io/slate.shopify.com/img/slate.svg
+
+ Copyright © 2018 Shopify
+ -
+
<![CDATA[New Version 1.0.0]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/10/24/new-version-1.0.0.html
+ Tue, 24 Oct 2017 06:00:00 GMT
+ This blog post will test file name parsing issues when periods are present. ]]>
+
+ -
+
<![CDATA[Adding RSS Support]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/26/adding-rss.html
+ Tue, 26 Sep 2017 06:00:00 GMT
+ This is a test post. A whole bunch of other information.
]]>
+
+ -
+
<![CDATA[Adding RSS Support - RSS Truncation Test]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/25/testing-rss.html
+ Mon, 25 Sep 2017 06:00:00 GMT
+ 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
+This should be truncated.
+]]>
+
+ -
+
<![CDATA[New Blog Post]]>
+ https://shopify.github.io/slate.shopify.com/blog/2017/04/10/blog-post-two.html
+ Mon, 10 Apr 2017 06:00:00 GMT
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+]]>
+
+ -
+
<![CDATA[Blog Title]]>
+ https://shopify.github.io/slate.shopify.com/blog/2016/03/11/blog-post.html
+ Fri, 11 Mar 2016 06:00:00 GMT
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+]]>
+
+
+
\ No newline at end of file
diff --git a/docusaurus/v1/build/slate/blog/index.html b/docusaurus/v1/build/slate/blog/index.html
new file mode 100644
index 000000000..ee898b397
--- /dev/null
+++ b/docusaurus/v1/build/slate/blog/index.html
@@ -0,0 +1,35 @@
+Blog · Slate This blog post will test file name parsing issues when periods are present.
+This is a test post.
+A whole bunch of other information.
+1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
+This should be truncated.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+
About · Slate Slate is a command line tool for developing Shopify Themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify.
+🚀 Get started with a new Slate project
+Slate empowers developers of all skill levels to build quality Shopify themes. Slate guides developers by providing a tested workflow and opinionated development toolkit, while also accommodating more established developers through advanced configuration.
+For help on setting up the repo locally, building, testing, and contributing
+please see CONTRIBUTING.md .
+About · Slate Slate is a command line tool for developing Shopify Themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify.
+🚀 Get started with a new Slate project
+Slate empowers developers of all skill levels to build quality Shopify themes. Slate guides developers by providing a tested workflow and opinionated development toolkit, while also accommodating more established developers through advanced configuration.
+For help on setting up the repo locally, building, testing, and contributing
+please see CONTRIBUTING.md .
+Asset minification · Slate Slate's build script compiles the theme so that it is fully optimized to run in production. These optimizations include:
+
+Optimized JS via UglifyJS and bundle splitting
+Optimized CSS using cssNano
+Minified HTML
+
+Asset minification · Slate Slate's build script compiles the theme so that it is fully optimized to run in production. These optimizations include:
+
+Optimized JS via UglifyJS and bundle splitting
+Optimized CSS using cssNano
+Minified HTML
+
+Commands · Slate The following is a list of all available API commands for Slate Tools:
+
+Builds a production-ready version of the theme by compiling the files into the dist folder.
+slate-tools build
+Sets process.env to ’production’, which can be used in Slate config to return production only values, e.g.:
+
+'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano());
+ }
+ return plugins;
+},
+Uploads the dist folder to the Shopify store.
+slate-tools deploy [--env=my-custom-env-name] [--skipPrompts] [--replace]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --replaceBy default, the deploy command updates any existing files, and adds any new files to your Shopify store's theme. Use this flag to replace all files on your theme with those of your Slate project. This will delete all files from your Shopify theme which are not in your Slate project
+
+Formats the theme code according to the rules declared in the .eslintrc and .stylelintrc files. By default, it uses ESLint Fix to format JS files, Stylelint Fix to format CSS files and Prettier to format JSON files.
+slate-tools format [--scripts] [--styles] [--json]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --localesRuns linting only on locales files
+
+slate-tools lint [--scripts] [--styles] [--locales]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --jsonRuns linting only on json files
+
+Compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve most of your CSS and JavaScript.
+slate-tools start [--env=my-custom-env-name] [--skipPrompts] [--skipFirstDeploy]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --skipFirstDeploySkips the file upload sequence and simply boots up the local Express server
+
+
+⚠️ Because your CSS and JavaScript assets are being served locally, your theme won’t function on any device outside your network. You want to deploy your assets anytime your theme updates are finalized using slate-tools build && slate-tools deploy.
+
+Compiles the contents of the dist directory and creates a ZIP file in the root of the project.
+slate-tools zip
+Commands · Slate The following is a list of all available API commands for Slate Tools:
+
+Builds a production-ready version of the theme by compiling the files into the dist folder.
+slate-tools build
+Sets process.env to ’production’, which can be used in Slate config to return production only values, e.g.:
+
+'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano());
+ }
+ return plugins;
+},
+Uploads the dist folder to the Shopify store.
+slate-tools deploy [--env=my-custom-env-name] [--skipPrompts] [--replace]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --replaceBy default, the deploy command updates any existing files, and adds any new files to your Shopify store's theme. Use this flag to replace all files on your theme with those of your Slate project. This will delete all files from your Shopify theme which are not in your Slate project
+
+Formats the theme code according to the rules declared in the .eslintrc and .stylelintrc files. By default, it uses ESLint Fix to format JS files, Stylelint Fix to format CSS files and Prettier to format JSON files.
+slate-tools format [--scripts] [--styles] [--json]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --localesRuns linting only on locales files
+
+slate-tools lint [--scripts] [--styles] [--locales]
+
+
+Flag Description
+
+--scriptsRuns linting only on script files --stylesRuns linting only on style files --jsonRuns linting only on json files
+
+Compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve most of your CSS and JavaScript.
+slate-tools start [--env=my-custom-env-name] [--skipPrompts] [--skipFirstDeploy]
+
+
+Flag Description
+
+--envTargets a custom environment file. Setting --env=production would use the .env.production file --skipPromptsSkips all prompts. This is especially useful when using Slate Tools with continuous integration tools --skipFirstDeploySkips the file upload sequence and simply boots up the local Express server
+
+
+⚠️ Because your CSS and JavaScript assets are being served locally, your theme won’t function on any device outside your network. You want to deploy your assets anytime your theme updates are finalized using slate-tools build && slate-tools deploy.
+
+Compiles the contents of the dist directory and creates a ZIP file in the root of the project.
+slate-tools zip
+Connect to your store · Slate Now that you have a new Slate project, you need to link it to your remote Shopify store by updating the .env file
+.env file
+SLATE_STORE={store-name}.myshopify.com
+
+
+SLATE_PASSWORD=ccf7fb19ed4dc6993ac6355c0c489c7c7
+
+
+SLATE_THEME_ID=32112656003
+
+
+SLATE_IGNORE_FILES=config/settings_data.json
+This refers to the URL of your Shopify store, e.g. store-name.myshopify.com.
+
+Note: the https:// protocol is not included and neither is the trailing slash.
+
+Create a new private app by navigating to your store’s private apps page https://{store-name}.myshopify.com/admin/apps/private , giving the private app a name and setting the Theme templates and theme assets to “Read and write”.
+
+Hit the “Save” button, edit the new private app and click “Show” to view the Password field. This is your SLATE_PASSWORD.
+
+You can view a full list of all available theme IDs for your store by navigating to https://{store-name}.myshopify.com/admin/themes.xml .
+
+Each theme entry will have an id tag. Set the SLATE_THEME_ID to the theme ID you want to deploy to.
+
+Note: When you deploy your theme, Slate will overwrite the existing remote code associated with the SLATE_THEME_ID you defined with your local project’s code, which you may not want. To avoid this, navigate to https://{store-name}.myshopify.com/admin/themes and duplicate an existing theme ID to work from.
+
+This is the only optional setting in the .env file and it enables you to ignore certain files from being deployed to your Shopify store. One example would be to ignore the settings_data.json file to avoid overwriting your theme’s section settings every time you deploy your theme.
+The file paths are relative to the theme’s dist/ directory so ignoring the settings_data.json file would look like the following:
+SLATE_IGNORE_FILES=config/settings_data.json
+.env fileSlate allows you to define multiple environment files. Users can specify the --env flag with slate-tools scripts to use with an .env.{env} file. For example:
+yarn start --env=production
+will look for a .env.production file.
+Connect to your store · Slate Now that you have a new Slate project, you need to link it to your remote Shopify store by updating the .env file
+.env file
+SLATE_STORE={store-name}.myshopify.com
+
+
+SLATE_PASSWORD=ccf7fb19ed4dc6993ac6355c0c489c7c7
+
+
+SLATE_THEME_ID=32112656003
+
+
+SLATE_IGNORE_FILES=config/settings_data.json
+This refers to the URL of your Shopify store, e.g. store-name.myshopify.com.
+
+Note: the https:// protocol is not included and neither is the trailing slash.
+
+Create a new private app by navigating to your store’s private apps page https://{store-name}.myshopify.com/admin/apps/private , giving the private app a name and setting the Theme templates and theme assets to “Read and write”.
+
+Hit the “Save” button, edit the new private app and click “Show” to view the Password field. This is your SLATE_PASSWORD.
+
+You can view a full list of all available theme IDs for your store by navigating to https://{store-name}.myshopify.com/admin/themes.xml .
+
+Each theme entry will have an id tag. Set the SLATE_THEME_ID to the theme ID you want to deploy to.
+
+Note: When you deploy your theme, Slate will overwrite the existing remote code associated with the SLATE_THEME_ID you defined with your local project’s code, which you may not want. To avoid this, navigate to https://{store-name}.myshopify.com/admin/themes and duplicate an existing theme ID to work from.
+
+This is the only optional setting in the .env file and it enables you to ignore certain files from being deployed to your Shopify store. One example would be to ignore the settings_data.json file to avoid overwriting your theme’s section settings every time you deploy your theme.
+The file paths are relative to the theme’s dist/ directory so ignoring the settings_data.json file would look like the following:
+SLATE_IGNORE_FILES=config/settings_data.json
+.env fileSlate allows you to define multiple environment files. Users can specify the --env flag with slate-tools scripts to use with an .env.{env} file. For example:
+yarn start --env=production
+will look for a .env.production file.
+Create a new Slate project · Slate Creating a new Slate project is as simple as running a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+
+Note : The default Slate theme is generated from Shopify/starter-themecustom starter themes for more information on how you can generate a new project from other sources or contributing your own to the community!
+
+Create a new Slate project · Slate Creating a new Slate project is as simple as running a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+
+Note : The default Slate theme is generated from Shopify/starter-themecustom starter themes for more information on how you can generate a new project from other sources or contributing your own to the community!
+
+Create a self-signed SSL certificate · Slate Slate uses a local Express server to serve your assets locally. It's a good idea to create a trusted, self-signed SSL certificate on your device so the assets, served via https, are never blocked.
+
+Run the following commands to install mkcert . See the installation docs for more details.
+
+brew install mkcert
+
+Copy and paste the bash function into your terminal (or into your .bashrc file if you want to have it available in the future):
+
+function ssl-check $f /server.crt
+ ssl_key=$f /server.key
+ b=$(tput bold)
+ c=$(tput sgr0)
+
+ local_ip=$(ipconfig getifaddr $(route get default | grep interface | awk '{print $2}' ))
+
+
+ domains=(
+ "localhost"
+ "$local_ip "
+ )
+
+ if [[ ! -f $ssl_crt ]]; then
+ echo -e "\n🛑 ${b} Couldn't find a Slate SSL certificate:${c} "
+ make_key=true
+ elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip ) ]]; then
+ echo -e "\n🛑 ${b} Your IP Address has changed:${c} "
+ make_key=true
+ else
+ echo -e "\n✅ ${b} Your IP address is still the same.${c} "
+ fi
+
+ if [[ $make_key == true ]]; then
+ echo -e "Generating a new Slate SSL certificate...\n"
+ count=$(( ${#domains[@]} - 1))
+ mkcert ${domains[@]}
+
+
+ test ! -d $f && mkdir $f
+
+
+
+ if [[ $count = 0 ]]; then
+ mv ./localhost.pem $ssl_crt
+ mv ./localhost-key.pem $ssl_key
+ else
+ mv ./localhost+$count .pem $ssl_crt
+ mv ./localhost+$count -key.pem $ssl_key
+ fi
+ fi
+}
+
+Run the function you just declared in step 2:
+
+ssl-check
+
+You now have successfully created a local, self-signed SSL certificate for developing with Slate!
+
+Even after performing the above steps, you might encounter the following errors and warnings when developing with Slate:
+
+An example of https requests to your local asset server being blocked
+
+An example of Chrome warning you of an untrusted https certificate
+This is most likely because your local IP has changed and the self-signed SSL certificate you created is no longer valid. To remove these warnings and errors, simply repeat steps 2 and 3 above to regenerate a new self-signed certificate.
+Create a self-signed SSL certificate · Slate Slate uses a local Express server to serve your assets locally. It's a good idea to create a trusted, self-signed SSL certificate on your device so the assets, served via https, are never blocked.
+
+Run the following commands to install mkcert . See the installation docs for more details.
+
+brew install mkcert
+
+Copy and paste the bash function into your terminal (or into your .bashrc file if you want to have it available in the future):
+
+function ssl-check $f /server.crt
+ ssl_key=$f /server.key
+ b=$(tput bold)
+ c=$(tput sgr0)
+
+ local_ip=$(ipconfig getifaddr $(route get default | grep interface | awk '{print $2}' ))
+
+
+ domains=(
+ "localhost"
+ "$local_ip "
+ )
+
+ if [[ ! -f $ssl_crt ]]; then
+ echo -e "\n🛑 ${b} Couldn't find a Slate SSL certificate:${c} "
+ make_key=true
+ elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip ) ]]; then
+ echo -e "\n🛑 ${b} Your IP Address has changed:${c} "
+ make_key=true
+ else
+ echo -e "\n✅ ${b} Your IP address is still the same.${c} "
+ fi
+
+ if [[ $make_key == true ]]; then
+ echo -e "Generating a new Slate SSL certificate...\n"
+ count=$(( ${#domains[@]} - 1))
+ mkcert ${domains[@]}
+
+
+ test ! -d $f && mkdir $f
+
+
+
+ if [[ $count = 0 ]]; then
+ mv ./localhost.pem $ssl_crt
+ mv ./localhost-key.pem $ssl_key
+ else
+ mv ./localhost+$count .pem $ssl_crt
+ mv ./localhost+$count -key.pem $ssl_key
+ fi
+ fi
+}
+
+Run the function you just declared in step 2:
+
+ssl-check
+
+You now have successfully created a local, self-signed SSL certificate for developing with Slate!
+
+Even after performing the above steps, you might encounter the following errors and warnings when developing with Slate:
+
+An example of https requests to your local asset server being blocked
+
+An example of Chrome warning you of an untrusted https certificate
+This is most likely because your local IP has changed and the self-signed SSL certificate you created is no longer valid. To remove these warnings and errors, simply repeat steps 2 and 3 above to regenerate a new self-signed certificate.
+Create Slate Theme · Slate The create-slate-theme package allows you to create a new Slate project with a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+Note : If you prefer to use NPM, you will need to install create-slate-theme globally before creating a new project:
+npm install -g create-slate-theme
+create-slate-theme my-new-theme
+
+
+
+Options Description
+
+--skipInstallSkips installing theme dependencies which greatly speeds up overall setup time. --sshUses SSH, instead of HTTPS, when cloning a theme to your local directory.
+
+The default Slate theme is generated from Shopify/starter-theme
+Instead, you can reference your own Github repository or local directory starting point.
+To create a new theme from a GitHub repository simply pass the {username}/{repository}:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+If you want to create a theme based on a local directory, reference the path:
+yarn create slate-theme my-new-theme my-own-starter-theme/
+You can share your starting point with the community by publishing your own starter theme to Github.
+For example, Thomas thinks his starter theme is way more clever than Shopify's Starter Theme. So he creates his own, pushes it to a GitHub repository and calls the following command for any of his future Slate projects:
+yarn create slate-theme my-new-theme thomas/way-more-clever-starter-theme
+See custom starter themes for more information on how you can generate a new project from other sources and even contribute your very own to the Slate community!
+Create Slate Theme · Slate The create-slate-theme package allows you to create a new Slate project with a single command. We recommend using either yarn createnpx
+yarn create slate-theme my-new-theme
+or
+npx create-slate-theme my-new-theme
+
+Note : If you prefer to use NPM, you will need to install create-slate-theme globally before creating a new project:
+npm install -g create-slate-theme
+create-slate-theme my-new-theme
+
+
+
+Options Description
+
+--skipInstallSkips installing theme dependencies which greatly speeds up overall setup time. --sshUses SSH, instead of HTTPS, when cloning a theme to your local directory.
+
+The default Slate theme is generated from Shopify/starter-theme
+Instead, you can reference your own Github repository or local directory starting point.
+To create a new theme from a GitHub repository simply pass the {username}/{repository}:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+If you want to create a theme based on a local directory, reference the path:
+yarn create slate-theme my-new-theme my-own-starter-theme/
+You can share your starting point with the community by publishing your own starter theme to Github.
+For example, Thomas thinks his starter theme is way more clever than Shopify's Starter Theme. So he creates his own, pushes it to a GitHub repository and calls the following command for any of his future Slate projects:
+yarn create slate-theme my-new-theme thomas/way-more-clever-starter-theme
+See custom starter themes for more information on how you can generate a new project from other sources and even contribute your very own to the Slate community!
+Deploy environments · Slate Manages the environment variables which are needed by Slate to interact with Shopify servers. Can create and run .env files used to store Slate environment variables for development.
+By default, Slate will look for a .env file with environment variables.
+Alternatively, users can specify --env with slate-tools scripts to use associated .env.{env} file. For example:
+$ slate-tools start --env=production
+will look for a .env.production file.
+
+SLATE_STORE=
+
+
+SLATE_PASSWORD=
+
+
+SLATE_THEME_ID=
+
+
+SLATE_IGNORE_FILES=
+Deploy environments · Slate Manages the environment variables which are needed by Slate to interact with Shopify servers. Can create and run .env files used to store Slate environment variables for development.
+By default, Slate will look for a .env file with environment variables.
+Alternatively, users can specify --env with slate-tools scripts to use associated .env.{env} file. For example:
+$ slate-tools start --env=production
+will look for a .env.production file.
+
+SLATE_STORE=
+
+
+SLATE_PASSWORD=
+
+
+SLATE_THEME_ID=
+
+
+SLATE_IGNORE_FILES=
+How to create a development store · Slate Since you can’t run the Shopify platform locally on your computer, everything needs to live on Shopify’s servers. To start developing and testing your theme , you will first need to create a Shopify development store. The easiest way to create a development store is through a Shopify Partner Account.
+As a Shopify Partner , you can create an unlimited number of development stores. A development store is a free Shopify account that comes with a couple of limitations. You can use a development store to test any theme that you create, or to set up a Shopify account for a client.
+
+Visit the Shopify Partner Program page
+Enter your email and fill out the form
+
+Create a new partner account and fill out the form
+
+You are now ready to create your first development store!
+
+
+Once you have your Partner account and your development store running, you will want to fill your store with dummy data. While you can add content manually, Shopify offers some tools to automate that task.
+Shopify has create their own developer tools app (only available to macOS users) to help you build faster with Shopify. One of the many features is the ability to generate dummy data .
+
+Follow the instructions to install the app
+Once the application is installed and you are authenticated, you can search for Data generator
+
+Fill in the different options and click on Start
+
+
+If you don't wish to download an app, Shopify also offers Product CSV files as an alternative. There’s a great article on the Shopify Partners blog how on how to import CSV files in your store .
+Once content is added to your store, you can connect it to your local development environment and start developing !
+How to create a development store · Slate Since you can’t run the Shopify platform locally on your computer, everything needs to live on Shopify’s servers. To start developing and testing your theme , you will first need to create a Shopify development store. The easiest way to create a development store is through a Shopify Partner Account.
+As a Shopify Partner , you can create an unlimited number of development stores. A development store is a free Shopify account that comes with a couple of limitations. You can use a development store to test any theme that you create, or to set up a Shopify account for a client.
+
+Visit the Shopify Partner Program page
+Enter your email and fill out the form
+
+Create a new partner account and fill out the form
+
+You are now ready to create your first development store!
+
+
+Once you have your Partner account and your development store running, you will want to fill your store with dummy data. While you can add content manually, Shopify offers some tools to automate that task.
+Shopify has create their own developer tools app (only available to macOS users) to help you build faster with Shopify. One of the many features is the ability to generate dummy data .
+
+Follow the instructions to install the app
+Once the application is installed and you are authenticated, you can search for Data generator
+
+Fill in the different options and click on Start
+
+
+If you don't wish to download an app, Shopify also offers Product CSV files as an alternative. There’s a great article on the Shopify Partners blog how on how to import CSV files in your store .
+Once content is added to your store, you can connect it to your local development environment and start developing !
+How to create your own Starter theme · Slate We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes team. For cases like this, Slate lets you optionally specify your own Starter Theme. Introduced in Slate v1, starter themes are structured to be used as a starting point whenever creating a new Slate project.
+The easiest way to create your very own starter theme is by customizing an existing one. You can find a list of community made starter themes in the Slate documentation website, or you can use one of Shopify’s starter themes:
+
+Shopify/starter-theme can help you build a theme using a list of best practices and solutions the Shopify Themes Team has come up with and has applied to the majority of Shopify's free themes. Starter Theme provides a whole range of useful features:
+
+Templates with minimal structure
+CSS predefined styles and helper classes
+UI interaction with our theme scripts
+Internationalization-ready for multiple languages
+Responsive images that are performant and optimized for any device
+Social meta tags ready to boost your search engine rankings
+Standard sections that are required in order to submit a theme to the Shopify Theme Store
+
+If you’re someone who likes to develop a theme from scratch, you can take a look at the Shopify/skeleton-theme repository. Skeleton Theme is a barebones theme that gives you the freedom to start a new Slate project with nothing in your way and to customize it however you see fit.
+Whichever starter theme you choose, you can use Create Slate Theme to generate a new Slate project:
+yarn create slate-theme my-new-starter-theme Shopify/starter-theme
+Where Shopify/starter-theme is the name of the repository you wish to use as a starter theme.
+After creating your theme, you can create a repository using Git version control. The Shopify Themes team works a lot with GitHub and we find it extremely convenient for addressing issues, creating releases and collaborating with one another.
+Before being able to develop your theme, you need connect to your store . Once this is done, you can start developing !
+In order to successfully compile your theme with Slate and upload it to Shopify, you need to ensure the list of mandatory files and folders are there. We encourage you to take a look at Shopify's required files and folder to view the complete list of required files and folders.
+After developing and testing your theme, you are ready to set up your project on GitHub and share it with everyone.
+Now that your project is hosted on GitHub, anyone can start a Slate theme with it! To do so, type the following into you terminal:
+yarn create slate-theme my-new-theme-project tobi/custom-starter-theme
+Where tobi/custom-starter-theme would reference as {username}/{repository}
+Don’t forget to add your new starter theme to the list of community themes on the Starter Themes page of the Slate documentation website!
+How to create your own Starter theme · Slate We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes team. For cases like this, Slate lets you optionally specify your own Starter Theme. Introduced in Slate v1, starter themes are structured to be used as a starting point whenever creating a new Slate project.
+The easiest way to create your very own starter theme is by customizing an existing one. You can find a list of community made starter themes in the Slate documentation website, or you can use one of Shopify’s starter themes:
+
+Shopify/starter-theme can help you build a theme using a list of best practices and solutions the Shopify Themes Team has come up with and has applied to the majority of Shopify's free themes. Starter Theme provides a whole range of useful features:
+
+Templates with minimal structure
+CSS predefined styles and helper classes
+UI interaction with our theme scripts
+Internationalization-ready for multiple languages
+Responsive images that are performant and optimized for any device
+Social meta tags ready to boost your search engine rankings
+Standard sections that are required in order to submit a theme to the Shopify Theme Store
+
+If you’re someone who likes to develop a theme from scratch, you can take a look at the Shopify/skeleton-theme repository. Skeleton Theme is a barebones theme that gives you the freedom to start a new Slate project with nothing in your way and to customize it however you see fit.
+Whichever starter theme you choose, you can use Create Slate Theme to generate a new Slate project:
+yarn create slate-theme my-new-starter-theme Shopify/starter-theme
+Where Shopify/starter-theme is the name of the repository you wish to use as a starter theme.
+After creating your theme, you can create a repository using Git version control. The Shopify Themes team works a lot with GitHub and we find it extremely convenient for addressing issues, creating releases and collaborating with one another.
+Before being able to develop your theme, you need connect to your store . Once this is done, you can start developing !
+In order to successfully compile your theme with Slate and upload it to Shopify, you need to ensure the list of mandatory files and folders are there. We encourage you to take a look at Shopify's required files and folder to view the complete list of required files and folders.
+After developing and testing your theme, you are ready to set up your project on GitHub and share it with everyone.
+Now that your project is hosted on GitHub, anyone can start a Slate theme with it! To do so, type the following into you terminal:
+yarn create slate-theme my-new-theme-project tobi/custom-starter-theme
+Where tobi/custom-starter-theme would reference as {username}/{repository}
+Don’t forget to add your new starter theme to the list of community themes on the Starter Themes page of the Slate documentation website!
+How to update Slate to the latest version · Slate Slate is currently in beta and is undergoing heavy development, which makes the release cycle much more frequent. You will want to ensure you are running the latest version of Slate in your Shopify theme by updating the @shopify/slate-tools dependency over time.
+To update @shopify/slate-tools, we recommend using either yarn upgrade or npm install :
+yarn upgrade --latest @shopify/slate-tools
+or
+npm install @shopify/slate-tools@latest
+In addition to updating the dependency inside of the node_modules folder, this command also updates the version of @shopify/slate-tools in your package.json file.
+
+Note: to better understand the updates that are made to Slate, you can check out the Slate changelog to view the list of updates for each release.
+
+How to update Slate to the latest version · Slate Slate is currently in beta and is undergoing heavy development, which makes the release cycle much more frequent. You will want to ensure you are running the latest version of Slate in your Shopify theme by updating the @shopify/slate-tools dependency over time.
+To update @shopify/slate-tools, we recommend using either yarn upgrade or npm install :
+yarn upgrade --latest @shopify/slate-tools
+or
+npm install @shopify/slate-tools@latest
+In addition to updating the dependency inside of the node_modules folder, this command also updates the version of @shopify/slate-tools in your package.json file.
+
+Note: to better understand the updates that are made to Slate, you can check out the Slate changelog to view the list of updates for each release.
+
+Local development · Slate Local development in Shopify Themes is pretty unique, and probably unlike anything you've previously encountered. In fact, with Slate local development you're still deploying and viewing pages from Shopify servers, so technically it's not really local development. Let's explore why Slate takes this approach, and what makes local development in Shopify unique.
+Liquid is a templating language created by Shopify and written in Ruby. It is now available as an open source project on GitHub, and used by many different software projects and companies. Liquid is the backbone of all Shopify themes, and is used to load dynamic content to the pages of online stores.
+Shopify Themes use an extended version of Liquid with a variety of additional objects, tags, and filters. These extensions make it possible for Shopify Theme Liquid to access and manipulate a huge amount of store data, including products, a user's cart, Theme Editor settings, etc.
+Rendering Shopify Liquid locally on a developers machine (in a reliable, sustainable manner) is currently not possible due to the following realities:
+
+The code for all Shopify Liquid features is written in Ruby and is tightly coupled to our databases and servers. In its current state, it would be extremely difficult for us to package this code as an independent library and share it without exposing Shopify's private internal workings.
Shopify Liquid is extended as we release new features, which means it is constantly changing. If we had a separate, local-development Shopify Liquid renderer, we would need to duplicate any new logic which means twice as much work and more potential for error.
+Because it is currently not possible to render Shopify Liquid locally in a reliable manner, Slate relies on Shopify servers to do the work so you can preview your changes as you develop. This means that any changes you make while developing with Slate will be deployed to the theme you have specified .
+We realize that that deploying to Shopify servers introduces a level of risk while developing, such as possibly overwriting files on your live theme or erasing Theme Editor customizations.
+Luckily, Slate comes with a few handy features which help reduce these risks as well as improve the experience of developing with a external server.
+Slate uses deploy environments to specify which store and theme it should be deploying files too. If you are about to deploy to your store's currently published theme , Slate will prompt you before continuing.
+The settings_data.json file is used to keep track of any changes you've made to your theme in the Shopify Theme Editor. It is not uncommon for the settings_data.json file in your Slate project to become out of sync with the setting_data.json file on your store. When this happens and you deploy your Slate project, your store's settings_data.json will be overwritten with the version inside your Slate project. This can result in losing changes you've made in the Theme Editor.
+Slate will detect if you are about to upload settings_data.json, and prompt you to confirm your action and the potential for overwriting out-of-sync changes.
+Slate v1.0 introduces a local server which compiles and serves theme JavaScript and CSS locally. By serving these assets locally, developers don't need to wait for them to be uploaded to Shopify servers to preview the changes they are making. When combined with Hot Module Reloading, developers see changes in their code reflected almost instantly.
+Developers wanting to share an instance of their store with other developers are often confused when they see their store appear broken. Because CSS and JavaScript are being served locally, your theme won’t function on any machine other than the one the Express server is currently running on.
+Local development · Slate Local development in Shopify Themes is pretty unique, and probably unlike anything you've previously encountered. In fact, with Slate local development you're still deploying and viewing pages from Shopify servers, so technically it's not really local development. Let's explore why Slate takes this approach, and what makes local development in Shopify unique.
+Liquid is a templating language created by Shopify and written in Ruby. It is now available as an open source project on GitHub, and used by many different software projects and companies. Liquid is the backbone of all Shopify themes, and is used to load dynamic content to the pages of online stores.
+Shopify Themes use an extended version of Liquid with a variety of additional objects, tags, and filters. These extensions make it possible for Shopify Theme Liquid to access and manipulate a huge amount of store data, including products, a user's cart, Theme Editor settings, etc.
+Rendering Shopify Liquid locally on a developers machine (in a reliable, sustainable manner) is currently not possible due to the following realities:
+
+The code for all Shopify Liquid features is written in Ruby and is tightly coupled to our databases and servers. In its current state, it would be extremely difficult for us to package this code as an independent library and share it without exposing Shopify's private internal workings.
Shopify Liquid is extended as we release new features, which means it is constantly changing. If we had a separate, local-development Shopify Liquid renderer, we would need to duplicate any new logic which means twice as much work and more potential for error.
+Because it is currently not possible to render Shopify Liquid locally in a reliable manner, Slate relies on Shopify servers to do the work so you can preview your changes as you develop. This means that any changes you make while developing with Slate will be deployed to the theme you have specified .
+We realize that that deploying to Shopify servers introduces a level of risk while developing, such as possibly overwriting files on your live theme or erasing Theme Editor customizations.
+Luckily, Slate comes with a few handy features which help reduce these risks as well as improve the experience of developing with a external server.
+Slate uses deploy environments to specify which store and theme it should be deploying files too. If you are about to deploy to your store's currently published theme , Slate will prompt you before continuing.
+The settings_data.json file is used to keep track of any changes you've made to your theme in the Shopify Theme Editor. It is not uncommon for the settings_data.json file in your Slate project to become out of sync with the setting_data.json file on your store. When this happens and you deploy your Slate project, your store's settings_data.json will be overwritten with the version inside your Slate project. This can result in losing changes you've made in the Theme Editor.
+Slate will detect if you are about to upload settings_data.json, and prompt you to confirm your action and the potential for overwriting out-of-sync changes.
+Slate v1.0 introduces a local server which compiles and serves theme JavaScript and CSS locally. By serving these assets locally, developers don't need to wait for them to be uploaded to Shopify servers to preview the changes they are making. When combined with Hot Module Reloading, developers see changes in their code reflected almost instantly.
+Developers wanting to share an instance of their store with other developers are often confused when they see their store appear broken. Because CSS and JavaScript are being served locally, your theme won’t function on any machine other than the one the Express server is currently running on.
+Slate analytics · Slate Slate Analytics emits Slate usage events, performance data, and errors to the Shopify analytics platform. It also manages individual user consent for collecting data as they work with Slate.
+Consent is always asked for new Slate users and if the data we collect has changed in a way that requires a consent reconfirmation. The goal of Slate analytics is to collect non-sensitive, real user metrics which will be used to improve Slate's development experience.
+All emitted events include a performance.mark() for benchmarking and randomly generated process ID for linking multiple events from the same command.
+We will be continually iterating Slate Analytics to catch as many errors as possible. We will never collect a full stack of errors, which may contain sensitive information about the user's file system.
+
+
+Name Payload
+
+slate-analytics:new-userContents of ~/.slaterc (Randomly generated user ID, Email, Tracking consent version)` slate-analytics:renew-consent-promptContents of ~/.slaterc slate-analytics:renew-consent-trueContents of ~/.slaterc
+
+
+
+Name Payload
+
+create-slate-theme:startStarter theme used, --skipInstall value, --verbose flag value, create-slate-theme version create-slate-theme:successcreate-slate-theme version
+
+
+
+Name Payload
+
+slate-tools:cli:startslate.config.js, slate-tools versionslate-tools:build:startWebpack config, slate-tools version slate-tools:build:endWebpack config, slate-tools version slate-tools:deploy:startslate-tools versionslate-tools:deploy:endslate-tools versionslate-tools:deploy:errorslate-tools version, errorslate-tools:deploy:main-themeslate-tools:start:startWebpack config, slate-tools version slate-tools:start:compile-errorsslate-tools version, errorsslate-tools:start:compile-warningsslate-tools version, warnings, compile timeslate-tools:start:compile-successslate-tools version, compile timeslate-tools:start:skip-first-deployslate-tools versionslate-tools:start:sync-startslate-tools versionslate-tools:start:sync-endslate-tools versionslate-tools:start:sync-errorslate-tools versionslate-tools:zip:startslate-tools version
+
+Slate analytics · Slate Slate Analytics emits Slate usage events, performance data, and errors to the Shopify analytics platform. It also manages individual user consent for collecting data as they work with Slate.
+Consent is always asked for new Slate users and if the data we collect has changed in a way that requires a consent reconfirmation. The goal of Slate analytics is to collect non-sensitive, real user metrics which will be used to improve Slate's development experience.
+All emitted events include a performance.mark() for benchmarking and randomly generated process ID for linking multiple events from the same command.
+We will be continually iterating Slate Analytics to catch as many errors as possible. We will never collect a full stack of errors, which may contain sensitive information about the user's file system.
+
+
+Name Payload
+
+slate-analytics:new-userContents of ~/.slaterc (Randomly generated user ID, Email, Tracking consent version)` slate-analytics:renew-consent-promptContents of ~/.slaterc slate-analytics:renew-consent-trueContents of ~/.slaterc
+
+
+
+Name Payload
+
+create-slate-theme:startStarter theme used, --skipInstall value, --verbose flag value, create-slate-theme version create-slate-theme:successcreate-slate-theme version
+
+
+
+Name Payload
+
+slate-tools:cli:startslate.config.js, slate-tools versionslate-tools:build:startWebpack config, slate-tools version slate-tools:build:endWebpack config, slate-tools version slate-tools:deploy:startslate-tools versionslate-tools:deploy:endslate-tools versionslate-tools:deploy:errorslate-tools version, errorslate-tools:deploy:main-themeslate-tools:start:startWebpack config, slate-tools version slate-tools:start:compile-errorsslate-tools version, errorsslate-tools:start:compile-warningsslate-tools version, warnings, compile timeslate-tools:start:compile-successslate-tools version, compile timeslate-tools:start:skip-first-deployslate-tools versionslate-tools:start:sync-startslate-tools versionslate-tools:start:sync-endslate-tools versionslate-tools:start:sync-errorslate-tools versionslate-tools:zip:startslate-tools version
+
+Slate Configuration · Slate Excluding connecting to your store , Slate should work out of the box without any additional configuration. For developers who want to customize the default configurations of Slate, they can do so via a slate.config.js file found in the root of the theme.
+A typical slate.config.js could look something like below:
+const path = require ('path' );
+const newPostCssPlugin = require ('newPostCssPlugin' );
+
+module .exports = {
+
+ 'webpack.babel.enable' : false ,
+
+
+
+
+ 'paths.theme.src' : config =>'paths.theme' ), 'src' ),
+
+
+
+ 'webpack.postcss.plugins' : (config, defaultValue ) => [
+ newPostCssPlugin,
+ ...defaultValue
+ ]
+};
+Sometimes you want a configuration to be different depending on if your running a production build (slate-tools build) or development build (slate-tools start). To do this, you can take advantage of the process.env.NODE_ENV which Slate sets to 'production' or 'development':
+module .exports = {
+ 'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano(config.get('webpack.cssnano.settings' ))
+ }
+
+ return plugins;
+ },
+}
+Configurations are declared within Slate packages, across various schema files. The best way
+to learn about these configurations are to explore these files:
+
+Slate Configuration · Slate Excluding connecting to your store , Slate should work out of the box without any additional configuration. For developers who want to customize the default configurations of Slate, they can do so via a slate.config.js file found in the root of the theme.
+A typical slate.config.js could look something like below:
+const path = require ('path' );
+const newPostCssPlugin = require ('newPostCssPlugin' );
+
+module .exports = {
+
+ 'webpack.babel.enable' : false ,
+
+
+
+
+ 'paths.theme.src' : config =>'paths.theme' ), 'src' ),
+
+
+
+ 'webpack.postcss.plugins' : (config, defaultValue ) => [
+ newPostCssPlugin,
+ ...defaultValue
+ ]
+};
+Sometimes you want a configuration to be different depending on if your running a production build (slate-tools build) or development build (slate-tools start). To do this, you can take advantage of the process.env.NODE_ENV which Slate sets to 'production' or 'development':
+module .exports = {
+ 'webpack.postcss.plugins' : (config ) => {
+ const plugins = [autoprefixer];
+
+
+ if (process.env.NODE_ENV === 'production' ) {
+ plugins.push(cssnano(config.get('webpack.cssnano.settings' ))
+ }
+
+ return plugins;
+ },
+}
+Configurations are declared within Slate packages, across various schema files. The best way
+to learn about these configurations are to explore these files:
+
+Slate CSSVar Loader · Slate Finds CSS custom properties (variables) in your stylesheets and replaces them with their corresponding Liquid variable found in the provided cssVariablesPath option.
+npm install --save-dev @shopify/slate-cssvar-loader
+module .exports = {
+ module : {
+ rules : [
+ {
+ test : /\.s[ac]ss$/ ,
+ use : [
+ {
+ loader : '@shopify/slate-cssvar-loader'
+ },
+ { loader : 'css-loader' },
+ { loader : 'sass-loader' }
+ ]
+ }
+ ]
+ }
+};
+The slate-cssvar-loader can be configured via the theme's slate.config.js file:
+{
+ "cssVarLoaderEnable" : true ,
+ "cssVarLoaderLiquidPath" : ["src/snippets/css-variables.liquid" ]
+}
+
+cssVarLoaderEnable: Enable/disable CSS Variable loader plugincssVarLoaderLiquidPath: An array of string paths to Liquid files that associate css variables to Liquid variables
+Slate CSSVar Loader · Slate Finds CSS custom properties (variables) in your stylesheets and replaces them with their corresponding Liquid variable found in the provided cssVariablesPath option.
+npm install --save-dev @shopify/slate-cssvar-loader
+module .exports = {
+ module : {
+ rules : [
+ {
+ test : /\.s[ac]ss$/ ,
+ use : [
+ {
+ loader : '@shopify/slate-cssvar-loader'
+ },
+ { loader : 'css-loader' },
+ { loader : 'sass-loader' }
+ ]
+ }
+ ]
+ }
+};
+The slate-cssvar-loader can be configured via the theme's slate.config.js file:
+{
+ "cssVarLoaderEnable" : true ,
+ "cssVarLoaderLiquidPath" : ["src/snippets/css-variables.liquid" ]
+}
+
+cssVarLoaderEnable: Enable/disable CSS Variable loader plugincssVarLoaderLiquidPath: An array of string paths to Liquid files that associate css variables to Liquid variables
+Slate Themes · Slate Slate themes follow a predetermined file structure. Several of the files listed are optional and can be omitted from your project. However, Starter Theme , the default starting point when generating a new theme with Slate, will include all files.
+A Slate project consists of the following file structure:
+├── .babelrc [1]
+├── .env [2]
+├── .eslintrc [3]
+├── .gitignore
+├── .stylelintrc [4]
+├── package.json [5]
+├── slate.config.js [6]
+├── yarn.lock [7]
+└── src
+ ├── assets [8]
+ ├── config [9]
+ ├── layout [9]
+ ├── locales [9]
+ ├── scripts [10]
+ ├── sections [9]
+ ├── snippets [9]
+ ├── styles [11]
+ └── templates [9]
+.babelrc (optional)
+Starter Theme comes with Babel preconfigured with shopify/babel-preset-shopify
+.env
+Slate will use the environment variables declared in this file to connect to deploy files to your Shopify store. For more information, visit the @shopify/slate-env docs
+This file, along with any other .env.{environment} files, contain sensitive information and should not be commited to Github. These environment files are ignored by default in .gitignore.
+.eslintrc (optional)
+Starter Theme comes with ESLint preconfigured with shopify/eslint-plugin-shopify
+.stylelintrc (optional)
+Starter Theme comes with Stylelint preconfigured with shopify/stylelint-config-shopify
+package.json
+A copy of the theme package.json will be included in your new project. It's a good idea to update its contents to match your new project, such as updating the name, version, repository, author and description.
+The package.json includes NPM/Yarn scripts for you to be able to use Slate Tools commands easily (e.g. yarn start).
+slate.config.js
+The Slate config file enables users to customize Slate to their specific needs. For more information, visit the @shopify/slate-config docs
+yarn.lock
+The Shopify Themes Team uses Yarn while developing themes because of its speed. However, Starter Theme works with NPM as well. Simply delete the yarn.lock file and run npm install to install the list of dependencies.
+src/assets/
+Sometimes you need the ability to upload unmodified files to the Shopify server. This is where the assets directory comes in. Any files placed inside this directory will be uploaded, as-is, to Shopify.
+Files can be referenced in your theme by their file name, such as:
+<img src ="{{ my-image.jpg | asset_url }}" />
+You can organize your files within folders inside the assets directory, and still reference them by file name. For example, the following image would still be referenced the exact same as the example above:
+└── assets
+ └── images
+ └── my-image.jpg
+
+⚠ Slate flattens the folders found in the assets directory on build. If you decide to use folders inside your assets directory, avoid duplicate file names because only one file with that file name can exist when the Slate theme is built. The example below shows two images with the same name my-image.jpg resulting in only one of the images being included in the compiled theme
+
+└── src
+ └── assets
+ ├── image-collection-a
+ │ └── my-image.jpg
+ └── image-collection-b
+ └── my-image.jpg
+Compiles to:
+└── dist
+ └── assets
+ └── my-image.jpg
+src/config, src/layout/theme.liquid, src/locales, src/sections, src/snippets, src/templates/*.liquid
+The aforementioned files and folders are required by Shopify for any given theme.
+src/scripts
+This folder constains all your JS modules. See the Template and Layout Bundles page for more details on the contents of src/scripts.
+You can use ES6/ES2015's standard, which allows you to require your modules with the import syntax:
+import { contains } from 'lodash' ;
+import Foo from './modules/foo' ;
+
+src/styles
+Slate fully supports .css, .scss and .sass files and their syntax, including @import.
+You must include your style index file at the top of your theme.js file for Webpack to be able to load your styles into its build process. For example:
+import '../styles/theme.scss' ;
+Liquid variables are accessible in .css, .scss, and .sass files via CSS custom properties that are declared in the layout/theme.liquid. Here's more information on how to use Liquid with CSS custom properties
+Slate Themes · Slate Slate themes follow a predetermined file structure. Several of the files listed are optional and can be omitted from your project. However, Starter Theme , the default starting point when generating a new theme with Slate, will include all files.
+A Slate project consists of the following file structure:
+├── .babelrc [1]
+├── .env [2]
+├── .eslintrc [3]
+├── .gitignore
+├── .stylelintrc [4]
+├── package.json [5]
+├── slate.config.js [6]
+├── yarn.lock [7]
+└── src
+ ├── assets [8]
+ ├── config [9]
+ ├── layout [9]
+ ├── locales [9]
+ ├── scripts [10]
+ ├── sections [9]
+ ├── snippets [9]
+ ├── styles [11]
+ └── templates [9]
+.babelrc (optional)
+Starter Theme comes with Babel preconfigured with shopify/babel-preset-shopify
+.env
+Slate will use the environment variables declared in this file to connect to deploy files to your Shopify store. For more information, visit the @shopify/slate-env docs
+This file, along with any other .env.{environment} files, contain sensitive information and should not be commited to Github. These environment files are ignored by default in .gitignore.
+.eslintrc (optional)
+Starter Theme comes with ESLint preconfigured with shopify/eslint-plugin-shopify
+.stylelintrc (optional)
+Starter Theme comes with Stylelint preconfigured with shopify/stylelint-config-shopify
+package.json
+A copy of the theme package.json will be included in your new project. It's a good idea to update its contents to match your new project, such as updating the name, version, repository, author and description.
+The package.json includes NPM/Yarn scripts for you to be able to use Slate Tools commands easily (e.g. yarn start).
+slate.config.js
+The Slate config file enables users to customize Slate to their specific needs. For more information, visit the @shopify/slate-config docs
+yarn.lock
+The Shopify Themes Team uses Yarn while developing themes because of its speed. However, Starter Theme works with NPM as well. Simply delete the yarn.lock file and run npm install to install the list of dependencies.
+src/assets/
+Sometimes you need the ability to upload unmodified files to the Shopify server. This is where the assets directory comes in. Any files placed inside this directory will be uploaded, as-is, to Shopify.
+Files can be referenced in your theme by their file name, such as:
+<img src ="{{ my-image.jpg | asset_url }}" />
+You can organize your files within folders inside the assets directory, and still reference them by file name. For example, the following image would still be referenced the exact same as the example above:
+└── assets
+ └── images
+ └── my-image.jpg
+
+⚠ Slate flattens the folders found in the assets directory on build. If you decide to use folders inside your assets directory, avoid duplicate file names because only one file with that file name can exist when the Slate theme is built. The example below shows two images with the same name my-image.jpg resulting in only one of the images being included in the compiled theme
+
+└── src
+ └── assets
+ ├── image-collection-a
+ │ └── my-image.jpg
+ └── image-collection-b
+ └── my-image.jpg
+Compiles to:
+└── dist
+ └── assets
+ └── my-image.jpg
+src/config, src/layout/theme.liquid, src/locales, src/sections, src/snippets, src/templates/*.liquid
+The aforementioned files and folders are required by Shopify for any given theme.
+src/scripts
+This folder constains all your JS modules. See the Template and Layout Bundles page for more details on the contents of src/scripts.
+You can use ES6/ES2015's standard, which allows you to require your modules with the import syntax:
+import { contains } from 'lodash' ;
+import Foo from './modules/foo' ;
+
+src/styles
+Slate fully supports .css, .scss and .sass files and their syntax, including @import.
+You must include your style index file at the top of your theme.js file for Webpack to be able to load your styles into its build process. For example:
+import '../styles/theme.scss' ;
+Liquid variables are accessible in .css, .scss, and .sass files via CSS custom properties that are declared in the layout/theme.liquid. Here's more information on how to use Liquid with CSS custom properties
+Start developing · Slate Now comes the fun part! To begin developing your very own theme with Slate's development pipeline, run the following command:
+yarn start
+(or, if you're using npm, npm start)
+This compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve your CSS and JavaScript assets from https://xxx.xxx.xxx.xxx:3001.
+
+
+Note : Because we are running the server on https://, you will either need to create a self-signed SSL Certificate or visit the asset server URL at least once and tell your browser to "trust it". Otherwise, local assets will be blocked and your theme will appear broken.
+
+By default, Slate will look for an .env file in the root of your theme directory. However, users can specify an --env flag to target specific environments. These environment files need to be named .env.{env}.
+For example, the following command will target an .env.production file:
+yarn start --env=production
+Start developing · Slate Now comes the fun part! To begin developing your very own theme with Slate's development pipeline, run the following command:
+yarn start
+(or, if you're using npm, npm start)
+This compiles your local theme files into a dist directory, uploads these files to your remote Shopify store and finally boots up a local Express server that will serve your CSS and JavaScript assets from https://xxx.xxx.xxx.xxx:3001.
+
+
+Note : Because we are running the server on https://, you will either need to create a self-signed SSL Certificate or visit the asset server URL at least once and tell your browser to "trust it". Otherwise, local assets will be blocked and your theme will appear broken.
+
+By default, Slate will look for an .env file in the root of your theme directory. However, users can specify an --env flag to target specific environments. These environment files need to be named .env.{env}.
+For example, the following command will target an .env.production file:
+yarn start --env=production
+Starter Themes · Slate Slate v1 introduces the concept of Starter Themes, a theme that is specifically structured to be used as a starting point for a new project. Ideally, a Starter Theme contains everything a team or individual needs when producing a theme, including solutions to common problems, 3rd party libraries, and helpful reminders.
+By default, Slate generates a new project using the Shopify Starter Theme . This theme represents the opinionated and preferred starting point for the Shopify Themes Team.
+We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes Team. For cases like this, Slate lets you optionally specify your own Starter Theme. Your Starter Theme can be hosted as Github repo. For example, here is how we specify we want to use Shopify Skeleton Theme as our Starter Theme:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+A Starter Theme can even just be a folder on your computer. For example, here is how we specify we want to use my-old-theme as a Starter Theme:
+yarn create slate-theme my-new-theme my-old-theme/
+You can share your customized Starter Theme with the community by publishing your own starter theme to Github. Add a link to your Starter Theme in the list below for others to see!
+
+Shopify Skeleton Theme - A barebones ☠️starter theme with the required files needed to compile with Slate and upload to Shopify.
+Starter Themes · Slate Slate v1 introduces the concept of Starter Themes, a theme that is specifically structured to be used as a starting point for a new project. Ideally, a Starter Theme contains everything a team or individual needs when producing a theme, including solutions to common problems, 3rd party libraries, and helpful reminders.
+By default, Slate generates a new project using the Shopify Starter Theme . This theme represents the opinionated and preferred starting point for the Shopify Themes Team.
+We understand that not everyone shares the same taste in libraries and solutions as the Shopify Themes Team. For cases like this, Slate lets you optionally specify your own Starter Theme. Your Starter Theme can be hosted as Github repo. For example, here is how we specify we want to use Shopify Skeleton Theme as our Starter Theme:
+yarn create slate-theme my-new-theme shopify/skeleton-theme
+A Starter Theme can even just be a folder on your computer. For example, here is how we specify we want to use my-old-theme as a Starter Theme:
+yarn create slate-theme my-new-theme my-old-theme/
+You can share your customized Starter Theme with the community by publishing your own starter theme to Github. Add a link to your Starter Theme in the list below for others to see!
+
+Shopify Skeleton Theme - A barebones ☠️starter theme with the required files needed to compile with Slate and upload to Shopify.
+Styles with Liquid · Slate Styling Shopify themes has always been inherently more complex than a typical web project thanks to the common need to combine styling languages with Liquid. The complexity only grows worse when using compiled styling languages like Sass, since including Liquid in Sass results in invalid syntax.
+Liquid is required in your styles if you want your theme to be customizable via the Online Store Editor. For example, if you wanted the background colour of your theme to be customizable, you could add a setting in your config/settings_schema.json and then use the value of that setting in your stylesheet. If you were using vanilla CSS, it might look something like the following:
+styles.css.liquid
+body {
+ background-color : {{ settings.colors.body_background }}
+}
+In order for Shopify to compute the Liquid values inside a stylesheet, you must give the stylesheet a .liquid extension. When a .css.liquid is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a .css stylesheet is made available. For example, if you were to upload a styles.css.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.css' | asset_url }}" rel ="stylesheet" >
+Similar to css.liquid stylesheets, if theme developers want to include Liquid directly in Sass (.scss.liquid files), those stylesheets need to be compiled on Shopify servers. This is because using Liquid in Sass results in invalid Sass syntax that local Sass compilers cannot parse.
+Luckily for developers, Shopify has a Sass compiler built into the platform. When a .scss.liquid file is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a scss.css stylesheet is made available. For example, if you were to upload a styles.scss.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.scss.css' | asset_url }}" rel ="stylesheet" >
+
+Note: Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive. This may cause some issues when trying to work with 3rd party Sass libraries.
+
+Slate introduces a new way of handling styles made possible through CSS custom properties. CSS custom properties are the perfect mechanism to link stylesheets to Theme Editor Liquid settings. They allow you to write valid CSS that plays well with build tools like Sass and PostCSS. CSS custom properties are also supported in all modern browsers, so there's never been a better time than now to use them!
+When local Sass compilation is combined with Slate's Local Development Assets Server, style changes are instantly injected into the page, without waiting for Shopify servers, resulting in a lightning fast development experience.
+To support legacy browsers, Slate includes a transpiler that replaces CSS variables with matching Liquid Variables as a last step in the production build script.
+For an example, take a look at Shopify/starter-theme
+
+We define all of our CSS variables in a snippet called css-variables.liquid which is included in the <head> of the theme.liquid file.
We create each variable like so, using CSS custom properties as described above:
+<style >
+ :root {
+ --color-primary: {{ settings.color_primary }};
+ --color-body-text: {{ settings.color_body_text }};
+ --color-main-background: {{ settings.color_main_bg }};
+ }
+ </style >
+
+What we did here is create a CSS custom property which is tied to the value from the theme editor (that the merchant can change). We can access these variables in our .scss files:
+
+$color-primary : var(--color-primary);
+$color-body : var(--color-main-background);
+
+In doing so, we successfully link up the values from the Shopify Theme Editor to our .scss files without the need of using a .scss.liquid file.
+
+Styles with Liquid · Slate Styling Shopify themes has always been inherently more complex than a typical web project thanks to the common need to combine styling languages with Liquid. The complexity only grows worse when using compiled styling languages like Sass, since including Liquid in Sass results in invalid syntax.
+Liquid is required in your styles if you want your theme to be customizable via the Online Store Editor. For example, if you wanted the background colour of your theme to be customizable, you could add a setting in your config/settings_schema.json and then use the value of that setting in your stylesheet. If you were using vanilla CSS, it might look something like the following:
+styles.css.liquid
+body {
+ background-color : {{ settings.colors.body_background }}
+}
+In order for Shopify to compute the Liquid values inside a stylesheet, you must give the stylesheet a .liquid extension. When a .css.liquid is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a .css stylesheet is made available. For example, if you were to upload a styles.css.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.css' | asset_url }}" rel ="stylesheet" >
+Similar to css.liquid stylesheets, if theme developers want to include Liquid directly in Sass (.scss.liquid files), those stylesheets need to be compiled on Shopify servers. This is because using Liquid in Sass results in invalid Sass syntax that local Sass compilers cannot parse.
+Luckily for developers, Shopify has a Sass compiler built into the platform. When a .scss.liquid file is uploaded to the assets folder of your theme on Shopify servers, the Liquid values are populated and a scss.css stylesheet is made available. For example, if you were to upload a styles.scss.liquid file, you could include it in your theme with the following markup:
+<link type ="text/css" href ="{{ 'styles.scss.css' | asset_url }}" rel ="stylesheet" >
+
+Note: Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the @import directive. This may cause some issues when trying to work with 3rd party Sass libraries.
+
+Slate introduces a new way of handling styles made possible through CSS custom properties. CSS custom properties are the perfect mechanism to link stylesheets to Theme Editor Liquid settings. They allow you to write valid CSS that plays well with build tools like Sass and PostCSS. CSS custom properties are also supported in all modern browsers, so there's never been a better time than now to use them!
+When local Sass compilation is combined with Slate's Local Development Assets Server, style changes are instantly injected into the page, without waiting for Shopify servers, resulting in a lightning fast development experience.
+To support legacy browsers, Slate includes a transpiler that replaces CSS variables with matching Liquid Variables as a last step in the production build script.
+For an example, take a look at Shopify/starter-theme
+
+We define all of our CSS variables in a snippet called css-variables.liquid which is included in the <head> of the theme.liquid file.
We create each variable like so, using CSS custom properties as described above:
+<style >
+ :root {
+ --color-primary: {{ settings.color_primary }};
+ --color-body-text: {{ settings.color_body_text }};
+ --color-main-background: {{ settings.color_main_bg }};
+ }
+ </style >
+
+What we did here is create a CSS custom property which is tied to the value from the theme editor (that the merchant can change). We can access these variables in our .scss files:
+
+$color-primary : var(--color-primary);
+$color-body : var(--color-main-background);
+
+In doing so, we successfully link up the values from the Shopify Theme Editor to our .scss files without the need of using a .scss.liquid file.
+
+System requirements · Slate Slate is developed and is most stable on MacOS. We hope to officially extend support to Windows and Linux in future.
+A few users have successfully got Slate up and running in Windows Subsystem for Linux. They used the following commands to setup their system:
+sudo apt update && sudo apt -y upgrade
+sudo apt install -y build-essential libssl-dev libpng-dev
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+exit
+nvm install node --lts
+curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+sudo apt update && sudo apt install -y --no-install-recommends yarn
+source ~/.profile
+For more information, visit issue #667 .
+You will need the current LTS (long-term support) release which you can download directly from the Node website .
+We highly recommend using NVM as a Node Version Manager which can easily be installed by running the following command in your terminal:
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+For further documentation on how to install individual Node versions with NVM, visit the GitHub repository .
+Follow the instructions on how to get started with Yarn or npm to make sure you’re using the latest version.
+The Shopify Themes team made a decision in 2017 to migrate all theme repositories, including Slate, over to Yarn. Because of this, installing dependencies for each of our projects has become fast and reliable.
+It’s important to note, both of these packages have their ups and downs and many of the fantastic features that initially launched with Yarn are now available with npm 5+, so feel free to use the one you are most comfortable with.
+System requirements · Slate Slate is developed and is most stable on MacOS. We hope to officially extend support to Windows and Linux in future.
+A few users have successfully got Slate up and running in Windows Subsystem for Linux. They used the following commands to setup their system:
+sudo apt update && sudo apt -y upgrade
+sudo apt install -y build-essential libssl-dev libpng-dev
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+exit
+nvm install node --lts
+curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+sudo apt update && sudo apt install -y --no-install-recommends yarn
+source ~/.profile
+For more information, visit issue #667 .
+You will need the current LTS (long-term support) release which you can download directly from the Node website .
+We highly recommend using NVM as a Node Version Manager which can easily be installed by running the following command in your terminal:
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
+For further documentation on how to install individual Node versions with NVM, visit the GitHub repository .
+Follow the instructions on how to get started with Yarn or npm to make sure you’re using the latest version.
+The Shopify Themes team made a decision in 2017 to migrate all theme repositories, including Slate, over to Yarn. Because of this, installing dependencies for each of our projects has become fast and reliable.
+It’s important to note, both of these packages have their ups and downs and many of the fantastic features that initially launched with Yarn are now available with npm 5+, so feel free to use the one you are most comfortable with.
+Template and layout bundles · Slate Template and layout bundles are a build-time optimization which ensures that only the JS and CSS needed for the current page is downloaded and executed. This optimization results in improved page load speed, especially on mobile devices with limited computing power and network capacity.
+In order to take advantage of template and layout bundles, your Slate project's script/ folder must include the following folders:
+└── src
+ └── scripts
+ │ ├── layout
+ │ └── templates
+ ├── layout
+ └── templates
+On build, Slate will look for each file in the scripts/layout and scripts/templates folders and see if there is a matching file in the src/layout and src/templates folders. If there is a match, a template or layout bundle is created for that match.
+Let's take a look at an example file structure and explore how Slate matches files to create bundles:
+└── src
+ └── scripts
+ │ ├── layout
+ │ │ ├── password.js
+ │ │ └── theme.js
+ │ └── templates
+ │ ├── index.js
+ │ └── product.js
+ ├── layout
+ │ └── theme.liquid
+ └── templates
+ ├── collection.liquid
+ ├── index.liquid
+ └── product.liquid
+In the example above, we have a few standard files and folders you might expect to find in a Slate project. We have our main layout file (theme.liquid), three template files (collection.liquid, index.liquid, and product.liquid), and various JS files within our scripts/ folder.
+Upon calling slate-tools build, Slate will look for matching template and layout files inside the scripts/ folder and generate the following JS bundles:
+
+layout.theme.js: Both theme.liquid and theme.js exist.template.index.js: Both index.liquid and index.js exist.template.product.js: Both product.liquid and product.js exist.
+Note that the following bundles are not generated:
+
+layout.password.js: Slate cannot find a layout/password.liquid file.template.collection.js: Slate cannot find a scripts/templates/collection.js file.
+A critical optimization needed for template and layout bundles to be successful is to split shared dependencies between bundles into separate chunks. This reduces the amount of duplicate code included in each bundle and further improves page load performance.
+Let's continue with the file structure from the previous example, and see how shared dependencies are separated:
+index.js
+@import depA from 'depA' ;
+@import depB from 'depB' ;
+product.js
+@import depB from 'depB' ;
+@import depC from 'depC' ;
+In the example above, we have 2 files which each import 2 dependencies. Both files have a shared dependency, depB. Instead of bundling depB into template.index.js and again in template.product.js, Slate splits depB into its own bundle chunk. The resulting generated files are:
+
+template.index.js: Code that is only used on the index template.template.product.js: Code that is only used on the product template.template.index@template.product.js: Code that is used on both index and product templates.
+It's also possible to structure your styles so that only those needed for the current page are loaded. This is made possible by the JS bundling mentioned above. Let's take a look at what a typical Slate project might look like and how it would take advantage of template and layout styles.
+layout/theme.js
+import '../../styles/layout/theme.scss' ;
+product.js
+import '../../styles/templates/product.scss' ;
+Looking at the above examples, we can see that we are importing two different SCSS files. We can expect that theme.scss contains global styles that are used through most of the theme's pages, such as header and navigation styles. product.scss might include styles that are specific to the product template, such as a product image gallery.
+The following imports would generate the following files:
+
+layout.theme.css.liquid
+template.product.css.liquid
+
+
+Unlike JS, we are unable to split shared dependencies between template and layout styles. If you're not careful, this could mean that your users will end up downloading the same styles more than once. Make sure to keep this in mind!
+
+Now that you have template and layout bundles with shared dependency chunking, you'll notice that there are a lot of JS files in your compiled Slate project (found in the dist folder). It would be pretty tedious to code and manage all the <script> tags for each of these assets. So let's have Slate handle this!
+Slate generates script-tags.liquid and styles-tags.liquid snippets which include <script> and <link> tags needed for each bundle. These snippets also include all the liquid logic needed to selectively load these bundles based on the current template and layout. All you need to do is include these snippets in your layout files.
+For example, here is what you would include in your layout/theme.liquid:
+{% include 'style-tags' %} {% include 'script-tags', layout: 'theme' %}
+where the layout option value is the name of the layout.
+Template and layout bundles · Slate Template and layout bundles are a build-time optimization which ensures that only the JS and CSS needed for the current page is downloaded and executed. This optimization results in improved page load speed, especially on mobile devices with limited computing power and network capacity.
+In order to take advantage of template and layout bundles, your Slate project's script/ folder must include the following folders:
+└── src
+ └── scripts
+ │ ├── layout
+ │ └── templates
+ ├── layout
+ └── templates
+On build, Slate will look for each file in the scripts/layout and scripts/templates folders and see if there is a matching file in the src/layout and src/templates folders. If there is a match, a template or layout bundle is created for that match.
+Let's take a look at an example file structure and explore how Slate matches files to create bundles:
+└── src
+ └── scripts
+ │ ├── layout
+ │ │ ├── password.js
+ │ │ └── theme.js
+ │ └── templates
+ │ ├── index.js
+ │ └── product.js
+ ├── layout
+ │ └── theme.liquid
+ └── templates
+ ├── collection.liquid
+ ├── index.liquid
+ └── product.liquid
+In the example above, we have a few standard files and folders you might expect to find in a Slate project. We have our main layout file (theme.liquid), three template files (collection.liquid, index.liquid, and product.liquid), and various JS files within our scripts/ folder.
+Upon calling slate-tools build, Slate will look for matching template and layout files inside the scripts/ folder and generate the following JS bundles:
+
+layout.theme.js: Both theme.liquid and theme.js exist.template.index.js: Both index.liquid and index.js exist.template.product.js: Both product.liquid and product.js exist.
+Note that the following bundles are not generated:
+
+layout.password.js: Slate cannot find a layout/password.liquid file.template.collection.js: Slate cannot find a scripts/templates/collection.js file.
+A critical optimization needed for template and layout bundles to be successful is to split shared dependencies between bundles into separate chunks. This reduces the amount of duplicate code included in each bundle and further improves page load performance.
+Let's continue with the file structure from the previous example, and see how shared dependencies are separated:
+index.js
+@import depA from 'depA' ;
+@import depB from 'depB' ;
+product.js
+@import depB from 'depB' ;
+@import depC from 'depC' ;
+In the example above, we have 2 files which each import 2 dependencies. Both files have a shared dependency, depB. Instead of bundling depB into template.index.js and again in template.product.js, Slate splits depB into its own bundle chunk. The resulting generated files are:
+
+template.index.js: Code that is only used on the index template.template.product.js: Code that is only used on the product template.template.index@template.product.js: Code that is used on both index and product templates.
+It's also possible to structure your styles so that only those needed for the current page are loaded. This is made possible by the JS bundling mentioned above. Let's take a look at what a typical Slate project might look like and how it would take advantage of template and layout styles.
+layout/theme.js
+import '../../styles/layout/theme.scss' ;
+product.js
+import '../../styles/templates/product.scss' ;
+Looking at the above examples, we can see that we are importing two different SCSS files. We can expect that theme.scss contains global styles that are used through most of the theme's pages, such as header and navigation styles. product.scss might include styles that are specific to the product template, such as a product image gallery.
+The following imports would generate the following files:
+
+layout.theme.css.liquid
+template.product.css.liquid
+
+
+Unlike JS, we are unable to split shared dependencies between template and layout styles. If you're not careful, this could mean that your users will end up downloading the same styles more than once. Make sure to keep this in mind!
+
+Now that you have template and layout bundles with shared dependency chunking, you'll notice that there are a lot of JS files in your compiled Slate project (found in the dist folder). It would be pretty tedious to code and manage all the <script> tags for each of these assets. So let's have Slate handle this!
+Slate generates script-tags.liquid and styles-tags.liquid snippets which include <script> and <link> tags needed for each bundle. These snippets also include all the liquid logic needed to selectively load these bundles based on the current template and layout. All you need to do is include these snippets in your layout files.
+For example, here is what you would include in your layout/theme.liquid:
+{% include 'style-tags' %} {% include 'script-tags', layout: 'theme' %}
+where the layout option value is the name of the layout.
+Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions
+
diff --git a/docusaurus/v1/build/slate/img/oss_logo.png b/docusaurus/v1/build/slate/img/oss_logo.png
new file mode 100644
index 000000000..8183e289b
Binary files /dev/null and b/docusaurus/v1/build/slate/img/oss_logo.png differ
diff --git a/docusaurus/v1/build/slate/img/slate.svg b/docusaurus/v1/build/slate/img/slate.svg
new file mode 100644
index 000000000..489532225
--- /dev/null
+++ b/docusaurus/v1/build/slate/img/slate.svg
@@ -0,0 +1 @@
+
+ Slate empowers developers of all skill levels to build quality Shopify
+ themes.
+
+ link .
+
+
diff --git a/docusaurus/v1/build/slate/js/custom.js b/docusaurus/v1/build/slate/js/custom.js
new file mode 100644
index 000000000..2e9473569
--- /dev/null
+++ b/docusaurus/v1/build/slate/js/custom.js
@@ -0,0 +1,46 @@
+const HighlightSidebar = {
+ init() {
+ this.headers = Array.from(
+ document.querySelectorAll('.hash-link')
+ ).reverse();
+ this.sidebarLinks = Array.from(
+ document.querySelectorAll('.toc-headings li')
+ ).reverse();
+
+ this.headersOffsets = this.headers.map(header => {
+ var headerRect = header.getBoundingClientRect();
+ return headerRect.y + window.pageYOffset - 100;
+ });
+
+ this.highlight();
+ },
+ highlight() {
+ const highlightItemIndex = this.headersOffsets.findIndex(offset => {
+ return offset < window.pageYOffset;
+ });
+
+ this.sidebarLinks.forEach(link => {
+ link.classList.remove('is-visible');
+ });
+
+ if (highlightItemIndex === -1) return;
+
+ this.sidebarLinks[highlightItemIndex].classList.add('is-visible');
+ }
+};
+
+document.addEventListener(
+ 'DOMContentLoaded',
+ function() {
+ HighlightSidebar.init();
+ },
+ false
+);
+
+document.addEventListener(
+ 'scroll',
+ function() {
+ HighlightSidebar.highlight();
+ },
+ false
+);
diff --git a/docusaurus/v1/build/slate/sitemap.xml b/docusaurus/v1/build/slate/sitemap.xml
new file mode 100644
index 000000000..ccc58e35b
--- /dev/null
+++ b/docusaurus/v1/build/slate/sitemap.xml
@@ -0,0 +1,30 @@
+
+
+ https://shopify.github.io/slate.shopify.com/versions weekly 0.5
+ https://shopify.github.io/slate.shopify.com/blog/2017/10/24/new-version-1.0.0 weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/26/adding-rss weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2017/09/25/testing-rss weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2017/04/10/blog-post-two weekly 0.3
+ https://shopify.github.io/slate.shopify.com/blog/2016/03/11/blog-post weekly 0.3
+ https://shopify.github.io/slate.shopify.com/docs/about hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/asset-minification hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/commands hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/connect-to-your-store hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/create-a-new-slate-project hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/create-a-self-signed-ssl-certificate hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/create-slate-theme hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/how-to-create-a-development-store hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/deploy-environments hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/how-to-create-your-own-starter-theme hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/how-to-update-Slate-to-the-latest-version hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/local-development hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-analytics hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-configuration hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-cssvar-loader hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/slate-themes hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/start-developing hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/starter-themes hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/styles-with-liquid hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/system-requirements hourly 1.0
+ https://shopify.github.io/slate.shopify.com/docs/template-and-layout-bundles hourly 1.0
+
\ No newline at end of file
diff --git a/docusaurus/v1/build/slate/versions.html b/docusaurus/v1/build/slate/versions.html
new file mode 100644
index 000000000..045e13291
--- /dev/null
+++ b/docusaurus/v1/build/slate/versions.html
@@ -0,0 +1 @@
+Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions Slate · A toolkit for developing Shopify themes New versions of this project are released every so often.
Current version (Stable) This is the version that is configured automatically when you first install this project.
Past Versions
+
+
+
+ {siteConfig.title} Versions
+
+
New versions of this project are released every so often.
+
Current version (Stable)
+
+
+ This is the version that is configured automatically when you first
+ install this project.
+
+
+
Past Versions
+
+
+
+
+ Slate empowers developers of all skill levels to build quality Shopify
+ themes.
+
+ link .
+
+
+ 
+ 
+ 
