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

@synergy-design-system/styles

v1.4.0

Published

Utility classes and helpers for applications using the Synergy Design System

Downloads

147

Readme

@synergy-design-system/styles

This package provides easy to use standalone helper classes based on the Synergy Design Tokens.

The included styles use CSS features supported by the latest two versions of all major browsers (as defined by browserslist) and is actively linted and tested against those targets.


1. Installation

Please make sure to install the package as a dependency:

npm install --save @synergy-design-system/styles

# Install the required design tokens
# (only needed if you do not install peerDeps automatically)
npm install --save @synergy-design-system/tokens

2. Loading the provided stylesheets

2.1 Loading all styles (Recommended)

To load all provided css classes at once, just include the default export into your application. It contains all styles found in the src directory.

<!DOCTYPE html>
  <head>
    <link rel="stylesheet" href="/node_modules/@synergy-design-system/styles/dist/index.css" />
  </head>
  <body>
  </body>
</html>

We also provide a default export that points to the created dist/index.css file. This will be picked up and served when using a bundler (e.g. webpack or vite). For this to work, import the module directly in your project like this.

import "@synergy-design-system/styles";

2.2 Loading single modules

It is also possible to load only parts of the provided css files.

For a list of available modules, please have a look at the available modules section below.

<!DOCTYPE html>
  <head>
    <!-- Loading typography only -->
    <link rel="stylesheet" href="/node_modules/@synergy-design-system/styles/dist/typography.css" />
  </head>
  <body>
  </body>
</html>
// Loading typography only
import "@synergy-design-system/styles/typography.css";

3. Available modules

  • link.css
  • tables.css
    • table-cell.css
    • table.css
  • typography.css
    • body.css
    • heading.css
    • weight.css

Development

Building the styles

This package makes use of postcss for creating a unified bundle for easier consumption in applications. Please run pnpm build in the root of this package to recreate the bundle file dist/index.css.

How it works

  1. The build will walk through the src directory and process all files named index.css. It automatically moves those files to the root dist directory, with the name of the folder it resides in. src/typography/index.css will automatically become dist/typography.css.
  2. All css files not named index.css will get copied over to the dist directory to make them available in the bundle. src/typography/body.css will get copied to dist/typography/body.css, however dist/typography/index.css will get renamed to dist/typography.css for easier inclusion.

Creating new modules

  1. Create a new folder src/[MODULE_NAME].
  2. Create a new file src/[MODULE_NAME]/index.css.
  3. Add CSS statements to your liking. Hint: You may also split your code into multiple css files residing in the src/[MODULE_NAME] folder. Make sure to import them into your src/[MODULE_NAME]/index.css file to make them part of the build.
  4. Add js doc comments to your code to create controls for storybook automatically. This can be done by creating comments, as seen below.
  5. Run pnpm build. You should now see the a new file dist/[MODULE_NAME].css that holds all your previous code, as well as your created submodules (if you have splitted your code into multiple files).

Bonus: Documenting your module with css comments

When adding comments to your modules, please add a list of all variants of your module to your css file. Comments like this will take care that storybooks documentation is automatically updated:

/**
 * The "variant" syn-fieldset takes care that two classes will exist in documentation. The first variant value will be the selected one:
 * - syn-fieldset-small and
 * - syn-fieldset-large
 * @variant {small | large } syn-fieldset
 *
 * The "variant" syn-shadow takes care that 4 classes will exist in documentation. There will be no default value selected via the NO_DEFAULT option:
 * @variant { NO_DEFAULT | bottom | top | start | end } syn-shadow
 *
 * The "boolean" syn-boolean-false will display as a boolean value in storybook with 'false' as default value
 * @variant syn-boolean-false This value will also be available as a class.
 *
 * The "boolean" syn-boolean-true will display as a boolean value in storybook with 'true' as default value
 * @boolean { true } syn-boolean-true This value will also be available as a class.
 * 
 */