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

@swisspost/design-system-styles

v8.6.2

Published

Design System Styles for the Swiss Post web platform.

Downloads

3,976

Readme

Design System Styles

Swiss Post Design System splash screen

Styles for the Swiss Post web platform.

Documentation

Installation

In order to be able to use npm commands, node.js needs to be installed on your machine.

The scss files in our styling package make use of the latest features of Sass. If you are planning to compile the .scss files in your project, be sure to use an up to date version of the latest Sass implementation (dart-sass, npm i sass@latest). LibSass or Ruby Sass are not supported. If you can not meet this prerequisite, you can still use the precompiled CSS files included in the styling package.

Install the styling package

  npm install @swisspost/design-system-styles

Import the stylesheet into your project, e.g. src/styles.scss.

@use '@swisspost/design-system-styles/<bundle-name>.scss';

Available Sass entrypoints:

  • index.scss (internet facing applications)
  • intranet.scss (internal applications)
  • basics.scss (atomic styles for font, buttons, lists etc.)
  • core.scss (variables, mixins, functions and placeholders only)

Available CSS bundles:

  • index.css (internet facing applications)
  • intranet.css (internal applications)
  • basics.css (atomic styles for font, buttons, lists etc.)

Migration guide

To execute the migrations please follow our migration guide.

Contribute

Contributor Covenant

Considering supporting the Swiss Post Design System with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Learn how you can contribute to this project in the styles contribution guidelines and also take a look at the general contribution guidelines.

For any questions regarding the pattern library, you can reach out on the discussions page.

In order to keep our community open and inclusive, we expect you to read and follow our Code of Conduct.

License

Software contained in this repository is published by the Swiss Post Ltd. under the Apache 2.0 License.

© 2024 Swiss Post, Ltd.