diff --git a/.gitignore b/.gitignore index 353f1d57a..2cf35a715 100644 --- a/.gitignore +++ b/.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 diff --git a/.npmignore b/.npmignore index 55297ab00..fdaae317d 100644 --- a/.npmignore +++ b/.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 diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 000000000..9819cb222 --- /dev/null +++ b/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 . 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/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..255d57687 --- /dev/null +++ b/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 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/` diff --git a/Gemfile b/Gemfile index 2cb0db5bf..0bf06458c 100644 --- a/Gemfile +++ b/Gemfile @@ -1,5 +1,9 @@ source 'https://rubygems.org' +# Jekyll docs +gem 'jekyll' + +# CI tests gem 'nokogiri' gem 'htmlentities' diff --git a/Gemfile.lock b/Gemfile.lock index f42faa647..71ca3b545 100644 --- a/Gemfile.lock +++ b/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,6 +56,8 @@ 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 @@ -34,9 +65,10 @@ PLATFORMS DEPENDENCIES htmlentities + jekyll nokogiri pry rspec BUNDLED WITH - 1.12.5 + 1.13.5 diff --git a/README.md b/README.md index 9913d7b0d..bddf9db07 100644 --- a/README.md +++ b/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 ``. -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). diff --git a/circle.yml b/circle.yml index d5f0996c2..f451ea58d 100644 --- a/circle.yml +++ b/circle.yml @@ -1,6 +1,6 @@ machine: ruby: - version: 1.9.3-p385 + version: 2.3.1 node: version: 6.2.2 diff --git a/config-sample.yml b/config-sample.yml index ee61aa6fd..6b83fb658 100644 --- a/config-sample.yml +++ b/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/ --- diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..248b3ca4a --- /dev/null +++ b/docs/README.md @@ -0,0 +1,17 @@ +# Slate Docs + +## Local Setup + +### Install Jekyll via Gemfile +- `bundle install` + +*If you are having troubles setting up jekyll, see https://jekyllrb.com/docs/installation/* + +### Serve the documentation +- `jekyll serve -s docs` +If you get a permission error, try `bundle exec jekyll serve -s docs` + +View locally at [http://127.0.0.1:4000/slate/](http://127.0.0.1:4000/slate/). + +## Deployment +Changes to the `docs` directory will automatically be deployed to http://shopify.github.io/slate/ when added to `master` (remote). diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 000000000..394258d28 --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,12 @@ +# Site settings +title: Slate +email: slate@shopify.com +description: > # this means to ignore newlines until "baseurl:" + 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. +baseurl: "/slate" +url: "https://shopify.github.io" +sass: + cache: true + +# Build settings +markdown: kramdown diff --git a/docs/_includes/head.html b/docs/_includes/head.html new file mode 100644 index 000000000..5af8db6fe --- /dev/null +++ b/docs/_includes/head.html @@ -0,0 +1,30 @@ + + + + + + {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} + + + + + + + + + + + + + + + + diff --git a/docs/_includes/header.html b/docs/_includes/header.html new file mode 100644 index 000000000..a971fb7a6 --- /dev/null +++ b/docs/_includes/header.html @@ -0,0 +1,14 @@ +
+ +
diff --git a/docs/_includes/icon-twitter.html b/docs/_includes/icon-twitter.html new file mode 100644 index 000000000..e623dbd6e --- /dev/null +++ b/docs/_includes/icon-twitter.html @@ -0,0 +1 @@ +{{ include.username }} diff --git a/docs/_includes/icon-twitter.svg b/docs/_includes/icon-twitter.svg new file mode 100644 index 000000000..dcf660e7b --- /dev/null +++ b/docs/_includes/icon-twitter.svg @@ -0,0 +1 @@ + diff --git a/docs/_includes/iframe-toggles.html b/docs/_includes/iframe-toggles.html new file mode 100644 index 000000000..94c27147b --- /dev/null +++ b/docs/_includes/iframe-toggles.html @@ -0,0 +1,8 @@ +
+ + +
diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html new file mode 100644 index 000000000..841fb41d8 --- /dev/null +++ b/docs/_includes/sidebar.html @@ -0,0 +1,89 @@ +
{{ site.title }}
+ + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html new file mode 100644 index 000000000..795332ef7 --- /dev/null +++ b/docs/_layouts/default.html @@ -0,0 +1,23 @@ + + + + {% include head.html %} + + +
+
+
+ {% include sidebar.html %} +
+
+
+ {% include header.html %} +
+ {{ content }} +
+
+
+
+
+ + diff --git a/docs/_layouts/demo.html b/docs/_layouts/demo.html new file mode 100644 index 000000000..09bcfac70 --- /dev/null +++ b/docs/_layouts/demo.html @@ -0,0 +1,24 @@ + + + + + + + + + + {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} + + + + + + + + + +
+ {{ content }} +
+ + diff --git a/docs/_sass/_yuidoc.scss b/docs/_sass/_yuidoc.scss new file mode 100644 index 000000000..bf1f004d9 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/_bourbon-deprecated-upcoming.scss b/docs/_sass/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 000000000..f946b3b45 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/_bourbon.scss b/docs/_sass/bourbon/_bourbon.scss new file mode 100644 index 000000000..eea6e21e9 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_button.scss b/docs/_sass/bourbon/addons/_button.scss new file mode 100644 index 000000000..14a89e480 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_clearfix.scss b/docs/_sass/bourbon/addons/_clearfix.scss new file mode 100644 index 000000000..783cfbc79 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_directional-values.scss b/docs/_sass/bourbon/addons/_directional-values.scss new file mode 100644 index 000000000..742f1031a --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_ellipsis.scss b/docs/_sass/bourbon/addons/_ellipsis.scss new file mode 100644 index 000000000..a8ea2a4a8 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_font-family.scss b/docs/_sass/bourbon/addons/_font-family.scss new file mode 100644 index 000000000..31f5d9ca7 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_hide-text.scss b/docs/_sass/bourbon/addons/_hide-text.scss new file mode 100644 index 000000000..fc7943811 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_html5-input-types.scss b/docs/_sass/bourbon/addons/_html5-input-types.scss new file mode 100644 index 000000000..9e9324ae0 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_position.scss b/docs/_sass/bourbon/addons/_position.scss new file mode 100644 index 000000000..7de75182b --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_prefixer.scss b/docs/_sass/bourbon/addons/_prefixer.scss new file mode 100644 index 000000000..c32f50275 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_retina-image.scss b/docs/_sass/bourbon/addons/_retina-image.scss new file mode 100644 index 000000000..3995c1970 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_size.scss b/docs/_sass/bourbon/addons/_size.scss new file mode 100644 index 000000000..a8653799a --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_timing-functions.scss b/docs/_sass/bourbon/addons/_timing-functions.scss new file mode 100644 index 000000000..5ecc6f9dc --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_triangle.scss b/docs/_sass/bourbon/addons/_triangle.scss new file mode 100644 index 000000000..573954e41 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/addons/_word-wrap.scss b/docs/_sass/bourbon/addons/_word-wrap.scss new file mode 100644 index 000000000..9734a597c --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_animation.scss b/docs/_sass/bourbon/css3/_animation.scss new file mode 100644 index 000000000..08c3dbf15 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_appearance.scss b/docs/_sass/bourbon/css3/_appearance.scss new file mode 100644 index 000000000..3eb16e45d --- /dev/null +++ b/docs/_sass/bourbon/css3/_appearance.scss @@ -0,0 +1,3 @@ +@mixin appearance ($value) { + @include prefixer(appearance, $value, webkit moz ms o spec); +} diff --git a/docs/_sass/bourbon/css3/_backface-visibility.scss b/docs/_sass/bourbon/css3/_backface-visibility.scss new file mode 100644 index 000000000..1161fe60d --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_background-image.scss b/docs/_sass/bourbon/css3/_background-image.scss new file mode 100644 index 000000000..6abe88be9 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_background.scss b/docs/_sass/bourbon/css3/_background.scss new file mode 100644 index 000000000..9bce9308b --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_border-image.scss b/docs/_sass/bourbon/css3/_border-image.scss new file mode 100644 index 000000000..e338c2dcd --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_border-radius.scss b/docs/_sass/bourbon/css3/_border-radius.scss new file mode 100644 index 000000000..7c1719010 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_box-sizing.scss b/docs/_sass/bourbon/css3/_box-sizing.scss new file mode 100644 index 000000000..f07e1d412 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_calc.scss b/docs/_sass/bourbon/css3/_calc.scss new file mode 100644 index 000000000..94d7e4cef --- /dev/null +++ b/docs/_sass/bourbon/css3/_calc.scss @@ -0,0 +1,4 @@ +@mixin calc($property, $value) { + #{$property}: -webkit-calc(#{$value}); + #{$property}: calc(#{$value}); +} diff --git a/docs/_sass/bourbon/css3/_columns.scss b/docs/_sass/bourbon/css3/_columns.scss new file mode 100644 index 000000000..96f601c1a --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_filter.scss b/docs/_sass/bourbon/css3/_filter.scss new file mode 100644 index 000000000..8560d7767 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_placeholder.scss b/docs/_sass/bourbon/css3/_placeholder.scss new file mode 100644 index 000000000..5682fd097 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_radial-gradient.scss b/docs/_sass/bourbon/css3/_radial-gradient.scss new file mode 100644 index 000000000..7a8c3765f --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_transform.scss b/docs/_sass/bourbon/css3/_transform.scss new file mode 100644 index 000000000..8cc35963d --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_transition.scss b/docs/_sass/bourbon/css3/_transition.scss new file mode 100644 index 000000000..5ad4c0aed --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/css3/_user-select.scss b/docs/_sass/bourbon/css3/_user-select.scss new file mode 100644 index 000000000..1380aa8ba --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_assign.scss b/docs/_sass/bourbon/functions/_assign.scss new file mode 100644 index 000000000..9a1db93ef --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_color-lightness.scss b/docs/_sass/bourbon/functions/_color-lightness.scss new file mode 100644 index 000000000..8c6df4e25 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_flex-grid.scss b/docs/_sass/bourbon/functions/_flex-grid.scss new file mode 100644 index 000000000..3bbd86657 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_golden-ratio.scss b/docs/_sass/bourbon/functions/_golden-ratio.scss new file mode 100644 index 000000000..463d14a00 --- /dev/null +++ b/docs/_sass/bourbon/functions/_golden-ratio.scss @@ -0,0 +1,3 @@ +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, $golden) +} diff --git a/docs/_sass/bourbon/functions/_grid-width.scss b/docs/_sass/bourbon/functions/_grid-width.scss new file mode 100644 index 000000000..8e63d83d6 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_modular-scale.scss b/docs/_sass/bourbon/functions/_modular-scale.scss new file mode 100644 index 000000000..afc59eb95 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_px-to-em.scss b/docs/_sass/bourbon/functions/_px-to-em.scss new file mode 100644 index 000000000..4832245e4 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_px-to-rem.scss b/docs/_sass/bourbon/functions/_px-to-rem.scss new file mode 100644 index 000000000..96b244e4c --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_strip-units.scss b/docs/_sass/bourbon/functions/_strip-units.scss new file mode 100644 index 000000000..6afc6e601 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_tint-shade.scss b/docs/_sass/bourbon/functions/_tint-shade.scss new file mode 100644 index 000000000..f7172004a --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_transition-property-name.scss b/docs/_sass/bourbon/functions/_transition-property-name.scss new file mode 100644 index 000000000..54cd42281 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/functions/_unpack.scss b/docs/_sass/bourbon/functions/_unpack.scss new file mode 100644 index 000000000..377596365 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_convert-units.scss b/docs/_sass/bourbon/helpers/_convert-units.scss new file mode 100644 index 000000000..3443db397 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_gradient-positions-parser.scss b/docs/_sass/bourbon/helpers/_gradient-positions-parser.scss new file mode 100644 index 000000000..07d30b6cf --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_is-num.scss b/docs/_sass/bourbon/helpers/_is-num.scss new file mode 100644 index 000000000..71459e140 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_linear-angle-parser.scss b/docs/_sass/bourbon/helpers/_linear-angle-parser.scss new file mode 100644 index 000000000..e0401ed8d --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_linear-gradient-parser.scss b/docs/_sass/bourbon/helpers/_linear-gradient-parser.scss new file mode 100644 index 000000000..12bcdcda8 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_linear-positions-parser.scss b/docs/_sass/bourbon/helpers/_linear-positions-parser.scss new file mode 100644 index 000000000..d26383edc --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_linear-side-corner-parser.scss b/docs/_sass/bourbon/helpers/_linear-side-corner-parser.scss new file mode 100644 index 000000000..86ad88fbb --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_radial-arg-parser.scss b/docs/_sass/bourbon/helpers/_radial-arg-parser.scss new file mode 100644 index 000000000..a3a3704af --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_radial-gradient-parser.scss b/docs/_sass/bourbon/helpers/_radial-gradient-parser.scss new file mode 100644 index 000000000..6dde50f06 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_radial-positions-parser.scss b/docs/_sass/bourbon/helpers/_radial-positions-parser.scss new file mode 100644 index 000000000..6a5b47777 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_render-gradients.scss b/docs/_sass/bourbon/helpers/_render-gradients.scss new file mode 100644 index 000000000..576567683 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_shape-size-stripper.scss b/docs/_sass/bourbon/helpers/_shape-size-stripper.scss new file mode 100644 index 000000000..ee5eda422 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/helpers/_str-to-num.scss b/docs/_sass/bourbon/helpers/_str-to-num.scss new file mode 100644 index 000000000..b3d616824 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/settings/_asset-pipeline.scss b/docs/_sass/bourbon/settings/_asset-pipeline.scss new file mode 100644 index 000000000..d481a6afb --- /dev/null +++ b/docs/_sass/bourbon/settings/_asset-pipeline.scss @@ -0,0 +1 @@ +$asset-pipeline: false !default; diff --git a/docs/_sass/bourbon/settings/_prefixer.scss b/docs/_sass/bourbon/settings/_prefixer.scss new file mode 100644 index 000000000..ecab49fb5 --- /dev/null +++ b/docs/_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/docs/_sass/bourbon/settings/_px-to-em.scss b/docs/_sass/bourbon/settings/_px-to-em.scss new file mode 100644 index 000000000..f2f9a3e8d --- /dev/null +++ b/docs/_sass/bourbon/settings/_px-to-em.scss @@ -0,0 +1 @@ +$em-base: 16px !default; diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss new file mode 100644 index 000000000..a7ed48929 --- /dev/null +++ b/docs/_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/docs/_sass/custom/layout.scss b/docs/_sass/custom/layout.scss new file mode 100644 index 000000000..dac8a0524 --- /dev/null +++ b/docs/_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/docs/_sass/demo-variables.scss b/docs/_sass/demo-variables.scss new file mode 100644 index 000000000..f01cfa9a9 --- /dev/null +++ b/docs/_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/docs/_sass/demo.scss b/docs/_sass/demo.scss new file mode 100644 index 000000000..eb2d0cd5f --- /dev/null +++ b/docs/_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/docs/_sass/html5bp-custom.scss b/docs/_sass/html5bp-custom.scss new file mode 100755 index 000000000..60ee4fe18 --- /dev/null +++ b/docs/_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/docs/_sass/html5bp/normalize.css b/docs/_sass/html5bp/normalize.css new file mode 100755 index 000000000..3c000acba --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets.scss b/docs/_sass/marketing_assets.scss new file mode 100644 index 000000000..b3d6ea8c1 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/_grid.scss b/docs/_sass/marketing_assets/_grid.scss new file mode 100755 index 000000000..9540e4850 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/_layout.scss b/docs/_sass/marketing_assets/_layout.scss new file mode 100755 index 000000000..a8553a077 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/_modules.scss b/docs/_sass/marketing_assets/_modules.scss new file mode 100755 index 000000000..847949516 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/_sass-helpers.scss b/docs/_sass/marketing_assets/_sass-helpers.scss new file mode 100755 index 000000000..7a8f48675 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/_setup.scss b/docs/_sass/marketing_assets/_setup.scss new file mode 100755 index 000000000..3efa702e2 --- /dev/null +++ b/docs/_sass/marketing_assets/_setup.scss @@ -0,0 +1,3 @@ +@import 'sass-helpers'; +@import 'html5bp-custom'; +@import 'setup/base'; diff --git a/docs/_sass/marketing_assets/_typography.scss b/docs/_sass/marketing_assets/_typography.scss new file mode 100755 index 000000000..5126c32af --- /dev/null +++ b/docs/_sass/marketing_assets/_typography.scss @@ -0,0 +1,2 @@ +@import 'typography/fonts'; +@import 'typography/typography'; diff --git a/docs/_sass/marketing_assets/_utils.scss b/docs/_sass/marketing_assets/_utils.scss new file mode 100755 index 000000000..2ace0eb1e --- /dev/null +++ b/docs/_sass/marketing_assets/_utils.scss @@ -0,0 +1,4 @@ +@import 'utils/responsive'; +@import 'utils/gutters'; +@import 'utils/alignment'; +@import 'utils/colors'; diff --git a/docs/_sass/marketing_assets/builds/fonts.scss b/docs/_sass/marketing_assets/builds/fonts.scss new file mode 100755 index 000000000..6d4c34f14 --- /dev/null +++ b/docs/_sass/marketing_assets/builds/fonts.scss @@ -0,0 +1,2 @@ +@import 'marketing_assets/sass-helpers'; +@import 'marketing_assets/typography/fonts'; diff --git a/docs/_sass/marketing_assets/content/_modules.scss b/docs/_sass/marketing_assets/content/_modules.scss new file mode 100755 index 000000000..a268b8569 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/content/grid/_grid.scss b/docs/_sass/marketing_assets/content/grid/_grid.scss new file mode 100755 index 000000000..016827a63 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/content/setup/_base.scss b/docs/_sass/marketing_assets/content/setup/_base.scss new file mode 100755 index 000000000..4369c1f0e --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/content/setup/_grid.scss b/docs/_sass/marketing_assets/content/setup/_grid.scss new file mode 100755 index 000000000..a60e347de --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/content/setup/_overrides.scss b/docs/_sass/marketing_assets/content/setup/_overrides.scss new file mode 100755 index 000000000..b18a623e4 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/content/setup/_typography.scss b/docs/_sass/marketing_assets/content/setup/_typography.scss new file mode 100755 index 000000000..3176f3b1e --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_accordion.scss b/docs/_sass/marketing_assets/modules/_accordion.scss new file mode 100755 index 000000000..6e9d62aaa --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_block.scss b/docs/_sass/marketing_assets/modules/_block.scss new file mode 100755 index 000000000..03009ec49 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_breadcrumbs.scss b/docs/_sass/marketing_assets/modules/_breadcrumbs.scss new file mode 100755 index 000000000..62241b0fa --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_bullet.scss b/docs/_sass/marketing_assets/modules/_bullet.scss new file mode 100755 index 000000000..f9d6f2253 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_buttons.scss b/docs/_sass/marketing_assets/modules/_buttons.scss new file mode 100755 index 000000000..a30304807 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_drawer.scss b/docs/_sass/marketing_assets/modules/_drawer.scss new file mode 100755 index 000000000..eee772664 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_errors.scss b/docs/_sass/marketing_assets/modules/_errors.scss new file mode 100755 index 000000000..b2d2d07ed --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_footer.scss b/docs/_sass/marketing_assets/modules/_footer.scss new file mode 100755 index 000000000..6f8ba39ae --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_forms.scss b/docs/_sass/marketing_assets/modules/_forms.scss new file mode 100755 index 000000000..0f97ec8be --- /dev/null +++ b/docs/_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 border + padding: em($gutter / 2, 18); + position: absolute; + vertical-align: baseline; + top: 0; + left: 0; + pointer-events: none; +} diff --git a/docs/_sass/marketing_assets/modules/_modal.scss b/docs/_sass/marketing_assets/modules/_modal.scss new file mode 100755 index 000000000..9040c3779 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_nav.scss b/docs/_sass/marketing_assets/modules/_nav.scss new file mode 100755 index 000000000..390475edb --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_padded-grid-box.scss b/docs/_sass/marketing_assets/modules/_padded-grid-box.scss new file mode 100755 index 000000000..fbc298f4e --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_page-blocks.scss b/docs/_sass/marketing_assets/modules/_page-blocks.scss new file mode 100755 index 000000000..c19695473 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_page-header.scss b/docs/_sass/marketing_assets/modules/_page-header.scss new file mode 100755 index 000000000..d763378d2 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_paginated-carousel.scss b/docs/_sass/marketing_assets/modules/_paginated-carousel.scss new file mode 100755 index 000000000..055421044 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_picture.scss b/docs/_sass/marketing_assets/modules/_picture.scss new file mode 100755 index 000000000..9ec6b28d5 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_popover.scss b/docs/_sass/marketing_assets/modules/_popover.scss new file mode 100755 index 000000000..d7b83bc98 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_responsive-svg.scss b/docs/_sass/marketing_assets/modules/_responsive-svg.scss new file mode 100755 index 000000000..21a4e381d --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_section-block.scss b/docs/_sass/marketing_assets/modules/_section-block.scss new file mode 100755 index 000000000..d4cc6d3cb --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_section-heading.scss b/docs/_sass/marketing_assets/modules/_section-heading.scss new file mode 100755 index 000000000..13778087a --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_segment-colors.scss b/docs/_sass/marketing_assets/modules/_segment-colors.scss new file mode 100755 index 000000000..9c0eef0b4 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_signup.scss b/docs/_sass/marketing_assets/modules/_signup.scss new file mode 100755 index 000000000..e43f5bd71 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_slider.scss b/docs/_sass/marketing_assets/modules/_slider.scss new file mode 100755 index 000000000..bf1ad8aeb --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_social-icons.scss b/docs/_sass/marketing_assets/modules/_social-icons.scss new file mode 100755 index 000000000..1d646581b --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_stateful-form.scss b/docs/_sass/marketing_assets/modules/_stateful-form.scss new file mode 100755 index 000000000..96627785f --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_sticky-menu.scss b/docs/_sass/marketing_assets/modules/_sticky-menu.scss new file mode 100755 index 000000000..6fdc8beba --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_tabbed-carousel-nav.scss b/docs/_sass/marketing_assets/modules/_tabbed-carousel-nav.scss new file mode 100755 index 000000000..04807a3bb --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_tabbed-carousel.scss b/docs/_sass/marketing_assets/modules/_tabbed-carousel.scss new file mode 100755 index 000000000..0cf2b55e8 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_video.scss b/docs/_sass/marketing_assets/modules/_video.scss new file mode 100755 index 000000000..b22b57ffa --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/_window-loaded.scss b/docs/_sass/marketing_assets/modules/_window-loaded.scss new file mode 100755 index 000000000..92fae09c6 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_about-author.scss b/docs/_sass/marketing_assets/modules/content/_about-author.scss new file mode 100755 index 000000000..18bf908d7 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_article-meta.scss b/docs/_sass/marketing_assets/modules/content/_article-meta.scss new file mode 100755 index 000000000..b6031df19 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_article.scss b/docs/_sass/marketing_assets/modules/content/_article.scss new file mode 100755 index 000000000..b6a2b1778 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_banner.scss b/docs/_sass/marketing_assets/modules/content/_banner.scss new file mode 100755 index 000000000..02e0efa55 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_chapters.scss b/docs/_sass/marketing_assets/modules/content/_chapters.scss new file mode 100755 index 000000000..6e200abcc --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_guides.scss b/docs/_sass/marketing_assets/modules/content/_guides.scss new file mode 100755 index 000000000..2f0f958fc --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_heading-icon.scss b/docs/_sass/marketing_assets/modules/content/_heading-icon.scss new file mode 100755 index 000000000..73a376096 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_link-title.scss b/docs/_sass/marketing_assets/modules/content/_link-title.scss new file mode 100755 index 000000000..dc5e4d9cd --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_marketing-markdown.scss b/docs/_sass/marketing_assets/modules/content/_marketing-markdown.scss new file mode 100755 index 000000000..550bc735f --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_newsletter-block.scss b/docs/_sass/marketing_assets/modules/content/_newsletter-block.scss new file mode 100755 index 000000000..04596e106 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_pagination.scss b/docs/_sass/marketing_assets/modules/content/_pagination.scss new file mode 100755 index 000000000..cdb18241b --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_preview-links.scss b/docs/_sass/marketing_assets/modules/content/_preview-links.scss new file mode 100755 index 000000000..c8afb9455 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_search-input.scss b/docs/_sass/marketing_assets/modules/content/_search-input.scss new file mode 100755 index 000000000..15a241c55 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_share-bar.scss b/docs/_sass/marketing_assets/modules/content/_share-bar.scss new file mode 100755 index 000000000..57f0e01ec --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_social-shares.scss b/docs/_sass/marketing_assets/modules/content/_social-shares.scss new file mode 100755 index 000000000..b4bf618d9 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/modules/content/_truncated-text.scss b/docs/_sass/marketing_assets/modules/content/_truncated-text.scss new file mode 100755 index 000000000..29108dd07 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/_typography.scss b/docs/_sass/marketing_assets/plus/_typography.scss new file mode 100755 index 000000000..eb9a6fe40 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/_variables.scss b/docs/_sass/marketing_assets/plus/_variables.scss new file mode 100755 index 000000000..acb68ecd3 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/modules/_buttons.scss b/docs/_sass/marketing_assets/plus/modules/_buttons.scss new file mode 100755 index 000000000..5e10a8054 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/modules/_navigation.scss b/docs/_sass/marketing_assets/plus/modules/_navigation.scss new file mode 100755 index 000000000..b7bf18cbf --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/variables/_colors.scss b/docs/_sass/marketing_assets/plus/variables/_colors.scss new file mode 100755 index 000000000..0321b1917 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/variables/_fonts.scss b/docs/_sass/marketing_assets/plus/variables/_fonts.scss new file mode 100755 index 000000000..e00ffeef0 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/variables/_measurements.scss b/docs/_sass/marketing_assets/plus/variables/_measurements.scss new file mode 100755 index 000000000..f02cf0fe2 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/plus/variables/_typography.scss b/docs/_sass/marketing_assets/plus/variables/_typography.scss new file mode 100755 index 000000000..77663c985 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/_breakpoints.scss b/docs/_sass/marketing_assets/sass_helpers/_breakpoints.scss new file mode 100755 index 000000000..a9106162e --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/_mixins.scss b/docs/_sass/marketing_assets/sass_helpers/_mixins.scss new file mode 100755 index 000000000..d9d1e7248 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/_variables.scss b/docs/_sass/marketing_assets/sass_helpers/_variables.scss new file mode 100755 index 000000000..6c76b0883 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/mixins/_global.scss b/docs/_sass/marketing_assets/sass_helpers/mixins/_global.scss new file mode 100755 index 000000000..1f9c88fad --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/mixins/_grid.scss b/docs/_sass/marketing_assets/sass_helpers/mixins/_grid.scss new file mode 100755 index 000000000..4749bd097 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/mixins/_icons.scss b/docs/_sass/marketing_assets/sass_helpers/mixins/_icons.scss new file mode 100755 index 000000000..5f2a3d693 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/mixins/_typography.scss b/docs/_sass/marketing_assets/sass_helpers/mixins/_typography.scss new file mode 100755 index 000000000..6eeb8773d --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/mixins/_utils.scss b/docs/_sass/marketing_assets/sass_helpers/mixins/_utils.scss new file mode 100755 index 000000000..689ec54c9 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/variables/_colors.scss b/docs/_sass/marketing_assets/sass_helpers/variables/_colors.scss new file mode 100755 index 000000000..9f2fc4c5f --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/variables/_grid.scss b/docs/_sass/marketing_assets/sass_helpers/variables/_grid.scss new file mode 100755 index 000000000..6ba3be276 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/variables/_measurements.scss b/docs/_sass/marketing_assets/sass_helpers/variables/_measurements.scss new file mode 100755 index 000000000..571003263 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/sass_helpers/variables/_typography.scss b/docs/_sass/marketing_assets/sass_helpers/variables/_typography.scss new file mode 100755 index 000000000..0cb4a806c --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/setup/_base.scss b/docs/_sass/marketing_assets/setup/_base.scss new file mode 100755 index 000000000..9c091bc5f --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/styleguide/content.scss b/docs/_sass/marketing_assets/styleguide/content.scss new file mode 100755 index 000000000..481afa38c --- /dev/null +++ b/docs/_sass/marketing_assets/styleguide/content.scss @@ -0,0 +1 @@ +@import 'marketing_assets_content'; diff --git a/docs/_sass/marketing_assets/styleguide/styleguide.css.scss b/docs/_sass/marketing_assets/styleguide/styleguide.css.scss new file mode 100755 index 000000000..004bf4bd9 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/typography/_fonts.scss b/docs/_sass/marketing_assets/typography/_fonts.scss new file mode 100755 index 000000000..daa634c86 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/typography/_typography.scss b/docs/_sass/marketing_assets/typography/_typography.scss new file mode 100755 index 000000000..129aca2ef --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/utils/_alignment.scss b/docs/_sass/marketing_assets/utils/_alignment.scss new file mode 100755 index 000000000..c52cce7ee --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/utils/_colors.scss b/docs/_sass/marketing_assets/utils/_colors.scss new file mode 100755 index 000000000..25aefe7e1 --- /dev/null +++ b/docs/_sass/marketing_assets/utils/_colors.scss @@ -0,0 +1,7 @@ +.text-white { + color: $color-white; +} + +.text-slate { + color: $color-slate; +} diff --git a/docs/_sass/marketing_assets/utils/_gutters.scss b/docs/_sass/marketing_assets/utils/_gutters.scss new file mode 100755 index 000000000..3ad4e2659 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets/utils/_responsive.scss b/docs/_sass/marketing_assets/utils/_responsive.scss new file mode 100755 index 000000000..7972d4ca0 --- /dev/null +++ b/docs/_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/docs/_sass/marketing_assets_content.scss b/docs/_sass/marketing_assets_content.scss new file mode 100755 index 000000000..a13ca16c6 --- /dev/null +++ b/docs/_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/docs/_sass/neat/_neat-helpers.scss b/docs/_sass/neat/_neat-helpers.scss new file mode 100644 index 000000000..9c182d2ee --- /dev/null +++ b/docs/_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/docs/_sass/neat/_neat.scss b/docs/_sass/neat/_neat.scss new file mode 100644 index 000000000..eef5b9fd3 --- /dev/null +++ b/docs/_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/docs/_sass/neat/functions/_new-breakpoint.scss b/docs/_sass/neat/functions/_new-breakpoint.scss new file mode 100644 index 000000000..41ab95564 --- /dev/null +++ b/docs/_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/docs/_sass/neat/functions/_private.scss b/docs/_sass/neat/functions/_private.scss new file mode 100644 index 000000000..872d4dc58 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_box-sizing.scss b/docs/_sass/neat/grid/_box-sizing.scss new file mode 100644 index 000000000..b6d3fec33 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_direction-context.scss b/docs/_sass/neat/grid/_direction-context.scss new file mode 100644 index 000000000..7b0d46e8b --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_display-context.scss b/docs/_sass/neat/grid/_display-context.scss new file mode 100644 index 000000000..ed9b0637d --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_fill-parent.scss b/docs/_sass/neat/grid/_fill-parent.scss new file mode 100644 index 000000000..415f0b1e5 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_media.scss b/docs/_sass/neat/grid/_media.scss new file mode 100644 index 000000000..bd516e99a --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_omega.scss b/docs/_sass/neat/grid/_omega.scss new file mode 100644 index 000000000..80f918ab7 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_outer-container.scss b/docs/_sass/neat/grid/_outer-container.scss new file mode 100644 index 000000000..31b0c6415 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_pad.scss b/docs/_sass/neat/grid/_pad.scss new file mode 100644 index 000000000..d697e1b99 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_private.scss b/docs/_sass/neat/grid/_private.scss new file mode 100644 index 000000000..4c4e18c17 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_row.scss b/docs/_sass/neat/grid/_row.scss new file mode 100644 index 000000000..4d913a925 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_shift.scss b/docs/_sass/neat/grid/_shift.scss new file mode 100644 index 000000000..c0f24cd8e --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_span-columns.scss b/docs/_sass/neat/grid/_span-columns.scss new file mode 100644 index 000000000..a7f9b0031 --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_to-deprecate.scss b/docs/_sass/neat/grid/_to-deprecate.scss new file mode 100644 index 000000000..aeea0795b --- /dev/null +++ b/docs/_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/docs/_sass/neat/grid/_visual-grid.scss b/docs/_sass/neat/grid/_visual-grid.scss new file mode 100644 index 000000000..1192d8288 --- /dev/null +++ b/docs/_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/docs/_sass/neat/settings/_disable-warnings.scss b/docs/_sass/neat/settings/_disable-warnings.scss new file mode 100644 index 000000000..3f9b92a6a --- /dev/null +++ b/docs/_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/docs/_sass/neat/settings/_grid.scss b/docs/_sass/neat/settings/_grid.scss new file mode 100644 index 000000000..e2029d01d --- /dev/null +++ b/docs/_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/docs/_sass/neat/settings/_visual-grid.scss b/docs/_sass/neat/settings/_visual-grid.scss new file mode 100644 index 000000000..9cd1815a2 --- /dev/null +++ b/docs/_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/docs/_sass/syntax_highlighting.scss b/docs/_sass/syntax_highlighting.scss new file mode 100644 index 000000000..12301616a --- /dev/null +++ b/docs/_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/docs/assets/images/app-credentials.jpg b/docs/assets/images/app-credentials.jpg new file mode 100644 index 000000000..05b96967e Binary files /dev/null and b/docs/assets/images/app-credentials.jpg differ diff --git a/docs/assets/images/app-permission.jpg b/docs/assets/images/app-permission.jpg new file mode 100644 index 000000000..4d203e9e6 Binary files /dev/null and b/docs/assets/images/app-permission.jpg differ diff --git a/docs/assets/images/desktop.png b/docs/assets/images/desktop.png new file mode 100755 index 000000000..f552385a5 Binary files /dev/null and b/docs/assets/images/desktop.png differ diff --git a/docs/assets/images/fresh-install.jpg b/docs/assets/images/fresh-install.jpg new file mode 100644 index 000000000..cf1367f03 Binary files /dev/null and b/docs/assets/images/fresh-install.jpg differ diff --git a/docs/assets/images/github-logo.png b/docs/assets/images/github-logo.png new file mode 100644 index 000000000..307da048b Binary files /dev/null and b/docs/assets/images/github-logo.png differ diff --git a/docs/assets/images/mobile.png b/docs/assets/images/mobile.png new file mode 100755 index 000000000..fb72f0e22 Binary files /dev/null and b/docs/assets/images/mobile.png differ diff --git a/docs/assets/images/npm-logo.png b/docs/assets/images/npm-logo.png new file mode 100644 index 000000000..a04c49e0a Binary files /dev/null and b/docs/assets/images/npm-logo.png differ diff --git a/docs/assets/images/shopify-logo-large.png b/docs/assets/images/shopify-logo-large.png new file mode 100644 index 000000000..e98ab1240 Binary files /dev/null and b/docs/assets/images/shopify-logo-large.png differ diff --git a/docs/assets/images/shopify-logo.png b/docs/assets/images/shopify-logo.png new file mode 100644 index 000000000..4631c2318 Binary files /dev/null and b/docs/assets/images/shopify-logo.png differ diff --git a/docs/commands/index.md b/docs/commands/index.md new file mode 100644 index 000000000..d4b2a8cb3 --- /dev/null +++ b/docs/commands/index.md @@ -0,0 +1,123 @@ +--- +layout: default +--- + +# Commands + +## Global commands + +| Command | Usage | +| :------ | :---- | +| [theme](#theme) | `slate theme [name]` | +| [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. + +### 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` | +| [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. + +### 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 +``` + +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. + +Deploy to a different environment with the `-e` flag (short for `--env`) plus the environment name, or multiple environments at once with comma separated values +``` +slate deploy -e staging +slate deploy -e development,staging,production +``` + +### 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/docs/css-examples/blank-states/index.md b/docs/css-examples/blank-states/index.md new file mode 100644 index 000000000..a9882022e --- /dev/null +++ b/docs/css-examples/blank-states/index.md @@ -0,0 +1,22 @@ +--- +layout: demo +--- + +
+

Product SVGs

+ + + Example product title + + + + Example product title + + + + Example product title + +
+ +

Lifestyle SVG

+ diff --git a/docs/css-examples/grid-push/index.md b/docs/css-examples/grid-push/index.md new file mode 100644 index 000000000..c502053c0 --- /dev/null +++ b/docs/css-examples/grid-push/index.md @@ -0,0 +1,14 @@ +--- +layout: demo +--- + +
+
+
+

1

+
+
+

1.1

+
+
+
diff --git a/docs/css-examples/grid/index.md b/docs/css-examples/grid/index.md new file mode 100644 index 000000000..fb79bb7c0 --- /dev/null +++ b/docs/css-examples/grid/index.md @@ -0,0 +1,58 @@ +--- +layout: demo +--- + +
+
+
+

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

+
+
+
+
+
diff --git a/docs/css-examples/icon-cart/index.md b/docs/css-examples/icon-cart/index.md new file mode 100644 index 000000000..ecd1963d6 --- /dev/null +++ b/docs/css-examples/icon-cart/index.md @@ -0,0 +1,12 @@ +--- +layout: demo +--- + +
+ +
diff --git a/docs/css-examples/icons/index.md b/docs/css-examples/icons/index.md new file mode 100644 index 000000000..c3dc9e6e6 --- /dev/null +++ b/docs/css-examples/icons/index.md @@ -0,0 +1,130 @@ +--- +layout: demo +--- + +
+

Payment icons

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +

Social icons

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + +
+ +

General icons

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + diff --git a/docs/css-examples/index.md b/docs/css-examples/index.md new file mode 100644 index 000000000..fc949e4d5 --- /dev/null +++ b/docs/css-examples/index.md @@ -0,0 +1,398 @@ +--- +layout: default +--- +# CSS examples + +## Breakpoints + +Defining values and names in Sass makes it possible to use breakpoints in a variety of situations. These are the default values. + +``` +$grid-medium: 750px; +$grid-large: 990px; +$grid-widescreen: 1400px; +$grid-gutter: 30px; // spacing between grid elements + +$small: 'small'; +$medium: 'medium'; +$medium-down: 'medium-down'; +$medium-up: 'medium-up'; +$large: 'large'; +$large-down: 'large-down'; +$large-up: 'large-up'; +$widescreen: 'widescreen'; +``` + +> Breakpoint values and names are declared in `styles/settings/variables.scss.liquid` + +### Media query mixin + +Pass a media query name (above) to the media query mixin to generate media queries in your stylesheet with ease. + +**Example 1** + +Define an element's background to pink above our large breakpoint value. + +``` +@include media($medium-up) { + .foo { + background: pink; + } +} + +Output: +@media screen and (min-width: 750px) { + .foo { + background: pink; + } +} +``` + +**Example 2** + +Define an element's background to blue, unless between the medium and large breakpoint values. + +``` +.foo { + background: blue; + + @include media($medium) { + background: pink; + } +} + +Output: +.foo { + background: blue; +} + +@media screen and (min-width: 750px) and (max-width: 989px) { + .foo { + background: pink; + } +} +``` + +## Grid +A grid as versatile as Slate's (based on [csswizardry-grids](https://github.com/csswizardry/csswizardry-grids)) can generate a lot of code, so the flexibility of only adding what is needed is helpful in keeping the file size down. Grid size classes for `$small` and `$medium-up` are generated by default. + +``` +$breakpoint-has-widths: ($small, $medium-up); +``` + +Each column — or `.grid__item` — should be a direct child of a `.grid` container. Create the child element sizes with the format `breakpoint-name--one-tenth`. See the example below or look through `styles/global/grid.scss` for available sizes. Ideally you should not style the padding or margins of `grid` or `grid__item` classes directly or the layout may break. + +> No grid classes exist in the provided templates, meaning you can swap `grid.scss` from your own grid in `theme.scss` without a lot of cleanup necessary. + +
+ {% 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 +
+
+
+
+``` + +### Grid push classes + +Add push classes by adding the breakpoint name to `$breakpoint-has-push` in `variables.scss.liquid`. For this example, push classes for `$medium-up` have been added. By default, no push classes are generated. + +``` +$breakpoint-has-push: ($medium-up); +``` + +
+ {% include iframe-toggles.html %} + +
+ +``` +
+
+ 1 +
+
+ 1.1 +
+
+``` + +## 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; +} +``` + +
+ +
+ +All available icons. Hover over each to get its name. + +
+ +
+ +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 %} + +
+ +``` + + + + + + + + + + + + + + + + + + + + + + + + + +
ProductPriceQuantityTotal
+ + Product image + + + Product title + + Remove + + + $25.99 + + + + $25.99 +
+ + Product image + + + Product title + + + Remove + + + $19.99 + + + + $39.98 +
+``` + +## 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
+ +``` + +
+ {% 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 + + + +// Visually hidden icon fallback text +{% raw %}{% include 'icon-cart' %}{% endraw %} +Cart icon +``` + +
+ +
diff --git a/docs/css-examples/responsive-table/index.md b/docs/css-examples/responsive-table/index.md new file mode 100644 index 000000000..ed024ff5f --- /dev/null +++ b/docs/css-examples/responsive-table/index.md @@ -0,0 +1,67 @@ +--- +layout: demo +--- + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProductPriceQuantityTotal
+ Image + + Product title + + Remove + + + $25.99 + + + + $25.99 +
+ Image + + Product title + + + Remove + + + $19.99 + + + + $39.98 +
diff --git a/docs/css-examples/show-hide/index.md b/docs/css-examples/show-hide/index.md new file mode 100644 index 000000000..71fa7800b --- /dev/null +++ b/docs/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
+ diff --git a/docs/css-examples/text-align/index.md b/docs/css-examples/text-align/index.md new file mode 100644 index 000000000..f8145c052 --- /dev/null +++ b/docs/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/docs/css-examples/visually-hidden/index.md b/docs/css-examples/visually-hidden/index.md new file mode 100644 index 000000000..2f2cff68c --- /dev/null +++ b/docs/css-examples/visually-hidden/index.md @@ -0,0 +1,20 @@ +--- +layout: demo +--- + +

Visually hidden input label

+ + + +

+ Visually hidden descriptive text for icons use the icon-fallback-text class.
+ This extends 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:

+
+ + Cart icon +
diff --git a/docs/css/demos.scss b/docs/css/demos.scss new file mode 100644 index 000000000..21b7cd846 --- /dev/null +++ b/docs/css/demos.scss @@ -0,0 +1,23 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- +@charset "utf-8"; + +@import + "marketing_assets/sass-helpers", + "demo", + "demo-variables" +; + +@import + "../../src/styles/tools/mixins", + "../../src/styles/global/normalize", + "../../src/styles/global/slate-reset", + "../../src/styles/global/helper-classes.scss", + "../../src/styles/global/layout", + "../../src/styles/global/grid", + "../../src/styles/global/icons.scss", + "../../src/styles/global/rte.scss", + "../../src/styles/global/responsive-tables.scss", + "../../src/styles/global/blank-states.scss" +; diff --git a/docs/css/main.scss b/docs/css/main.scss new file mode 100644 index 000000000..71a86e727 --- /dev/null +++ b/docs/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/docs/css/prettify.min.css b/docs/css/prettify.min.css new file mode 100644 index 000000000..b317a7cda --- /dev/null +++ b/docs/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/docs/css/yuidoc.css b/docs/css/yuidoc.css new file mode 100644 index 000000000..8d02fb853 --- /dev/null +++ b/docs/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/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..3bc4cfac4
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,43 @@
+---
+layout: default
+---
+
+# Slate
+
+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
+
+> [Node](https://nodejs.org/en/) 4+ is supported, but 6+ is recommended to fully benefit from Slate. If you want the template files without the build tools, [get the latest zip here](https://sdks.shopifycdn.com/slate/latest/slate-src.zip).
+
+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.
+3. Create a private app on your development store(s).
+  * Not sure how to create a private app? [Learn how here](https://help.shopify.com/api/guides/api-credentials#get-credentials-through-the-shopify-admin).
+  * Set the "Theme templates and theme assets" permission to "Read and write".
+  Private app permission requirements
+4. Rename `config-sample.yml` to `config.yml` and add your private app credentials:
+  * **store:** the shopify-specifc URL for this store/environment (ie. my-store.myshopify.com)
+  * **theme_id:** the unique id for the theme you want to write to when deploying to this store. Use `"live"` for the published theme.
+  * **password:** the password generated via a private app on this store.
+  Private app credentials
+    * Access this information on your Shopify [admin/apps/private](https://shopify.com/admin/apps/private) page.
+5. From within your new project folder in your command line, use the commands below to build, sync, and watch your local files.
+
+## Slate commands
+
+### Global
+* `slate theme [name]` - Generate a new blank theme
+* `slate -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` folder
+* `slate deploy` — Builds your `dist` folder and replaces the theme set in config.yml
+* `slate watch` — Listens for changes to your local source files and deploys them to your shop
+* `slate start` — Runs build, deploy, then watch to get you developing on your shop quickly
+* `slate zip` — Builds and compresses your `dist` to a zip file for easy manual upload
+
+> Learn more about [all commands and descriptions](/slate/commands/) or how to [deploy to multiple environments](/slate/commands/#sync-commands).
diff --git a/docs/js-examples/index.md b/docs/js-examples/index.md
new file mode 100644
index 000000000..f457e8bdb
--- /dev/null
+++ b/docs/js-examples/index.md
@@ -0,0 +1,175 @@
+---
+layout: default
+---
+# 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   |
+| :----------------- | :------------ | :------------ |
+| `$container`       | jQuery object | Container to trap focus within |
+| `namespace`        | string        | Namespace used for new focus event handler |
+| `$elementToFocus`  | jQuery 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'
+  });
+});
+```
+
+

+  {% 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.
+
+```
+// Wrap RTE tables
+$('.rte table').wrap('
');
+
+// Wrap RTE videos
+var $iframeVideo = $('.rte iframe[src*="youtube.com/embed"], .rte iframe[src*="player.vimeo"]');
+$iframeVideo.each(function() {
+  $(this).wrap('
');
+});
+```
+
+

+  {% include iframe-toggles.html %}
+  
+

+
+## 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/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
+
+Slate separates product variant options into multiple `` element that contains all variant IDs needed to properly submit the form.
diff --git a/docs/js-examples/tables-videos/index.md b/docs/js-examples/tables-videos/index.md
new file mode 100644
index 000000000..64aefe09c
--- /dev/null
+++ b/docs/js-examples/tables-videos/index.md
@@ -0,0 +1,57 @@
+---
+layout: demo
+---
+
+
+
+

+  
Table

+  
+    
+      
+        
+        
+        
+        
+        
+      
+    
+    
+      
+        
+        
+        
+        
+        
+      
+      
+        
+        
+        
+        
+        
+      
+      
+        
+        
+        
+        
+        
+      
+    
+  
ProductTypePriceQuantityTotal
Greta
Hat
$104.961$104.96
77 Ca Skis
Skis
$549.002$1098.00
Aera
Hat
$109.951$109.95

+
+  
Video

+
+  
+

diff --git a/docs/js-examples/trap-focus/index.md b/docs/js-examples/trap-focus/index.md
new file mode 100644
index 000000000..afc7ad6ac
--- /dev/null
+++ b/docs/js-examples/trap-focus/index.md
@@ -0,0 +1,70 @@
+---
+layout: demo
+---
+
+
+
+
+
+

+  
+

+
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.

+
+

+  
+  
+

+
+
diff --git a/docs/js/demo.js b/docs/js/demo.js
new file mode 100644
index 000000000..cd49e4885
--- /dev/null
+++ b/docs/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/theme-scaffold/index.md b/docs/theme-scaffold/index.md
new file mode 100644
index 000000000..3ea1e2181
--- /dev/null
+++ b/docs/theme-scaffold/index.md
@@ -0,0 +1,140 @@
+---
+layout: default
+---
+
+# 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](https://help.shopify.com/themes/development/theme-store-requirements?ref=slate-docs).
+
+```
+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](https://www.shopify.com/partners/blog/introducing-sections-for-shopify-themes) and the [full docs here](https://help.shopify.com/themes/development/theme-editor/sections). 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 `{% raw %}{% section 'product' %}{% endraw %}` in `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](https://help.shopify.com/themes/development/theme-editor/sections) 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 scaffolding and helpers
+
+**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 `