From 1a2ac90d7d525261a75d87517abf83d6744facc9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 6 Nov 2025 15:18:51 -0800 Subject: [PATCH] v6: Cleanup utilities (#41818) MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit * Split font utilities, update API to do more pseudo classes, drop display type classes * Improve display docs, remove print display utils * Document gap and grid utils, rename a couple classes * better url * Fix color-mix * Undo utilities API change for now * fix api changes * Bundlewatch * Linter cleanup * Massive utilities update - Split several utilities across smaller pages - New underline thickness utility - Updated text-wrap utility to use `text-wrap` property, removes white-space utils - Adds a dozen new width utilities for now—TBD if we keep this, they're not documented yet - Redoes the color utilities—color, background color, border color, link color—to use color-mix without attribute selectors. Faster, simpler, better support for overriding other components. - Redesigns margin, padding, gap utils pages—shoutout Tailwind for having a better visualization here. Cribbed their approach to emphasize spacing utilities. - Fixed up a lot of usages of color utilities, likely more to do - Fixed up a lot of broken links, probably also more to do * New details component, simpler a11y color contrast warning, updated docs bottom nav, updated ref tables * Avoid name collision, update to demo thickness hover * Rename $new-font-sizes to $font-sizes * Update width and height docs * Few cleanup tweaks * Remove unused attribute selector for borders * Fixes * more bundle * fixes * spelling * add json --- .bundlewatch.config.json | 6 +- .cspell.json | 1 + build/generate-utilities-json.mjs | 91 ++ build/generate-utilities-metadata.scss | 112 ++ dist/css/bootstrap-utilities.metadata.json | 1197 +++++++++++++++++ package.json | 9 +- scss/_card.scss | 2 +- scss/_colors.scss | 24 +- scss/_config.scss | 15 + scss/_dropdown.scss | 4 +- scss/_functions.scss | 17 + scss/_nav.scss | 3 +- scss/_navbar.scss | 3 +- scss/_pagination.scss | 3 +- scss/_root.scss | 32 +- scss/_theme.scss | 59 +- scss/_utilities.scss | 282 ++-- scss/_variables.scss | 84 +- scss/buttons/_button.scss | 11 +- scss/content/_reboot.scss | 4 +- scss/content/_type.scss | 16 - scss/helpers/_color-bg.scss | 2 +- scss/helpers/_colored-links.scss | 10 +- scss/layout/_grid.scss | 31 +- scss/mixins/_utilities.scss | 202 +-- site/data/sidebar.yml | 22 +- site/src/components/DocsSidebar.astro | 2 +- .../src/components/HelperReferenceTable.astro | 41 + site/src/components/ReferenceTable.astro | 106 +- .../components/UtilityReferenceTable.astro | 173 +++ .../components/home/ComponentUtilities.astro | 2 +- site/src/components/shortcodes/Callout.astro | 5 +- .../components/shortcodes/DETAILS_README.md | 126 ++ site/src/components/shortcodes/Details.astro | 59 + .../warning-color-assistive-technologies.md | 1 - site/src/content/config.ts | 19 +- .../warning-color-assistive-technologies.md | 5 + site/src/content/docs/components/alerts.mdx | 2 +- site/src/content/docs/components/badge.mdx | 2 +- site/src/content/docs/components/buttons.mdx | 2 +- site/src/content/docs/components/card.mdx | 8 +- site/src/content/docs/components/collapse.mdx | 2 +- .../src/content/docs/components/dropdowns.mdx | 4 +- .../content/docs/components/list-group.mdx | 2 +- site/src/content/docs/components/modal.mdx | 2 +- site/src/content/docs/components/navbar.mdx | 4 +- site/src/content/docs/components/progress.mdx | 4 +- site/src/content/docs/components/spinners.mdx | 12 +- site/src/content/docs/content/figures.mdx | 2 +- site/src/content/docs/content/images.mdx | 2 +- site/src/content/docs/content/tables.mdx | 2 +- site/src/content/docs/content/typography.mdx | 59 +- site/src/content/docs/customize/color.mdx | 12 +- site/src/content/docs/customize/options.mdx | 4 +- site/src/content/docs/customize/theme.mdx | 30 +- site/src/content/docs/docsref.mdx | 6 + site/src/content/docs/forms/layout.mdx | 2 +- .../content/docs/helpers/color-background.mdx | 2 +- .../content/docs/helpers/colored-links.mdx | 2 +- site/src/content/docs/helpers/stacks.mdx | 14 +- site/src/content/docs/layout/columns.mdx | 2 +- site/src/content/docs/layout/css-grid.mdx | 6 + site/src/content/docs/layout/grid.mdx | 2 +- site/src/content/docs/layout/gutters.mdx | 2 +- site/src/content/docs/layout/utilities.mdx | 2 +- .../content/docs/utilities/align-content.mdx | 2 + .../content/docs/utilities/align-items.mdx | 2 + .../src/content/docs/utilities/align-self.mdx | 2 + site/src/content/docs/utilities/api.mdx | 2 +- .../content/docs/utilities/aspect-ratio.mdx | 18 +- .../src/content/docs/utilities/background.mdx | 75 +- .../content/docs/utilities/border-color.mdx | 91 ++ .../content/docs/utilities/border-radius.mdx | 35 +- site/src/content/docs/utilities/border.mdx | 182 +-- site/src/content/docs/utilities/colors.mdx | 82 +- site/src/content/docs/utilities/display.mdx | 65 +- site/src/content/docs/utilities/flex.mdx | 6 + site/src/content/docs/utilities/float.mdx | 12 +- .../content/docs/utilities/font-family.mdx | 35 + site/src/content/docs/utilities/font-size.mdx | 85 ++ .../src/content/docs/utilities/font-style.mdx | 104 +- .../content/docs/utilities/font-weight.mdx | 43 + site/src/content/docs/utilities/gap.mdx | 203 +++ site/src/content/docs/utilities/grid.mdx | 211 +++ site/src/content/docs/utilities/height.mdx | 88 +- .../content/docs/utilities/interactions.mdx | 19 +- .../docs/utilities/justify-content.mdx | 2 + .../content/docs/utilities/justify-items.mdx | 2 + .../content/docs/utilities/line-height.mdx | 37 + site/src/content/docs/utilities/link.mdx | 77 +- site/src/content/docs/utilities/margin.mdx | 186 +-- .../src/content/docs/utilities/object-fit.mdx | 18 +- site/src/content/docs/utilities/opacity.mdx | 18 +- site/src/content/docs/utilities/overflow.mdx | 41 +- site/src/content/docs/utilities/padding.mdx | 160 ++- .../content/docs/utilities/place-items.mdx | 2 + .../content/docs/utilities/pointer-events.mdx | 9 +- site/src/content/docs/utilities/position.mdx | 68 +- site/src/content/docs/utilities/shadows.mdx | 15 +- site/src/content/docs/utilities/sizing.mdx | 131 -- site/src/content/docs/utilities/spacing.mdx | 242 ---- .../content/docs/utilities/text-alignment.mdx | 16 +- .../docs/utilities/text-decoration.mdx | 94 +- .../content/docs/utilities/text-transform.mdx | 23 + .../content/docs/utilities/text-wrapping.mdx | 46 +- site/src/content/docs/utilities/text.mdx | 233 ---- .../content/docs/utilities/user-select.mdx | 12 +- .../content/docs/utilities/vertical-align.mdx | 21 +- .../src/content/docs/utilities/visibility.mdx | 9 +- site/src/content/docs/utilities/width.mdx | 112 +- .../src/content/docs/utilities/word-break.mdx | 23 + site/src/content/docs/utilities/z-index.mdx | 18 +- site/src/layouts/DocsLayout.astro | 62 +- site/src/libs/content.ts | 7 +- site/src/scss/_component-examples.scss | 6 + site/src/scss/_details.scss | 57 + site/src/scss/_patterns.scss | 31 + site/src/scss/_sidebar.scss | 11 +- site/src/scss/docs.scss | 2 + site/src/types/auto-import.d.ts | 1 + 120 files changed, 3924 insertions(+), 2206 deletions(-) create mode 100644 build/generate-utilities-json.mjs create mode 100644 build/generate-utilities-metadata.scss create mode 100644 dist/css/bootstrap-utilities.metadata.json create mode 100644 site/src/components/HelperReferenceTable.astro create mode 100644 site/src/components/UtilityReferenceTable.astro create mode 100644 site/src/components/shortcodes/DETAILS_README.md create mode 100644 site/src/components/shortcodes/Details.astro delete mode 100644 site/src/content/callouts/warning-color-assistive-technologies.md create mode 100644 site/src/content/details/warning-color-assistive-technologies.md create mode 100644 site/src/content/docs/utilities/border-color.mdx create mode 100644 site/src/content/docs/utilities/font-family.mdx create mode 100644 site/src/content/docs/utilities/font-size.mdx create mode 100644 site/src/content/docs/utilities/font-weight.mdx create mode 100644 site/src/content/docs/utilities/gap.mdx create mode 100644 site/src/content/docs/utilities/grid.mdx create mode 100644 site/src/content/docs/utilities/line-height.mdx delete mode 100644 site/src/content/docs/utilities/sizing.mdx delete mode 100644 site/src/content/docs/utilities/spacing.mdx create mode 100644 site/src/content/docs/utilities/text-transform.mdx delete mode 100644 site/src/content/docs/utilities/text.mdx create mode 100644 site/src/content/docs/utilities/word-break.mdx create mode 100644 site/src/scss/_details.scss create mode 100644 site/src/scss/_patterns.scss diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index b9aa1a9d85..75a0d34afa 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -10,7 +10,7 @@ }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "5.25 kB" + "maxSize": "5.5 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", @@ -18,11 +18,11 @@ }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "14.0 kB" + "maxSize": "15.0 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "12.25 kB" + "maxSize": "13.25 kB" }, { "path": "./dist/css/bootstrap.css", diff --git a/.cspell.json b/.cspell.json index 872c34b23c..8fce1c3281 100644 --- a/.cspell.json +++ b/.cspell.json @@ -48,6 +48,7 @@ "favicons", "fieldsets", "flexbox", + "frontmatter", "fullscreen", "getbootstrap", "Grayscale", diff --git a/build/generate-utilities-json.mjs b/build/generate-utilities-json.mjs new file mode 100644 index 0000000000..bea11f991f --- /dev/null +++ b/build/generate-utilities-json.mjs @@ -0,0 +1,91 @@ +#!/usr/bin/env node + +/** + * Generate utilities metadata JSON from Sass + * This script compiles a special Sass file that outputs utility information as CSS comments, + * then extracts and saves it as JSON for documentation use. + */ + +import { readFileSync, writeFileSync, unlinkSync } from 'node:fs' +import { execSync } from 'node:child_process' +import { fileURLToPath } from 'node:url' +import path from 'node:path' + +const __dirname = path.dirname(fileURLToPath(import.meta.url)) +const rootDir = path.join(__dirname, '..') + +// Compile the metadata generator SCSS file +console.log('Compiling utilities metadata...') + +try { + execSync( + 'sass --style expanded --no-source-map build/generate-utilities-metadata.scss:dist/css/utilities-metadata.tmp.css', + { cwd: rootDir, stdio: 'inherit' } + ) +} catch { + console.error('Failed to compile metadata SCSS') + process.exit(1) +} + +// Read the compiled CSS +const cssPath = path.join(rootDir, 'dist/css/utilities-metadata.tmp.css') +const cssContent = readFileSync(cssPath, 'utf8') + +// Extract JSON from the CSS comment +const startMarker = 'BOOTSTRAP-UTILITIES-METADATA-START' +const endMarker = 'BOOTSTRAP-UTILITIES-METADATA-END' + +const startIndex = cssContent.indexOf(startMarker) +const endIndex = cssContent.indexOf(endMarker) + +if (startIndex === -1 || endIndex === -1) { + console.error('Could not find metadata markers in compiled CSS') + process.exit(1) +} + +// Extract JSON content between markers +const jsonContent = cssContent + .slice(startIndex + startMarker.length, endIndex) + .trim() + +// Validate JSON +try { + const parsed = JSON.parse(jsonContent) + console.log(`✓ Extracted metadata for ${Object.keys(parsed.utilities).length} utilities`) + + // Write to JSON file + const outputPath = path.join(rootDir, 'dist/css/bootstrap-utilities.metadata.json') + writeFileSync(outputPath, JSON.stringify(parsed, null, 2)) + console.log(`✓ Wrote metadata to ${outputPath}`) + + // Clean up temporary CSS files (including RTL variants that may have been generated) + try { + unlinkSync(cssPath) + } catch { + // File may not exist + } + + // Also clean up any RTL variants that postcss may have created + const rtlFiles = [ + 'dist/css/utilities-metadata.tmp.rtl.css', + 'dist/css/utilities-metadata.tmp.rtl.css.map', + 'dist/css/utilities-metadata.tmp.rtl.min.css', + 'dist/css/utilities-metadata.tmp.rtl.min.css.map', + 'dist/css/utilities-metadata.tmp.min.css', + 'dist/css/utilities-metadata.tmp.min.css.map' + ] + + for (const file of rtlFiles) { + try { + unlinkSync(path.join(rootDir, file)) + } catch { + // File may not exist, ignore + } + } + + console.log('✓ Cleaned up temporary files') +} catch (error) { + console.error('Failed to parse extracted JSON:', error.message) + console.error('Extracted content:', jsonContent.slice(0, 500)) + process.exit(1) +} diff --git a/build/generate-utilities-metadata.scss b/build/generate-utilities-metadata.scss new file mode 100644 index 0000000000..8d0a387ed2 --- /dev/null +++ b/build/generate-utilities-metadata.scss @@ -0,0 +1,112 @@ +// Generate utilities metadata JSON for documentation +// This file is compiled to extract utility information without generating CSS + +@use "sass:map"; +@use "sass:list"; +@use "sass:string"; +@use "sass:meta"; +@use "../scss/config" as *; +@use "../scss/colors" as *; +@use "../scss/variables" as *; +@use "../scss/functions" as *; +@use "../scss/theme" as *; +@use "../scss/utilities" as *; + +// Access the utilities map +$utilities-map: $utilities !default; + +// Start JSON output +$json: '{"utilities":{' !default; + +$utility-count: 0 !default; +$total-utilities: list.length(map.keys($utilities-map)) !default; + +@each $key, $utility in $utilities-map { + $utility-count: $utility-count + 1; + + // Skip if utility is null or false (disabled) + @if $utility { + // Extract class prefix + $class: if(map.has-key($utility, "class"), map.get($utility, "class"), $key); + + // Extract property + $property: if(map.has-key($utility, "property"), map.get($utility, "property"), null); + + // Extract values + $values: if(map.has-key($utility, "values"), map.get($utility, "values"), null); + + // Generate class list + $classes: ""; + @if $values { + @if meta.type-of($values) == "map" { + $value-keys: map.keys($values); + $first: true; + @each $value-key in $value-keys { + @if not $first { + $classes: $classes + ", "; + } + $class-name: if($value-key == "null" or $value-key == null, $class, "#{$class}-#{$value-key}"); + $classes: $classes + '"' + $class-name + '"'; + $first: false; + } + } @else if meta.type-of($values) == "list" { + $first: true; + @each $value in $values { + @if not $first { + $classes: $classes + ", "; + } + $class-name: "#{$class}-#{$value}"; + $classes: $classes + '"' + $class-name + '"'; + $first: false; + } + } + } + + // Build JSON entry + $json: $json + '"' + $key + '":{"class":"' + $class + '"'; + + @if $property { + @if meta.type-of($property) == "string" { + $json: $json + ',"property":"' + $property + '"'; + } @else if meta.type-of($property) == "list" { + $property-str: ""; + $first: true; + @each $prop in $property { + @if not $first { + $property-str: $property-str + " "; + } + $property-str: $property-str + $prop; + $first: false; + } + $json: $json + ',"property":"' + $property-str + '"'; + } + // Skip map properties as they're complex and don't translate to JSON well + } + + @if $classes != "" { + $json: $json + ',"classes":[' + $classes + "]"; + } @else { + $json: $json + ',"classes":[]'; + } + + $json: $json + "}"; + + @if $utility-count < $total-utilities { + $json: $json + ","; + } + } +} + +// stylelint-disable-next-line scss/dollar-variable-default +$json: $json + "}}"; + +// Output as CSS comment so it appears in compiled file + +/*! BOOTSTRAP-UTILITIES-METADATA-START +#{$json} +BOOTSTRAP-UTILITIES-METADATA-END */ + +// Prevent any actual CSS output +.bootstrap-utilities-metadata-generator { + content: "This file should not generate CSS, only metadata comments"; +} diff --git a/dist/css/bootstrap-utilities.metadata.json b/dist/css/bootstrap-utilities.metadata.json new file mode 100644 index 0000000000..aa0cd198ae --- /dev/null +++ b/dist/css/bootstrap-utilities.metadata.json @@ -0,0 +1,1197 @@ +{ + "utilities": { + "align": { + "class": "align", + "property": "vertical-align", + "classes": [ + "align-baseline", + "align-top", + "align-middle", + "align-bottom", + "align-text-bottom", + "align-text-top" + ] + }, + "aspect-ratio-attr": { + "class": "ratio-", + "property": "aspect-ratio", + "classes": [] + }, + "aspect-ratio": { + "class": "ratio", + "property": "--bs-ratio", + "classes": [ + "ratio-auto", + "ratio-1x1", + "ratio-4x3", + "ratio-16x9", + "ratio-21x9" + ] + }, + "float": { + "class": "float", + "property": "float", + "classes": [ + "float-start", + "float-end", + "float-none" + ] + }, + "object-fit": { + "class": "object-fit", + "property": "object-fit", + "classes": [ + "object-fit-contain", + "object-fit-cover", + "object-fit-fill", + "object-fit-scale", + "object-fit-none" + ] + }, + "opacity": { + "class": "opacity", + "property": "opacity", + "classes": [ + "opacity-0", + "opacity-25", + "opacity-50", + "opacity-75", + "opacity-100" + ] + }, + "overflow": { + "class": "overflow", + "property": "overflow", + "classes": [ + "overflow-auto", + "overflow-hidden", + "overflow-visible", + "overflow-scroll" + ] + }, + "overflow-x": { + "class": "overflow-x", + "property": "overflow-x", + "classes": [ + "overflow-x-auto", + "overflow-x-hidden", + "overflow-x-visible", + "overflow-x-scroll" + ] + }, + "overflow-y": { + "class": "overflow-y", + "property": "overflow-y", + "classes": [ + "overflow-y-auto", + "overflow-y-hidden", + "overflow-y-visible", + "overflow-y-scroll" + ] + }, + "display": { + "class": "d", + "property": "display", + "classes": [ + "d-inline", + "d-inline-block", + "d-block", + "d-grid", + "d-inline-grid", + "d-table", + "d-table-row", + "d-table-cell", + "d-flex", + "d-inline-flex", + "d-contents", + "d-flow-root", + "d-none" + ] + }, + "shadow": { + "class": "shadow", + "property": "box-shadow", + "classes": [ + "shadow", + "shadow-sm", + "shadow-lg", + "shadow-none" + ] + }, + "focus-ring": { + "class": "focus-ring", + "property": "--bs-focus-ring-color", + "classes": [ + "focus-ring-primary", + "focus-ring-accent", + "focus-ring-success", + "focus-ring-danger", + "focus-ring-warning", + "focus-ring-info", + "focus-ring-inverse", + "focus-ring-secondary" + ] + }, + "position": { + "class": "position", + "property": "position", + "classes": [ + "position-static", + "position-relative", + "position-absolute", + "position-fixed", + "position-sticky" + ] + }, + "top": { + "class": "top", + "property": "top", + "classes": [ + "top-0", + "top-50", + "top-100" + ] + }, + "bottom": { + "class": "bottom", + "property": "bottom", + "classes": [ + "bottom-0", + "bottom-50", + "bottom-100" + ] + }, + "start": { + "class": "start", + "property": "left", + "classes": [ + "start-0", + "start-50", + "start-100" + ] + }, + "end": { + "class": "end", + "property": "right", + "classes": [ + "end-0", + "end-50", + "end-100" + ] + }, + "translate-middle": { + "class": "translate-middle", + "property": "transform", + "classes": [ + "translate-middle", + "translate-middle-x", + "translate-middle-y" + ] + }, + "border": { + "class": "border", + "property": "border", + "classes": [ + "border", + "border-0" + ] + }, + "border-top": { + "class": "border-top", + "property": "border-block-start", + "classes": [ + "border-top", + "border-top-0" + ] + }, + "border-end": { + "class": "border-end", + "property": "border-inline-end", + "classes": [ + "border-end", + "border-end-0" + ] + }, + "border-bottom": { + "class": "border-bottom", + "property": "border-block-end", + "classes": [ + "border-bottom", + "border-bottom-0" + ] + }, + "border-start": { + "class": "border-start", + "property": "border-inline-start", + "classes": [ + "border-start", + "border-start-0" + ] + }, + "border-y": { + "class": "border-y", + "property": "border-block", + "classes": [ + "border-y", + "border-y-0" + ] + }, + "border-x": { + "class": "border-x", + "property": "border-inline", + "classes": [ + "border-x", + "border-x-0" + ] + }, + "border-color": { + "class": "border", + "classes": [ + "border-primary", + "border-accent", + "border-success", + "border-danger", + "border-warning", + "border-info", + "border-inverse", + "border-secondary", + "border-bg", + "border-body", + "border-muted", + "border-subtle", + "border-emphasized", + "border-white", + "border-black" + ] + }, + "border-color-subtle": { + "class": "border-subtle", + "classes": [ + "border-subtle-primary", + "border-subtle-accent", + "border-subtle-success", + "border-subtle-danger", + "border-subtle-warning", + "border-subtle-info", + "border-subtle-inverse", + "border-subtle-secondary" + ] + }, + "border-width": { + "class": "border", + "property": "border-width", + "classes": [ + "border-1", + "border-2", + "border-3", + "border-4", + "border-5" + ] + }, + "border-opacity": { + "class": "border", + "property": "border-color", + "classes": [ + "border-10", + "border-20", + "border-30", + "border-40", + "border-50", + "border-60", + "border-70", + "border-80", + "border-90", + "border-100" + ] + }, + "width": { + "class": "w", + "property": "width", + "classes": [ + "w-1", + "w-2", + "w-3", + "w-4", + "w-5", + "w-6", + "w-7", + "w-8", + "w-9", + "w-10", + "w-11", + "w-12", + "w-25", + "w-50", + "w-75", + "w-100", + "w-auto", + "w-min", + "w-max", + "w-fit" + ] + }, + "max-width": { + "class": "max-w", + "property": "max-width", + "classes": [ + "max-w-100" + ] + }, + "min-width": { + "class": "min-w", + "property": "min-width", + "classes": [ + "min-w-0", + "min-w-100" + ] + }, + "viewport-width": { + "class": "vw", + "property": "width", + "classes": [ + "vw-100" + ] + }, + "min-viewport-width": { + "class": "min-vw", + "property": "min-width", + "classes": [ + "min-vw-100" + ] + }, + "height": { + "class": "h", + "property": "height", + "classes": [ + "h-25", + "h-50", + "h-75", + "h-100", + "h-auto", + "h-min", + "h-max", + "h-fit" + ] + }, + "max-height": { + "class": "max-h", + "property": "max-height", + "classes": [ + "max-h-100" + ] + }, + "min-height": { + "class": "min-h", + "property": "min-height", + "classes": [ + "min-h-0", + "min-h-100" + ] + }, + "viewport-height": { + "class": "vh", + "property": "height", + "classes": [ + "vh-100" + ] + }, + "min-viewport-height": { + "class": "min-vh", + "property": "min-height", + "classes": [ + "min-vh-100" + ] + }, + "flex": { + "class": "flex", + "property": "flex", + "classes": [ + "flex-fill" + ] + }, + "flex-direction": { + "class": "flex", + "property": "flex-direction", + "classes": [ + "flex-row", + "flex-column", + "flex-row-reverse", + "flex-column-reverse" + ] + }, + "flex-grow": { + "class": "flex", + "property": "flex-grow", + "classes": [ + "flex-grow-0", + "flex-grow-1" + ] + }, + "flex-shrink": { + "class": "flex", + "property": "flex-shrink", + "classes": [ + "flex-shrink-0", + "flex-shrink-1" + ] + }, + "flex-wrap": { + "class": "flex", + "property": "flex-wrap", + "classes": [ + "flex-wrap", + "flex-nowrap", + "flex-wrap-reverse" + ] + }, + "justify-content": { + "class": "justify-content", + "property": "justify-content", + "classes": [ + "justify-content-start", + "justify-content-end", + "justify-content-center", + "justify-content-between", + "justify-content-around", + "justify-content-evenly" + ] + }, + "justify-items": { + "class": "justify-items", + "property": "justify-items", + "classes": [ + "justify-items-start", + "justify-items-end", + "justify-items-center", + "justify-items-stretch" + ] + }, + "justify-self": { + "class": "justify-self", + "property": "justify-self", + "classes": [ + "justify-self-start", + "justify-self-end", + "justify-self-center" + ] + }, + "align-items": { + "class": "align-items", + "property": "align-items", + "classes": [ + "align-items-start", + "align-items-end", + "align-items-center", + "align-items-baseline", + "align-items-stretch" + ] + }, + "align-content": { + "class": "align-content", + "property": "align-content", + "classes": [ + "align-content-start", + "align-content-end", + "align-content-center", + "align-content-between", + "align-content-around", + "align-content-stretch" + ] + }, + "align-self": { + "class": "align-self", + "property": "align-self", + "classes": [ + "align-self-auto", + "align-self-start", + "align-self-end", + "align-self-center", + "align-self-baseline", + "align-self-stretch" + ] + }, + "place-items": { + "class": "place-items", + "property": "place-items", + "classes": [ + "place-items-start", + "place-items-end", + "place-items-center", + "place-items-stretch" + ] + }, + "grid-column-counts": { + "class": "grid-cols", + "property": "--bs-columns", + "classes": [ + "grid-cols-3", + "grid-cols-4", + "grid-cols-6" + ] + }, + "grid-columns": { + "class": "grid-cols", + "property": "grid-column", + "classes": [ + "grid-cols-fill" + ] + }, + "grid-auto-flow": { + "class": "grid-auto-flow", + "property": "grid-auto-flow", + "classes": [ + "grid-auto-flow-row", + "grid-auto-flow-column", + "grid-auto-flow-dense" + ] + }, + "order": { + "class": "order", + "property": "order", + "classes": [ + "order-first", + "order-0", + "order-1", + "order-2", + "order-3", + "order-4", + "order-5", + "order-last" + ] + }, + "margin": { + "class": "m", + "property": "margin", + "classes": [ + "m-0", + "m-1", + "m-2", + "m-3", + "m-4", + "m-5", + "m-auto" + ] + }, + "margin-x": { + "class": "mx", + "property": "margin-right margin-left", + "classes": [ + "mx-0", + "mx-1", + "mx-2", + "mx-3", + "mx-4", + "mx-5", + "mx-auto" + ] + }, + "margin-y": { + "class": "my", + "property": "margin-top margin-bottom", + "classes": [ + "my-0", + "my-1", + "my-2", + "my-3", + "my-4", + "my-5", + "my-auto" + ] + }, + "margin-top": { + "class": "mt", + "property": "margin-top", + "classes": [ + "mt-0", + "mt-1", + "mt-2", + "mt-3", + "mt-4", + "mt-5", + "mt-auto" + ] + }, + "margin-end": { + "class": "me", + "property": "margin-right", + "classes": [ + "me-0", + "me-1", + "me-2", + "me-3", + "me-4", + "me-5", + "me-auto" + ] + }, + "margin-bottom": { + "class": "mb", + "property": "margin-bottom", + "classes": [ + "mb-0", + "mb-1", + "mb-2", + "mb-3", + "mb-4", + "mb-5", + "mb-auto" + ] + }, + "margin-start": { + "class": "ms", + "property": "margin-left", + "classes": [ + "ms-0", + "ms-1", + "ms-2", + "ms-3", + "ms-4", + "ms-5", + "ms-auto" + ] + }, + "padding": { + "class": "p", + "property": "padding", + "classes": [ + "p-0", + "p-1", + "p-2", + "p-3", + "p-4", + "p-5" + ] + }, + "padding-x": { + "class": "px", + "property": "padding-right padding-left", + "classes": [ + "px-0", + "px-1", + "px-2", + "px-3", + "px-4", + "px-5" + ] + }, + "padding-y": { + "class": "py", + "property": "padding-top padding-bottom", + "classes": [ + "py-0", + "py-1", + "py-2", + "py-3", + "py-4", + "py-5" + ] + }, + "padding-top": { + "class": "pt", + "property": "padding-top", + "classes": [ + "pt-0", + "pt-1", + "pt-2", + "pt-3", + "pt-4", + "pt-5" + ] + }, + "padding-end": { + "class": "pe", + "property": "padding-right", + "classes": [ + "pe-0", + "pe-1", + "pe-2", + "pe-3", + "pe-4", + "pe-5" + ] + }, + "padding-bottom": { + "class": "pb", + "property": "padding-bottom", + "classes": [ + "pb-0", + "pb-1", + "pb-2", + "pb-3", + "pb-4", + "pb-5" + ] + }, + "padding-start": { + "class": "ps", + "property": "padding-left", + "classes": [ + "ps-0", + "ps-1", + "ps-2", + "ps-3", + "ps-4", + "ps-5" + ] + }, + "gap": { + "class": "gap", + "property": "gap", + "classes": [ + "gap-0", + "gap-1", + "gap-2", + "gap-3", + "gap-4", + "gap-5" + ] + }, + "row-gap": { + "class": "row-gap", + "property": "row-gap", + "classes": [ + "row-gap-0", + "row-gap-1", + "row-gap-2", + "row-gap-3", + "row-gap-4", + "row-gap-5" + ] + }, + "column-gap": { + "class": "column-gap", + "property": "column-gap", + "classes": [ + "column-gap-0", + "column-gap-1", + "column-gap-2", + "column-gap-3", + "column-gap-4", + "column-gap-5" + ] + }, + "font-family": { + "class": "font", + "property": "font-family", + "classes": [ + "font-monospace", + "font-body" + ] + }, + "font-size": { + "class": "fs", + "property": "font-size", + "classes": [ + "fs-xs", + "fs-sm", + "fs-md", + "fs-lg", + "fs-xl", + "fs-2xl", + "fs-3xl", + "fs-4xl", + "fs-5xl", + "fs-6xl" + ] + }, + "text-size": { + "class": "text", + "classes": [ + "text-xs", + "text-sm", + "text-md", + "text-lg", + "text-xl", + "text-2xl", + "text-3xl", + "text-4xl", + "text-5xl", + "text-6xl" + ] + }, + "font-style": { + "class": "fst", + "property": "font-style", + "classes": [ + "fst-italic", + "fst-normal" + ] + }, + "font-weight": { + "class": "fw", + "property": "font-weight", + "classes": [ + "fw-lighter", + "fw-light", + "fw-normal", + "fw-medium", + "fw-semibold", + "fw-bold", + "fw-bolder" + ] + }, + "line-height": { + "class": "lh", + "property": "line-height", + "classes": [ + "lh-1", + "lh-sm", + "lh-base", + "lh-lg" + ] + }, + "text-align": { + "class": "text", + "property": "text-align", + "classes": [ + "text-start", + "text-end", + "text-center" + ] + }, + "text-decoration": { + "class": "text-decoration", + "property": "text-decoration", + "classes": [ + "text-decoration-none", + "text-decoration-underline", + "text-decoration-line-through" + ] + }, + "text-transform": { + "class": "text", + "property": "text-transform", + "classes": [ + "text-lowercase", + "text-uppercase", + "text-capitalize" + ] + }, + "text-wrap": { + "class": "text", + "property": "white-space", + "classes": [ + "text-wrap", + "text-nowrap", + "text-balance", + "text-pretty" + ] + }, + "word-wrap": { + "class": "text", + "property": "word-wrap word-break", + "classes": [ + "text-break" + ] + }, + "fg": { + "class": "fg", + "classes": [ + "fg-primary", + "fg-accent", + "fg-success", + "fg-danger", + "fg-warning", + "fg-info", + "fg-inverse", + "fg-secondary", + "fg-body", + "fg-1", + "fg-2", + "fg-3", + "fg-white", + "fg-black", + "fg-inherit" + ] + }, + "fg-emphasis": { + "class": "fg-emphasis", + "classes": [ + "fg-emphasis-primary", + "fg-emphasis-accent", + "fg-emphasis-success", + "fg-emphasis-danger", + "fg-emphasis-warning", + "fg-emphasis-info", + "fg-emphasis-inverse", + "fg-emphasis-secondary" + ] + }, + "fg-opacity": { + "class": "fg", + "property": "color", + "classes": [ + "fg-10", + "fg-20", + "fg-30", + "fg-40", + "fg-50", + "fg-60", + "fg-70", + "fg-80", + "fg-90", + "fg-100" + ] + }, + "fg-contrast": { + "class": "fg-contrast", + "classes": [ + "fg-contrast-primary", + "fg-contrast-accent", + "fg-contrast-success", + "fg-contrast-danger", + "fg-contrast-warning", + "fg-contrast-info", + "fg-contrast-inverse", + "fg-contrast-secondary" + ] + }, + "link-opacity": { + "class": "link", + "property": "color", + "classes": [ + "link-10", + "link-20", + "link-30", + "link-40", + "link-50", + "link-60", + "link-70", + "link-80", + "link-90", + "link-100" + ] + }, + "underline-offset": { + "class": "underline-offset", + "property": "text-underline-offset", + "classes": [ + "underline-offset-1", + "underline-offset-2", + "underline-offset-3" + ] + }, + "underline-color": { + "class": "underline", + "property": "text-decoration-color", + "classes": [ + "underline-primary", + "underline-accent", + "underline-success", + "underline-danger", + "underline-warning", + "underline-info", + "underline-inverse", + "underline-secondary" + ] + }, + "underline-opacity": { + "class": "underline", + "property": "text-decoration-color", + "classes": [ + "underline-10", + "underline-20", + "underline-30", + "underline-40", + "underline-50", + "underline-60", + "underline-70", + "underline-80", + "underline-90", + "underline-100" + ] + }, + "underline-thickness": { + "class": "underline-thickness", + "property": "text-decoration-thickness", + "classes": [ + "underline-thickness-1", + "underline-thickness-2", + "underline-thickness-3", + "underline-thickness-4", + "underline-thickness-5" + ] + }, + "bg-color": { + "class": "bg", + "classes": [ + "bg-primary", + "bg-accent", + "bg-success", + "bg-danger", + "bg-warning", + "bg-info", + "bg-inverse", + "bg-secondary", + "bg-body", + "bg-1", + "bg-2", + "bg-3", + "bg-white", + "bg-black", + "bg-transparent", + "bg-inherit" + ] + }, + "bg-color-subtle": { + "class": "bg-subtle", + "classes": [ + "bg-subtle-primary", + "bg-subtle-accent", + "bg-subtle-success", + "bg-subtle-danger", + "bg-subtle-warning", + "bg-subtle-info", + "bg-subtle-inverse", + "bg-subtle-secondary" + ] + }, + "bg-color-muted": { + "class": "bg-muted", + "classes": [ + "bg-muted-primary", + "bg-muted-accent", + "bg-muted-success", + "bg-muted-danger", + "bg-muted-warning", + "bg-muted-info", + "bg-muted-inverse", + "bg-muted-secondary" + ] + }, + "bg-opacity": { + "class": "bg", + "property": "background-color", + "classes": [ + "bg-10", + "bg-20", + "bg-30", + "bg-40", + "bg-50", + "bg-60", + "bg-70", + "bg-80", + "bg-90", + "bg-100" + ] + }, + "gradient": { + "class": "bg", + "property": "background-image", + "classes": [ + "bg-gradient" + ] + }, + "user-select": { + "class": "user-select", + "property": "user-select", + "classes": [ + "user-select-all", + "user-select-auto", + "user-select-none" + ] + }, + "pointer-events": { + "class": "pe", + "property": "pointer-events", + "classes": [ + "pe-none", + "pe-auto" + ] + }, + "border-radius": { + "class": "rounded", + "property": "border-radius", + "classes": [ + "rounded", + "rounded-0", + "rounded-1", + "rounded-2", + "rounded-3", + "rounded-4", + "rounded-5", + "rounded-circle", + "rounded-pill" + ] + }, + "rounded-top": { + "class": "rounded-top", + "property": "border-top-left-radius border-top-right-radius", + "classes": [ + "rounded-top", + "rounded-top-0", + "rounded-top-1", + "rounded-top-2", + "rounded-top-3", + "rounded-top-4", + "rounded-top-5", + "rounded-top-circle", + "rounded-top-pill" + ] + }, + "rounded-end": { + "class": "rounded-end", + "property": "border-top-right-radius border-bottom-right-radius", + "classes": [ + "rounded-end", + "rounded-end-0", + "rounded-end-1", + "rounded-end-2", + "rounded-end-3", + "rounded-end-4", + "rounded-end-5", + "rounded-end-circle", + "rounded-end-pill" + ] + }, + "rounded-bottom": { + "class": "rounded-bottom", + "property": "border-bottom-right-radius border-bottom-left-radius", + "classes": [ + "rounded-bottom", + "rounded-bottom-0", + "rounded-bottom-1", + "rounded-bottom-2", + "rounded-bottom-3", + "rounded-bottom-4", + "rounded-bottom-5", + "rounded-bottom-circle", + "rounded-bottom-pill" + ] + }, + "rounded-start": { + "class": "rounded-start", + "property": "border-bottom-left-radius border-top-left-radius", + "classes": [ + "rounded-start", + "rounded-start-0", + "rounded-start-1", + "rounded-start-2", + "rounded-start-3", + "rounded-start-4", + "rounded-start-5", + "rounded-start-circle", + "rounded-start-pill" + ] + }, + "visibility": { + "class": "", + "property": "visibility", + "classes": [ + "-visible", + "-invisible" + ] + }, + "z-index": { + "class": "z", + "property": "z-index", + "classes": [ + "z-n1", + "z-0", + "z-1", + "z-2", + "z-3" + ] + } + } +} \ No newline at end of file diff --git a/package.json b/package.json index 24a7157d98..b72d26cf10 100644 --- a/package.json +++ b/package.json @@ -41,17 +41,18 @@ "scripts": { "start": "npm-run-all --parallel watch docs-serve", "bundlewatch": "bundlewatch --config .bundlewatch.config.json", - "css": "npm-run-all css-compile css-prefix css-rtl css-minify", + "css": "npm-run-all css-compile css-prefix css-rtl css-minify css-docs", "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css scss/bootstrap-grid.scss:dist/css/bootstrap-grid.css scss/bootstrap-reboot.scss:dist/css/bootstrap-reboot.css scss/bootstrap-utilities.scss:dist/css/bootstrap-utilities.css", - "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", + "css-docs": "node build/generate-utilities-json.mjs", + "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\" \"!dist/css/*.tmp.css\"", "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache", "css-lint-vars": "fusv scss/ site/src/scss/", "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*", - "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"", + "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\" \"!dist/css/*.tmp.css\"", "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"", "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*", - "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"", + "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.tmp.css\"", "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/src/assets/examples/**/*.css\"", "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site/src/assets/examples/\" --ext \".rtl.css\" --base \"site/src/assets/examples/\" \"site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"", "css-test": "jasmine --config=scss/tests/jasmine.js", diff --git a/scss/_card.scss b/scss/_card.scss index b02dc65e05..df4bcda163 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -116,7 +116,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; .card-link { &:hover { - text-decoration: if($link-hover-decoration == underline, none, null); + text-decoration: none; } + .card-link { diff --git a/scss/_colors.scss b/scss/_colors.scss index d260291de9..05a7d4ae09 100644 --- a/scss/_colors.scss +++ b/scss/_colors.scss @@ -41,19 +41,19 @@ $hues: ( :root { @each $color, $hue in $hues { - --#{$prefix}#{$color}-025: color-mix(in oklch, #fff 94%, #{$hue}); - --#{$prefix}#{$color}-050: color-mix(in oklch, #fff 90%, #{$hue}); - --#{$prefix}#{$color}-100: color-mix(in oklch, #fff 80%, #{$hue}); - --#{$prefix}#{$color}-200: color-mix(in oklch, #fff 60%, #{$hue}); - --#{$prefix}#{$color}-300: color-mix(in oklch, #fff 40%, #{$hue}); - --#{$prefix}#{$color}-400: color-mix(in oklch, #fff 20%, #{$hue}); + --#{$prefix}#{$color}-025: color-mix(in lab, #fff 94%, #{$hue}); + --#{$prefix}#{$color}-050: color-mix(in lab, #fff 90%, #{$hue}); + --#{$prefix}#{$color}-100: color-mix(in lab, #fff 80%, #{$hue}); + --#{$prefix}#{$color}-200: color-mix(in lab, #fff 60%, #{$hue}); + --#{$prefix}#{$color}-300: color-mix(in lab, #fff 40%, #{$hue}); + --#{$prefix}#{$color}-400: color-mix(in lab, #fff 20%, #{$hue}); --#{$prefix}#{$color}-500: #{$hue}; - --#{$prefix}#{$color}-600: color-mix(in oklch, #000 16%, #{$hue}); - --#{$prefix}#{$color}-700: color-mix(in oklch, #000 32%, #{$hue}); - --#{$prefix}#{$color}-800: color-mix(in oklch, #000 48%, #{$hue}); - --#{$prefix}#{$color}-900: color-mix(in oklch, #000 64%, #{$hue}); - --#{$prefix}#{$color}-950: color-mix(in oklch, #000 76%, #{$hue}); - --#{$prefix}#{$color}-975: color-mix(in oklch, #000 88%, #{$hue}); + --#{$prefix}#{$color}-600: color-mix(in lab, #000 16%, #{$hue}); + --#{$prefix}#{$color}-700: color-mix(in lab, #000 32%, #{$hue}); + --#{$prefix}#{$color}-800: color-mix(in lab, #000 48%, #{$hue}); + --#{$prefix}#{$color}-900: color-mix(in lab, #000 64%, #{$hue}); + --#{$prefix}#{$color}-950: color-mix(in lab, #000 76%, #{$hue}); + --#{$prefix}#{$color}-975: color-mix(in lab, #000 88%, #{$hue}); } } diff --git a/scss/_config.scss b/scss/_config.scss index 0bc966bc76..f1c83d83d4 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -42,6 +42,21 @@ $spacers: ( ) !default; // scss-docs-end spacer-variables-maps +$sizes: ( + 1: $spacer, + 2: calc($spacer * 2), + 3: calc($spacer * 3), + 4: calc($spacer * 4), + 5: calc($spacer * 5), + 6: calc($spacer * 6), + 7: calc($spacer * 7), + 8: calc($spacer * 8), + 9: calc($spacer * 9), + 10: calc($spacer * 10), + 11: calc($spacer * 11), + 12: calc($spacer * 12), +) !default; + // Grid breakpoints // // Define the minimum dimensions at which your layout will change, diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 9859f9ce25..090ba6de96 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -241,7 +241,7 @@ $dropdown-dark-header-color: var(--#{$prefix}gray-500) !default; font-weight: $font-weight-normal; color: var(--#{$prefix}dropdown-link-color); text-align: inherit; // For ``]} /> - +
## Disable text wrapping diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx index 0211dbd2bc..5ba69abe5e 100644 --- a/site/src/content/docs/components/card.mdx +++ b/site/src/content/docs/components/card.mdx @@ -12,7 +12,7 @@ A **card** is a flexible and extensible content container. It includes options f ## Example -Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [spacing utilities]([[docsref:/utilities/spacing]]) as needed. +Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [margin utilities]([[docsref:/utilities/margin]]) as needed. Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing). @@ -208,7 +208,7 @@ Using the grid, wrap cards in columns and rows as needed. ### Using utilities -Use our handful of [available sizing utilities]([[docsref:/utilities/sizing]]) to quickly set a card’s width. +Use our handful of [available sizing utilities]([[docsref:/utilities/width]]) to quickly set a card’s width.
@@ -240,7 +240,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width. ## Text alignment -You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text#text-alignment]]). +You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]([[docsref:/utilities/text-alignment]]).
@@ -389,7 +389,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
`)} /> - +
### Border diff --git a/site/src/content/docs/components/collapse.mdx b/site/src/content/docs/components/collapse.mdx index 8124c492f3..168e5e46c0 100644 --- a/site/src/content/docs/components/collapse.mdx +++ b/site/src/content/docs/components/collapse.mdx @@ -36,7 +36,7 @@ Generally, we recommend using a ` - + + `} /> Create an inline form with `.hstack`: - -
- + +
+ `} /> ## CSS diff --git a/site/src/content/docs/layout/columns.mdx b/site/src/content/docs/layout/columns.mdx index fd2e18c31d..11ba702710 100644 --- a/site/src/content/docs/layout/columns.mdx +++ b/site/src/content/docs/layout/columns.mdx @@ -241,7 +241,7 @@ $utilities: map-merge( ### Offsetting columns -You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]([[docsref:/utilities/spacing]]). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. +You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]([[docsref:/utilities/margin]]). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. #### Offset classes diff --git a/site/src/content/docs/layout/css-grid.mdx b/site/src/content/docs/layout/css-grid.mdx index 55d5bbfaeb..e0134b21bc 100644 --- a/site/src/content/docs/layout/css-grid.mdx +++ b/site/src/content/docs/layout/css-grid.mdx @@ -53,6 +53,12 @@ Three equal-width columns across all viewports and devices can be created by usi
.g-col-4
`} /> + +
.g-col-auto
+
.g-col-auto
+
.g-col-auto
+ `} /> + ### Responsive Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above. diff --git a/site/src/content/docs/layout/grid.mdx b/site/src/content/docs/layout/grid.mdx index 0aeda1a5ca..0ea0d04034 100644 --- a/site/src/content/docs/layout/grid.mdx +++ b/site/src/content/docs/layout/grid.mdx @@ -43,7 +43,7 @@ Breaking it down, here’s how the grid system comes together: - **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `col-4` spans four). `width`s are set in percentages so you always have the same relative sizing. -- **Gutters are also responsive and customizable.** [Gutter classes are available]([[docsref:/layout/gutters]]) across all breakpoints, with all the same sizes as our [margin and padding spacing]([[docsref:/utilities/spacing]]). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters. +- **Gutters are also responsive and customizable.** [Gutter classes are available]([[docsref:/layout/gutters]]) across all breakpoints, with all the same sizes as our [margin]([[docsref:/utilities/margin]]) and [padding]([[docsref:/utilities/padding]]) utilities. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters. - **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes in Bootstrap, you can use our [grid’s source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. diff --git a/site/src/content/docs/layout/gutters.mdx b/site/src/content/docs/layout/gutters.mdx index e3efe5da41..bda62c8165 100644 --- a/site/src/content/docs/layout/gutters.mdx +++ b/site/src/content/docs/layout/gutters.mdx @@ -8,7 +8,7 @@ toc: true - **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content. -- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers]([[docsref:/utilities/spacing]]) scale. +- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [margin]([[docsref:/utilities/margin]]) and [padding]([[docsref:/utilities/padding]]) utilities scale. - **Gutters can be responsively adjusted.** Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters. diff --git a/site/src/content/docs/layout/utilities.mdx b/site/src/content/docs/layout/utilities.mdx index fd5e8b7a88..02ccb8e2f2 100644 --- a/site/src/content/docs/layout/utilities.mdx +++ b/site/src/content/docs/layout/utilities.mdx @@ -16,7 +16,7 @@ Should you need to add `display: flex` to an element, do so with `.d-flex` or on ## Margin and padding -Use the `margin` and `padding` [spacing utilities]([[docsref:/utilities/spacing]]) to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1rem` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1rem` —in LTR— starting at the `md` breakpoint). +Use the [margin]([[docsref:/utilities/margin]]) and [padding]([[docsref:/utilities/padding]]) utilities to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1rem` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1rem` —in LTR— starting at the `md` breakpoint). ## Toggle `visibility` diff --git a/site/src/content/docs/utilities/align-content.mdx b/site/src/content/docs/utilities/align-content.mdx index bda380635e..32670e99a3 100644 --- a/site/src/content/docs/utilities/align-content.mdx +++ b/site/src/content/docs/utilities/align-content.mdx @@ -3,6 +3,8 @@ title: Align content description: Use align-content utilities to align flex items together on the cross axis. toc: true mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content +utility: + - align-content --- import { getData } from '@libs/data' diff --git a/site/src/content/docs/utilities/align-items.mdx b/site/src/content/docs/utilities/align-items.mdx index 58b8b010fb..0e5f05a806 100644 --- a/site/src/content/docs/utilities/align-items.mdx +++ b/site/src/content/docs/utilities/align-items.mdx @@ -3,6 +3,8 @@ title: Align items description: Use align-items utilities to change the alignment of flex items on the cross axis. toc: true mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items +utility: + - align-items --- import { getData } from '@libs/data' diff --git a/site/src/content/docs/utilities/align-self.mdx b/site/src/content/docs/utilities/align-self.mdx index b5ff495cd8..d0114652d7 100644 --- a/site/src/content/docs/utilities/align-self.mdx +++ b/site/src/content/docs/utilities/align-self.mdx @@ -3,6 +3,8 @@ title: Align self description: Use align-self utilities to individually change the alignment of flex items on the cross axis. toc: true mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self +utility: + - align-self --- import { getData } from '@libs/data' diff --git a/site/src/content/docs/utilities/api.mdx b/site/src/content/docs/utilities/api.mdx index 1604a91d97..0b3e67c012 100644 --- a/site/src/content/docs/utilities/api.mdx +++ b/site/src/content/docs/utilities/api.mdx @@ -85,7 +85,7 @@ Output: Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable). -As a list, like with [`text-decoration` utilities]([[docsref:/utilities/text#text-decoration]]): +As a list, like with [`text-decoration` utilities]([[docsref:/utilities/text-decoration]]): ```scss values: none underline line-through diff --git a/site/src/content/docs/utilities/aspect-ratio.mdx b/site/src/content/docs/utilities/aspect-ratio.mdx index e31ccb46a8..34adc7aa90 100644 --- a/site/src/content/docs/utilities/aspect-ratio.mdx +++ b/site/src/content/docs/utilities/aspect-ratio.mdx @@ -3,22 +3,8 @@ title: Aspect ratio description: Make elements maintain specific aspect ratios. Perfect for handling videos, slideshow embeds, and more based on the width of the parent. toc: true mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio -reference: - - class: ratio-auto - styles: - --bs-ratio: 'auto' - - class: ratio-1x1 - styles: - --bs-ratio: '1 / 1' - - class: ratio-4x3 - styles: - --bs-ratio: '4 / 3' - - class: ratio-16x9 - styles: - --bs-ratio: '16 / 9' - - class: ratio-21x9 - styles: - --bs-ratio: '21 / 9' +utility: + - aspect-ratio --- Use the ratio utility to manage the aspect ratios of content like `