[go: nahoru, domu]
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

Reduce bootstrap-grid.css content #37844

Merged
merged 2 commits into from
Jan 11, 2023
Merged

Reduce bootstrap-grid.css content #37844

merged 2 commits into from
Jan 11, 2023

Conversation

julien-deramond
Copy link
Member
@julien-deramond julien-deramond commented Jan 9, 2023 •
edited
Loading

Description

This PR removes some imports in bootstrap-grid.scss to lighten the content of bootstrap-grid.css which doesn't need to embed CSS vars from _root.css.

Here is the diff between dist/css/bootstrap-grid.css generated in this PR and when generated with the main branch:

6,179d5
< :root,
< [data-bs-theme=light] {
<   --bs-blue: #0d6efd;
<   --bs-indigo: #6610f2;
<   --bs-purple: #6f42c1;
<   --bs-pink: #d63384;
<   --bs-red: #dc3545;
<   --bs-orange: #fd7e14;
<   --bs-yellow: #ffc107;
<   --bs-green: #198754;
<   --bs-teal: #20c997;
<   --bs-cyan: #0dcaf0;
<   --bs-black: #000;
<   --bs-white: #fff;
<   --bs-gray: #6c757d;
<   --bs-gray-dark: #343a40;
<   --bs-gray-100: #f8f9fa;
<   --bs-gray-200: #e9ecef;
<   --bs-gray-300: #dee2e6;
<   --bs-gray-400: #ced4da;
<   --bs-gray-500: #adb5bd;
<   --bs-gray-600: #6c757d;
<   --bs-gray-700: #495057;
<   --bs-gray-800: #343a40;
<   --bs-gray-900: #212529;
<   --bs-primary: #0d6efd;
<   --bs-secondary: #6c757d;
<   --bs-success: #198754;
<   --bs-info: #0dcaf0;
<   --bs-warning: #ffc107;
<   --bs-danger: #dc3545;
<   --bs-light: #f8f9fa;
<   --bs-dark: #212529;
<   --bs-primary-rgb: 13, 110, 253;
<   --bs-secondary-rgb: 108, 117, 125;
<   --bs-success-rgb: 25, 135, 84;
<   --bs-info-rgb: 13, 202, 240;
<   --bs-warning-rgb: 255, 193, 7;
<   --bs-danger-rgb: 220, 53, 69;
<   --bs-light-rgb: 248, 249, 250;
<   --bs-dark-rgb: 33, 37, 41;
<   --bs-primary-text: #084298;
<   --bs-secondary-text: #495057;
<   --bs-success-text: #0f5132;
<   --bs-info-text: #055160;
<   --bs-warning-text: #664d03;
<   --bs-danger-text: #842029;
<   --bs-light-text: #495057;
<   --bs-dark-text: #495057;
<   --bs-primary-bg-subtle: #cfe2ff;
<   --bs-secondary-bg-subtle: #f8f9fa;
<   --bs-success-bg-subtle: #d1e7dd;
<   --bs-info-bg-subtle: #cff4fc;
<   --bs-warning-bg-subtle: #fff3cd;
<   --bs-danger-bg-subtle: #f8d7da;
<   --bs-light-bg-subtle: #fcfcfd;
<   --bs-dark-bg-subtle: #ced4da;
<   --bs-primary-border-subtle: #9ec5fe;
<   --bs-secondary-border-subtle: #e9ecef;
<   --bs-success-border-subtle: #a3cfbb;
<   --bs-info-border-subtle: #9eeaf9;
<   --bs-warning-border-subtle: #ffe69c;
<   --bs-danger-border-subtle: #f1aeb5;
<   --bs-light-border-subtle: #e9ecef;
<   --bs-dark-border-subtle: #adb5bd;
<   --bs-white-rgb: 255, 255, 255;
<   --bs-black-rgb: 0, 0, 0;
<   --bs-body-color-rgb: 33, 37, 41;
<   --bs-body-bg-rgb: 255, 255, 255;
<   --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
<   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
<   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
<   --bs-body-font-family: var(--bs-font-sans-serif);
<   --bs-body-font-size: 1rem;
<   --bs-body-font-weight: 400;
<   --bs-body-line-height: 1.5;
<   --bs-body-color: #212529;
<   --bs-emphasis-color: #000;
<   --bs-emphasis-color-rgb: 0, 0, 0;
<   --bs-secondary-color: rgba(33, 37, 41, 0.75);
<   --bs-secondary-color-rgb: 33, 37, 41;
<   --bs-secondary-bg: #e9ecef;
<   --bs-secondary-bg-rgb: 233, 236, 239;
<   --bs-tertiary-color: rgba(33, 37, 41, 0.5);
<   --bs-tertiary-color-rgb: 33, 37, 41;
<   --bs-tertiary-bg: #f8f9fa;
<   --bs-tertiary-bg-rgb: 248, 249, 250;
<   --bs-body-bg: #fff;
<   --bs-body-bg-rgb: 255, 255, 255;
<   --bs-link-color: #0d6efd;
<   --bs-link-color-rgb: 13, 110, 253;
<   --bs-link-decoration: underline;
<   --bs-link-hover-color: #0a58ca;
<   --bs-link-hover-color-rgb: 10, 88, 202;
<   --bs-code-color: #d63384;
<   --bs-highlight-bg: #fff3cd;
<   --bs-border-width: 1px;
<   --bs-border-style: solid;
<   --bs-border-color: #dee2e6;
<   --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
<   --bs-border-radius: 0.375rem;
<   --bs-border-radius-sm: 0.25rem;
<   --bs-border-radius-lg: 0.5rem;
<   --bs-border-radius-xl: 1rem;
<   --bs-border-radius-xxl: 2rem;
<   --bs-border-radius-2xl: var(--bs-border-radius-xxl);
<   --bs-border-radius-pill: 50rem;
<   --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
<   --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
<   --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
<   --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
<   --bs-form-control-bg: var(--bs-body-bg);
<   --bs-form-control-disabled-bg: var(--bs-secondary-bg);
<   --bs-breakpoint-xs: 0;
<   --bs-breakpoint-sm: 576px;
<   --bs-breakpoint-md: 768px;
<   --bs-breakpoint-lg: 992px;
<   --bs-breakpoint-xl: 1200px;
<   --bs-breakpoint-xxl: 1400px;
<   --bs-focus-ring-width: 0.25rem;
<   --bs-focus-ring-opacity: 0.25;
<   --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
<   --bs-focus-ring-box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
< }
< 
< [data-bs-theme=dark] {
<   color-scheme: dark;
<   --bs-body-color: #adb5bd;
<   --bs-body-color-rgb: 173, 181, 189;
<   --bs-body-bg: #212529;
<   --bs-body-bg-rgb: 33, 37, 41;
<   --bs-emphasis-color: #fff;
<   --bs-emphasis-color-rgb: 255, 255, 255;
<   --bs-secondary-color: rgba(173, 181, 189, 0.75);
<   --bs-secondary-color-rgb: 173, 181, 189;
<   --bs-secondary-bg: #343a40;
<   --bs-secondary-bg-rgb: 52, 58, 64;
<   --bs-tertiary-color: rgba(173, 181, 189, 0.5);
<   --bs-tertiary-color-rgb: 173, 181, 189;
<   --bs-tertiary-bg: #2b3035;
<   --bs-tertiary-bg-rgb: 43, 48, 53;
<   --bs-primary-text: #6ea8fe;
<   --bs-secondary-text: #dee2e6;
<   --bs-success-text: #75b798;
<   --bs-info-text: #6edff6;
<   --bs-warning-text: #ffda6a;
<   --bs-danger-text: #ea868f;
<   --bs-light-text: #f8f9fa;
<   --bs-dark-text: #dee2e6;
<   --bs-primary-bg-subtle: #031633;
<   --bs-secondary-bg-subtle: #212529;
<   --bs-success-bg-subtle: #051b11;
<   --bs-info-bg-subtle: #032830;
<   --bs-warning-bg-subtle: #332701;
<   --bs-danger-bg-subtle: #2c0b0e;
<   --bs-light-bg-subtle: #343a40;
<   --bs-dark-bg-subtle: #1a1d20;
<   --bs-primary-border-subtle: #084298;
<   --bs-secondary-border-subtle: #495057;
<   --bs-success-border-subtle: #0f5132;
<   --bs-info-border-subtle: #055160;
<   --bs-warning-border-subtle: #664d03;
<   --bs-danger-border-subtle: #842029;
<   --bs-light-border-subtle: #495057;
<   --bs-dark-border-subtle: #343a40;
<   --bs-link-color: #6ea8fe;
<   --bs-link-hover-color: #9ec5fe;
<   --bs-link-color-rgb: 110, 168, 254;
<   --bs-link-hover-color-rgb: 158, 197, 254;
<   --bs-code-color: #e685b5;
<   --bs-border-color: #495057;
<   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
< }
< 
220a47,55
> :root {
>   --bs-breakpoint-xs: 0;
>   --bs-breakpoint-sm: 576px;
>   --bs-breakpoint-md: 768px;
>   --bs-breakpoint-lg: 992px;
>   --bs-breakpoint-xl: 1200px;
>   --bs-breakpoint-xxl: 1400px;
> }
>

Almost none of the CSS vars which were included within bootstrap-grid.css are useful for the grids so IMO can be removed from there. It means that we need to move --bs-breakpoint-* definitions in _grid.scss but I don't find it too problematic (event if they are scoped with :root).

Type of changes

  • Enhancement

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • All new and existing tests passed

@julien-deramond julien-deramond force-pushed the main-jd-reduce-bootstrap-grid-content branch from 70ca7e7 to e97a469 Compare January 9, 2023 19:53
@julien-deramond julien-deramond force-pushed the main-jd-reduce-bootstrap-grid-content branch from e97a469 to 4f610c6 Compare January 9, 2023 19:56
@julien-deramond julien-deramond marked this pull request as ready for review January 9, 2023 19:58
@julien-deramond julien-deramond requested a review from a team as a code owner January 9, 2023 19:58
@julien-deramond julien-deramond mentioned this pull request Jan 9, 2023
Open
81 tasks
mdo
mdo approved these changes Jan 10, 2023
View reviewed changes
Copy link
Member
@mdo mdo left a comment

Choose a reason for hiding this comment

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

Love it!

@mdo mdo merged commit 748702d into main Jan 11, 2023
@mdo mdo deleted the main-jd-reduce-bootstrap-grid-content branch January 11, 2023 18:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mdo mdo mdo approved these changes

Assignees
No one assigned
Labels
css v5
Projects
No open projects
v5.3.0-alpha2
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@julien-deramond @mdo