v6-dev

[mdo]

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

• High level:
  • Dropped extraneous grid, reboot, and utilities bundles for now (potentially will bring them back)
  • Browser support has been significantly updated, moving to floating targets (e.g., last 1 versions and not dead)
  • Moved from Hugo to Astro for the docs
  • Monorepo structure?
• Sass & CSS:
  • Fix Switch from Sass imports to Sass Module System #29853: Migrated to Sass modules across the board
  • All Dart Sass, no Node Sass
  • New _colors.scss stylesheet
  • New _config.scss stylesneet
  • Fix Reorganize Scss folder structure #28553: Rearranged Sass files (e.g., _forms.scss is now forms/index.scss and uses @forward)
  • Implement CSS layers
  • Fix Add global configuration and methods to enable the use of calc by default in numeric operations #40412: Drop custom add() and subtract() functions for native calc(); also replace custom divide() function with Sass math.div().
  • Drop !important from utilities
  • Native CSS nesting in output?
  • Replace RFS with something simpler, maybe using clamp()?
  • Localize variables, mixins, and some functions within each stylesheet that needs them (except truly shared or global ones)
  • Fix Switch to using range context queries #41046: Range CSS media queries (e.g. @media (width < 768px)
• Colors, Customizing, Themes, etc
  • 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 Gray color utilities do not follow text-{color}-{level} convention #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
  • Dropped OG flexbox grid and replaced with CSS Grid layout (includes dropping most mixins I think?)
  • 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
• 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
  • Fix Replace aspect ratio options with min aspect ratios #36129: Moved ratio helper to become .ratio utility
    • Sidebar: You can now modify the utilities map to make these responsive. Original request at Suggest a new feature - add breakpoints to ratios #39449.
  • Fix Remove the clearfix helper #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?
• JavaScript
  • Drop all things jQuery from our plugins
  • Modernize modal plugin to become a new Dialog plugin, built on the native dialog component
  • 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?

---

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: #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.