____                  __          ____
     / __ \____  _____ ____/ /_  ____  / / /_
    / /_/ / __ `/ ___/ ___/ __ \/ __ \/ / __/
   / ____/ /_/ (__  |__  ) /_/ / /_/ / / /_
  /_/    \__,_/____/____/_.___/\____/_/\__/

The password management solution
(c) 2017 Passbolt SARL

Passbolt is distributed under Affero General Public License v3

Images and logos in /src/img/third_party belongs to their respective owner.

This is the official styleguide for Passbolt the open source password manager for teams. This styleguide is used to extend, minify and test the stylesheets used by the different passbolt components such as the website, the firefox addon, etc.

In /demo you can find a copy of each of the page HTML (or main states in case of the one page client) so that you can test them out. You will need a simple php webserver, since we use it to factorise some of the includes. Apart from this the HTML is static.

In /src and /build you can find the assets that are used by other projects, like the images the less files, the minified css files, fonts, etc.

https://www.passbolt.com/credits

Install grunt

npm install -g grunt-cli

Install the needed modules defined in the grunt config

npm install

Make sure Grunt watch for less changes and compile them into CSS

grunt watch

Edit one LESS file to see if it works!

We are using npm to manage the styleguide package in project using it. Checkout npm documentation: https://docs.npmjs.com/developers

In a nutshell, once you are done changing, make sure you change the version number in the package.json.

{
  "name": "passbolt-styleguide",
  "version": "X.X.X",
  [...]
}

You need to commit your changes and tag the new version of the styleguide. This is how npm knows a new version is available in the project using the package.

grunt styleguide-publish

in your project you should also have a grunt task to manage the copy/pasting in the right place such as

grunt styleguide-update