From 5cce5985b07bdae8f3223262540484b431b66fcb Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Tue, 21 Jan 2025 00:46:10 -0500
Subject: [PATCH] docs: replace BS with Default SlickGrid Theme

---
 docs/getting-started/quick-start.md |  7 ++++++-
 docs/styling/styling.md             | 12 +++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md
index fae8dfbc7..3a0cfe026 100644
--- a/docs/getting-started/quick-start.md
+++ b/docs/getting-started/quick-start.md
@@ -20,18 +20,23 @@ Default compiled `css` (if you use the plain Bootstrap Theme CSS, you could simp
 
 ##### WebPack
 ```typescript
+// Bootstrap is optional, you can use any framework
 import 'bootstrap/dist/css/bootstrap.css';
 import 'multiple-select-modified/src/multiple-select.css';
 
 // if you use CSS instead of SASS
+import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-default.css';
+// or other available themes
 import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
+import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-material.css';
+import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
 ```
 
 #### SASS (scss)
 You could also compile the SASS files with your own customization, for that simply take any of the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) (without the `!default` flag) variable from the file and make sure to import the Bootstrap Theme afterward. For example, you could modify your `style.scss` with the following changes:
 
 ```scss
-@use '../node_modules/@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+@use '../node_modules/@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-default.scss' with (
   $cell-odd-background-color: lightyellow,
   $row-mouse-hover-color: lightgreen
 );
diff --git a/docs/styling/styling.md b/docs/styling/styling.md
index 23493da0d..b10b32c5b 100644
--- a/docs/styling/styling.md
+++ b/docs/styling/styling.md
@@ -16,10 +16,15 @@ Default compiled `css` (if you use the plain Bootstrap Theme CSS, you could simp
 ```
 ##### WebPack
 ```typescript
+// Bootstrap is optional, you can use other framework
 import 'bootstrap/dist/css/bootstrap.css';
 
 // if you use CSS instead of SASS
+import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-default.css';
+// or other themes
 import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
+import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-material.css';
+import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
 ```
 
 ### Using built-in Themes
@@ -28,9 +33,10 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 ##### with CSS
 ```scss
 /* style.css */
-@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
+@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-default.css';
 
 // or other Themes
+@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
 @use '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
 @use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
 ```
@@ -38,7 +44,7 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 ##### with SASS
 ```scss
 /* style.scss */
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-default.scss' with (
   $slick-primary-color: green,
   $slick-cell-odd-background-color: lightyellow,
   $slick-row-mouse-hover-color: lightgreen
@@ -73,7 +79,7 @@ You could use Custom SVGs and create your own Theme and/or a different set of SV
 $primary-color: blue;
 
 // then on the last line, import the Theme that you wish to override
-@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-default.scss' with (
   $slick-primary-color: $primary-color,
   $slick-icon-group-color: $primary-color,
   $slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",