@sproutsocial/seedlings

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.

Updating utilities.html

To update https://local.cms.sproutsocial.test/lps/utilities/ with your new utility classes, see Generating Utility Styles Cheatsheet in web-insights-application/packages/calder-views/README.md