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.

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

Proposal: CSS Variables read-only reflection of some global Sass variables #23349

Closed
passcod opened this Issue Aug 12, 2017 · 8 comments

Comments

Projects
None yet
4 participants
@passcod
Copy link
Contributor

passcod commented Aug 12, 2017

I tried to search, but turns out searching for "css variables" or even "custom properties" isn't particularly helpful. In any case I did go through a bunch of issues and didn't see this mentioned. Thus:

Background: situations where adding Sass to the build pipeline is not feasible or not wanted, but one still wants to use Bootstrap values (e.g. colours, sizes, timings) in custom CSS.

Proposal: to add a :root {} section in the default generated CSS that writes out something like:

:root {
  --blue: $blue;
  --indigo: $indigo;
  --purple: $purple;
  --pink: $pink;
  /* etc */
}

Usage would then look like:

.custom-component {
  box-shadow: var(--dark-gray);
  color: var(--indigo);
}

That would either be directly supported by browsers (except IE, Edge, some mobile browsers) or more likely right now compiled-in by the build tool (e.g. PostCSS plugin postcss-custom-properties). Because this is supported right now in modern / dev-used browsers, it also brings a newish component to live editing via the Inspector.

Compatibility: in the event that someone is already using custom properties named the same as the bootstrap variables, then this would only affect them if the bootstrap ones come after their own (otherwise the cascade would take care of it). Apart from that, I don't see any other compatibility problems, but I might have overlooked some.

@Johann-S Johann-S added css v4 labels Aug 12, 2017

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Aug 15, 2017

Interesting idea! Could be cool to do.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Aug 15, 2017

Doing something like this:

:root {
  @each $color, $value in $theme-colors {
    --#{$color}: $value;
  }
}

Could output this:

:root {
  --primary: #007bff;
  --secondary: #868e96;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
}
@mdo

This comment has been minimized.

Copy link
Member

mdo commented Aug 15, 2017

Tried a PR over at #23446.

@passcod

This comment has been minimized.

Copy link
Contributor

passcod commented Aug 23, 2017

I was thinking about this and I believe a good minimal base could be:

  • The $theme-colors as in the PR
  • The $colors to have the full bootstrap-picked palette
  • The $grid-breakpoints to use in media queries
  • The $font-family-* stacks

The many other variables could also be exposed as an option, but looking through the entire list I haven't found any that would be as useful as those ones, especially since a lot of them are derived from base ones, and as this is primarily for default builds, most others (spacers, paragraph margins, number of columns, etc) don't really tip the crud/useful balance imo.

The only one I considered but wasn't sure enough about to include above was $container-max-widths… however I think these can be derived easily enough from the breakpoints.

I'll put together a PR for the above set.

passcod added a commit to passcod/bootstrap that referenced this issue Aug 31, 2017

@passcod

This comment has been minimized.

Copy link
Contributor

passcod commented Aug 31, 2017

Finally got time to do this. Here's a new PR: #23761

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Oct 2, 2017

Fixed by #23761.

@mdo mdo closed this Oct 2, 2017

mdo added a commit that referenced this issue Oct 2, 2017

Generate CSS variables for colors, breakpoints, fonts (#23761)
* Generate CSS variables

See #23349
Supersedes #23446

* Ignore _root.scss for linting

@mdo mdo referenced this issue Oct 2, 2017

Closed

Beta 2 ship list #23278

@RehanSaeed

This comment has been minimized.

Copy link

RehanSaeed commented Nov 24, 2017

Could you use this to dynamically change the primary and secondary colours using JavaScript? Something like this:

document.documentElement.style.setProperty('--primary', 'purple');

As far as I can see, the variables are not used anywhere.

@passcod

This comment has been minimized.

Copy link
Contributor

passcod commented Nov 25, 2017

These are strictly read-only variables for now. They can be used to use the colours in CSS elsewhere, but not to change the colours in Bootstrap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment