All the new docs (Shopify#41)

* All the new docs

* Blank states, responsive tables, icons examples. Cleaned main readme slightly

* Viewport toggle options

* Slate image docs. Remove switchImage

* Add code of conduct

* Add contributing readme

* S3 slate zip link

* Update --environment to --env

* Add Google Analytics

* Doc team review updates

* Add Browsersync docs

* Allow sidebar overflow scrolling

* Prevent search indexing. Remove meta tag for public launch

.gitignore

@@ -39,13 +39,11 @@ Thumbs.db
 # Custom #
 ######################
 *.sass-cache*
-assets/logo.png
-*.zip
-/node_modules
-/_site
-/dist
+node_modules
+_site
+dist
 /.idea
 deploy.log
-/docs/js
 config.yml
 secrets.json
+.jekyll-metadata

.npmignore

@@ -39,15 +39,12 @@ Thumbs.db
 # Custom #
 ######################
 *.sass-cache*
-grunt-config.json
 config.yml
-assets/logo.png
-*.zip
-/node_modules
-/_site
+node_modules
+_site
 /dist
 /.idea
 deploy.log
-/docs/js
 ci/
 repodb.yml
+docs

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all
+people who contribute through reporting issues, posting feature
+requests, updating documentation, submitting pull requests or patches,
+and other activities.
+
+We are committed to making participation in this project a
+harassment-free experience for everyone, regardless of level of
+experience, gender, gender identity and expression, sexual orientation,
+disability, personal appearance, body size, race, ethnicity, age,
+religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit,
+or reject comments, commits, code, wiki edits, issues, and other
+contributions that are not aligned to this Code of Conduct, or to ban
+temporarily or permanently any contributor for other behaviors that they
+deem inappropriate, threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves
+to fairly and consistently applying these principles to every aspect of
+managing this project. Project maintainers who do not follow or enforce
+the Code of Conduct may be permanently removed from the project team.
+
+This Code of Conduct applies both within project spaces and in public
+spaces when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may
+be reported by contacting a project maintainer at <[email protected]>. All complaints will be reviewed and investigated and will
+result in a response that is deemed necessary and appropriate to the
+circumstances. Maintainers are obligated to maintain confidentiality
+with regard to the reporter of an incident.
+
+This Code of Conduct is adapted from the Contributor Covenant, version
+1.3.0, available from http://contributor-covenant.org/version/1/3/0/

CONTRIBUTING.md

@@ -0,0 +1,68 @@
+# How to contribute
+We ❤️ pull requests. If you'd like to fix a bug, contribute a feature or
+just correct a typo, please feel free to do so, as long as you follow
+our [Code of Conduct](https://github.com/Shopify/slate/blob/master/CODE_OF_CONDUCT.md).
+
+If you're thinking of adding a big new feature, consider opening an
+issue first to discuss it to ensure it aligns to the direction of the
+project (and potentially save yourself some time!).
+
+## Getting Started
+To start working on the codebase, first fork the repo, then clone it:
+```
+git clone [email protected]:your-username/slate.git
+```
+*Note: replace "your-username" with your Github handle*
+
+Install the project's dependencies:
+```
+npm install
+```
+
+Create a config.yml file with private app settings from your shop. See [config-sample.yml](https://github.com/Shopify/slate/blob/master/config-sample.yml) as an example.
+
+Deploy Slate to your shop and start testing your feature.
+```
+slate deploy
+```
+
+## Folder Structure
+
+The following documents the folder structure for this project and what the purpose of each folder is:
+```
+ +-- docs/ ** API docs that live at http://shopify.github.io/slate
+ +-- scripts/ ** Scripts used for development such as deployment and CI scripts
+ +-- src/ ** Contains all theme templates and assets
+ | +-- assets/
+ | +-- config/
+ | +-- icons/
+ | +-- layout/
+ | +-- locales/
+ | +-- scripts/
+ | +-- sections/
+ | +-- snippets/
+ | +-- styles/
+ | +-- templates/
+```
+
+## Documentation
+If your change affects how people use the project (i.e. adding or removing
+functionality, changing the return value of a function, etc),
+please ensure the documentation is also updated to
+reflect this. The docs live inside the `docs/` folder and are hosted
+at `http://shopify.github.io/slate`.
+
+To run the docs locally, first install the ruby dependencies:
+```
+bundle install
+```
+*If you are having troubles setting up jekyll, see https://jekyllrb.com/docs/installation/*
+
+Generate the docs:
+```
+jekyll serve -s docs
+```
+If you get a permission error, try `bundle exec jekyll serve -s docs`
+
+The documentation will then be visible at:
+`http://127.0.0.1:4000/slate/`

Gemfile

@@ -1,5 +1,9 @@
 source 'https://rubygems.org'
 
+# Jekyll docs
+gem 'jekyll'
+
+# CI tests
 gem 'nokogiri'
 gem 'htmlentities'
 

Gemfile.lock

@@ -1,24 +1,53 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    addressable (2.4.0)
     coderay (1.1.1)
+    colorator (1.1.0)
     diff-lcs (1.2.5)
+    ffi (1.9.14)
+    forwardable-extended (2.6.0)
     htmlentities (4.3.4)
+    jekyll (3.3.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.4.0)
+      sass (~> 3.4)
+    jekyll-watch (1.5.0)
+      listen (~> 3.0, < 3.1)
+    kramdown (1.12.0)
+    liquid (3.0.6)
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    mercenary (0.3.6)
     method_source (0.8.2)
     mini_portile2 (2.1.0)
-    nokogiri (1.6.8)
+    nokogiri (1.6.8.1)
       mini_portile2 (~> 2.1.0)
-      pkg-config (~> 1.1.7)
-    pkg-config (1.1.7)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
     pry (0.10.4)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
+    rb-fsevent (0.9.8)
+    rb-inotify (0.9.7)
+      ffi (>= 0.5.0)
+    rouge (1.11.1)
     rspec (3.5.0)
       rspec-core (~> 3.5.0)
       rspec-expectations (~> 3.5.0)
       rspec-mocks (~> 3.5.0)
-    rspec-core (3.5.2)
+    rspec-core (3.5.4)
       rspec-support (~> 3.5.0)
     rspec-expectations (3.5.0)
       diff-lcs (>= 1.2.0, < 2.0)
@@ -27,16 +56,19 @@ GEM
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.5.0)
     rspec-support (3.5.0)
+    safe_yaml (1.0.4)
+    sass (3.4.22)
     slop (3.6.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   htmlentities
+  jekyll
   nokogiri
   pry
   rspec
 
 BUNDLED WITH
-   1.12.5
+   1.13.5

README.md

@@ -1,117 +1,23 @@
 # Slate
 [![CircleCI](https://circleci.com/gh/Shopify/slate.svg?style=svg&circle-token=f18ea06638792678e7dbfa1b8413570cd2896dff)](https://circleci.com/gh/Shopify/slate)
 
-Slate provides a set of tools and templates for developing Shopify themes.
+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.
 
-Its goal is to provide developers with a fully documented and easy-to-use theme toolkit. It allows developers to manage their libraries and dependencies, to clearly structure their code, and to seamlessly deploy their themes to remote environments.
-
-## Requirements
-Git (otherwise Slate CLI does not work) and [Node.js](https://nodejs.org).
-
-## Getting Started
-Slate comes with a [CLI](https://github.com/Shopify/slate-cli) tool that allows you to run commands that help with generating, setting up and deploying Shopify themes.
-Although not a requirement, it does simplify the process of working with themes.
-
-#### 1. Install Slate CLI
-Follow the [getting started](https://github.com/Shopify/slate-cli#getting-started) section to install Slate CLI on your machine.
-
-**Note**: The steps to install Slate CLI manually will be unnecessary once we launch it as an npm package. Bear with us during this closed beta.
-
-#### 2. Create a new project
-Run the following commands to create a new project and replace `my-theme` with the name of your Shopify theme.
-
-```shell
-slate new theme my-theme
-cd my-theme
-```
-
-#### 3. Add your store settings in `config-sample.yml` and rename to `config.yml`.
-These settings include the theme ID, password, and store URL. See [config variables](http://themekit.cat/docs/#config-variables) for more details. Generate these credentials by creating a [private app](https://help.shopify.com/api/guides/api-credentials#generate-private-app-credentials).
-
-#### 4. Run `slate start`
-This command will build your theme from the [source files](https://github.com/Shopify/slate/tree/master/src) into a `dist` directory. A [Node.js](https://nodejs.org) server and [Browsersync](https://browsersync.io/) will start automatically once the initial build is complete.
-
-## Slate Commands
-A full list of possible Slate commands can be found [here](https://github.com/Shopify/slate-cli#overview).
+It 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.
 
 ----------
 
-## Linting
-
-By default, JS and CSS linting are disabled in Slate. To enable this feature, open `tasks/includes/config.js` and set `enableLinting` to `true`.
-
-**Note:** Although linting is disabled by default, it can still be run manually via `slate test`.
-
-## SVG Icons
-
-Slate uses SVG icons for easy maintainability and better front end performance. Place all of your SVG icons in `src/icons`, prefaced with the name `icon-`. E.g. `icon-arrow-down.svg`.
-
-__Make sure the `viewBox` attribute is case sensitive.__
-
-While `gulp` is running (or manually with `gulp build`) these icons will be optimized and converted to snippets in your `dist/snippets` folder as `symbol` elements. These snippets will be used to create a spritesheet.
-
-Note: Illustrator doesn't render the nicest SVG icons. Sketch is suggested for creating and editing SVGs.
-
-### Usage | customizable colors
-
-Most icons should allow their color to be changed with CSS. Depending on the icon, this will be via the `fill` or `path` attributes.
-
-Liquid:
-```
-{% include 'icon-cart' %}
-```
-
-SCSS:
-```
-.icon-cart {
-  width: 10px;
-  height: 10px;
-  fill: pink; // optional
-  path: blue; // optional
-}
-```
-
-### Usage | full color icons
-
-If you want the SVG to maintain its colors, append `-full-color` to the file name. E.g. `icon-shopify-logo-full-color`. The CSS is set up to prevent its colors from being overwritten. In CSS you only have to control the size of the icon.
-
-Liquid:
-```
-{% include 'icon-shopify-logo-full-color' %}
-```
-
-### Usage | multiple customizable colors
-
-If you want to get really fancy and control multiple colors through CSS instead of letting the SVG dictate, include it the same way as a normal customizable icon, and target the CSS with nth child for each path/shape.
-
-Since you must also style the sprite in the spritesheet for this to take effect, you must assume the icon is only used once on the page. Using full color icons is preferable to this.
-
-```
-.icon-cart path:nth-child(1),
-#icon-cart path:nth-child(1) {
-  fill: pink;
-}
-
-.icon-cart path:nth-child(2),
-#icon-cart path:nth-child(2) {
-  fill: blue;
-}
-```
+## License
+Slate is licensed under the terms of the [MIT license](LICENSE).
 
-### Update a theme's icons without Gulp
+## Documentation
 
-If you need to add an icon to a live shop, no fret. 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"` and `focusable="false"` to the `svg` element.
-5. Add `class="icon"` to the `svg` element. Add `icon--full-color` if it's a full color icon.
-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 `<?xml>`.
-8. Include your new icon with `{% include 'icon-cart' %}`.
-9. Control the size and colors in CSS with `.icon-cart`.
+For full API documentation go checkout the [API docs](http://shopify.github.io/slate/).
 
 ## Contributing
-Contributions are always welcome in the form of pull requests and issues.
+For help on setting up the repo locally, building, testing, and contributing
+please see [CONTRIBUTING.md](https://github.com/Shopify/slate/blob/master/CONTRIBUTING.md).
 
-## License
-Slate is licensed under the terms of the [MIT license](LICENSE).
+## Code of Conduct
+All developers who wish to contribute through code or issues, take a look at the
+[CODE_OF_CONDUCT.md](https://github.com/Shopify/slate/blob/master/CODE_OF_CONDUCT.md).

circle.yml

@@ -1,6 +1,6 @@
 machine:
   ruby:
-    version: 1.9.3-p385
+    version: 2.3.1
   node:
     version: 6.2.2
 

config-sample.yml

@@ -2,12 +2,14 @@
 # requests and edit/update your remote theme files.
 #
 # 1. Set up a private app (https://help.shopify.com/api/guides/api-credentials#generate-private-app-credentials)
-#    with read and write access to theme templates and theme assets.
-# 2. Replace the appropriate variables for each environment below.
+#    with "Read and write" permissions for "Theme templates and theme assets".
+# 2. Replace the required variables for each environment below.
 #
-# theme_id, password and store variables must be kept within this file.
+# password, theme_id, and store variables are required.
 #
-# For more information on configuration variables, go to http://themekit.cat/docs/#config-variables.
+# For more information on this config file:
+#   Configuration variables | http://shopify.github.io/themekit/configuration/
+#   Ignore patterns | http://shopify.github.io/themekit/ignores/
 
 ---