Commit Graph

927 Commits

Author SHA1 Message Date
Mark Otto 195440f2fb
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes

- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness

Co-Authored-By: GeoSot <geo.sotis@gmail.com>

* Redesign homepage, docs, and examples

Homepage:

- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils

Docs:

- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons

Examples:

- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars

* Convert offcanvas to CSS vars

* Feat: add resize handler to Offcanvas.js.

If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements

* Separate examples code, Add some selectors, fix stackblitz btn

Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-17 22:17:50 -07:00
MelanieL 26ea6f1649 Fix containers page in docs to re-order list so it matches sections below it. 2022-04-16 22:37:11 -07:00
Julien Déramond d059c1d5ba
Doc: Uniformization of nav tabs content panes (#36163)
* Doc: Uniformization of nav tabs content panes

* Fix after review
2022-04-13 14:56:29 -07:00
GeoSot ece1601227
Revamp Scrollspy using Intersection observer (#33421)
* Revamp scrollspy to use IntersectionObserver

* Add smooth scroll support

* Update scrollspy.js/md

* move functionality to method

* Update scrollspy.js

* Add SmoothScroll to docs example

* Refactor Using `Maps` and smaller methods

* Update scrollspy.md/js

* Update scrollspy.spec.js

* Support backwards compatibility

* minor optimizations

* Merge activation functionality

* Update scrollspy.md

* Update scrollspy.js

* Rewording some of the documentation changes

* Update scrollspy.js

* Update scrollspy.md

* tweaking calculation functionality & drop text that suggests, to deactivate target when wrapper is not visible

* tweak calculation

* Fix lint

* Support scrollspy in body & tests

* change doc example to a more valid solution

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2022-04-13 10:29:13 -07:00
Anthony Perez 1fed10dfb1 Update parcel.md
Following the Parcel v1 installation guide seems to install the latest version of Parcel (v2), which makes several instructions in this guide throw errors. Therefore, I have updated the guide to work with version 2 of Parcel.

Change Details:
1) Update the URL to point to the latest doc pages.
2) Use the `type="module"` HTML attribute to reference a module [migration](https://parceljs.org/getting-started/migration/#code-changes)
3) The `--out-dir <dir>` CLI parameter has been changed to `--dist-dir <dir>` [CLI](https://parceljs.org/features/cli/#parameters)
4)  For a reason I'm unsure of, `--experimental-scope-hoisting` throws the following error: `error: unknown option '--experimental-scope-hoisting'`, so I removed it to get the build to work.
2022-04-12 21:14:54 -07:00
louismaxime.piton 3984ebb407 Fix proposal 2022-04-12 18:36:50 -07:00
GeoSot 8aaeb3cb6b
Remove tooltip and popover styling as it is handled by Popper (#34627)
* Remove not needed css form tooltip & popover as it is made by popper
Remove tooltip margin variable, as popper needs margin to be zero

* Remove popover left/top initializers as they are handled by popper

* nullify `margin` variable and add deprecation message

* Document change in migration guide

* Update _variables.scss

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2022-04-12 18:16:18 -07:00
Anton 33992b7d5b
Change second example dropdown form (#36137)
To check cases as #36135
2022-04-12 18:08:12 +03:00
Tiger Oakes fe257823ec
Use Babel and ES6 in docs JS files (#31607)
* Pass docs js through Babel

* Use ES6 in docs js

* Only run babel on src files

* Allow babel in Hugo

* Update scripts.html

* Inherit from the root .eslintrc.json

* Use `Array.from`

* Drop Babel from docs

* Prefer template

* replace IIFE with arrow functions

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-04-12 18:07:25 +03:00
Julien Déramond 3c78f772d5 Doc: fix modals and navs CSS vars description 2022-04-11 09:46:20 -07:00
XhmikosR 7648848e04
Update devDependencies (#36120)
* Update devDependencies

* @babel/core                ^7.17.8  →  ^7.17.9
* @popperjs/core             ^2.11.4  →  ^2.11.5
* clean-css-cli               ^5.5.2  →   ^5.6.0
* eslint-plugin-import       ^2.25.4  →  ^2.26.0
* find-unused-sass-variables  ^4.0.3  →   ^4.0.4
* karma-rollup-preprocessor   ^7.0.8  →   ^7.0.7
* sass                      ^1.49.11  →  ^1.50.0
* stylelint                   14.2.0  →  ^14.6.1

* Fix currentcolor case
2022-04-08 09:17:00 +03:00
Mark Otto dab026fc2b Revert border-color utilities to use the CSS property instead of the variable 2022-04-07 09:37:04 -07:00
Julien Déramond 5b31463e35 Doc: Reorder alphabetically lists of components 2022-04-06 16:48:08 -07:00
GeoSot 135b9cdff2
Revamp tabs & follow ARIA 1.1 practices (#33079)
* Tab: Revamp tab.js & add support Aria features

* Tab: Add tab support, just to keep backwards compatibility. Better to remove it on v6

* Revert "Tab: Add tab support, just to keep backwards compatibility. Better to remove it on v6"

* Support arrow down/up functionality

* add prevent default to avoid scrolling the page during up/down keys handling

* remove panel tabindex handling

* Expand documentation text for JS plugin

* Rearrange new docs to specifically call out a11y

* properly place section

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-04-06 16:36:08 -07:00
Mark Otto 0323fe99d2
Fix for missing CSS variables on `.navbar-nav` (#36105)
* Fix for missing CSS variables on .navbar-nav

* Document new CSS vars on .navbar-nav
2022-04-06 13:08:07 -07:00
louismaxime.piton 8006203e47 Doc fixes 2022-03-31 14:27:09 -07:00
Julien Déramond 16711ff5b1 Fix duplicate `.rounded-*` and `.fw-semibold` defs in examples 2022-03-31 14:00:10 -07:00
Mark Otto e342142b61
Train PR: CSS variables for accordion, cards, navs, and modals (#36071)
* Convert accordion to CSS vars

* Update accordion.md

* Convert navs to CSS variables

* Split up CSS vars

* bundlewatch

* fix vars

* Convert cards to CSS vars

* Convert modals to CSS variables

* Bundlewatch

Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
2022-03-28 15:05:37 -07:00
Mark Otto 0eb808015f
Convert list group to CSS variables (#35862)
* Convert list-group to CSS vars

* bundlewatch
2022-03-22 10:02:12 -07:00
Mark Otto 9e73b6a13c
v5.2.0 migration updates (#36038) 2022-03-19 11:58:22 -07:00
Ryan Buckley fbf64406df
Fix migration guide typos (#36040)
* Correct font-weight semibold utility class name

* Tiny sentence correction
2022-03-19 11:18:45 -07:00
Mark Otto 88bd287b27
Convert progress bars to CSS variables (#35962)
* Convert progress bars to CSS variables

* bundlewatch
2022-03-18 09:02:03 -07:00
Mark Otto b165f35f78 Add another list-group snippet example 2022-03-17 14:52:29 -07:00
Mark Otto a4841afa26
Convert toasts to CSS variables (#35961)
* Convert toasts to CSS variables

* bundlewatch
2022-03-17 14:48:36 -07:00
Mark Otto 71582eabff
Convert spinners to CSS variables (#35960)
* Convert spinners to CSS variables

* bundlewatch
2022-03-17 13:49:57 -07:00
Mark Otto a9a89debc7
Rewrite docs tables in Markdown with table shortcode (#31337)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-03-14 09:38:04 +02:00
Sabrus 8fe82c7176 Remove duplicate entry in migration.md 2022-03-13 18:37:32 -07:00
Mark Otto 70cb00c349 Add v5.1.0 to migration guide, update v5.2.0 additions 2022-03-13 10:16:42 -07:00
Mark Otto acf6ea74a7
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981)
* Add additional root variables, rename $variable-prefix to $prefix

- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout

* Bundlewatch
2022-03-13 10:13:09 -07:00
Mark Otto 7c966f5848
Convert added in badges to shortcode (#36007) 2022-03-12 07:27:58 +02:00
Mark Otto e567d511d4 Convert breadcrumb to CSS variables 2022-03-11 12:59:55 -08:00
Mark Otto d16088d5d1
Redesign the "Added in" badges in the docs (#35980)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2022-03-11 21:29:52 +02:00
Mark Otto c73480c636 Adjust border-radius values and add some new utilities
- Updates global border-radius values for a more modern appearance
- New .fw-semibold
- New .rounded-4 and .rounded-5
2022-03-11 09:10:37 -08:00
Julien Déramond 5bdd5e02a4
docs: add missing `.dropup` in dropup centered example (#35948) 2022-03-11 16:04:41 +02:00
Mark Otto 488e426141 Add migration guide mention 2022-03-08 14:53:53 -08:00
Mark Otto 2e75ec3c41 Convert popovers to CSS variables 2022-03-08 14:53:53 -08:00
Mark Otto a68e1af2d5 Document new CSS vars in tooltip docs 2022-03-08 14:53:53 -08:00
Mark Otto fdcbbe3d92 Convert tooltips to CSS vars 2022-03-08 14:53:53 -08:00
Louis-Maxime Piton 050b69b9a2
Remove unneeded classes from toasts docs (#35931) 2022-03-02 16:47:03 +02:00
Jann Westermann 8d7358f231
Add static backdrop to offcanvas (#35832)
* Add static backdrop option,  to offcanvas
* Trigger prevented event on esc with keyboard=false
* Change offcanvas doc , moving backdrop examples to examples section
2022-03-02 02:20:37 +02:00
Gaël Poupard d788d2efac docs(example): fix RTL carousel example 2022-03-01 13:01:00 -08:00
Mark Otto c0f30366ac Add centered dropdown and dropup options 2022-02-28 14:02:51 -08:00
Mark Otto de0dfca9a1 Convert border utilities to CSS variables
- Updates the utilities mixin to check for specific CSS variable names via `css-variable`
- Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1`
- Adds new `.border-opacity-*` classes
- Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width`
- Documents the new variable changes
2022-02-28 11:40:32 -08:00
Mark Otto e35980d009 Update migration.md 2022-02-28 11:21:53 -08:00
Mark Otto 12d49f19b0 Remove thicker border on table thead elements
Use the new .table-group-divider to create your own dividers as desired. Would love to find a better way to handle border-color for this, but for now, this is at least opt-in.

I've applied it by default in another way for our docs tables to help differentiate our content vs our components.

Fixes #35342
2022-02-28 11:21:53 -08:00
Erik Faye-Lund 4ee1465acf Prefer Linux-specific fonts over Arial
Some Linux distributions (like Debian) have fontconfig aliases for Arial
that picks specific fonts. But such generic aliases might be less
desirable than the known-good Linux specific fonts.

This fixes a problem on my setup where Liberation Sans is aliased as
Arial, even when Noto Sans is available. Liberation Sans doesn't support
a weight of 500, so we end up rendering headers at the normal weight of
400, which makes them stand out less. Reordering the Arial fallback
makes us instead pick Noto Sans over Lieration Sans, which does support
a weight of 500, and makes headers stand out again.

While we're at it, fixup the reboot documentation to match, and change
the comment about Helvetica Neue; that's not a "Basic web-fallback" font,
it's the UI font on older iOS and macOS versions.
2022-02-25 18:16:26 -08:00
Julien Déramond d0b8114462 Remove border of disabled calendar buttons in Dropdowns example 2022-02-25 12:37:27 -08:00
Mark Otto 28d9aaf670
Add z-index for .toast-container (#35859)
* Add z-index for .toast-container

- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better

Fixes $34028

* Remove unnecessary z-index from docs examples
2022-02-25 08:49:02 -08:00
Mark Otto f1a89bf0d5 Mention form height change in migration guide 2022-02-24 13:14:38 -08:00
Julien Déramond 333d89e498
Docs: replace CSS by utilities in examples (#35699)
* Drop .opacity-50 and .opacity-75 redefinition in examples

* Drop unused .card-img-right from blog example CSS files

* Use line-height utilities when possible

* Use rounded-* utilities in examples

* Replace .nav-underline by .nav-scroller and use it in examples.html default

* Use .mb-1 for .blog-post-title

* Remove unused CSS rule and use .fw-* utilities for carousels examples

* Use utilities for cheatsheet examples

* Extract some CSS to utilities for .nav-masthead .nav-link in cover example

* Dashboard group of minor modifications

* Dropdowns example: refactoring

* Dropdowns example refactoring: fix linting by removing selector by id

* Features example refactoring

* Headers example refactoring

* List groups example refactoring

* Sidebars example refactoring

* Sign-in example refactoring

* Starter template refactoring

* Fix RTL examples

Co-authored-by: Mark Otto <markd.otto@gmail.com>
2022-02-23 10:31:18 -08:00