ʻO Theming Bootstrap

Hoʻopilikino i ka Bootstrap 4 me kā mākou mau ʻano hou Sass i kūkulu ʻia no nā makemake kaila honua no ka maʻalahi o nā kumumanaʻo a me nā hoʻololi ʻāpana.

Hoʻolauna

Ma Bootstrap 3, ua alakaʻi nui ʻia ke kumumanaʻo e nā mea hoʻololi i ka LESS, CSS maʻamau, a me kahi ʻano papa inoa ʻokoʻa a mākou i hoʻokomo ai i kā mākou distfaila. Me ka hoʻoikaika ʻana, hiki i kekahi ke hoʻolālā hou i ke ʻano o Bootstrap 3 me ka ʻole o ka hoʻopā ʻana i nā faila kumu. Hāʻawi ʻo Bootstrap 4 i kahi ala maʻamau, akā ʻokoʻa iki.

I kēia manawa, hoʻokō ʻia ke kumuhana e nā ʻano ʻano Sass, nā palapala ʻāina Sass, a me CSS maʻamau. ʻAʻohe pepa kaila kumuhana i hoʻolaʻa hou ʻia; akā, hiki iā ʻoe ke ʻae i ke kumumanaʻo i kūkulu ʻia e hoʻohui i nā gradients, nā aka, a me nā mea hou aku.

Sass

E hoʻohana i kā mākou kumu waihona Sass e hoʻohana pono i nā ʻano like ʻole, nā palapala ʻāina, nā hui ʻana, a me nā mea hou aʻe i ka wā e hōʻuluʻulu ai iā Sass me ka hoʻohana ʻana i kāu pipeline waiwai ponoʻī.

Hoʻolālā waihona

I ka manawa hiki, e pale i ka hoʻololi ʻana i nā faila kumu o Bootstrap. No Sass, ʻo ia hoʻi ka hana ʻana i kāu stylesheet ponoʻī e lawe mai iā Bootstrap i hiki iā ʻoe ke hoʻololi a hoʻonui. Ke manaʻo nei ʻoe e hoʻohana ana i kahi mana hoʻokele e like me npm, e loaʻa iā ʻoe kahi ʻano faila e like me kēia:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Inā ua hoʻoiho ʻoe i kā mākou waihona kumu a ʻaʻole ʻoe e hoʻohana i ka luna pūʻolo, makemake ʻoe e hoʻonohonoho lima i kahi mea e like me kēlā ʻano, e hoʻokaʻawale i nā faila kumu o Bootstrap mai kāu ponoʻī.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Ke lawe mai nei

Ma kāu custom.scss, e hoʻokomo i nā faila Sass kumu o Bootstrap. Loaʻa iā ʻoe nā koho ʻelua: e hoʻokomo i nā Bootstrap āpau, a i ʻole e koho i nā ʻāpana āu e pono ai. Paipai mākou i ka mea hope, ʻoiai e ʻike ʻoe aia kekahi mau koi a me nā hilinaʻi ma waena o kā mākou ʻāpana. Pono ʻoe e hoʻokomo i kekahi JavaScript no kā mākou plugins.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Me kēlā hoʻonohonoho i kahi, hiki iā ʻoe ke hoʻomaka e hoʻololi i kekahi o nā ʻano Sass a me nā palapala 'āina i kāu custom.scss. Hiki iā ʻoe ke hoʻomaka e hoʻohui i nā ʻāpana o Bootstrap ma lalo o ka // Optionalʻāpana e like me ka mea e pono ai. Manaʻo mākou e hoʻohana i ka waihona hoʻokomo piha mai kā mākou bootstrap.scssfaila ma ke ʻano he hoʻomaka.

Hoʻololi paʻamau

Loaʻa i kēlā me kēia hoʻololi Sass i Bootstrap ka !defaulthae e ʻae iā ʻoe e hoʻopau i ka waiwai paʻamau o ka mea hoʻololi i kāu Sass ponoʻī me ka hoʻololi ʻole ʻana i ke code kumu o Bootstrap. E kope a paʻi i nā mea hoʻololi e like me ka mea e pono ai, hoʻololi i kā lākou mau waiwai, a wehe i ka !defaulthae. Inā ua hāʻawi mua ʻia kahi loli, a laila ʻaʻole ia e hāʻawi hou ʻia e nā koina paʻamau i Bootstrap.

E ʻike ʻoe i ka papa inoa piha o nā ʻano hoʻololi o Bootstrap ma scss/_variables.scss. Hoʻonohonoho ʻia kekahi mau mea hoʻololi i ka null, ʻaʻole e hoʻopuka kēia mau mea hoʻololi i ka waiwai ke ʻole e hoʻopau ʻia i kāu hoʻonohonoho.

Pono nā mea hoʻololi like ʻole ma hope o ka lawe ʻia ʻana mai o kā mākou mau hana, nā mea hoʻololi, a me nā mixins, akā ma mua o ke koena o ka lawe ʻana mai.

Eia kahi hiʻohiʻona e hoʻololi i ka background-colora colorno ka <body>wā e lawe mai ana a hōʻuluʻulu iā Bootstrap ma o npm:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

E hana hou e like me ka mea e pono ai no kēlā me kēia loli i Bootstrap, me nā koho honua ma lalo.

Nā palapala 'āina a me nā puka lou

Loaʻa i ka Bootstrap 4 kahi lima o nā palapala ʻāina Sass, nā hui waiwai koʻikoʻi e maʻalahi i ka hana ʻana i nā ʻohana CSS pili. Hoʻohana mākou i nā palapala ʻāina ʻo Sass no kā mākou kala, nā wahi haki, a me nā mea hou aku. E like me nā hoʻololi Sass, aia nā palapala ʻāina Sass āpau i ka !defaulthae a hiki ke hoʻopau ʻia a hoʻonui ʻia.

Hoʻohui ʻia kekahi o kā mākou mau palapala ʻāina Sass i nā palapala ʻāina ʻole. Hana ʻia kēia no ka ʻae ʻana i ka hoʻonui maʻalahi o kahi palapala ʻāina Sass i hāʻawi ʻia, akā hiki mai ke kumukūʻai o ka lawe ʻana i nā mea mai kahi palapala ʻāina i ʻoi aku ka paʻakikī.

Hoʻololi i ka palapala ʻāina

No ka hoʻololi ʻana i kahi waihoʻoluʻu i kā mākou $theme-colorspalapala ʻāina, e hoʻohui i kēia i kāu faila Sass maʻamau:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Hoʻohui i ka palapala ʻāina

No ka hoʻohui ʻana i kahi waihoʻoluʻu hou iā $theme-colors, hoʻohui i ke kī hou a me ka waiwai:

$theme-colors: (
  "custom-color": #900
);

Wehe ʻia mai ka palapala ʻāina

No ka wehe ʻana i nā kala mai $theme-colors, a i ʻole kekahi palapala ʻāina ʻē aʻe, e hoʻohana i ka map-remove. E makaʻala pono ʻoe e hoʻokomo iā ia ma waena o kā mākou mau koi a me nā koho:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Pono nā kī

Manaʻo ʻo Bootstrap i ka loaʻa ʻana o kekahi mau kī kikoʻī i loko o nā palapala Sass i kā mākou hoʻohana ʻana a hoʻonui iā mākou iho. I kou hoʻopilikino ʻana i nā palapala ʻāina i hoʻokomo ʻia, hiki iā ʻoe ke loaʻa nā hewa kahi e hoʻohana ʻia ai kahi kī o ka palapala Sass kikoʻī.

No ka laʻana, hoʻohana mākou i ka primary, success, a me dangernā kī mai $theme-colorsno nā loulou, nā pihi, a me nā mokuʻāina. ʻAʻohe pilikia o ka hoʻololi ʻana i nā waiwai o kēia mau kī, akā ʻo ka wehe ʻana iā lākou hiki ke hoʻopilikia i ka hui ʻana o Sass. I kēia mau manawa, pono ʻoe e hoʻololi i ke code Sass e hoʻohana ana i kēlā mau waiwai.

Nā hana

Hoʻohana ʻo Bootstrap i kekahi mau hana Sass, akā ʻo kahi ʻāpana wale nō e pili ana i ka theming maʻamau. Ua hoʻokomo mākou i ʻekolu mau hana no ka loaʻa ʻana o nā waiwai mai nā palapala kala:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ʻAe kēia iā ʻoe e koho i hoʻokahi kala mai kahi palapala ʻāina Sass e like me kāu e hoʻohana ai i kahi ʻano kala mai v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Loaʻa iā mākou kekahi hana ʻē aʻe no ka loaʻa ʻana o kahi pae o ke kala mai ka $theme-colorspalapala ʻāina. E hoʻomāmā i ka waihoʻoluʻu nā waiwai pae ʻino, ʻoiai e pōʻeleʻele nā ​​pae kiʻekiʻe.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

I ka hoʻomaʻamaʻa ʻana, e kāhea ʻoe i ka hana a hele i nā ʻāpana ʻelua: ka inoa o ke kala mai $theme-colors(e laʻa, ka mea mua a i ʻole ka pilikia) a me kahi pae helu.

.custom-element {
  color: theme-color-level(primary, -10);
}

Hiki ke hoʻohui ʻia nā hana ʻē aʻe i ka wā e hiki mai ana a i ʻole kāu Sass maʻamau e hana i nā hana pae no nā palapala ʻāina Sass hou aʻe, a i ʻole he mea maʻamau inā makemake ʻoe e ʻoi aku ka verbose.

ʻokoʻa kala

ʻO kahi hana ʻē aʻe a mākou e hoʻokomo ai i Bootstrap ʻo ia ka hana ʻokoʻa kala, color-yiq. Hoʻohana ʻo ia i ka lewa kala YIQ e hoʻihoʻi ʻokoʻa i kahi kala ʻokoʻa ( #fff) a ʻeleʻele paha ( #111) ma muli o ke kala kumu i kuhikuhi ʻia. He mea pono loa kēia hana no nā mixins a i ʻole nā ​​puka lou kahi āu e hana ai i nā papa he nui.

No ka laʻana, e hoʻohua i nā kala kala mai kā mākou $theme-colorspalapala ʻāina:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Hiki ke hoʻohana ʻia no nā pono ʻokoʻa hoʻokahi:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Hiki iā ʻoe ke kuhikuhi i kahi waihoʻoluʻu kumu me kā mākou mau hana palapala kala:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Pakele SVG

Hoʻohana mākou i ka escape-svghana e pakele ai i ka <, >a me #nā huapalapala no nā kiʻi kāʻei kua SVG. Pono e pakele kēia mau huaʻōlelo no ka hoʻopuka pono ʻana i nā kiʻi hope ma IE. I ka hoʻohana ʻana i ka escape-svghana, pono e ʻōlelo ʻia nā URI data.

Hoʻohui a unuhi i nā hana

Hoʻohana mākou i ka adda me subtractnā hana e kāʻei i ka calchana CSS. ʻO ke kumu nui o kēia mau hana, ʻo ia ka pale ʻana i nā hewa ke hoʻolilo ʻia kahi waiwai "unitless" 0i kahi calcʻōlelo. E hoʻihoʻi ka manaʻo like calc(10px - 0)i kahi hewa ma nā polokalamu kele pūnaewele a pau, ʻoiai he pololei ka makemakika.

ʻO ka laʻana kahi kūpono o ka calc:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

ʻO ka laʻana inā ʻaʻohe kūpono ka helu:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Nā koho Sass

Hoʻopilikino i ka Bootstrap 4 me kā mākou faila hoʻololi maʻamau i kūkulu ʻia a hoʻololi maʻalahi i nā makemake CSS honua me nā $enable-*loli Sass hou. Hoʻopau i ka waiwai o kahi mea hoʻololi a hoʻohui hou me ka npm run testmea e pono ai.

scss/_variables.scssHiki iā ʻoe ke loaʻa a hoʻopilikino i kēia mau ʻano no nā koho honua koʻikoʻi ma ka faila Bootstrap .

kalakala

Nui nā ʻāpana like ʻole o Bootstrap a me nā pono hana i kūkulu ʻia ma o ke ʻano o nā kala i wehewehe ʻia ma kahi palapala Sass. Hiki ke hoʻopili ʻia kēia palapala ʻāina ma Sass e hoʻopuka koke i nā pūʻulu kānāwai.

Nā kala a pau

Loaʻa nā kala āpau i Bootstrap 4, e like me nā ʻano Sass a me kahi palapala Sass ma ka scss/_variables.scssfaila. E hoʻonui ʻia kēia ma nā hoʻokuʻu liʻiliʻi e hoʻohui i nā aka hou, e like me ka palette grayscale a mākou i hoʻokomo ai.

Eia pehea ʻoe e hoʻohana ai i kēia mau mea i kāu Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Loaʻa nā papa hana kala no ka hoʻonohonoho ʻana colora me background-color.

kala kala

Hoʻohana mākou i kahi ʻāpana o nā waihoʻoluʻu āpau e hana i kahi palette liʻiliʻi liʻiliʻi no ka hana ʻana i nā kala kala, loaʻa pū me nā ʻano Sass a me kahi palapala ʻāina Sass ma ka scss/_variables.scssfaila Bootstrap.

Nahinahina

ʻO kahi hoʻonohonoho nui o nā mea ʻokoʻa hina a me kahi palapala ʻāina Sass i loko scss/_variables.scssno nā kala ʻeleʻele like ʻole ma kāu papahana. E hoʻomanaʻo ʻo ia nā "hina ʻoluʻolu", e pili ana i kahi leo polū maʻalahi, ma mua o nā hina hina.

I loko o scss/_variables.scsska , e ʻike ʻoe i nā ʻano waihoʻoluʻu o Bootstrap a me ka palapala ʻāina Sass. Eia kekahi laʻana o ka $colorspalapala ʻāina Sass:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Hoʻohui, wehe, a hoʻololi paha i nā waiwai i loko o ka palapala ʻāina no ka hoʻonui ʻana i ke ʻano o ka hoʻohana ʻia ʻana ma nā ʻāpana ʻē aʻe. ʻO ka mea pōʻino i kēia manawa, ʻaʻole hoʻohana nā mea āpau i kēia palapala Sass. E hoʻoikaika nā mea hou e hiki mai ana e hoʻomaikaʻi i kēia. A hiki i kēlā manawa, e hoʻolālā i ka hoʻohana ʻana i nā ${color}mea hoʻololi a me kēia palapala Sass.

Nā ʻāpana

Nui nā ʻāpana a me nā pono hana a Bootstrap i kūkulu ʻia me @eachnā puka lou e hoʻololi i ka palapala Sass. He mea kōkua nui kēia no ka hana ʻana i nā ʻano like ʻole o kahi ʻāpana e kā mākou $theme-colorsa hana i nā ʻano pane pane no kēlā me kēia breakpoint. Ke hoʻopilikino ʻoe i kēia mau palapala ʻāina Sass a hoʻohui hou, ʻike ʻoe i kāu mau loli i ʻike ʻia i kēia mau puka lou.

Nā mea hoʻololi

Hoʻokumu ʻia ka nui o nā ʻāpana Bootstrap me kahi papa hoʻololi base-modifier. 'O ia ho'i, aia ka nui o ka pena 'ana i ka papa kumu (e la'a, .btn) oiai ua pa'a ka ho'ololi 'ana i nā papa ho'ololi (eg, .btn-danger). Kūkulu ʻia kēia mau papa hoʻololi mai ka $theme-colorspalapala ʻāina e hana maʻamau i ka helu a me ka inoa o kā mākou papa hoʻololi.

Eia nā laʻana ʻelua o ke ʻano o kā mākou hoʻololi ʻana i ka $theme-colorspalapala ʻāina e hana i nā mea hoʻololi i ka .alertʻāpana a me kā mākou .bg-*mau pono hope.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Pane

ʻAʻole kaupalena ʻia kēia mau puka lou Sass i nā palapala ʻāina kala. Hiki iā ʻoe ke hana i nā ʻano like ʻole o kāu ʻāpana a i ʻole nā ​​mea pono. E laʻana i kā mākou mau pono hoʻoponopono kikokikona pane kahi e hui ai mākou i kahi @eachloop no ka $grid-breakpointspalapala ʻāina Sass me kahi nīnau media.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Inā pono ʻoe e hoʻololi i kāu $grid-breakpoints, e pili ana kāu mau hoʻololi i nā puka lou a pau ma luna o kēlā palapala ʻāina.

Nā hoʻololi CSS

Loaʻa ka Bootstrap 4 ma kahi o ʻelua mau kukini CSS mau waiwai maʻamau (nā mea hoʻololi) i kāna CSS i hōʻuluʻulu ʻia. Hāʻawi kēia mau mea i ke komo maʻalahi i nā waiwai i hoʻohana mau ʻia e like me kā mākou kala kumuhana, nā wahi haʻihaʻi, a me nā pūʻulu kikokikona mua i ka wā e hana ai i kāu Inspector o kāu polokalamu kele pūnaewele, kahi pahu pahu code, a i ʻole prototyping maʻamau.

Loaʻa nā loli

Eia nā mea hoʻololi a mākou e hoʻokomo ai (e hoʻomaopopo :roothe koi ʻia ka mea). Aia lākou ma kā mākou _root.scssfaila.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Nā laʻana

Hāʻawi nā mea hoʻololi CSS i ka maʻalahi like me nā ʻano like ʻole o Sass, akā me ka ʻole o ka pono o ka hoʻohui ʻana ma mua o ka lawelawe ʻana i ka polokalamu kele pūnaewele. No ka laʻana, eia mākou e hoʻonohonoho hou ana i kā mākou ʻaoʻao font a me nā ʻano loulou me nā mea hoʻololi CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Nā hoʻololi hoʻokaʻawale

ʻOiai mākou i hoʻokomo mua i nā wahi haʻihaʻi i loko o kā mākou mau ʻano CSS (e laʻa, --breakpoint-md), ʻaʻole kākoʻo ʻia kēia mau mea i nā nīnau media , akā hiki ke hoʻohana ʻia i loko o nā lula i nā nīnau media. Ke waiho nei kēia mau mea hoʻololi i ka CSS i hōʻuluʻulu ʻia no ka hoʻohālikelike hope ʻana i hiki ke hoʻohana ʻia e JavaScript. E aʻo hou ma ka spec .

Eia kekahi laʻana o ka mea i kākoʻo ʻole ʻia:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

A eia kekahi laʻana o ka mea i kākoʻo ʻia:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}