@progressiveui/styles

Styles for the Bridge Design System

Getting started

To install @progressiveui/styles in your project, you will need to run the following command using npm:

npm install -S @progressiveui/styles

If you prefer Yarn, use the following command instead:

yarn add @progressiveui/styles

This package requires Dart Sass in order to compile. It uses Sass modules to organize the codebase and provide exports to use.

If you're new to Sass, or are wondering how to configure Sass for your project, we recommend checking out the following resources and links:

• Sass Basics
• Webpack with Sass
• Next.js with Sass
• Create React App with Sass
• Parcel with Sass
• Vite with Sass
• Snowpack with Sass

Once you get Sass up and running in your project, make sure to configure Sass to include node_modules in its includePaths option. For more information, checkout the configuration section in our Sass docs.

Usage

You can bring in all the styles for the Carbon Design System by including @progressiveui/styles in your Sass files. For example:

@use "@progressiveui/styles";

If you only would like to bring in specific components, you can import them in a similar way:

@use "@progressiveui/styles/scss/reset";
@use "@progressiveui/styles/scss/components/accordion";
@use "@progressiveui/styles/scss/components/button";
@use "@progressiveui/styles/scss/components/checkbox";

There are various helpers that you can include, as well, such as a CSS reset, grid, breakpoint helpers, and more. You can include these similar to how you bring in components:

// Bring in the CSS Reset
@use "@progressiveui/styles/scss/reset";

// Bring in the CSS Grid
@use "@progressiveui/styles/scss/grid";

To learn more about the various helpers that @progressiveui/styles provides, checkout the overview of the files available to use in our Sass docs.

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀

📝 License

Licensed under the Apache 2.0 License.