Skip to content

Prepare this repository for Bootstrap v6 #997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
julien-deramond wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Prepare this repository for Bootstrap v6 #997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ jobs:
- "color-modes"
- "icons-font"
- "parcel"
- "react-nextjs"
- "sass-js"
- "sass-js-esm"
- "starter"
Expand Down
10 changes: 7 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<p align="center">
<a href="https://getbootstrap.com/">
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
<img src="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
</a>
</p>

Expand All @@ -9,9 +9,14 @@
<p align="center">
Functional examples for building with Bootstrap using popular tools and frameworks.
<br>
<a href="https://getbootstrap.com/docs/"><strong>Explore Bootstrap docs »</strong></a>
<a href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/"><strong>Explore Bootstrap docs »</strong></a>
</p>

> [!IMPORTANT]
> This `v6-dev` branch previews [Bootstrap v6](https://github.com/twbs/bootstrap/tree/v6-dev), which is still in early alpha development. Expect frequent, breaking changes, and expect this branch to lag behind [`main`](https://github.com/twbs/examples/tree/main) (which tracks the stable Bootstrap 5 release) while both are maintained in parallel. See [issue #996](https://github.com/twbs/examples/issues/996) for background.
>
> The React example is temporarily removed from this branch: it depends on [React Bootstrap](https://react-bootstrap.github.io/), which has no Bootstrap v6-compatible release yet and renders its own v5 markup, so it can't work against v6's CSS. It'll come back once React Bootstrap ships v6 support, or as a rewrite using plain Bootstrap markup instead. Find it on [`main`](https://github.com/twbs/examples/tree/main/react-nextjs) in the meantime.

## Directory

- [Starter](starter/) – CDN links for our CSS and JS
Expand All @@ -20,7 +25,6 @@
- [Color modes](color-modes/) – Color mode support and color mode picker built on our Sass & ESM JS example
- [Bootstrap Icons font](icons-font/) - Import and compile Sass, Stylelint, PurgeCSS, and our icon font
- [Parcel](parcel/) - Sass, JS via Parcel
- [React](react-nextjs/) - Sass with React Bootstrap components using React and Next.js
- [Vite](vite/) - Sass, JS via Vite
- [Vue](vue/) - Sass, JS via Vue/Vite
- [Webpack](webpack/) - Import and bundle Sass and JS with Webpack
Expand Down
8 changes: 6 additions & 2 deletions color-modes/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
# Bootstrap Color Modes

Include [Bootstrap](https://getbootstrap.com)'s source Sass and an ES Module version of our JavaScript plugins, plus a pre-release version of the new color modes functionality. Also includes the [Autoprefixer](https://github.com/postcss/autoprefixer) for cross-browser CSS, [Stylelint](https://stylelint.io) for Sass code quality, and [Popper](https://popper.js.org), a peer dependency of Bootstrap's JS used to position dropdowns, popovers, and tooltips.
> [!IMPORTANT]
> This is a preview of [Bootstrap v6](https://github.com/twbs/bootstrap/tree/v6-dev), which is still in early alpha development. Expect frequent, breaking changes. For the stable Bootstrap 5 version of this example, see the [`main` branch](https://github.com/twbs/examples/tree/main/color-modes).

Include [Bootstrap](https://getbootstrap.com)'s source Sass and an ES Module version of our JavaScript plugins, plus our color modes functionality. Also includes the [Autoprefixer](https://github.com/postcss/autoprefixer) for cross-browser CSS, [Stylelint](https://stylelint.io) for Sass code quality, and [Floating UI](https://floating-ui.com), a peer dependency of Bootstrap's JS used to position menus, popovers, and tooltips.

## Edit in browser

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html)
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/twbs/examples/tree/v6-dev/color-modes?file=index.html)

## How to use

```sh
git clone https://github.com/twbs/examples.git
cd examples/color-modes/
git checkout v6-dev
npm install
npm start
```
106 changes: 50 additions & 56 deletions color-modes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,106 +27,100 @@
</svg>

<div class="container py-4 px-3 mx-auto">
<header class="d-md-flex align-items-md-center pb-3 mb-5 border-bottom">
<header class="md:d-flex md:align-items-center pb-3 mb-5 border-bottom">
<h1 class="h4 me-auto">
<a href="/" class="d-flex align-items-center text-body text-decoration-none">
<a href="/" class="d-flex align-items-center fg-body text-decoration-none">
<svg class="d-inline-block me-2" width="40" height="32"><use href="#bootstrap"></use></svg>
<span>Color Modes</span>
</a>
</h1>
<div class="d-flex align-items-center gap-3">
<div class="d-flex align-items-center dropdown color-modes">
<button class="btn btn-link px-0 text-decoration-none dropdown-toggle d-flex align-items-center"
<div class="d-flex align-items-center color-modes">
<button class="btn-link px-0 text-decoration-none d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-display="static">
data-bs-toggle="menu"
data-bs-placement="bottom-end">
<svg class="bi my-1 me-2 theme-icon-active"><use href="#circle-half"></use></svg>
<span class="ms-2" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
</ul>
<div class="menu" aria-labelledby="bd-theme" style="--menu-min-width: 8rem;">
<button type="button" class="menu-item d-flex align-items-center" data-bs-theme-value="light">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
<button type="button" class="menu-item d-flex align-items-center" data-bs-theme-value="dark">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
<button type="button" class="menu-item d-flex align-items-center active" data-bs-theme-value="auto">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</div>
</div>
<a href="https://github.com/twbs/examples/tree/main/color-modes/" target="_blank" rel="noopener" class="text-decoration-none">View on GitHub</a>
<a href="https://github.com/twbs/examples/tree/v6-dev/color-modes/" target="_blank" rel="noopener" class="text-decoration-none">View on GitHub</a>
</div>
</header>

<h1>Get started with Bootstrap color modes</h1>
<div class="col-lg-8 px-0">
<p class="fs-4">You've successfully loaded up the Bootstrap Color Modes example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 5</a>, Sass, and <a href="https://github.com/guybedford/es-module-shims">ES Modules Shims</a> for our JavaScript plugins, and our documentation's color mode picker.</p>
<p class="fs-xl">You've successfully loaded up the Bootstrap Color Modes example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 6</a>, Sass, and <a href="https://github.com/guybedford/es-module-shims">ES Modules Shims</a> for our JavaScript plugins, and our documentation's color mode picker.</p>
<p>If this button appears blue and the link appears purple, everything is working. Check out the <strong>Toggle theme</strong> button at the top of the page to switch between color modes.</p>
</div>

<button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button>
<a id="popoverButton" class="text-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover" data-bs-content="This popover is created thanks to an ESM shim.">Example popover</a>
<button type="button" class="btn-solid theme-primary me-3" data-bs-toggle="drawer" data-bs-target="#drawerExample">Toggle drawer</button>
<a id="popoverButton" class="fg-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover" data-bs-content="This popover is created thanks to an ESM shim.">Example popover</a>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<dialog class="drawer drawer-end" tabindex="-1" id="drawerExample" aria-labelledby="drawerExampleLabel">
<div class="drawer-header">
<h5 class="drawer-title" id="drawerExampleLabel">Drawer</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="drawer-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
<button class="btn-solid theme-secondary mt-3" type="button" id="menuButton" data-bs-toggle="menu">
Menu button
</button>
<div class="menu" aria-labelledby="menuButton">
<a class="menu-item" href="#">Action</a>
<a class="menu-item" href="#">Another action</a>
<a class="menu-item" href="#">Something else here</a>
</div>
</div>
</div>
</dialog>

<hr class="col-1 my-5 mx-0">

<h2>Guides</h2>
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
<ul class="icon-list">
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">Bootstrap quick start guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/webpack/">Bootstrap Webpack guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/parcel/">Bootstrap Parcel guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/vite/">Bootstrap Vite guide</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/getting-started/contribute/">Contributing to Bootstrap</a></li>
<li><a href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/guides/quickstart/">Bootstrap quick start guide</a></li>
<li><a href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/guides/webpack/">Bootstrap Webpack guide</a></li>
<li><a href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/guides/parcel/">Bootstrap Parcel guide</a></li>
<li><a href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/guides/vite/">Bootstrap Vite guide</a></li>
<li><a href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/guides/contribute/">Contributing to Bootstrap</a></li>
</ul>

<hr class="mt-5 mb-4">

<p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p>
<p class="fg-secondary">Created and open sourced by the Bootstrap team. Licensed MIT.</p>
</div>

<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.5/dist/es-module-shims.js"></script>
<!-- Bootstrap v6 alpha isn't published to npm/CDN yet, so this points at the v6-dev branch's built JS instead of a versioned release. -->
<script type="importmap">
{
"imports": {
"@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.js",
"bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.esm.min.js"
"@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.8.0/+esm",
"vanilla-calendar-pro": "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.3.1/+esm",
"bootstrap": "https://rawcdn.githack.com/twbs/bootstrap/v6-dev/dist/js/bootstrap.min.js"
}
}
</script>
Expand Down
Loading