feat(lib): migrate breakpoints from infix to prefix by MaxLardenois · Pull Request #3499 · Orange-OpenSource/Orange-Boosted-Bootstrap

MaxLardenois · 2026-04-08T07:49:39Z

Types of change

Non-breaking change
Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #3497

Context & Motivation

Be like Tailwind and Bs6

Description

Checklists

Checklist (for Core Team only)

The changes need to be in the migration guide
The changes are well displayed in Storybook (be careful if example order has changed for DSM)
The changes are compatible with RTL
Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Code review
Design review
A11y review
Commit on ouds/main following conventional commit

Live previews

https://deploy-preview-3499--boosted.netlify.app/

netlify · 2026-04-08T07:53:18Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`fab47ce`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/69e79ddbbd62a0000845cf43
😎 Deploy Preview	https://deploy-preview-3499--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…x-to-prefix

Copilot

Pull request overview

This PR migrates responsive breakpoint utilities from an infix naming convention (e.g. mb-md-none, col-md-6) to a Tailwind/Bootstrap-v6-style prefix convention (e.g. md:mb-none, md:col-6) across the docs site and the SCSS generator, while adding an optional Bootstrap-compatibility mode.

Changes:

Introduces a breakpoint-prefix mechanism in SCSS (escaped :) and updates utility/grid generation to emit bp:... classnames.
Adds/extends Bootstrap compatibility generation paths (infix-style classes) gated by $enable-bootstrap-compatibility.
Updates site docs/examples/templates/tests/config to use the new prefix notation.

Reviewed changes

Copilot reviewed 87 out of 89 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
site/src/scss/docs_prod.scss	Enables Bootstrap compatibility for production docs SCSS build.
site/src/scss/docs.scss	Enables Bootstrap compatibility for docs SCSS build.
site/src/scss/_component-examples.scss	Expands example selectors to account for `:col` prefixed responsive classes.
site/src/pages/resources.astro	Migrates grid column classes to prefix breakpoint notation.
site/src/pages/[brand]/index.astro	Migrates responsive flex/alignment utility usage to prefix notation.
site/src/pages/[brand]/docs/versions.astro	Migrates responsive grid classes to prefix notation.
site/src/pages/[brand]/docs/[version]/examples/index.astro	Migrates responsive flex/spacing utilities to prefix notation.
site/src/libs/data.ts	Tightens TS return types via assertions for cached/parsed data.
site/src/layouts/partials/ThemeToggler.astro	Migrates `d-lg-none` → `lg:d-none`.
site/src/layouts/partials/ExamplesMain.astro	Migrates responsive grid classes to prefix notation.
site/src/layouts/SingleLayout.astro	Migrates responsive spacing utilities to prefix notation.
site/src/layouts/DocsLayout.astro	Migrates many responsive layout utilities to prefix notation.
site/src/content/docs/utilities/text.mdx	Updates responsive text alignment examples to prefix notation.
site/src/content/docs/utilities/stretched-link.mdx	Updates responsive grid/spacing examples to prefix notation.
site/src/content/docs/utilities/stack.mdx	Updates responsive grid usage in examples to prefix notation.
site/src/content/docs/utilities/spacing.mdx	Updates notation docs + examples to prefix notation.
site/src/content/docs/utilities/position.mdx	Adds prefix notation examples and wraps Bootstrap-style examples in compatibility block.
site/src/content/docs/utilities/overflow.mdx	Updates responsive display/spacing utilities in examples to prefix notation.
site/src/content/docs/utilities/opacity.mdx	Updates responsive display utility in examples to prefix notation.
site/src/content/docs/utilities/object-fit.mdx	Updates responsive object-fit docs/examples; adds compatibility section.
site/src/content/docs/utilities/float.mdx	Updates responsive float docs/examples; adds compatibility section.
site/src/content/docs/utilities/flex.mdx	Updates responsive flex docs; adds compatibility section.
site/src/content/docs/utilities/display.mdx	Updates display docs/examples for prefix notation; adds print prefix docs + compatibility block.
site/src/content/docs/utilities/api.mdx	Updates utilities API docs to show escaped `:` selectors and print prefix behavior.
site/src/content/docs/layout/utilities.mdx	Updates responsive utility references to prefix notation.
site/src/content/docs/layout/gutters.mdx	Updates gutter/grid examples to prefix notation.
site/src/content/docs/layout/grid.mdx	Updates grid docs/examples and adds compatibility blocks for old naming.
site/src/content/docs/layout/css-grid.mdx	Adds prefix notation example + compatibility block.
site/src/content/docs/layout/columns.mdx	Adds prefix notation examples + compatibility block; updates order/offset/margins examples.
site/src/content/docs/layout/breakpoints.mdx	Removes Sass map mention snippet from docs page.
site/src/content/docs/getting-started/migration.mdx	Updates migration guide examples to prefix notation.
site/src/content/docs/getting-started/migration-from-boosted.mdx	Updates Boosted migration notes for prefix notation.
site/src/content/docs/foundation/typography.mdx	Updates grid-based examples to prefix notation.
site/src/content/docs/foundation/options.mdx	Updates option docs examples to prefix notation.
site/src/content/docs/foundation/color-palette.mdx	Updates grid examples to prefix notation.
site/src/content/docs/foundation/approach.mdx	Updates responsive display example to prefix notation.
site/src/content/docs/components/tags.mdx	Updates row-cols responsive class to prefix notation.
site/src/content/docs/components/switch.mdx	Updates responsive grid examples to prefix notation.
site/src/content/docs/components/radio-button.mdx	Updates responsive grid examples to prefix notation.
site/src/content/docs/components/icon.mdx	Updates responsive gap example to prefix notation; adjusts an icon class name.
site/src/content/docs/components/header.mdx	Updates navbar expand + spacing + display utilities to prefix notation.
site/src/content/docs/components/footer.mdx	Updates responsive grid/display/spacing utilities to prefix notation.
site/src/content/docs/components/chips.mdx	Updates row-cols responsive class to prefix notation.
site/src/content/docs/components/checkbox.mdx	Updates responsive flex/grid examples to prefix notation.
site/src/content/docs/components/buttons.mdx	Updates responsive display/flex/spacing examples to prefix notation.
site/src/content/docs/components/badges.mdx	Updates row-cols responsive class to prefix notation.
site/src/content/docs/components/alerts.mdx	Updates row-cols responsive class to prefix notation.
site/src/content/docs/components.mdx	Updates responsive row-cols classes to prefix notation.
site/src/components/shortcodes/Example.astro	Migrates responsive `d-md-flex` usage in snippet UI to prefix notation.
site/src/components/shortcodes/Code.astro	Migrates responsive padding utility to prefix notation.
site/src/components/shortcodes/BootstrapCompatibility.astro	Migrates responsive float utility to prefix notation in the callout header.
site/src/components/home/MastHead.astro	Migrates responsive grid/display utilities to prefix notation.
site/src/components/home/GetStarted.astro	Migrates responsive grid/display/spacing utilities to prefix notation.
site/src/components/home/Customize.astro	Migrates responsive grid/display/spacing utilities to prefix notation.
site/src/components/home/CSSVariables.astro	Migrates responsive grid/display/spacing utilities to prefix notation.
site/src/components/header/Versions.astro	Migrates responsive display/spacing utilities to prefix notation.
site/src/components/header/SubNav.astro	Migrates responsive display utility to prefix notation.
site/src/components/header/Skippy.astro	Migrates responsive display utility to prefix notation.
site/src/components/header/Navigation.astro	Migrates navbar expand + spacing + display utilities to prefix notation.
site/src/components/footer/Footer.astro	Migrates responsive grid/display/spacing utilities to prefix notation.
site/src/components/DocsSidebar.astro	Migrates responsive padding utilities to prefix notation.
site/src/assets/examples/grid/index.astro	Migrates example markup to prefix notation.
site/src/assets/examples/download-app/index.astro	Migrates many responsive utilities to prefix notation.
site/data/breakpoints.yml	Changes breakpoint abbreviations from `-md` style to `md` style to support prefix rendering.
scss/utilities/_api.scss	Updates utility generation to use breakpoint prefixes + adds bootstrap-compatible variants + print prefix.
scss/tests/utilities/_api.test.scss	Updates expected selectors to escaped-colon prefix form.
scss/tests/mixins/_utilities.test.scss	Updates tests for new `generate-utility` prefix parameterization.
scss/mixins/_utilities.scss	Changes utility generator to accept breakpoint prefix + infix separately and emit prefixed selectors.
scss/mixins/_grid.scss	Migrates grid/css-grid/gutter class generation to prefix notation + adds bootstrap compatibility emission.
scss/mixins/_breakpoints.scss	Adds `breakpoint-prefix()` + CSS identifier escaping helper for leading digits.
scss/helpers/_position.scss	Migrates sticky helpers to prefix notation + adds bootstrap compatibility aliases.
scss/_utilities.scss	Adds `responsive-bootstrap` flags across utilities to drive compatibility generation.
scss/_tables.scss	Migrates table responsive helpers to prefix notation + adds bootstrap compatibility aliasing.
scss/_offcanvas.scss	Migrates offcanvas responsive helpers to prefix notation + adds bootstrap compatibility aliasing.
scss/_navbar.scss	Migrates navbar expand variants to prefix notation + adds bootstrap compatibility aliasing.
scss/_modal.scss	Migrates modal fullscreen-down helpers to prefix notation + adds bootstrap compatibility aliasing.
scss/_maps.scss	Adjusts `$gutters` default mapping and removes conditional merge behavior.
scss/_list-group.scss	Migrates list-group horizontal responsive helpers to prefix notation + adds bootstrap compatibility aliasing.
scss/_dropdown.scss	Migrates responsive dropdown alignment helpers to prefix notation + adds bootstrap compatibility aliasing.
js/tests/visual/tooltip.html	Migrates responsive grid markup to prefix notation.
js/tests/visual/toast.html	Migrates responsive grid markup to prefix notation.
js/tests/visual/scrollspy.html	Migrates navbar expand class to prefix notation.
js/tests/visual/modal.html	Migrates navbar expand class to prefix notation.
js/tests/visual/dropdown.html	Migrates navbar expand + grid markup to prefix notation.
js/tests/integration/index.html	Migrates responsive display utilities to prefix notation.
.stylelintrc.json	Updates selector class pattern to allow optional breakpoint prefix segments.
.bundlewatch.config.json	Raises CSS bundle size thresholds to account for expanded output.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…x-to-prefix

louismaximepiton

I think it's missing some changes in some files:

*.spec.js (searched for -lg, -md, in collapse and offcanvas, dropdown)
*.ts (searched for -lg, -md, -2xl, in component-details)
*.js (searched for -lg, -md, in tac.js)
.gx-sm -> .gx-small in examples/grid/index.astro
.mt-xl -> .mt-xlarge in getting-strated/javascript.mdx
ps-xl -> ps-xlarge in migration-from-boosted/mdx

.border-lg-start haven't been renamed (docs only)
.offcanvas-lg haven't been renamed in sidebar.scss (docs only)

Wondering if we should rename:

placeholder-lg -> placeholder-large and all this kind of classes
container-lg -> lg:container

We'll need to be careful updating this PR with all the incoming files.

louismaximepiton · 2026-04-17T11:50:25Z


        @media print {
-          .font-size-print-large {
+          .print\:font-size-large {


We also change this kind of infix ?

Seemed logical to me, also Bs6 did it too.

louismaximepiton · 2026-04-17T11:50:50Z

  }
 }

 // RFS rescaling


We can safely remove this section

Yes, I wanted to wait for you PR #3504 to be merged for this

louismaximepiton · 2026-04-17T11:54:21Z


 - breakpoint: 3xl
-  abbr: -3xl
+  abbr: 3xl


Do we need breakpoint and abbr in this file ?

I tried to remove them but it's way easier to create the documentation for flex and fload with it...

louismaximepiton · 2026-04-17T12:28:03Z

Suggested change

The first two examples show the scaled and fixed margin classes in action. The last one shows how to recreate an equivalent of `.mx-scaled-large` by combining other responsive margin classes.

louismaximepiton · 2026-04-20T07:45:43Z

 @media (min-width: 1880px) {
  .border-3xl { ... }
-  .border-3xl-none { ... }
+  .3xl\:border-none { ... }


Do we show these borders utilities .border-bkp ? Or they should be removed as the examples above ?

Probably an error when updating

louismaximepiton · 2026-04-20T12:46:22Z

    {
      "files": "**/*.scss",
      "rules": {
+        "selector-class-pattern": [


Did you have some examples that didn't work in the doc ?

Not in the doc, but in the tests yes

louismaximepiton · 2026-04-20T13:01:23Z

+
+  @return "#{css-escape-ident($name)}\\:";
+}
+// END mod


Even wondering if we should continue to add these comments in our files

Suggested change

// END mod

// End mod

louismaximepiton · 2026-04-20T13:59:41Z

@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "sass:string";


I cannot remember why didn't use these rules before. I'm fine using them, just we have str-slice instead of string.slice, and str-index or index instead of list.index.

I used them to use the code from bs6 directly as it does not have other consequence I think it's ok. I did not modify the rest of the file though to keep the modification small but we can do it.

louismaximepiton · 2026-04-20T14:30:33Z

 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $bkpt-prefix: "", $infix: "") {


Suggested change

@mixin generate-utility($utility, $bkpt-prefix: "", $infix: "") {

@mixin generate-utility($utility, $infix: "", $bkpt-prefix: "") {

Why do you suggest this? I put infix at the end because it will be removed at some point.

louismaximepiton · 2026-04-20T14:36:17Z

 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $bkpt-prefix: "", $infix: "") {


Do we need $infix ?

Yes, to generate responsive-bootstrap: true utilities see api.scss

feat(lib): migrate from infix to prefix for breakpoints

3e7f254

github-project-automation Bot added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 8, 2026

github-project-automation Bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 8, 2026

MaxLardenois changed the title ~~feat(lib): migrate from infix to prefix for breakpoints~~ feat(lib): migrate breakpoints from infix to prefix Apr 8, 2026

MaxLardenois added 17 commits April 9, 2026 17:02

feat: migrate mdx to new breakpoint prefix

9199540

feat: breakpoints in astro components

1cbf451

feat: new breakpoints on visual tests

8722de6

feat: in progress test css

b61e109

feat: in progress

8daacb4

fix: css should pass

6eadd9e

fix: try a stylelint classname regexp that could work

da6b6c6

Merge branch 'ouds/main' into ouds/main-migrate-breakpoints-from-infi…

06e8656

…x-to-prefix

fix: update bundlewatch conf

8195617

feat: more doc

77d1d29

fix: missing responsive bootstrap cssgrid utilities

4606bfd

feat: other docs

f2106ef

feat: update flex doc

8af36d9

feat: update float doc

c20b901

feat: object fit page

edf7191

feat: position page

f9147df

feat: spacing page

ad444d0

louismaximepiton requested a review from Copilot April 16, 2026 14:12

Copilot started reviewing on behalf of louismaximepiton April 16, 2026 14:13 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

Comment thread site/src/assets/examples/grid/index.astro Outdated

Comment thread scss/helpers/_position.scss Outdated

Comment thread scss/_navbar.scss Outdated

Comment thread site/src/content/docs/utilities/flex.mdx

Comment thread site/src/content/docs/layout/gutters.mdx Outdated

MaxLardenois added 2 commits April 16, 2026 16:44

fix: after copilot review

b68738f

Merge branch 'ouds/main' into ouds/main-migrate-breakpoints-from-infi…

5fa95f8

…x-to-prefix

louismaximepiton self-requested a review April 17, 2026 11:34

louismaximepiton linked an issue Apr 17, 2026 that may be closed by this pull request

[OUDS] Migrate breakpoints from infix to prefix #3497

Open

2 tasks

louismaximepiton requested changes Apr 20, 2026

View reviewed changes

fix: review first pass

fab47ce


	The first two examples show the scaled and fixed margin classes in action. The last one shows how to recreate an equivalent of `.mx-scaled-large` by combining other responsive margin classes.

	@mixin generate-utility($utility, $bkpt-prefix: "", $infix: "") {
	@mixin generate-utility($utility, $infix: "", $bkpt-prefix: "") {

Conversation

MaxLardenois commented Apr 8, 2026 • edited by boosted-bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of change

Related issues

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

Progression (for Core Team only)

Live previews

Uh oh!

netlify Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

louismaximepiton left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MaxLardenois Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MaxLardenois Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MaxLardenois commented Apr 8, 2026 •

edited by boosted-bot

Loading

netlify Bot commented Apr 8, 2026 •

edited

Loading

MaxLardenois Apr 21, 2026 •

edited

Loading

MaxLardenois Apr 21, 2026 •

edited

Loading