Bootstrap de tematică

Personalizați Bootstrap 4 cu noile noastre variabile Sass încorporate pentru preferințele globale de stil pentru tematică ușoară și modificări ale componentelor.

Introducere

În Bootstrap 3, tematica a fost în mare măsură determinată de înlocuiri variabile în LESS, CSS personalizat și o foaie de stil tematică separată pe care am inclus-o în distfișierele noastre. Cu ceva efort, se poate reproiecta complet aspectul Bootstrap 3 fără a atinge fișierele de bază. Bootstrap 4 oferă o abordare familiară, dar ușor diferită.

Acum, tematica este realizată de variabile Sass, hărți Sass și CSS personalizat. Nu mai există o foaie de stil temă dedicată; în schimb, puteți activa tema încorporată pentru a adăuga degrade, umbre și multe altele.

Sass

Utilizați fișierele noastre sursă Sass pentru a profita de variabile, hărți, mixuri și multe altele atunci când compilați Sass folosind propriul pipeline de active.

Structura fișierului

Ori de câte ori este posibil, evitați modificarea fișierelor de bază ale Bootstrap. Pentru Sass, asta înseamnă să creați propria foaie de stil care să importe Bootstrap, astfel încât să o puteți modifica și extinde. Presupunând că utilizați un manager de pachete precum npm, veți avea o structură de fișiere care arată astfel:

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

Dacă ați descărcat fișierele noastre sursă și nu utilizați un manager de pachete, veți dori să configurați manual ceva similar cu acea structură, păstrând fișierele sursă ale Bootstrap separate de ale dvs.

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

Import

În custom.scss, veți importa fișierele sursă Sass ale Bootstrap. Aveți două opțiuni: includeți tot Bootstrap sau alegeți piesele de care aveți nevoie. Îl încurajăm pe acesta din urmă, deși rețineți că există anumite cerințe și dependențe între componentele noastre. De asemenea, va trebui să includeți ceva JavaScript pentru pluginurile noastre.

// 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";

Cu această configurație, puteți începe să modificați oricare dintre variabilele și hărțile Sass din custom.scss. De asemenea, puteți începe să adăugați părți din Bootstrap în // Optionalsecțiune, după cum este necesar. Vă sugerăm să utilizați stiva completă de import din bootstrap.scssfișierul nostru ca punct de plecare.

Valori implicite variabile

Fiecare variabilă Sass din Bootstrap include indicatorul !defaultcare vă permite să suprascrieți valoarea implicită a variabilei în propriul dvs. Sass fără a modifica codul sursă al Bootstrap. Copiați și inserați variabile după cum este necesar, modificați-le valorile și eliminați !defaultmarcajul. Dacă o variabilă a fost deja atribuită, atunci nu va fi reatribuită de valorile implicite din Bootstrap.

Veți găsi lista completă a variabilelor Bootstrap în scss/_variables.scss. Unele variabile sunt setate la null, aceste variabile nu scot proprietatea decât dacă sunt suprascrise în configurația dvs.

Modificarea variabilelor trebuie să apară după ce funcțiile, variabilele și mixurile noastre sunt importate, dar înainte de restul importurilor.

Iată un exemplu care modifică background-colorși colorpentru <body>când se importă și se compila Bootstrap prin 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

Repetați după cum este necesar pentru orice variabilă din Bootstrap, inclusiv opțiunile globale de mai jos.

Hărți și bucle

Bootstrap 4 include o mână de hărți Sass, perechi valori cheie care facilitează generarea de familii de CSS înrudite. Folosim hărți Sass pentru culorile noastre, punctele de întrerupere ale grilei și multe altele. La fel ca variabilele Sass, toate hărțile Sass includ !defaultsteag și pot fi suprascrise și extinse.

Unele dintre hărțile noastre Sass sunt îmbinate în unele goale în mod implicit. Acest lucru se face pentru a permite extinderea ușoară a unei anumite hărți Sass, dar vine cu prețul de a face eliminarea elementelor de pe o hartă puțin mai dificilă.

Modificați harta

Pentru a modifica o culoare existentă în $theme-colorsharta noastră, adăugați următoarele la fișierul personalizat Sass:

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

Adăugați pe hartă

Pentru a adăuga o nouă culoare la $theme-colors, adăugați noua cheie și valoare:

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

Eliminați de pe hartă

Pentru a elimina culorile din $theme-colors, sau din orice altă hartă, utilizați map-remove. Rețineți că trebuie să îl introduceți între cerințele și opțiunile noastre:

// 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";
...

Cheile necesare

Bootstrap presupune prezența unor chei specifice în hărțile Sass pe măsură ce le folosim și le extindem noi înșine. Pe măsură ce personalizați hărțile incluse, este posibil să întâmpinați erori atunci când este utilizată o anumită cheie a hărții Sass.

De exemplu, folosim tastele primary, success, și de la pentru link-uri, butoane și stări de formular. Înlocuirea valorilor acestor chei nu ar trebui să prezinte probleme, dar eliminarea lor poate cauza probleme de compilare Sass. În aceste cazuri, va trebui să modificați codul Sass care folosește acele valori.danger$theme-colors

Funcții

Bootstrap folosește mai multe funcții Sass, dar doar un subset este aplicabil la tematica generală. Am inclus trei funcții pentru obținerea valorilor din hărțile de culori:

@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);
}

Acestea vă permit să alegeți o culoare dintr-o hartă Sass, la fel ca cum ați utiliza o variabilă de culoare din v3.

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

Avem și o altă funcție pentru obținerea unui anumit nivel de culoare de pe $theme-colorshartă. Valorile de nivel negative vor lumina culoarea, în timp ce nivelurile mai înalte se vor întuneca.

@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);
}

În practică, ați apela funcția și ați trece doi parametri: numele culorii de la $theme-colors(de exemplu, primar sau pericol) și un nivel numeric.

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

Funcții suplimentare ar putea fi adăugate în viitor sau propriul dvs. Sass personalizat pentru a crea funcții de nivel pentru hărți Sass suplimentare, sau chiar una generică dacă doriți să fiți mai detaliate.

Contrastul culorilor

O funcție suplimentară pe care o includem în Bootstrap este funcția de contrast de culoare, color-yiq. Utilizează spațiul de culoare YIQ pentru a returna automat o culoare de contrast deschisă ( #fff) sau închisă ( #111) pe baza culorii de bază specificate. Această funcție este utilă în special pentru mixuri sau bucle în care generați mai multe clase.

De exemplu, pentru a genera mostre de culoare de pe $theme-colorsharta noastră:

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

Poate fi folosit și pentru nevoi unice de contrast:

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

De asemenea, puteți specifica o culoare de bază cu funcțiile noastre de hartă a culorilor:

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

Evadare SVG

Folosim escape-svgfuncția pentru a evada caracterele <, >și #pentru imaginile de fundal SVG. Aceste caractere trebuie să fie eliminate pentru a reda corect imaginile de fundal în IE. Când utilizați escape-svgfuncția, URI-urile de date trebuie citate.

Funcții de adunare și scădere

Folosim funcțiile addși subtractpentru a încheia calcfuncția CSS. Scopul principal al acestor funcții este de a evita erorile atunci când o 0valoare „fără unitate” este transmisă într-o calcexpresie. Expresii precum calc(10px - 0)vor returna o eroare în toate browserele, în ciuda faptului că sunt corecte din punct de vedere matematic.

Exemplu în care calculul este valid:

$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);
}

Exemplu în care calculul nu este valid:

$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);
}

Opțiuni sass

Personalizați Bootstrap 4 cu fișierul nostru de variabile personalizate încorporat și comutați cu ușurință preferințele CSS globale cu noile $enable-*variabile Sass. Suprascrieți valoarea unei variabile și recompilați cu npm run testdupă cum este necesar.

Puteți găsi și personaliza aceste variabile pentru opțiunile globale cheie în scss/_variables.scssfișierul Bootstrap.

Culoare

Multe dintre diferitele componente și utilități Bootstrap sunt construite printr-o serie de culori definite într-o hartă Sass. Această hartă poate fi reluată în Sass pentru a genera rapid o serie de reguli.

Toate culorile

Toate culorile disponibile în Bootstrap 4 sunt disponibile ca variabile Sass și o hartă Sass în scss/_variables.scssfișier. Acest lucru va fi extins în versiunile minore ulterioare pentru a adăuga nuanțe suplimentare, la fel ca paleta în tonuri de gri pe care o includem deja.

Iată cum le puteți folosi în Sass:

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

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

Clasele de utilitate de culoare sunt, de asemenea, disponibile pentru setare colorși background-color.

Culori tematice

Folosim un subset de toate culorile pentru a crea o paletă de culori mai mică pentru a genera scheme de culori, disponibilă și ca variabile Sass și o hartă Sass în scss/_variables.scssfișierul Bootstrap.

Cenușii

Un set extins de variabile gri și o hartă Sass scss/_variables.scsspentru nuanțe consistente de gri în proiectul dvs. Rețineți că acestea sunt „gri reci”, care tind spre un ton subtil de albastru, mai degrabă decât gri neutre.

În scss/_variables.scss, veți găsi variabilele de culoare ale Bootstrap și harta Sass. Iată un exemplu de $colorshartă 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;

Adăugați, eliminați sau modificați valori în cadrul hărții pentru a actualiza modul în care sunt utilizate în multe alte componente. Din păcate, în acest moment, nu toate componentele utilizează această hartă Sass. Actualizările viitoare se vor strădui să îmbunătățească acest lucru. Până atunci, plănuiți să utilizați ${color}variabilele și această hartă Sass.

Componente

Multe dintre componentele și utilitățile Bootstrap sunt construite cu @eachbucle care iterează peste o hartă Sass. Acest lucru este util în special pentru a genera variante ale unei componente de către noi $theme-colorsși pentru a crea variante receptive pentru fiecare punct de întrerupere. Pe măsură ce personalizați aceste hărți Sass și recompilați, veți vedea automat modificările reflectate în aceste bucle.

Modificatori

Multe dintre componentele lui Bootstrap sunt construite cu o abordare a clasei modificatoare de bază. Aceasta înseamnă că cea mai mare parte a stilului este conținută într-o clasă de bază (de exemplu, .btn), în timp ce variațiile de stil sunt limitate la clasele modificatoare (de exemplu, .btn-danger). Aceste clase modificatoare sunt construite din $theme-colorshartă pentru a personaliza numărul și numele claselor noastre modificatoare.

Iată două exemple de modul în care trecem peste $theme-colorshartă pentru a genera modificatori pentru .alertcomponentă și pentru toate .bg-*utilitățile noastre de fundal.

// 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);
}

Receptiv

Aceste bucle Sass nu se limitează nici la hărți de culori. De asemenea, puteți genera variații receptive ale componentelor sau utilităților dvs. Luați, de exemplu, utilitarele noastre de aliniere a textului receptiv, în care amestecăm o @eachbuclă pentru $grid-breakpointsharta Sass cu o interogare 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; }
  }
}

Dacă trebuie să modificați $grid-breakpoints, modificările dvs. se vor aplica tuturor buclelor care iterează pe harta respectivă.

variabile CSS

Bootstrap 4 include aproximativ două duzini de proprietăți personalizate (variabile) CSS în CSS-ul său compilat. Acestea oferă acces ușor la valorile utilizate în mod obișnuit, cum ar fi culorile temei, punctele de întrerupere și stivele de fonturi principale atunci când lucrați în Inspectorul browserului dvs., un cod sandbox sau prototipuri generale.

Variabile disponibile

Iată variabilele pe care le includem (rețineți că :rooteste necesar). Sunt localizate în _root.scssdosarul nostru.

: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;
}

Exemple

Variabilele CSS oferă o flexibilitate similară cu variabilele lui Sass, dar fără a fi nevoie de compilare înainte de a fi transmise browserului. De exemplu, aici resetăm fontul și stilurile de link ale paginii noastre cu variabile CSS.

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

Variabilele punctului de întrerupere

Deși inițial am inclus puncte de întrerupere în variabilele noastre CSS (de exemplu, --breakpoint-md), acestea nu sunt acceptate în interogările media , dar pot fi utilizate în continuare în seturile de reguli în interogările media. Aceste variabile punct de întrerupere rămân în CSS compilat pentru compatibilitate inversă, având în vedere că pot fi utilizate de JavaScript. Aflați mai multe în specificații .

Iată un exemplu de ceea ce nu este acceptat:

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

Și iată un exemplu de ceea ce este susținut:

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