Petal is designed with customization in mind, so you can change the colors and looks of the UI elements with ease when needed. Customizing requires overriding the values of global variables such as @primary-accent-color, and compiling your own version of Petal with the changed files.

1. Downloading Petal

There are several ways in which you can get your hands on Petal.

• Download the latest release from Github.
• Clone the Petal repository from GitHub. Use command line or GUI applications to clone to your local folder.
• npm install petal.less to install Petal from npm.

2. Customizing variables

Now that you can edit the source files, open up variables.less (the default variable settings) file inside the less folder. Copy the contents of it to custom-variables.less file which is empty initially. This is the file that will override the default variables. Modify the values you want to alter in it, save it, and you're ready for building. See the documentation page for more information.

3. Building with Grunt

To build, you'll need to set up Grunt to use the preincluded build tasks in Petal. Navigate to your local Petal directory and run npm install to install dependencies, then do grunt petal to build Petal. Petal will be built as petal.css and petal.min.css inside build folder.

4. Apply to your project

Once you have compiled files, copy the file into your project's directory, link it as you would with other CSS files. Include it before any other stylesheets so that your site stylesheet can override Petal when needed.

Complete Integration

While you can keep Petal and your site stylesheet separated in individual files, you can also just import Petal altogether into your project's root stylesheet (given that you only have a single final output CSS file). By doing this you gain several benefits including being able to use Petal's LESS mixins in your site's stylesheet as well, and assign petalicons right inside your stylesheet.

To do this, download or clone Petal into your project directory so you can access the source files from your site's stylesheet. Or, if you already use npm in your project, you can also include Petal as a dependency. Insert Petal in your package.json file as such:

"dependencies": {
    "petal.less": "^0.12.4"
}

Then run npm install petal to install Petal. Petal will be installed inside your node_modules folder. Benefits of using npm is that it will be easier to manage when updating Petal to newer versions in the future.

After you have access to the source files, import Petal at the top of your base stylesheet:

@import 'path/to/src/petal.less';

Make sure you set the right relative path considering the folder structure.

To reduce size of compiled stylesheet you can also decide to import only specific parts of Petal like buttons.less. In such case, copy contents of petal.less (the base file) and remove parts you want to leave out.