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:

• Global scss
• Mobile scss

Clone the repo with the recursive flag to also get the contents of the submodules, like this:

git clone --recursive [email protected]: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. We use Ruby bundler to maintain Hologram and Jekyll dependencies. 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 ;)

The environment required for this project is maintained in Dockerfile. Its corresponding Docker image is published to Docker Hub under zalora/styleguide. The Docker image includes all the dependencies you need for development. To start your development, attach your styleguide checkout as a volume under /root/styleguide, then initialise the dependencies as shown below.

Install npm packages with: npm install Install Jekyll and Hologram dependencies with gem install bundler;bundle 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 Jenkins 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.

Jenkins uses the Dockerfile maintained in this repo to run gulp ci_deploy to publish the latest Jekyll site. Its corresponding Docker image is published to Docker Hub under zalora/styleguide. The image includes all the dependencies you need for development. To start your development, attach your styleguide checkout under /root/styleguide, install npm and bundle as shown above, than you are ready to go!

Ok so there's basically two parts to this website:

1. The Jekyll site which generates html pages from Markdown files.
2. 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