@sproutsocial/seedlings NPM

Seedlings

Tachyon like seeds classes

Get Started

If you are openning this package for the first time, you need to run the following command to build the style classes which will output to the dist folder with the file name seedlings-marketing.css:

yarn build

Adding a New Seedling

To add a new seedling, you need to create a new file inside the src folder with the name of the seedling. If you are importing a new Axiom from seeds you'll need to create the following files:

Under /src/axioms/NewAxiom.scss: This file will contain the styles for the new axiom you are importing.

NOTE: If the seeds axiom you are importing does not currently exist in the package.json's list of dependencies, you'll need to add it there first.

Under /src/ create a new file _new-style.scss and you'll need to import the new axiom styles.
- Within this file make sure you are using the front matter needed to generate the classes. You can see an example of this in the _elevation.scss file that looks like this:
```
---
Name: Elevation
Base:
    elevation: elevation
Modifiers:
    100: Level 100
    300: Level 300
    400: Level 400
Breakpoints:
    -ns: not-small
    -m: medium
    -l: large
HoverClasses: true
Example: <div class="pa800 {{modifier}} w-100p"><h3>{{label}}</h3></div>
---
```
  and whatever scss you need to create your new seedling classes.
Once you've written what you need to generate those classes you can run the following command to generate the new seedling classes:
```
yarn build
```
This will generate (or update) the new seedling classes in the dist folder with the file name seedlings-marketing.css.

Once you get a successful build, if you need to use them inside the sprout theme, head back to web-insights-application/themes/sprout/ and run the following command to build all the available javascript and css (this will include the new seedling classes):

yarn build

NOTE: If you are pushing these style changes to your test box and still not seeing the style changes, try busting the cache with the cache buster tool located under tools in your wp-admin using the media.sproutsocial.com distribution.