This repository contains the 365 Retail Markets HelpCenter theme running on the Zendesk Guide platform.
This repository contains a lot of brand-specific links and styling.
It is not intended to be used as a theme on another Zendesk Guide instance.
Even so, I hope that it can act as a reference or starting point for creating your own Guide theme. Questions about scripts, templates, or the strange actions that Zendesk sometimes takes with its products are certainly welcome!
assets/- contains logos, images, stylesheets, and the segmented script filessettings/- contains the favicon used in themanifest.jsonfilestyles/- contains all of the SCSS files, one for each template filetemplates/- contains all of the various page file templatesstyle.css- final stylesheet used by Zendesk Guidescript.js- main script file included in the page<head>manifest.json- project metadata and settings
For markup Zendesk Guide uses Handlebars and each template is stored in the templates/ folder. All available templates for a Zendesk Guide theme that has all the features enabled are included however not all of them are used in our case (like "Community").
The styles that Zendesk Guide will read are in the style.css file located in the project root.
For development this project uses the CSS preprocessor Sass with the .scss syntax where we split styles into Sass partials. All the partials are put under the styles/ folder and included in the index.scss which is then compiled to style.css.
styles/_partial.scss 🡆 styles/index.scss 🡆 style.css
All layout and positioning is written in the SCSS files. Any color/type/design is written in the styles-light.css and styles-dark.css files. If a style does not change based on the theme mode, then it may exist in the SCSS file.
The main JavaScript file script.js is located in the project root and will be added in the document <head> of every page.
JavaScript that you do not think belongs in the document <head> can be added inline in templates or added as regular *.js files in the assets folder and then be included in the appropriate template(s).
To start contributing, clone the repository (git clone https://github.com/ohitsdylan/365ZD.git) and create a feature/bug branch (e.g. git checkout -b feature/that-new-feature or bug/fix-for-that-bug) to work on.
You can use your favorite IDE to develop and preview your changes locally in a web browser using the Zendesk Apps Tools (ZAT) which is installed as a Ruby gem. For more details, see Previewing theme changes locally.
To avoid having to enter your Zendesk credentials every time you start your development environment you can create a .zat file in the project root which contains your credentials in json format, for example like this:
{
"subdomain": "365retailmarkets",
"username": "[email protected]/token",
"password": "YOUR_API_TOKEN"
}To make use of some development tools you will need to have Node.js installed and then run the below command:
npm installIn package.json you will find a list of the dev dependencies along with some npm scripts. Example on how to run a script:
# Watch Sass changes and write to style.css
npm run styles:watch
# Complies Sass, minify and autoprefix to style.css
npm run styles:buildFor deploying changes to production we use the Zendesk GitHub integration, the workflow can be summarized to:
- Increment the
versioninmanifest.json(without this Zendesk won't recognize an update). - Commit your changes and merge your branch to the master branch.
- In the Zendesk Guide theming center press Update from GitHub.
- Changes should now be live!