Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[OUDS] Add "Grid" tokens, utilities, examples and documentation #2744

Open
wants to merge 3 commits into
base: ouds/main
Choose a base branch
from
Open

[OUDS] Add "Grid" tokens, utilities, examples and documentation #2744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f2a2a25
Add new OUDS tokens, restore layout pages, restore grid example
hannahiss Sep 26, 2024
bb8b502
Small shift of semantic.
louismaximepiton Oct 22, 2024
33c6ba1
Add tests for grid classes.
louismaximepiton Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
"files": [
{
"path": "./dist/css/ouds-web-bootstrap.css",
"maxSize": "45.25 kB"
"maxSize": "51.0 kB"
},
{
"path": "./dist/css/ouds-web-bootstrap.min.css",
"maxSize": "42.0 kB"
"maxSize": "47.75 kB"
},
{
"path": "./dist/css/ouds-web-grid.css",
"maxSize": "7.0 kB"
"maxSize": "9.5 kB"
},
{
"path": "./dist/css/ouds-web-grid.min.css",
"maxSize": "6.25 kB"
"maxSize": "8.5 kB"
},
{
"path": "./dist/css/ouds-web-reboot.css",
Expand All @@ -26,19 +26,19 @@
},
{
"path": "./dist/css/ouds-web-utilities.css",
"maxSize": "13.0 kB"
"maxSize": "14.25 kB"
},
{
"path": "./dist/css/ouds-web-utilities.min.css",
"maxSize": "12.0 kB"
"maxSize": "13.5 kB"
},
{
"path": "./dist/css/ouds-web.css",
"maxSize": "44.75 kB"
"maxSize": "49.0 kB"
},
{
"path": "./dist/css/ouds-web.min.css",
"maxSize": "41.75 kB"
"maxSize": "45.5 kB"
},
{
"path": "./dist/js/ouds-web.bundle.js",
Expand Down
71 changes: 46 additions & 25 deletions scss/_containers.scss
View file
Open in desktop
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,66 @@
// Set the container width, and override it for fixed navbars in media queries.

@if $enable-container-classes {
// Single container class with breakpoint max-widths
.container,
// 100% wide container at all breakpoints
.container-fluid {
@include make-container();
}

// OUDS mod: `.container-fluid` is not full width in OUDS Web
.container-fluid {
@include make-container-fluid-margin();
}
// End mod

// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
.container-#{$breakpoint} {
@extend .container-fluid;
@if $enable-bootstrap-compatibility { // OUDS mod
// OUDS mod
// Single container class with breakpoint max-widths
.container {
@include make-container();
}
// End mod

@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
@if $breakpoint == 2xl {
.container-xxl {
@extend .container-fluid;
}
}

// Extend each breakpoint which is smaller or equal to the current breakpoint
$extend-breakpoint: true;
.container-#{$breakpoint} {
@extend .container-fluid;
}

@each $name, $width in $grid-breakpoints {
@if ($extend-breakpoint) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
}

// Once the current breakpoint is reached, stop extending
@if ($breakpoint == $name) {
$extend-breakpoint: false;
// Extend each breakpoint which is smaller or equal to the current breakpoint
$extend-breakpoint: true;

@each $name, $width in $grid-breakpoints {
@if ($extend-breakpoint) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}

// Once the current breakpoint is reached, stop extending
@if ($breakpoint == $name) {
$extend-breakpoint: false;
}
}
}
}
}
}

hannahiss marked this conversation as resolved.
Show resolved Hide resolved
// scss-docs-start containers-max
.container-max-width {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have to see if we shouldn't keep the name used by ob1, which is .site-width

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to find a name that fits well with the framework naming.

@include media-breakpoint-up(get-breakpoint-from-width()) {
--#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())};
max-width: $ouds-grid-container-max-width;

.row {
--#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())};
}
}
}
// scss-docs-end containers-max
// End mod
}
2 changes: 1 addition & 1 deletion scss/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
} @else if $prev-num > $num {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
} @else if $prev-num > $num {
} @else if $prev-num > $num { // OUDS mod: ascending order can be equal

@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
Expand Down
37 changes: 36 additions & 1 deletion scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,41 @@ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "l

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

$gutters: $spacers !default;
// OUDS mod
// scss-docs-start grid-gutters
$grid-gutter-widths: (
2xs: $ouds-grid-2xs-column-gap, // 8px
xs: $ouds-grid-xs-column-gap, // 16px
sm: $ouds-grid-sm-column-gap, // 16px
md: $ouds-grid-md-column-gap, // 24px
lg: $ouds-grid-lg-column-gap, // 24px
xl: $ouds-grid-xl-column-gap, // 32px
2xl: $ouds-grid-2xl-column-gap, // 32px
3xl: $ouds-grid-3xl-column-gap // 40px
) !default;
// scss-docs-end grid-gutters

// scss-docs-start gutters
$gutters: (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: this must be mentioned in the migration guide.

none: 0,
smash: 2px,
shortest: 4px,
shorter: 8px,
short: 12px,
medium: 16px,
tall: 24px,
taller: 32px,
tallest: 40px,
spacious: 48px,
huge: 56px,
jumbo: 64px
) !default;
// scss-docs-end gutters

@if $enable-bootstrap-compatibility {
// Add Bootstrap gutters
$gutters: map-merge($gutters, $spacers);
}
// End mod

$alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; // OUDS mod
54 changes: 33 additions & 21 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -548,17 +548,28 @@ $paragraph-margin-bottom: 1rem !default;
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

// OUDS mod
// scss-docs-start grid-breakpoints
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px,
xl: 1280px,
xxl: 1440px
2xs: 0,
xs: $ouds-grid-xs-min-width, // 390px
sm: $ouds-grid-sm-min-width, // 480px
md: $ouds-grid-md-min-width, // 736px
lg: $ouds-grid-lg-min-width, // 1024px
xl: $ouds-grid-xl-min-width, // 1320px
2xl: $ouds-grid-2xl-min-width, // 1640px
3xl: $ouds-grid-3xl-min-width // 1880px
) !default;
// scss-docs-end grid-breakpoints

@if $enable-bootstrap-compatibility {
// Copy 2xl breakpoint into xxl breakpoint
$breakpoint-2xl: map-get($grid-breakpoints, 2xl);
$breakpoint-3xl: map-get($grid-breakpoints, 3xl);
$grid-breakpoints: map-remove($grid-breakpoints, 2xl, 3xl);
$grid-breakpoints: map-merge($grid-breakpoints, (xxl: $breakpoint-2xl, 2xl: $breakpoint-2xl, 3xl: $breakpoint-3xl));
}

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

Expand All @@ -569,25 +580,27 @@ $grid-breakpoints: (

// scss-docs-start container-max-widths
$container-max-widths: (
xs: 312px,
sm: 468px,
md: 744px,
lg: 960px,
xl: 1200px,
xxl: 1320px
xs: $ouds-grid-xs-min-width, // 390px
sm: $ouds-grid-sm-min-width, // 480px
md: $ouds-grid-md-min-width, // 736px
lg: $ouds-grid-lg-min-width, // 1024px
xl: $ouds-grid-xl-min-width, // 1320px
2xl: $ouds-grid-2xl-min-width, // 1640px
3xl: $ouds-grid-3xl-min-width, // 1880px
) !default;

// OUDS mod
$container-fluid-margin: (
xs: 4px,
sm: 6px,
md: 12px,
lg: 32px,
xl: 40px,
xxl: 60px
2xs: $ouds-grid-2xs-margin, // 16px
xs: $ouds-grid-xs-margin, // 24px
sm: $ouds-grid-sm-margin, // 28px
md: $ouds-grid-md-margin, // 32px
lg: $ouds-grid-lg-margin, // 40px
xl: $ouds-grid-xl-margin, // 56px
2xl: $ouds-grid-2xl-margin, // 80px
3xl: $ouds-grid-3xl-margin // 112px
) !default;
// End mod
// scss-docs-end container-max-widths
// End mod

@include _assert-ascending($container-max-widths, "$container-max-widths");

Expand All @@ -598,7 +611,6 @@ $container-fluid-margin: (

$grid-columns: 12 !default;
$grid-gutter-width: $spacer !default;
$grid-gutter-breakpoint: "md" !default; // OUDS mod: gutter depends on breakpoint
$grid-row-columns: 6 !default;

// Container padding
Expand Down
29 changes: 20 additions & 9 deletions scss/mixins/_breakpoints.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
// (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// >> breakpoint-next(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// >> breakpoint-next(sm, $breakpoint-names: (2xs sm md lg xl 2xl 3xl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
Expand All @@ -24,8 +24,8 @@

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
// >> breakpoint-min(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// 736px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
Expand All @@ -38,8 +38,8 @@
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
// >> breakpoint-max(md, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// 735.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
Expand All @@ -48,9 +48,9 @@
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// >> breakpoint-infix(2xs, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// >> breakpoint-infix(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
Expand Down Expand Up @@ -125,3 +125,14 @@
}
}
}

// Get the breakpoint infix corresponding to a given width
@function get-breakpoint-from-width($width: $ouds-grid-container-max-width, $breakpoints: $grid-breakpoints) {
$breakpoint-infix: "";
@each $infix, $value in $grid-breakpoints {
@if $width >= $value {
$breakpoint-infix: $infix;
}
}
@return $breakpoint-infix;
}
21 changes: 6 additions & 15 deletions scss/mixins/_container.scss
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these changes could be in Bootstrap (after the PR maybe) (and remove useless --bs-gutter-x) since it makes almost no sense to have these gutter variables in here.

Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,17 @@
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * .25); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .25); // stylelint-disable-line function-disallowed-list
padding-right: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)`
padding-left: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)`
margin-right: auto;
margin-left: auto;

// OUDS mod: gutter depends on breakpoint
// @note Needs both interpolation and parenthesis to prevent stylelint-scss/dimension-no-non-numeric-values to fail
@include media-breakpoint-up($grid-gutter-breakpoint) {
--#{$prefix}gutter-x: #{($gutter * 2)};
}
// End mod
}

// OUDS mod: fluid containers aren't full width → include margins
@mixin make-container-fluid-margin() {
@each $breakpoint, $container-margin in $container-fluid-margin {
// OUDS mod: gutter depends on breakpoints
@each $breakpoint, $container-fluid-marg in $container-fluid-margin {
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
@include media-breakpoint-up($breakpoint) {
max-width: subtract(100vw, $container-margin * 2);
--#{$prefix}container-margin-x: #{$container-fluid-marg};
}
}
// End mod
}
// End mod
// scss-docs-end container-mixins
Loading
Loading