Sprout Styles

Base Styles for the Sprout Design System

Installing Sprout

This library is published as an NPM package in Kabbage’s internal npm registry.

Follow the instructions on Artifactory (accessible via Okta) for authenticating scoped packages to set up your .npmrc file. These instructions can be found in the “Set Me Up” box under the entry for npm-local. Your .npmrc file should look like this if done correctly:

@kabbage:registry=https://artifactory.kabbage.com/artifactory/api/npm/npm-local/
//https://artifactory.kabbage.com/artifactory/api/npm/npm-local/:_password=<BASE64_PASSWORD>
//https://artifactory.kabbage.com/artifactory/api/npm/npm-local/:username=<YOUR_USER>
//https://artifactory.kabbage.com/artifactory/api/npm/npm-local/:email=<youremail@email.com>
//https://artifactory.kabbage.com/artifactory/api/npm/npm-local/:always-auth=true

Now you are ready to install the npm package

npm i @kabbage/sprout --save

And import sprout into your main styles

@import '~@kabbage/sprout/lib/scss/reset'; // recommended for new projects
@import '~@kabbage/sprout/lib/scss/main';

Configuring Sprout

Sprout can be configured by passing overrides into spr-config().

spr-config() accepts overrides for color theme, typography, layout, etc…

Example Usage:

@import '~@kabbage/sprout-styles/scss/_config.scss';

$yellow-theme: (
    primary: (
        50: yellow,
    )
);

@include spr-config($yellow-theme);

// make sure you configure sprout before importing main.scss!
@import '~@kabbage/sprout-styles/scss/main.scss';

Design System Document

The full documentation of the design system can be found here: https://zeroheight.com/1oigb8hrc

The password is: kbgproduct

Contribution Guidelines

Try to match code to design doc as closely as you can

• file structure
• configuration structure
• variable names and mixin names should match grammar where possible

All contributions should have documentation comments for mixins, functions, and variables. Refer to sassdoc.com’s documentation on annotations