{"id":453523,"date":"2025-03-27T15:01:32","date_gmt":"2025-03-27T15:01:32","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=453523"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=453523","title":{"rendered":"How to Add Any CSS Framework to Your Project. Part 1<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\"Example<\/p>\n
Example of a Design System<\/figcaption><\/div>\n<\/figure>\n

There are several ways to integrate a CSS library into your project. By \u201cCSS library,\u201d 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.<\/p>\n

To build a robust foundation for your design system and ensure easy future customization, it\u2019s 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.<\/p>\n

\n

This guide assumes that you have a basic understanding of Angular and package managers like Yarn or npm.<\/p>\n<\/blockquote>\n

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.<\/p>\n

Creating a New Angular Project<\/h2>\n

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

yarn global add @angular\/cli<\/code><\/pre>\n
ng new <project-name><\/code><\/pre>\n
After running these commands, a new Angular project will be created in the specified folder.<\/p>\n
Adding the Bootstrap Library<\/h2>\n
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\u00a0NG Bootstrap website<\/a>.<\/p>\n
To add it to your Angular project, run the following command inside the project folder:<\/p>\n
ng add @ng-bootstrap\/ng-bootstrap<\/code><\/pre>\n
Modifying the Setup<\/h2>\n
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.<\/p>\n
1. Create a new\u00a0\/src\/styles<\/code>\u00a0<\/strong>folder to store all project styles.<\/p>\n
2. Add two new files inside this folder:\u00a0app.scss<\/code>\u00a0and\u00a0vendor.scss<\/code>. Splitting styles into these two files keeps third-party styles separate from custom styles, making maintenance easier. The updated structure will be:<\/p>\n
\/src     \/styles         \u251c\u2500\u2500 app.scss         \u251c\u2500\u2500 vendor.scss     styles.scss<\/code><\/pre>\n
3. Modify\u00a0\/src\/styles.scss<\/code>\u00a0to import the newly created style files:<\/p>\n
@import \"styles\/vendor\"; @import \"styles\/app\";<\/code><\/pre>\n
4. Update\u00a0\/src\/styles\/vendor.scss<\/code>\u00a0to include only the required Bootstrap components. You can comment out any unused components to reduce the final bundle size:<\/p>\n
@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\";<\/code><\/pre>\n
5. Leave\u00a0\/src\/styles\/app.scss<\/code>\u00a0empty for now. This file will store custom application styles in the future.<\/p>\n
Conclusion<\/h2>\n
By following this setup, you achieve:<\/p>\n
    \n
  1. \n
    A new Angular project with Bootstrap installed and ready to use.<\/p>\n<\/li>\n
  2. \n
    The ability to enable or disable specific Bootstrap components via the\u00a0vendor.scss<\/code>\u00a0file, reducing the final bundle size.<\/p>\n<\/li>\n
  3. \n
    A structured approach to styling, allowing you to easily override Bootstrap variables for deep customization.<\/p>\n<\/li>\n<\/ol>\n
    In the next article, we will explore customizing Bootstrap variables to give you full control over your application\u2019s design while keeping the codebase clean and efficient. Stay tuned!<\/em><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
    <\/div>\n

     \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/894970\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    <\/div>\n
    \n
    \n
    \n
    \n
    \n
    Example of a Design System<\/figcaption><\/div>\n<\/figure>\n
    There are several ways to integrate a CSS library into your project. By \u201cCSS library,\u201d 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.<\/p>\n
    To build a robust foundation for your design system and ensure easy future customization, it\u2019s 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.<\/p>\n
    \n
    This guide assumes that you have a basic understanding of Angular and package managers like Yarn or npm.<\/p>\n<\/blockquote>\n
    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.<\/p>\n
    Creating a New Angular Project<\/h2>\n
    The first step is to create a new Angular project. Detailed instructions can be found in the official\u00a0Angular documentation<\/a>, but here are the essential commands (assuming Yarn is used as the package manager):<\/p>\n
    yarn global add @angular\/cli<\/code><\/pre>\n
    ng new <project-name><\/code><\/pre>\n
    After running these commands, a new Angular project will be created in the specified folder.<\/p>\n
    Adding the Bootstrap Library<\/h2>\n
    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\u00a0NG Bootstrap website<\/a>.<\/p>\n
    To add it to your Angular project, run the following command inside the project folder:<\/p>\n
    ng add @ng-bootstrap\/ng-bootstrap<\/code><\/pre>\n
    Modifying the Setup<\/h2>\n
    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.<\/p>\n
    1. Create a new\u00a0\/src\/styles<\/code>\u00a0<\/strong>folder to store all project styles.<\/p>\n
    2. Add two new files inside this folder:\u00a0app.scss<\/code>\u00a0and\u00a0vendor.scss<\/code>. Splitting styles into these two files keeps third-party styles separate from custom styles, making maintenance easier. The updated structure will be:<\/p>\n
    \/src     \/styles         \u251c\u2500\u2500 app.scss         \u251c\u2500\u2500 vendor.scss     styles.scss<\/code><\/pre>\n
    3. Modify\u00a0\/src\/styles.scss<\/code>\u00a0to import the newly created style files:<\/p>\n
    @import \"styles\/vendor\"; @import \"styles\/app\";<\/code><\/pre>\n
    4. Update\u00a0\/src\/styles\/vendor.scss<\/code>\u00a0to include only the required Bootstrap components. You can comment out any unused components to reduce the final bundle size:<\/p>\n
    @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\";<\/code><\/pre>\n
    5. Leave\u00a0\/src\/styles\/app.scss<\/code>\u00a0empty for now. This file will store custom application styles in the future.<\/p>\n
    Conclusion<\/h2>\n
    By following this setup, you achieve:<\/p>\n
      \n
    1. \n
      A new Angular project with Bootstrap installed and ready to use.<\/p>\n<\/li>\n
    2. \n
      The ability to enable or disable specific Bootstrap components via the\u00a0vendor.scss<\/code>\u00a0file, reducing the final bundle size.<\/p>\n<\/li>\n
    3. \n
      A structured approach to styling, allowing you to easily override Bootstrap variables for deep customization.<\/p>\n<\/li>\n<\/ol>\n
      In the next article, we will explore customizing Bootstrap variables to give you full control over your application\u2019s design while keeping the codebase clean and efficient. Stay tuned!<\/em><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
      <\/div>\n

       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/894970\/<\/a>
      <\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-453523","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/453523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=453523"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/453523\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=453523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=453523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=453523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}