npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sproutsocial/seedlings

v1.28.2

Published

Tachyon like seeds classes

Downloads

151

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 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