This is the ZALORA styleguide project. It collects and showcases everything design related to ensure brand consistency throughout the company
This project uses Jekyll, Gulp, Sass and Hologram
Jekyll is a static site generator written in ruby and we included a Gemfile to keep packages in order.
This gets you up and running: bundle install
If you don't have bundler installed, run: gem install bundler first.
This project includes two submodules:
Clone the repo with the recursive flag to also get the contents of the submodules, like this:
git clone --recursive git@github.com:zalora/styleguide.git
To update the submodules later run:
git submodule foreach git pull origin master
For further reading on submodules: Git-Tools-Submodules
We use Gulp to run Hologram, Sass compilation and Jekyll rebuild. Browser Sync refreshes your Sass changes directly in the browser without reloading. Yaay! BONUS: Try connection to your local server with more than one browser, and navigation the page ;)
Install npm packages with: npm install
Then run gulp to start developing. That will fire up a local web server and wait for you to edit any .html, .js, .md, .scss file.
To deploy the site, make a pull request to master and watch Bamboo do magic!
We love PRs, please fork this repo and do a PR if there is something you need to change.
from the root of the project and the compiled jekyll site will be pushed to the gh-pages branch and with this updated on the web.
Ok so there's basically two parts to this website:
- The Jekyll site which generates html pages from Markdown files.
- CSS/Sass documentation that is automatically generated through a gem called 'Hologram'
To add or change pages navigate to src directory and look for a file ending in .md or .html in the sub directories. For example the page Logo exists here:
- src/
- design/
- logo.md
Update that file and get someone (i.e. Winn) to redeploy the site.
All assets like images to display in the site live in:
- src/
- assets/
- images/
- content/
Please put your content in sub directory according to the navigation structure in which your page is gonna live in.
Assets like ZIP files for downloading go into:
- src/
- assets/
- downloads/
All the files in
- src/
- assets/
- scss/
- global/
are actually another git repository included into this one as a submodule. The global scss repo hold all the basic styling for web projects at ZALORA. This, for example, is included in the ZALORA shop.
Pages on the styleguide are automatically generated out of code comments in the .scss files themselves.
A comment looks like this: _buttons.scss