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

Commit 5a86f47

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

19 files changed

+65
-3
lines changed

‎build/postcss.config.mjs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ export default context => {
1111
autoprefixer: {
1212
cascade: false
1313
},
14-
'postcss-combine-duplicated-selectors': {}
14+
'postcss-combine-duplicated-selectors': {},
15+
rtlcss: context.env === 'RTL'
1516
}
1617
}
1718
}

‎docs/content/components/alerts.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,8 @@ When an alert is dismissed, the element is completely removed from the page stru
145145

146146
## JavaScript behavior
147147

148+
{{< bootstrap-compatibility >}}
149+
148150
### Initialize
149151

150152
Initialize elements as alerts

‎docs/content/components/carousel.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,8 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t
294294

295295
## Usage
296296

297+
{{< bootstrap-compatibility >}}
298+
297299
### Via data attributes
298300

299301
Utilize data attributes to control the position of the carousel. `data-coreui-slide` allows the keywords `prev` or `next`, which changes the slide position corresponding to its current position. Alternatively, use `data-coreui-slide-to` to pass a raw slide index to the carousel `data-coreui-slide-to="2"`, which moves the slide position to a particular index beginning with `0`.

‎docs/content/components/collapse.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@ If your control element is targeting a single collapsible element – i.e., the
106106
Note that CoreUI for Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
107107
## Usage
108108

109+
{{< bootstrap-compatibility >}}
110+
109111
The collapse plugin utilizes a few classes to handle the heavy lifting:
110112

111113
- `.collapse` hides the content

‎docs/content/components/dropdowns.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -997,6 +997,8 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
997997

998998
## Usage
999999

1000+
{{< bootstrap-compatibility >}}
1001+
10001002
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-coreui-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
10011003

10021004
{{< callout info >}}

‎docs/content/components/list-group.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,8 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
303303

304304
## JavaScript behavior
305305

306+
{{< bootstrap-compatibility >}}
307+
306308
Use the tab JavaScript plugin—include it individually or through the compiled `coreui.js` file—to extend our list group to create tabbable panes of local content.
307309

308310
<div class="docs-example" role="tabpanel">

‎docs/content/components/modal.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -757,6 +757,8 @@ Another override is the option to pop up a modal that covers the user viewport,
757757

758758
## Usage
759759

760+
{{< bootstrap-compatibility >}}
761+
760762
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
761763

762764
### Via data attributes

‎docs/content/components/navs-tabs.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
349349

350350
## JavaScript behavior
351351

352+
{{< bootstrap-compatibility >}}
353+
352354
Use the tab JavaScript plugin—include it individually or through the compiled `coreui.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
353355

354356
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

‎docs/content/components/offcanvas.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,8 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
250250

251251
## Usage
252252

253+
{{< bootstrap-compatibility >}}
254+
253255
The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
254256

255257
- `.offcanvas` hides the content

‎docs/content/components/popovers.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,8 @@ For disabled popover triggers, you may also prefer `data-coreui-trigger="hover f
133133

134134
## Usage
135135

136+
{{< bootstrap-compatibility >}}
137+
136138
Enable popovers via JavaScript:
137139

138140
```js

‎docs/content/components/scrollspy.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,8 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
227227

228228
## Usage
229229

230+
{{< bootstrap-compatibility >}}
231+
230232
### Via data attributes
231233

232234
To easily add scrollspy behavior to your topbar navigation, add `data-coreui-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-coreui-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.

‎docs/content/components/sidebar.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,8 @@ By default placement for sidebar components is on the left of the viewport, but
239239

240240
## JavaScript behavior
241241

242+
{{< bootstrap-compatibility >}}
243+
242244
### Methods
243245

244246
You can create a sidebar instance with the sidebar constructor, for example:

‎docs/content/components/toasts.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,8 +315,11 @@ When using `autohide: false`, you must add a close button to allow users to dism
315315
{{< /example >}}
316316

317317
While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
318+
318319
## Usage
319320

321+
{{< bootstrap-compatibility >}}
322+
320323
Initialize toasts via JavaScript:
321324

322325
```js

‎docs/content/components/tooltips.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,8 @@ With an SVG:
123123

124124
## Usage
125125

126+
{{< bootstrap-compatibility >}}
127+
126128
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
127129

128130
Trigger the tooltip via JavaScript:

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ Curious which components explicitly require our JavaScript and Popper? Click the
7979

8080
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.
8181

82+
{{< bootstrap-compatibility >}}
83+
8284
#### CSS
8385

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

‎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/themes/bootstrap/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
13+
<link href="/dist/css/coreui{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
1414
{{- end }}
1515

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

‎docs/layouts/shortcodes/bootstrap-compatibility.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="docs-callout docs-callout-warning">
2+
<p>
3+
<strong>Heads up!</strong> In our documentation, all examples show <a href="{{ .Site.BaseURL }}getting-started/introduction/#standalone-library">standard CoreUI implementation</a>. If you are using a <a href="{{ .Site.BaseURL }}getting-started/introduction/#bootstrap-replacement">Bootstrap-compatible</a> version of CoreUI, remember to use the following changes:
4+
<ul>
5+
<li>In the constructor, please use <strong>bootstrap</strong> instead of <strong>coreui</strong>. For example, <code>new bootstrap.Alert(...)</code> instead of <code>new coreui.Alert(...)</code></li>
6+
<li>In events, please use <strong>bs</strong> instead of <strong>coreui</strong>, for example <code>close.bs.alert</code> instead of <code>close.coreui.alert</code></li>
7+
<li>In data attributes, please use <strong>bs</strong> instead of <strong>coreui</strong>. For example, <code>data-bs-toggle="..."</code> instead of <code>data-coreui-toggle="..."</code></li>
8+
</ul>
9+
</p>
10+
</div>

‎package-lock.json

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@
1919
"scripts": {
2020
"start": "npm-run-all --parallel watch docs-serve",
2121
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
22-
"css": "npm-run-all css-compile css-prefix css-minify",
22+
"css": "npm-run-all css-compile css-prefix css-rtl css-minify",
2323
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
24+
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css/themes/bootstrap/\" --ext \".rtl.css\" \"dist/css/themes/bootstrap/*.css\" \"!dist/css/themes/bootstrap/*.min.css\" \"!dist/css/themes/bootstrap/*.rtl.css\"",
2425
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
2526
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
2627
"css-lint-vars": "fusv scss/ docs/assets/scss/",
@@ -108,6 +109,7 @@
108109
"@rollup/plugin-node-resolve": "^15.2.3",
109110
"@rollup/plugin-replace": "^5.0.5",
110111
"autoprefixer": "^10.4.16",
112+
"bootstrap": "^5.3.2",
111113
"bundlewatch": "^0.3.3",
112114
"clean-css-cli": "^5.6.2",
113115
"cross-env": "^7.0.3",

0 commit comments

Comments
 (0)
0