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

@wwtdev/bsds-css

v2.14.0

Published

A new approach to creating a design system at WWT.

Downloads

479

Readme

BSDS CSS Framework

Installation

npm install --save @wwtdev/bsds-css

You can import the minified stylesheet in your project's main.js like so:

import '@wwtdev/bsds-css/dist/wwt-bsds.min.css'

Using with Tailwind CSS

If your project uses Tailwind, complete the steps above and then install Tailwind if you haven't already. You can follow the instructions in their docs with the exceptions listed below.

1. Add the WWT Preset to the Tailwind config.

For new projects, we recommend that you use the provided config file as a preset. When setting up the tailwind.config.js file, import the WWT preset from the CSS Framework package. Note that wwt-bsds-preset.js sets config.corePlugins.preflight: false by default; we do this to apply our style resets instead of the Tailwind resets.

/* tailwind.config.js */

module.exports = {
  presets: [require('@wwtdev/bsds-css/dist/wwt-bsds-preset.js')]
};

While the foregoing setup is our recommended method, we have still put in effort to ensure that wwt-bsds-preset.js works as a base configuration in conjunction with the tailwind defaults and reset as well. So this should still work as an alternative if needed, though it is not the focus/priority of our project:

/* tailwind.config.js */

const wwtConfig = require('@wwtdev/bsds-css/dist/wwt-bsds-preset.js')
module.exports = {
  ...wwtConfig,
  corePlugins: { preflight: false }
};

2. Tailwind CSS Directives

To prevent conflicts with our CSS Framework, only include the base and utilities directives.

Since our CSS has its own reset and default styles, we prevent Tailwind's base reset styles from loading, via a setting in our WWT Preset. The only styles that will be used from base are Tailwind CSS variables, which are needed in order to ensure all Tailwind classes work as expected.

/* src/styles/tailwind.css */

@tailwind base;
@tailwind utilities;

Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.

Order matters!

In your project's stylesheet ordering, the BSDS CSS framework should come first, then the base Tailwind styles for easier overriding via TW utilities.

/* src/main.js */


// Blue Steel Styles
import '@wwtdev/bsds-css/dist/wwt-bsds.min.css'
// TW
import './styles/tailwind.css'

Alternatively, you can leverage native CSS @layer to ensure TW utilities will always trump these styles.

/* src/styles/index.css (or wherever your styles live)  */

@layer app-base, external, app, utils;

/* -- BASE -- */
@import "@wwtdev/bsds-css/dist/wwt-bsds.min.css" layer(app-base);

/* -- EXTERNAL: any external stylesheets, e.g. from other 3d party libs -- */
@import "some-other-pkg/dist/style.css" layer(external);

/* -- APP / INTERNAL STYLES, e.g. your site's base styles -- */
@import "some-content.css" layer(app);

/* -- UTILITY CLASSES --
  Due to how native CSS @layer works, and our defined layer order at the top of this file, utility classes will always trump any other styles in the app (as long as those styles are in one of our defined layers)
*/

@layer utils {
  @tailwind base;
  @tailwind utilities;
}

3. Dark Mode-compatible "semantic" color utilities

We've extended the TW theme with color utilities that will automatically adjust when using dark mode. These classes require the CSS custom properties defined in the global stylesheet (wwt-bsds.css). If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from tokens.css and global.css in your project.

Browser Support

Our styles are compiled using Post CSS and Autoprefixer using the defaults setting.