Installation
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.
npm install @webpixels/css@1.2.6 bootstrap@5.2.3 --save-dev
This will automatically install the latest Bootstrap version, so you don't need to do that manually.
Create the Sass files
In your scss folder create two new files and name them main.scss and utility.scss.
Import the base styles and components
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.
@import "@webpixels/css/base";
@import "@webpixels/css/forms";
// Load all the components
@import "@webpixels/css/components";
or pick the parts you need:
@import "@webpixels/css/base";
@import "@webpixels/css/forms";
// Load only the components you use
@import "@webpixels/css/components/alerts";
@import "@webpixels/css/components/avatars";
@import "@webpixels/css/components/buttons";
@import "@webpixels/css/components/navbars";
@import "@webpixels/css/components/cards";
Click here to see the complete list of available components.
Import the utility classes
In Webpixels CSS you'll notice that we don't create custom styles, but rather make use of the utility classes. We are using the new Bootstrap Utility API to generate a comprehensive list of classes.
In your utility.scss you'll import all the utilities:
@import "@webpixels/css/utilities";
@import "bootstrap/scss/utilities/api";
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="https://unpkg.com/@webpixels/css@1.2.6/dist/index.css" rel="stylesheet">