@sproutsocial/seedlings
v1.28.2
Published
Tachyon like seeds classes
Downloads
50
Maintainers
Keywords
Readme
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 nameseedlings-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 themedia.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