In the Bootstrap _variables.scss file there is some code setting the breakpoint sizes
$grid-breakpoints: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grid-breakpoints: map-merge(
(
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
),
$grid-breakpoints
);
#include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
#include _assert-starts-at-zero($grid-breakpoints);
And I'm wondering if there is a way to add a new size to this list through a scss file outside of Bootstrap (since Bootstrap is through npm and will be overriden on update)
The size I'm trying to add is xxl: 1490px
Related
Bootstrap 5 documentation presents full color palettes, including white / black text at different background intensities for good contrast https://getbootstrap.com/docs/5.0/customize/color/.
These css classes are named as per the schema bd-blue-500.
Where can I find scss for generating these classes?
I have found few other solutions for e.g. https://5balloons.info/generate-background-color-for-all-available-colors-in-bootstrap-5/ but none of them creates these original Bootstrap 5 classes from docs.
To create palette-based utilities, you need to (example for grays):
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/utilities";
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
$utilities: map-merge(
$utilities,
(
"background-color": (
property: background-color,
class: bg-gray,
values: $grays,
),
)
);
In a SvelteKit app,
I'm trying to use a smui colored snackbar.
My src/theme/_smui-theme.scss is:
#use 'sass:color';
#use '#material/theme/color-palette';
#use '#material/theme/theme-color';
#use '#material/snackbar/mixins';
// Svelte Colors!
#use '#material/theme/index' as theme with (
$primary: #ff3e00,
$secondary: #676778,
$surface: #fff,
$background: #fff,
$error: color-palette.$red-900
);
...
.mdc-snackbar.demo-success {
#include mixins.fill-color(color-palette.$green-500);
#include mixins.label-ink-color(
theme-color.accessible-ink-color(color-palette.$green-500)
);
}
.mdc-snackbar.demo-warning {
#include mixins.fill-color(color-palette.$orange-500);
#include mixins.label-ink-color(
theme-color.accessible-ink-color(color-palette.$orange-500)
);
}
.mdc-snackbar.demo-error {
#include mixins.fill-color(color-palette.$red-500);
#include mixins.label-ink-color(
theme-color.accessible-ink-color(color-palette.$red-500)
);
}
but compiling with npm run smui-theme-light I got an error:
This module was already loaded, so it can't be configured using "with".
node_modules/#material/theme/_index.scss
#forward './theme-color' show
[...]
src/theme/_smui-theme.scss
#use '#material/theme/theme-color';
[..]
#use '#material/theme/index' as theme with (
$primary: #ff3e00,
How I can add these scss customizations for reusable components that live outside /src/routes?
Following the B5 new documentation, this is how you are supposed to add new utilities with the new utilities API. I have not been the get the new output though.
exemple:
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor
responsive: true,
values: auto pointer grab,
)
)
);
my file:
#import "bootstrap.scss";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
I need to import bootstrap.scss because $utilities is undefined otherwise
the goal is to add a new property to make the button rounded.simple example to test out the new API. not working though
I am using the https://github.com/twbs/bootstrap-npm-starter to compile the scss files:
the src is starter.scss and the output is starter.css
I cannot find the new property button-rounded
When making Bootstrap SASS customizations, the #import "bootstrap" should go after the changes. Also, the utilities file requires the variables file, and the variables file requires the functions file, so you must import all 3 before the change...
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
#import "bootstrap";
Demo
Since Bootstrap 5 is currently beta, I've submitted an issue report for this.
Bootstrap 5.0.1, somehow no luck with map-merge($utilities ...)
but bootstrap has one more extension point: by overriding every $var default value
following will merge inside #import '~bootstrap/scss/utilities';
$utilities: (
'event-type': (
property: background-color,
class: 'event-type', // <- somehow this required
values: (
commit: #BADA55,
issue: #C0FFEE,
),
),
);
#import '~bootstrap/scss/functions';
#import '~bootstrap/scss/variables';
#import '~bootstrap/scss/mixins';
#import '~bootstrap/scss/utilities';
#import '~bootstrap/scss/utilities/api';
Since Bootstrap 5.2. update you need to proceed a little different. There is new maps file added.
If you are working with SCSS and you would like to modify colors you should add maps to your SCSS file.
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2
and then:
$custom-colors: (
"white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
and finally:
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/utilities";
and the rest.
As of Bootstrap 5.0.1 this would be more appropriate:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/utilities";
#import "bootstrap/scss/helpers";
#import "bootstrap/scss/utilities/api";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
Importing "bootstrap" at the end is not required anymore.
For bootstrap 5.1.3 from documentation
Don't forget #import "bootstrap/scss/maps"; as it's needed by utilities.
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/maps";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
#import "bootstrap/scss/utilities/api";
I have a scss file with themes
$themes: (
light: (
backgroundColor: #fff,
textColor: #408bbd,
),
dark: (
backgroundColor: #222,
textColor: #ddd,
),
taxi: (
backgroundColor:yellow,
textColor:black,
),
);
I want to switch between them on click of some conditions which I check in my typescript file. How to do it?
You can not access .scss variables in your typescript file but you can access class names.
So, I would suggest you to change these scss variables into classes and you can switch between them using [ngClass] attribute depending on whatever condition you want.
Link for reference:
https://angular.io/api/common/NgClass
I am trying to add a new colour palette to the materilize sass http://materializecss.com/color.html.
I have copied what I have seen in their sass files with a few new variables but it is not working.
in _color.scss I have added
$my-blue: (
"base": #0069B1,
);
in _variables.scss I have added
$my-primary-blue: color("my-blue", "base") !default;
then I modified a line in the _variables.scss to use my new color
from:
$button-background-focus: lighten($secondary-color, 4%) !default;
to
$button-raised-background-hover: lighten($my-primary-blue, 5%) !default;
I then get an error in compilation
>> Error: argument `$color` of `lighten($color, $amount)` must be a color
Figured it out, needed to add to a further color variable later on
$colors: (
"materialize-red": $materialize-red,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades,
"my-blue": $my-blue,
) !default;