v6-dev

[mdo]

Yes, it's happening! Here's what's happened so far:

High level

• [x] Dropped extraneous grid, reboot, and utilities bundles for now (potentially will bring them back)
• [x] Browser support has been significantly updated, moving to floating targets (e.g., last 1 versions and not dead)
• [x] Moved from Hugo to Astro for the docs
• [x] Fixes #29919: Added Markdownlint via npm script (npm run lint-mdx)
• [ ] Monorepo structure?

Sass & CSS

• [x] Fix #29853: Migrated to Sass modules across the board
• [x] All Dart Sass, no Node Sass
• [x] New _colors.scss stylesheet
• [x] New _config.scss stylesheet
• [x] Fix #28553: Rearranged Sass files (e.g., _forms.scss is now forms/index.scss and uses @forward)
• [x] Implement CSS layers
• [ ] Fix #40412: Drop custom add() and subtract() functions for native calc(); also replace custom divide() function with Sass math.div().
• [x] Drop !important from utilities
• [ ] Native CSS nesting in output?
• [ ] Replace RFS with something simpler, maybe using clamp()?
• [ ] Fix #33263: Localize variables, mixins, and some functions within each stylesheet that needs them (except truly shared or global ones)
• [x] Fix #41046: Range CSS media queries (e.g. @media (width < 768px)

Colors, Customizing, Themes, etc

• [x] Fix #39587: Add all color tints and shades as CSS variables
  • [ ] Migrate components to use these CSS variables
• [ ] Simplify theme support down to light/dark mode, media queries only instead of data-bs-theme?
• [ ] Use more light-dark() function?
• [ ] Ensure color-scheme values are being set
• [ ] If using data-bs-theme still, look into how we could set color/bg automatically?
• [ ] Move to oklch over mix of hex/rgb?
• [ ] Use native color-mix() as needed
• [ ] Fix #38569: Normalize gray color keys in $grays map to the other colors
• [ ] Use relative colors as needed (component variants and states?)
• [ ] P3 colors? Mixin to convert them? Plugin to do so after the fact?
• [ ] Expand the color palette more if we can? Move from semantic colors to full palette for component variants?

Layout

• [x] Dropped OG flexbox grid and replaced with CSS Grid layout (includes dropping most mixins I think?)
• [x] Renamed $grid-breakpoints to $breakpoints
• [x] Renamed -xxl breakpoint to -2xl, as well as all component size variants
• [ ] Sub grid modifier to inherit parent grid cols
• [ ] Add autofill grid option plus 12-col system
• [ ] Explore additional flex utilities to support the move
• [ ] Expand width utilities perhaps? Since grid layout uses grid-specific properties

Reboot

• [ ] Ditch legend and fieldset changes, add a fieldset reset perhaps
• [ ] Fix #40582: Colorize code elements for light/dark mode

Content

• [x] Fix #30177: Add new .prose class for long form content

Buttons

• [ ] Move to inline-flex
• [ ] Simplify btn-check code? Restyle checkboxes as button?

Forms

• [ ] Replace custom radio SVG with background/border combo
• [ ] Improve input groups, especially with validation
• [ ] :user-valid/invalid vs :valid/invalid
• [ ] field-sizing: content for textareas?

Utilities & Helpers

• [x] Fix #36129: Moved ratio helper to become .ratio utility
• Sidebar: You can now modify the utilities map to make these responsive. Original request at #39449.
• [x] Fix #38641: Drop clearfix helper for new display: flow-root utility, .d-flow-root
• [ ] Explore @property in CSS for disabling inheritance? (see appendix)
• [ ] Smooth out API?
• [ ] Fix #40674: Rename max-width and max-height utilities for clarity
• [ ] Fix #41330: Add new min-content, max-content, and fix-content values for width and height utilities

JavaScript

• [x] Drop all things jQuery from our plugins
• [ ] Modernize modal plugin to become a new Dialog plugin, built on the native dialog component
  • [ ] Revisit #40787: add CSS variables for modal widths across breakpoints
• [ ] Popover native plugin? Dialog for popover to natively disable scroll? Anchor positioning (not yet in FF or Safari)
• [ ] @starting-style for animations?
• [ ] Native drop down menu?
• [ ] Add support to dropdowns for context menu
• [ ] New plugin ideas
  • [ ] PIN/2FA input
  • [ ] Toggle attribute
  • [ ] Date picker
  • [ ] Password strength
• [ ] Fixes #29378: Automatically make tooltips and popovers work, remove performance mention from docs

Docs

• [x] Fix #39041: Add previous/next links at bottom of docs pages
• [ ] Add keyboard section to JS components to list supported keyboard interactions

---

Appendix

Custom properties to disable inheritance in some utility classes?

@property --bs-bg-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --bs-text-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

Screenshots

Expansive color palette?

More button variants, all generated from a larger map?

CSS grid in action

[ffoodd]

Wow, what a nice move 🚀

Any way to share ideas for v6? Or should we try some PR to your branch?

[julien-deramond]

Adding this link as a reference for reusing other elements in case we run into any issues: https://github.com/twbs/bootstrap/pull/38319

[mdo]

@ffoodd Ayyy good to see you! Issues here or jump into our team Slack :). I'll update the original comment with more of what I'm thinking shortly.

[ffoodd]

💜

I only have a few things that comes to my mind :

• switch to logical properties, to drop RTLCSS and RTL build ;
• try to rely on modern HTML for components : <dialog>, <details> and <summary>, maybe popover and its API ?
• use container queries for responsive ?

Probably for v7 but the anchor positioning API could replace Popper / Floating UI, but we may try as a progressive enhancement.

There could be more, but those are already quite big.