Skip to content
Greenpeace Planet 4 Styleguide
CSS JavaScript HTML Makefile Dockerfile
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add linting CI configuration Dec 18, 2019
src Merge pull request #41 from greenpeace/planet-4833 Mar 24, 2020
theme Move font declarations to variables for deduplication Jun 14, 2019
.eslintrc.json Initial commit Jun 3, 2019
.gitignore Initial commit Jun 3, 2019
.stylelintrc Initial commit Jun 3, 2019
LICENSE Add deployment documentation Jun 24, 2019
gulpfile.js Merge pull request #3 from greenpeace/planet-3602 Jun 11, 2019
hostname.txt Add configurable base url Jun 11, 2019
hostpath.txt Add configurable base url Jun 11, 2019
package-lock.json Update dependencies Mar 20, 2020
package.json Update dependencies Mar 20, 2020

Greenpeace Planet 4 Styleguide


Run locally

Use npm to install the necessary gulp-cli:

npm -g install gulp-cli

Install all required packages:

npm install

Build the style guide:

gulp build

Run the local webserver using gulp:


Browse to localhost:9000.


Building the styleguide with kss

The styleguide is generated from source sass files with kss.

In order to add new section to the styleguide you need to add a specific format of comment block to the appropriate partial file.

For instance adding this on top of _buttsons.scss:

// Buttons
// Markup:
// <div class="mb-2">
//   <a href="/international/act/protect-the-oceans/" class="btn {{modifier_class}}">Protect our seas</a>
// </div>
// .btn-primary - Primary button
// .btn-secondary - Secondary button
// Styleguide Components.buttons

Let's break this down:

  1. Pick the title for that section.
// Buttons
  1. Add the markup that you want to use as an example. It's important to add the word Markup: there.
// Markup:
// <div class="mb-2">
//   <a href="/international/act/protect-the-oceans/" class="btn {{modifier_class}}">Protect our seas</a>
// </div>
  1. Optionally, you can have some variations. The classes defined here will substitute the {{modifier_class}} variable on the markup above.
// .btn-primary - Primary button
// .btn-secondary - Secondary button
  1. Last thing on the comments block should be the hierarchy of the section, so that kss knows where to place it.
// Styleguide Components.buttons

Styleguide theme

Our theme is based on the michelangelo kss theme, with some modification to meet the same look and feel we have on planet 4.

We can do changes on the theme by modifiying its sass code in the theme/kss-assets/css folder.


Every time we run gulp build, we generate both the styleguide theme, but also the unified css from our source files. The output folder is dist.

Running gulp we initiate the watch task and run a webserver at localhost:9000.


The build and deployment is happening automatically whenever:

  • There are commits to the master branch.
  • There are new tags created.

The above changes trigger (via the circleCI API) a rebuild of the develop and master related workflows of the current repository.

These in turn do the following:

  • Checkout the relevant code of the styleguide (either the latest code of the master theme, or the latest tag).
  • Create a docker image with the above code in the repository called "public".
  • Push this docker image to the docker hub registry for the current application and tag it either develop or latest.
  • Run a helm deploy/update to create the necessary kubernetes resources so that this can be served by our kubernetes clusters.


You can’t perform that action at this time.