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	`4663af6`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/69e874b0b09aad0008867da9
😎 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-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.

I think it was for the node:sass we supported, back in the days. Keeping it open for now to think to create an issue about that

I think we can keep that for a possible Sass module migration in the future but I'm open

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.

Yeah it was to avoid breaking this function for people, I don't know which one is best. Keep it open for other reviews.

Good point, it's probably not used but I can switch

…x-to-prefix

MaxLardenois · 2026-04-22T10:36:52Z

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)

Done, thanks

.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

Done, even if it's not related to this PR

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

Both removed as OUDS mod as they are not used

Wondering if we should rename:

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

We could, not this PR concern though, let's discuss elsewhere if you want

container-lg -> lg:container

This is boostrap compat only so we should not rename

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

It's a big one yes

louismaximepiton

Waiting to see migrations, but t looks good to me.

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

MaxLardenois added 3 commits April 21, 2026 17:54

fix: review first pass

fab47ce

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

22bbfd1

…x-to-prefix

fix: update bundlewatch conf

4663af6

louismaximepiton approved these changes Apr 22, 2026

View reviewed changes

boosted-bot moved this from In Progress / Draft to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 22, 2026

	@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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Uh oh!

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

Uh oh!

Uh oh!

louismaximepiton left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MaxLardenois commented Apr 8, 2026 •

edited by boosted-bot

Loading

netlify Bot commented Apr 8, 2026 •

edited

Loading

MaxLardenois commented Apr 22, 2026 •

edited

Loading