https://github.com/bootscore/bootstrap-5-sass-template-for-vscode

Create and compile your own bootstrap.min.css with this template. Compiled CSS can be used in bootScore theme. This template is not needed anymore since bootScore 5.1.1.1.
https://github.com/bootscore/bootstrap-5-sass-template-for-vscode

bootscore bootstrap bootstrap5 compiler sass visual-studio-code

Last synced: about 14 hours ago
JSON representation

Create and compile your own bootstrap.min.css with this template. Compiled CSS can be used in bootScore theme. This template is not needed anymore since bootScore 5.1.1.1.

• Host: GitHub
• URL: https://github.com/bootscore/bootstrap-5-sass-template-for-vscode
• Owner: bootscore
• License: mit
• Created: 2021-04-26T10:55:06.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-10T08:12:49.000Z (about 3 years ago)
• Last Synced: 2024-10-30T05:43:04.003Z (8 days ago)
• Topics: bootscore, bootstrap, bootstrap5, compiler, sass, visual-studio-code
• Language: SCSS
• Homepage:
• Size: 971 KB
• Stars: 8
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bootstrap 5 Sass Template for Visual Studio Code Editor

Create and compile your own bootstrap.min.css with this template. Compiled CSS can be used in [bootScore](https://github.com/crftwrk/bootscore) theme.

Documentation: https://bootscore.me/documentation/custom-bootstrap-min-css/

## General Usage

1. Download file and unzip

2. Download and install Visual Studio Code Editor https://code.visualstudio.com/download

3. Open Visual Studio Code Editor and install Live Sass Compiler Extension https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

4. Open file folder in Visual Studio Code Editor

5. Open index.html in browser

6. Edit variables in folder /dist/css/bootstrap.scss. Available variables can be found in folder /scss/_variables.scss

7. Save file

8. Klick "Watch Sass" in the blue banner in VSCode window

9. Enjoy your new Bootstrap

## Usage in bootscore-child / bootcommerce-child

1. Copy your generated bootstrap.min.css, bootstrap.min.css.map (optional), bootstrap.scss (optional, in case you want to edit later, store a copy of it) in folder /css/lib/ in child theme.

2. Insert following snippet in child-theme's functions.php:

```php

// Overide bootstrap.min.css in child-theme

function bootscore_replace_bootstrap() {

    // Dequeue parent-theme bootstrap.min.css

    wp_dequeue_style( 'bootstrap' );

    wp_deregister_style( 'bootstrap' );

    // Enqueue new bootstrap.min.css in child-theme

    wp_enqueue_style( 'child-theme-bootstrap', get_stylesheet_directory_uri() .'/css/lib/bootstrap.min.css' , array('parent-style'));

}

add_action( 'wp_enqueue_scripts', 'bootscore_replace_bootstrap', 20 );

```

3. Enjoy your new bootScore