Skip to content
This repository has been archived by the owner on Jul 19, 2021. It is now read-only.

All the new docs #41

Merged
merged 16 commits into from
Nov 29, 2016
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
9 changes: 3 additions & 6 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
46 changes: 46 additions & 0 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -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 <slate@shopify.com>. 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/
68 changes: 68 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -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 git@github.com: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/`
4 changes: 4 additions & 0 deletions Gemfile
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
source 'https://rubygems.org'

# Jekyll docs
gem 'jekyll'

# CI tests
gem 'nokogiri'
gem 'htmlentities'

Expand Down
42 changes: 37 additions & 5 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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
116 changes: 11 additions & 105 deletions README.md
Original file line number Diff line number Diff line change
@@ -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).
2 changes: 1 addition & 1 deletion circle.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
machine:
ruby:
version: 1.9.3-p385
version: 2.3.1
node:
version: 6.2.2

Expand Down
10 changes: 6 additions & 4 deletions config-sample.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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/

---

Expand Down
Loading