8000 feat: add Bootstrap compatibility and Bootstrap theme · coreui/coreui@b2e9d03 · GitHub
[go: up one dir, main page]
Skip to content

Commit b2e9d03

Browse files
mrholekmrholek
committed
feat: add Bootstrap compatibility and Bootstrap theme
1 parent fbf88fc commit b2e9d03

File tree

11 files changed

+153
-24
lines changed

11 files changed

+153
-24
lines changed

‎build/generate-sri.mjs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@ const files = [
3333
file: 'dist/css/coreui.rtl.min.css',
3434
configPropertyName: 'css_rtl_hash'
3535
},
36+
{
37+
file: 'dist/css/themes/bootstrap/bootstrap.min.css',
38+
configPropertyName: 'css_bs_hash'
39+
},
40+
{
41+
file: 'dist/css/themes/bootstrap/bootstrap.rtl.min.css',
42+
configPropertyName: 'css_bs_rtl_hash'
43+
},
3644
{
3745
file: 'dist/js/coreui.min.js',
3846
configPropertyName: 'js_hash'
@@ -41,6 +49,14 @@ const files = [
4149
file: 'dist/js/coreui.bundle.min.js',
4250
configPropertyName: 'js_bundle_hash'
4351
},
52+
{
53+
file: 'dist/js/bootstrap.min.js',
54+
configPropertyName: 'js_bs_hash'
55+
},
56+
{
57+
file: 'dist/js/bootstrap.bundle.min.js',
58+
configPropertyName: 'js_bs_bundle_hash'
59+
},
4460
{
4561
file: 'node_modules/@popperjs/core/dist/umd/popper.min.js',
4662
configPropertyName: 'popper_hash'

‎build/rollup.config.mjs

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import banner from './banner.mjs'
99
const __dirname = path.dirname(fileURLToPath(import.meta.url))
1010

1111
const BUNDLE = process.env.BUNDLE === 'true'
12+
const BOOTSTRAP = process.env.BOOTSTRAP === 'true'
1213
const ESM = process.env.ESM === 'true'
1314

14-
let destinationFile = `coreui${ESM ? '.esm' : ''}`
15+
let destinationFile = BOOTSTRAP ? `bootstrap${ESM ? '.esm' : ''}` : `coreui${ESM ? '.esm' : ''}`
1516
const external = ['@popperjs/core']
1617
const plugins = [
1718
babel({
@@ -33,7 +34,10 @@ if (BUNDLE) {
3334
plugins.push(
3435
replace({
3536
'process.env.NODE_ENV': '"production"',
36-
preventAssignment: true
37+
preventAssignment: true,
38+
...BOOTSTRAP && {
39+
'coreui.': 'bs.'
40+
}
3741
}),
3842
nodeResolve()
3943
)
@@ -53,7 +57,7 @@ const rollupConfig = {
5357
}
5458

5559
if (!ESM) {
56-
rollupConfig.output.name = 'coreui'
60+
rollupConfig.output.name = BOOTSTRAP ? 'bootstrap' : 'coreui'
5761
}
5862

5963
export default rollupConfig

‎docs/content/getting-started/introduction.md

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,34 @@ toc: true
1414

1515
Looking to quickly add CoreUI for Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
1616

17-
### CSS
17+
18+
CoreUI was created as an extension to Bootstrap, allowing it to be used both as a standalone library and as a replacement for the currently utilized Bootstrap in your project.
19+
20+
### Standalone Library
21+
22+
CoreUI serves as an independent library, perfect for creating web UIs without Bootstrap. It provides a broad range of customizable components, enabling unique designs with high performance. Ideal for projects seeking a versatile UI toolkit.
23+
24+
#### CSS
1825

1926
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
2027

2128
```html
2229
<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
2330
```
2431

25-
### JS
32+
#### JS
2633

2734
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
2835

29-
#### Bundle
36+
##### Bundle
3037

3138
Include every CoreUI for Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `coreui.bundle.js` and `coreui.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in CoreUI, please see our [contents]({{< docsref "/getting-started/contents#precompiled-coreui" >}}) section.
3239

3340
```html
3441
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
3542
```
3643

37-
#### Separate
44+
##### Separate
3845

3946
If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins.
4047

@@ -43,11 +50,11 @@ If you decide to go with the separate scripts solution, Popper must come first (
4350
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
4451
```
4552

46-
#### Modules
53+
##### Modules
4754

4855
If you use `<script type="module">`, please refer to our [using CoreUI for Bootstrap as a module]({{< docsref "/getting-started/javascript#using-coreui-as-a-module" >}}) section.
4956

50-
#### Components
57+
##### Components
5158

5259
Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
5360

@@ -68,6 +75,39 @@ Curious which components explicitly require our JavaScript and Popper? Click the
6875
{{< /markdown >}}
6976
</details>
7077

78+
### Bootstrap Replacement
79+
80+
CoreUI enhances Bootstrap projects by adding advanced components and features, offering a smooth upgrade with minimal adjustments. It retains Bootstrap's familiar structure while introducing new possibilities for UI development.
81+
82+
#### CSS
83+
84+
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
85+
86+
```html
87+
<link href="{{< param "cdn.css_bs" >}}" rel="stylesheet" integrity="{{< param "cdn.css_bs_hash" >}}" crossorigin="anonymous">
88+
```
89+
90+
#### JS
91+
92+
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
93+
94+
##### Bundle
95+
96+
Include every CoreUI for Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `coreui.bundle.js` and `coreui.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in CoreUI, please see our [contents]({{< docsref "/getting-started/contents#precompiled-coreui" >}}) section.
97+
98+
```html
99+
<script src="{{< param "cdn.js_bs_bundle" >}}" integrity="{{< param "cdn.js_bs_bundle_hash" >}}" crossorigin="anonymous"></script>
100+
```
101+
102+
##### Separate
103+
104+
If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins.
105+
106+
```html
107+
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
108+
<script src="{{< param "cdn.js_bs" >}}" integrity="{{< param "cdn.js_bs_hash" >}}" crossorigin="anonymous"></script>
109+
```
110+
71111
## Starter template
72112

73113
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

‎docs/layouts/partials/stylesheet.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{{- end -}}
1111

1212
{{- else -}}
13-
<link href="/dist/css/coreui{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
13+
<link href="/dist/css/themes/bootstrap/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
1414
{{- end }}
1515

1616
{{- if (ne .Page.Layout "examples") }}

‎docs/static/assets/js/color-modes.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@
2424
const setTheme = theme => {
2525
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
2626
document.documentElement.setAttribute('data-coreui-theme', 'dark')
27+
document.documentElement.setAttribute('data-bs-theme', 'dark')
2728
} else {
2829
document.documentElement.setAttribute('data-coreui-theme', theme)
30+
document.documentElement.setAttribute('data-bs-theme', theme)
2931
}
3032
}
3133

‎hugo.yml

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,25 @@ params:
7777

7878
cdn:
7979
# See https://www.srihash.org for info on how to generate the hashes
80-
css: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/css/coreui.min.css"
81-
css_hash: "sha384-6YUohc5ifdoNCo0LbNiTPUr/PgSpk8g4xTkq3gTstOpNuzSI4CPX8jNul1r9kpFV"
82-
css_rtl: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/css/coreui.rtl.min.css"
83-
css_rtl_hash: "sha384-V5MCsVNDmsKrl3g/to3PDejgBIT7vBD2sPuosG9Eqpg1bJSLNtDjgfsl0paov51v"
84-
js: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/js/coreui.min.js"
85-
js_hash: "sha384-yIN7KBAWSPbR8QfA9iqq4ODblVsFM4Ib4nLpoZZi+0HxLjJUmO4WlnbH/xTHHPCA"
86-
js_bundle: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/js/coreui.bundle.min.js"
87-
js_bundle_hash: "sha384-lm/gmE8U/6Q0duWGAHKfdf8Q0rLLWtCudgbt9aLBgnb5B+iateMBMTOBGSafJbEe"
88-
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
89-
popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
90-
popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
80+
css: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/css/coreui.min.css"
81+
css_hash: "sha384-6YUohc5ifdoNCo0LbNiTPUr/PgSpk8g4xTkq3gTstOpNuzSI4CPX8jNul1r9kpFV"
82+
css_rtl: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/css/coreui.rtl.min.css"
83+
css_rtl_hash: "sha384-zVBhLQxIHngBI7Kg1aBXmMkYI76lFkTPjokwNzQSaM00LiM4V+0cxiZDUHDGw5XK"
84+
css_bs: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/css/themes/bootstrap/bootstrap.min.css"
85+
css_bs_hash: "sha384-V3TuLN8H5X43hYx6PWmabSdi9zr/CU7dKp7nKooJrtKEvW5Ti3TaiVZXAEWLt9jL"
86+
css_bs_rtl: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/css/themes/bootstrap/bootstrap.rtl.min.css"
87+
css_bs_rtl_hash: "sha384-tSC0G8nhv5Nplcn4ja97Oo948TmL1dTxmYU5/O9PSK6nYNY0NoF8G4qiWzsZafq8"
88+
js: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/js/coreui.min.js"
89+
js_hash: "sha384-YWUPm1e5j5w+wmURZmLUWOMDRZPnXFe0Au6rYTEckwBldednKmzKbXkDSRVxeYai"
90+
js_bundle: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/js/coreui.bundle.min.js"
91+
js_bundle_hash: "sha384-/tHjBxlzVOcREhaYewbkKuG3Zh2Doa/UnZL3cAyG2nm++ImxONuOuw6dZCVanynO"
92+
js_bs: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/js/bootstrap.min.js"
93+
js_bs_hash: "sha384-Aspk+xAY/OXrXnW6KqK66JSNlAn0k4F6WRKYx0j6yULdbXu99mu/erVsYVkQbD6R"
94+
js_bs_bundle: "https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0-rc.1/dist/js/bootstrap.bundle.min.js"
95+
js_bs_bundle_hash: "sha384-MJflYpZLG2kcBZKA3jC/ULNEOcikn7PoXCl9ffq2MHgJhq+UxtT0q9vSV1kEThwr"
96+
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
97+
popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
98+
popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
9199

92100
anchors:
93101
min: 2

‎package.json

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,28 @@
2525
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --ca 10000 che --cache-location .cache/.stylelintcache",
2626
"css-lint-vars": "fusv scss/ docs/assets/scss/",
2727
"css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
28-
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
29-
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
28+
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/**/*.css\" \"!dist/css/**/*.min.css\" \"!dist/css/**/*rtl*.css\"",
29+
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/**/*rtl.css\" \"!dist/css/**/*.min.css\"",
3030
"css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
31-
"css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
31+
"css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/**/*.css\" \"!dist/css/**/*.rtl*.css\" \"!dist/css/**/*.min.css\"",
3232
"css-test": "jasmine --config=scss/tests/jasmine.js",
3333
"js": "npm-run-all js-compile js-minify",
3434
"js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
3535
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
3636
"js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
37+
"js-compile-standalone-bootstrap": "rollup --environment BOOTSTRAP:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
38+
"js-compile-standalone-bootstrap-esm": "rollup --environment ESM:true,BOOTSTRAP:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
3739
"js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap",
40+
"js-compile-bundle-bootstrap": "rollup --environment BOOTSTRAP:true,BUNDLE:true --config build/rollup.config.mjs --sourcemap",
3841
"js-compile-plugins": "node build/build-plugins.mjs",
3942
"js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.mjs,.md .",
4043
"js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
4144
"js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.js.map,includeSources,url=coreui.min.js.map\" --output dist/js/coreui.min.js dist/js/coreui.js",
4245
"js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.esm.js.map,includeSources,url=coreui.esm.min.js.map\" --output dist/js/coreui.esm.min.js dist/js/coreui.esm.js",
4346
"js-minify-bundle": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.bundle.js.map,includeSources,url=coreui.bundle.min.js.map\" --output dist/js/coreui.bundle.min.js dist/js/coreui.bundle.js",
47+
"js-minify-standalone-bootstrap": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
48+
"js-minify-standalone-bootstrap-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
49+
"js-minify-bundle-bootstrap": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
4450
"js-test": "npm-run-all --aggregate-output --parallel js-test-karma js-test-jquery js-test-integration-*",
4551
"js-debug": "cross-env DEBUG=true npm run js-test-karma",
4652
"js-test-karma": "karma start js/tests/karma.conf.js",

‎scss/themes/bootstrap/_variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
$variable-prefix: cui- !default; // Deprecated in v4.2.6 for the shorter `$prefix`
2+
$prefix: $variable-prefix !default;

‎scss/themes/bootstrap/bootstrap.rtl.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@import "variables";
2+
3+
$enable-ltr: false !default;
4+
$enable-rtl: true !default;
5+
6+
@import "mixins/banner";
7+
@include bsBanner("");
8+
9+
@import "../../../node_modules/bootstrap/scss/bootstrap";
10+
@import "../../variables";
11+
12+
/* rtl:begin:ignore */
13+
@import "../../mixins/avatar";
14+
@import "../../mixins/icon";
15+
@import "../../mixins/ltr-rtl";
16+
17+
@import "../../avatar";
18+
@import "../../callout";
19+
@import "../../footer";
20+
@import "../../header";
21+
@import "../../icon";
22+
@import "../../sidebar";
23+
/* rtl:end:ignore */

‎scss/themes/bootstrap/bootstrap.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@import "variables";
2+
3+
@import "mixins/banner";
4+
@include bsBanner("");
5+
6+
@import "../../../node_modules/bootstrap/scss/bootstrap";
7+
@import "../../variables";
8+
9+
/* rtl:begin:ignore */
10+
@import "../../mixins/avatar";
11+
@import "../../mixins/icon";
12+
@import "../../mixins/ltr-rtl";
13+
14+
@import "../../avatar";
15+
@import "../../callout";
16+
@import "../../footer";
17+
@import "../../header";
18+
@import "../../icon";
19+
@import "../../sidebar";
20+
/* rtl:end:ignore */

‎scss/themes/bootstrap/mixins/_banner.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@mixin bsBanner($file) {
2+
/*!
3+
* CoreUI for Bootstrap #{$file} v5.0.0-rc.1 (https://coreui.io/bootstrap/)
4+
* Copyright (c) 2023 creativeLabs Łukasz Holeczek
5+
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
6+
*/
7+
}
8+

0 commit comments

Comments
 (0)
0