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 2 months 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 (over 3 years ago)
• Last Synced: 2024-10-30T05:43:04.003Z (about 2 months 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