How to add any CSS framework to your project. Part 2

In the previous part, we explored how to set up a UI library in your project using Bootstrap as an example. The result was a new Angular project with the NG Bootstrap package installed and the ability to add or remove selected components.

SCSS variables

Typically, I use the following structure for global styles in any project. This setup allows for a highly flexible, easy-to-read, and maintainable style system, which is crucial for large projects that may last several months or even years.

/src
  /styles
    /common
    /components
    /forms
    /mixins
    /variables
    /vendor
    ├── app.scss
    ├── vendor.scss
  styles.scss

Let’s review each of these folders:

• Common: contains typography styles, imported fonts, icons, and core styles used across the project, such as container.scss or helpers.scss.

• Components: stores all component-specific styles.

• Forms: includes styles for form elements that need to be customized beyond what Bootstrap variables allow.

• Mixins: holds mixins for reusable style patterns. This folder is optional if you don’t use custom mixins.

• Variables: stores Bootstrap variables along with any additional variables required for the project.

• Vendor: contains customized Bootstrap components that cannot be adjusted via Bootstrap variables.

We will explore these in detail in the next article. For now, all folders should remain empty except for the variables folder.

Bootstrap variables

The most important part of our setup is the Bootstrap variables file. Like many other CSS frameworks, Bootstrap has numerous internal variables that serve as a foundation for our design system. This allows us to customize many elements without writing additional CSS. The variables file contains over 1000 options for components, enabling us to modify them efficiently.

For example, here’s a snippet dedicated to button styles, showing how you can customize colors, padding, font sizes, and more:

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

// scss-docs-start btn-variables
$btn-color:                   var(--#{$prefix}body-color) !default;
$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;

$btn-border-width:            $input-btn-border-width !default;

Adding Bootstrap variables to your project

To use Bootstrap variables, copy _variables.scss into your project from the Bootstrap package:

/node_modules/bootstrap/scss/_variables.scss

Rename it and place it in:

/src/styles/variables/_bootstrap.scss

Important Note: Remove all !default flags after copying the file. These flags prevent variables from being overwritten, which would stop your changes from taking effect. You can read more about this in the official Sass documentation.

Next, modify the vendor.scss file to include the following:

...
@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";

// custom variables
@import 'variables/_bootstrap';
...

This ensures that we first import Bootstrap’s default variables to maintain compatibility with future versions. Then, we import our custom _bootstrap.scss file to override these variables.

Customizing Bootstrap variables

Let’s modify the primary color for our project. In _bootstrap.scss, update the following:

...
$primary: $red; // change it from $blue to $red 
$secondary: $gray-600;
$success: $green;
...

Now, the primary button’s background color changes from blue to red without additional CSS. More importantly, the entire design system updates accordingly, affecting hover, active, and disabled states, as well as all Bootstrap components like inputs, checkboxes, and date pickers that rely on $primary variable.

Angular component styles

In Angular, each component can have not only an HTML template but also its own CSS styles, written in SCSS or LESS. Styles defined within a component’s styles file apply only to that specific component, without affecting global styles or other pages.

However, when building a Design System, it’s important to reuse SCSS variables across your project. In our case, it’s crucial to make Bootstrap variables accessible within component styles. This approach allows you to modify and customize styles throughout your project simply by updating a variable, rather than writing additional CSS.

To achieve this, you need to import the file containing all your variables into each Angular component’s styles file:

@import "variables/bootstrap";

// you can use Bootstrap variables inside your component
.hero {
  background-color: $primary;    
  color: $white;    
  padding: 20px;
}

To avoid using relative paths in imports, update angular.json:

"build": {  
  ...  
  "options": {    
    ...    
    "stylePreprocessorOptions": {      
      "includePaths": [        
        "src/styles/"      
      ],    
    }    
    ...  
  }
}

Now, update styles.scss:

@import "vendor.scss";
@import "app.scss";

With this setup, you can use Bootstrap variables in any Angular component without specifying relative paths.

Using the same approach in NX

For projects using NX architecture, the setup is similar but has its own nuances. Instead of storing styles in an app-specific folder, create a shared library for styles. Then, modify project.json:

Nx is a powerful monorepo framework for managing multiple apps within a single repo. It provides tooling for code sharing, optimized builds, and modular architecture, making it ideal for large-scale Angular applications.

"build": {  
  ...  
  "options": {    
    ...    
    "stylePreprocessorOptions": {      
      "includePaths": [        
        // ui-styles is the name of the library        
        "libs/ui-styles/src/lib"      
      ],    
    }    
    ...  
  }
}

This ensures that styles and variables are shared across multiple apps and libraries within the Nx workspace.

Conclusion

In this article, we reviewed how to use Bootstrap variables in your project. By the end, you should have:

1. A structured approach to organizing styles.

2. A centralized file for managing Bootstrap variables, making customization easier.

3. The ability to reuse Bootstrap variables within Angular component styles.

In the next post, we’ll discuss the best ways to modify form elements and Bootstrap components when changes cannot be made via variables. Stay tuned!