GX Technology : Zendesk Developers Guide (outdated, but some information relevant)

For first time setup, ensure you point ZAT to look at Sandbox environments only. You can always change your subdomain and user name by editing the hidden .zat file in the theme folder.

Note: If you see errors such as the inability to retrieve the header files for Ruby -- you may have to install Node.js and XCode prior to being able to set up your local ZAT environment.

Node.js can be installed via this link: https://nodejs.org/en/download/
XCode can be installed via the App Store

*For more information on working with local themes see the below link.

https://support.zendesk.com/hc/en-us/articles/115014810447-Working-on-a-theme-locally-Guide-Professional-

NPM

This project is using Gulp and NPM. To get NPM Installed follow the instructions here:

https://docs.npmjs.com/getting-started/installing-node

Once installed run npm install on the root of the project.

Commands:

npm i - This is needed for first run and package updates

gulp watch - Starts the sass watch tasks and compiles changes into the appropriate style.css

gulp build-stage --theme themename - Builds all themes into the dist folder using the manifest.json within the theme folder

guld build-prod --theme themename

zat theme preview - Should be ran from the theme folder and will start a local development server *use control c to end the server or you will run into port issues

GIT Repos

We use currently use Github for all of our Help Centers. Within these repositories, we have added a global ignore for node_modules, /dist and .zat files in the app settings.

After you have ZAT installed, clone one of our GIt repos from https://github.wdig.com/GXHelpSite

Disney Zendesk Themes Overview

All sites utilize a base theme, depending on the site, that theme will be one of the following:

Dream Theme

- help.shopdisney.com

Motunui Theme

- support.disney.com
- support.espn.com
- help.moviesanywhere.com
- support.starwars.com
- support.disneymovieinsiders.com
- All themes in the Motunui-sites folder

These base themes are included and then overridden within the Zendesk theme folders as needed when the new theme deviates from the base theme.

To check which theme a site is depending on, you can go into the /theme/style.scss of that project and it will have a pointer to either the motunui-theme or the dream-theme.

In some cases sites have a copy of a base theme in the project folder, that they build from, this is done only in the cases where overriding styles isn't enough and we are needing to make larger changes to the theme. You can see instances of this with Disney Plus and ESPN. They contain their own base theme.

There is a variables.scss in the common folders of the zendesk themes where common variables can be overridden

Grid System and Media Queries

We are using Susy grid systems due to the lightweight nature.

Grid settings can be found under the grid.scss file.

The html layout of our grid system is as follows:

<!–This spans 4 columns or 100% of our grid -->

</div>

Our media queries can be found in the Zendesk Theme sass and is labeled _mq.scss

The syntax to reference the queries is @include mq($until: med) {} or @include mq($from: med) {}

The available sizes are as follows and can be found in the variables.scss:

small: $page-width-min,
med: 660px,
large: 990px,
wide: $page-width-max,

// Tweak points
iphone6Wide: 375px,
didLighboxSmall: 420px,
mobileLandscape: 480px,
promoMobileMed: 620px,
ipadVertical: 768px,
ipadHorizontal: 1024px,
preLarge: 960px,