This theme is a fork from Zendesk Copenhagen, with the overwritten settings we use at Pier. ⚓
You can find more info about Copenhagen customization in the official guides.
In order to contribute to this theme, you'll need the following tools installed on your environment:
Use the following guides to properly setup your environment:
To contribute to this theme, first things first: clone the repo.
After cloning the repo on your local machine, follow the instructons below for each topic. ✨
In the theme folder, open your terminal and use the following commands:
# install dependencies
yarn
# preview theme changes
zat theme previewStylesheets are organized using ITCSS architecture. This approach aims to create layers and define how the style will affect our layout and how they'll interact with other layers.
The theme also uses Sass as a pre-processor and compiler.
pier-help-center-theme/
└── styles/
├── components/ - specific components (.button, .form, .header, .footer...)
├── elements/ - bare elements (typography, form...)
├── generics/ - reset
├── objects - abstract components (.hero, .section...)
├── pages/ - page-based styles
├── settings/ - variables and definitions
├── tools/ - globally used functions (mixins)
├── trumps/ - helpers and/or overrides
└── index.scss
To preview the changes, you'll need ZAT and access to Pier's Zendesk auth credentials.
After using the command zat theme preview on your terminal, you'll need to insert the Zendesk Support subdomain or full URL (with protocol); also, you'll need to insert the auth credentials.
You can also use an API Token, generated in your Zendesk Support admin panel. 💡
If the login succeeds, the prompt will return an URL, Ready URL - copy and paste it in your browser and voilà: you're previewing your local theme using the data from your Zendesk Support.
You must be logged in your Zendesk admin panel in order to see the preview!
⚠️
This preview doesn't support HMR, so after every change you'll need to manually refresh your browser to see those changes.
To preview changes that affect template structure and/or markup, you must restart the preview in your terminal.
When you're done, you can stop the preview by clicking Exit preview on your browser, or stopping the prompt with Ctrl + C shortcut.
This theme uses conventional commits to improve readability of the project history. If you're not familiar with this pattern, take a deep look on the official guide.
In order to create commits, the commit message should follow the format below:
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
To validate the commit messages, this theme uses husky git hooks and commitlint.
In case of doubt, check out below the official references and resources about Zendesk Help Center theme customization:
- Zendesk Copenhagen Theme on GitHub
- Zendesk Guide Help - Using themes and customizing your Help Center
- Zendesk Developer Docs
- Zendesk Developer Docs - Help Center Templates Introduction
- Curly template language on GitHub
- Curlybars templating library on GitHub
- Zendesk Developer Docs - Installing and using ZAT