How to Add Any CSS Framework to Your Project. Part 1

There are several ways to integrate a CSS library into your project. By “CSS library,” I mean any modern CSS framework or UI library, such as Bootstrap, NG-Zorro, PrimeNG, etc. While all these methods work, many do not offer great flexibility or support deep customization of the chosen framework.

To build a robust foundation for your design system and ensure easy future customization, it’s best to use the source code styles (SASS or LESS files) instead of the minified version. This approach provides a more convenient workflow, reduces unnecessary code, and increases flexibility.

This guide assumes that you have a basic understanding of Angular and package managers like Yarn or npm.

For demonstration purposes, we will use Bootstrap as an example UI library and Angular as the front-end framework. However, the same approach can be applied to almost any UI library since they follow similar development paradigms.

Creating a New Angular Project

The first step is to create a new Angular project. Detailed instructions can be found in the official Angular documentation, but here are the essential commands (assuming Yarn is used as the package manager):

yarn global add @angular/cli

ng new <project-name>

After running these commands, a new Angular project will be created in the specified folder.

Adding the Bootstrap Library

Next, we need to add the Bootstrap library to our project. Several npm packages are available, but we will use NG Bootstrap, as it is the most popular version for Angular (with over 450,000 weekly downloads). Additional installation details are available on the official NG Bootstrap website.

To add it to your Angular project, run the following command inside the project folder:

ng add @ng-bootstrap/ng-bootstrap

Modifying the Setup

Now that we have an Angular project with Bootstrap installed as a UI library, we need to make a few modifications to optimize the setup.

1. Create a new /src/styles folder to store all project styles.

2. Add two new files inside this folder: app.scss and vendor.scss. Splitting styles into these two files keeps third-party styles separate from custom styles, making maintenance easier. The updated structure will be:

/src  
  /styles    
    ├── app.scss    
    ├── vendor.scss  
  styles.scss

3. Modify /src/styles.scss to import the newly created style files:

@import "styles/vendor";
@import "styles/app";

4. Update /src/styles/vendor.scss to include only the required Bootstrap components. You can comment out any unused components to reduce the final bundle size:

@import "bootstrap/scss/mixins/banner";
@include bsBanner("");

// Bootstrap's variables and mixins
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
// @import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Bootstrap's core
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";

// Bootstrap's form elements
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
// @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/button-group";

// Bootstrap's components
// @import "bootstrap/scss/tables";
// @import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
// @import "bootstrap/scss/accordion";
// @import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
// @import "bootstrap/scss/tooltip";
// @import "bootstrap/scss/popover";
// @import "bootstrap/scss/carousel";
// @import "bootstrap/scss/spinners";
// @import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/placeholders";

// Bootstrap's helpers
@import "bootstrap/scss/helpers";

// Bootstrap's utilities
@import "bootstrap/scss/utilities/api";

5. Leave /src/styles/app.scss empty for now. This file will store custom application styles in the future.

Conclusion

By following this setup, you achieve:

1. A new Angular project with Bootstrap installed and ready to use.

2. The ability to enable or disable specific Bootstrap components via the vendor.scss file, reducing the final bundle size.

3. A structured approach to styling, allowing you to easily override Bootstrap variables for deep customization.

In the next article, we will explore customizing Bootstrap variables to give you full control over your application’s design while keeping the codebase clean and efficient. Stay tuned!