Learn how to install Webpixels CSS in your project.

Install via npm

For most projects (and to take advantage of the customization features), you'll want to install Webpixels CSS and its peer-dependencies via npm.

Make sure you have Node.js 12.13.0 or higher installed since our themes use npm to manage dependencies. If you don't, installing is quite easy, just visit the Node Downloads page and install it.

npm install @webpixels/css@latest bootstrap@5.1.3 --save-dev

This will automatically install the latest Bootstrap version, so you don't need to do that manually.

Import the styles into your CSS

In your main.scss, you’ll import the source Sass files. Bootstrap is automatically loaded when you use the source files, so you don't need to worry about what Bootstrap files should you incorporate in your styles.

You have two options: include all of styles at once:

@import "@webpixels/css";

or pick the parts you need:

@import "@webpixels/css/base";
@import "@webpixels/css/forms";
@import "@webpixels/css/components";
@import "@webpixels/css/utilities";

If you want to learn how to reduce the file size of your CSS file by including only the components you need, check out the Optimize section.

Using the styles via CDN

You have the option to skip the installation step by using the CDN build, which delivers a cached version of framework's compiled CSS to your project. While this could sound convenient, many of the features won't work unless you include Webpixels CSS source files into your build process.

Here are some of them:

  • You can't customize Sass variables
  • You can't change the colors, typography
  • You can't customize components properties
  • You can't create new themes
  • You can't remove unused styles
<link href="" rel="stylesheet">