Source

Theming Bootstrap

Tilpass Bootstrap 4 med våre nye innebygde Sass-variabler for globale stilpreferanser for enkle tema- og komponentendringer.

Introduksjon

I Bootstrap 3 ble tematikken i stor grad drevet av variable overstyringer i LESS, tilpasset CSS og et eget temastilark som vi inkluderte i distfilene våre. Med litt innsats kunne man fullstendig redesigne utseendet til Bootstrap 3 uten å berøre kjernefilene. Bootstrap 4 gir en kjent, men litt annerledes tilnærming.

Nå er tematisering oppnådd av Sass-variabler, Sass-kart og tilpasset CSS. Det er ikke noe mer dedikert temastilark; i stedet kan du aktivere det innebygde temaet for å legge til gradienter, skygger og mer.

Sass

Bruk Sass-kildefilene våre for å dra nytte av variabler, kart, mixins og mer.

Filstruktur

Når det er mulig, unngå å endre Bootstraps kjernefiler. For Sass betyr det å lage ditt eget stilark som importerer Bootstrap slik at du kan endre og utvide det. Forutsatt at du bruker en pakkebehandling som npm, vil du ha en filstruktur som ser slik ut:

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

Hvis du har lastet ned kildefilene våre og ikke bruker en pakkebehandling, vil du manuelt sette opp noe som ligner på den strukturen, og holde Bootstraps kildefiler atskilt fra dine egne.

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

Importerer

I din custom.scssvil du importere Bootstraps kilde Sass-filer. Du har to alternativer: ta med hele Bootstrap, eller velg delene du trenger. Vi oppfordrer sistnevnte, men vær oppmerksom på at det er noen krav og avhengigheter på tvers av komponentene våre. Du må også inkludere litt JavaScript for våre plugins.

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

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

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

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

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

Med det oppsettet på plass kan du begynne å endre alle Sass-variablene og kartene i custom.scss. Du kan også begynne å legge til deler av Bootstrap under // Optionalseksjonen etter behov. Vi foreslår at du bruker hele importstabelen fra bootstrap.scssfilen vår som utgangspunkt.

Variable standardinnstillinger

Hver Sass-variabel i Bootstrap 4 inkluderer !defaultflagget som lar deg overstyre variabelens standardverdi i din egen Sass uten å endre Bootstraps kildekode. Kopier og lim inn variabler etter behov, endre verdiene og fjern !defaultflagget. Hvis en variabel allerede er tildelt, vil den ikke bli tildelt på nytt av standardverdiene i Bootstrap.

Variabeloverstyringer i samme Sass-fil kan komme før eller etter standardvariablene. Men når du overstyrer på tvers av Sass-filer, må overstyringene dine komme før du importerer Bootstraps Sass-filer.

Her er et eksempel som endrer background-colorog colorfor <body>når du importerer og kompilerer Bootstrap via npm:

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

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

Gjenta etter behov for en hvilken som helst variabel i Bootstrap, inkludert de globale alternativene nedenfor.

Kart og løkker

Bootstrap 4 inkluderer en håndfull Sass-kart, nøkkelverdipar som gjør det enklere å generere familier med relatert CSS. Vi bruker Sass-kart for våre farger, rutenettbrytepunkter og mer. Akkurat som Sass-variabler, inkluderer alle Sass-kart !defaultflagget og kan overstyres og utvides.

Noen av våre Sass-kart er slått sammen til tomme kart som standard. Dette gjøres for å tillate enkel utvidelse av et gitt Sass-kart, men kommer på bekostning av å gjøre det litt vanskeligere å fjerne elementer fra et kart.

Endre kart

For å endre en eksisterende farge i $theme-colorskartet vårt, legg til følgende i din egendefinerte Sass-fil:

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

Legg til kart

For å legge til en ny farge til $theme-colors, legg til den nye nøkkelen og verdien:

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

Fjern fra kartet

For å fjerne farger fra $theme-colorseller andre kart, bruk map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

Nødvendige nøkler

Bootstrap antar tilstedeværelsen av noen spesifikke nøkler i Sass-kart slik vi brukte og utvider disse selv. Når du tilpasser de inkluderte kartene, kan du støte på feil der nøkkelen til en bestemt Sass-kart brukes.

For eksempel bruker vi tastene primary, success, og dangerfra $theme-colorsfor lenker, knapper og skjematilstander. Å erstatte verdiene til disse nøklene bør ikke by på problemer, men fjerning av dem kan føre til Sass-kompileringsproblemer. I disse tilfellene må du endre Sass-koden som bruker disse verdiene.

Funksjoner

Bootstrap bruker flere Sass-funksjoner, men bare et delsett er aktuelt for generell tematikk. Vi har inkludert tre funksjoner for å hente verdier fra fargekartene:

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

Disse lar deg velge én farge fra et Sass-kart omtrent som hvordan du ville brukt en fargevariabel fra v3.

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

Vi har også en annen funksjon for å få et bestemt fargenivå fra $theme-colorskartet. Negative nivåverdier vil gjøre fargen lysere, mens høyere nivåer blir mørkere.

@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 praksis vil du kalle funksjonen og sende inn to parametere: navnet på fargen fra $theme-colors(f.eks. primær eller fare) og et numerisk nivå.

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

Ytterligere funksjoner kan legges til i fremtiden eller din egen tilpassede Sass for å lage nivåfunksjoner for flere Sass-kart, eller til og med en generisk en hvis du ønsker å være mer detaljert.

Fargekontrast

En tilleggsfunksjon vi inkluderer i Bootstrap er fargekontrastfunksjonen, color-yiq. Den bruker YIQ-fargerommet til automatisk å returnere en lys ( #fff) eller mørk ( #111) kontrastfarge basert på den angitte grunnfargen. Denne funksjonen er spesielt nyttig for mixins eller looper der du genererer flere klasser.

For eksempel, for å generere fargeprøver fra $theme-colorskartet vårt:

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

Den kan også brukes til engangskontrastbehov:

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

Du kan også spesifisere en grunnfarge med våre fargekartfunksjoner:

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

Sass alternativer

Tilpass Bootstrap 4 med vår innebygde egendefinerte variabelfil og bytt enkelt globale CSS-preferanser med nye $enable-*Sass-variabler. Overstyr en variabels verdi og kompiler på nytt med npm run testetter behov.

Du kan finne og tilpasse disse variablene for viktige globale alternativer i _variables.scssfilen vår.

Variabel	Verdier	Beskrivelse
`$spacer`	`1rem`(standard), eller en hvilken som helst verdi > 0	Angir standard avstandsverdi for å programmere generere avstandsverktøyene våre .
`$enable-rounded`	`true`(standard) eller`false`	Aktiverer forhåndsdefinerte `border-radius`stiler på ulike komponenter.
`$enable-shadows`	`true`eller `false`(standard)	Aktiverer forhåndsdefinerte `box-shadow`stiler på ulike komponenter.
`$enable-gradients`	`true`eller `false`(standard)	Aktiverer forhåndsdefinerte gradienter via `background-image`stiler på ulike komponenter.
`$enable-transitions`	`true`(standard) eller`false`	Aktiverer forhåndsdefinerte `transition`s på ulike komponenter.
`$enable-hover-media-query`	`true`eller `false`(standard)	Avviklet
`$enable-grid-classes`	`true`(standard) eller`false`	Aktiverer generering av CSS-klasser for nettsystemet (f.eks. `.container`, `.row`, `.col-md-1`, osv.).
`$enable-caret`	`true`(standard) eller`false`	Aktiverer pseudoelement-caret på `.dropdown-toggle`.
`$enable-print-styles`	`true`(standard) eller`false`	Aktiverer stiler for å optimalisere utskrift.

Farge

Mange av Bootstraps ulike komponenter og verktøy er bygget gjennom en rekke farger definert i et Sass-kart. Dette kartet kan sløyfes i Sass for raskt å generere en rekke regelsett.

Alle farger

Alle farger tilgjengelig i Bootstrap 4, er tilgjengelige som Sass-variabler og et Sass-kart i scss/_variables.scssfilen vår. Dette vil bli utvidet i påfølgende mindre utgivelser for å legge til flere nyanser, omtrent som gråtonepaletten vi allerede inkluderer.

Blå

Indigo

Lilla

Rosa

rød

oransje

Gul

Grønn

Blågrønn

Cyan

Slik kan du bruke disse i Sass:

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

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

Fargeverktøyklasser er også tilgjengelige for innstilling colorog background-color.

I fremtiden vil vi ta sikte på å tilby Sass-kart og variabler for nyanser av hver farge, slik vi har gjort med gråtonefargene nedenfor.

Temafarger

Vi bruker et undersett av alle farger for å lage en mindre fargepalett for å generere fargeskjemaer, også tilgjengelig som Sass-variabler og et Sass-kart i scss/_variables.scssfilen vår.

Hoved

Sekundær

Suksess

Fare

Advarsel

Info

Lys

Mørk

Grå

Et omfattende sett med grå variabler og et Sass-kart scss/_variables.scssfor konsekvente gråtoner på tvers av prosjektet.

100

200

300

400

500

600

700

800

900

Innenfor _variables.scssfinner du fargevariablene våre og Sass-kartet. Her er et eksempel på $colorsSass-kartet:

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

Legg til, fjern eller endre verdier i kartet for å oppdatere hvordan de brukes i mange andre komponenter. Dessverre på dette tidspunktet er det ikke alle komponenter som bruker dette Sass-kartet. Fremtidige oppdateringer vil forsøke å forbedre dette. Inntil da, planlegg å bruke ${color}variablene og dette Sass-kartet.

Komponenter

Mange av Bootstraps komponenter og verktøy er bygget med @eachløkker som itererer over et Sass-kart. Dette er spesielt nyttig for å generere varianter av en komponent av vår $theme-colorsog lage responsive varianter for hvert bruddpunkt. Når du tilpasser disse Sass-kartene og kompilerer på nytt, vil du automatisk se endringene dine reflektert i disse loopene.

Modifikatorer

Mange av Bootstraps komponenter er bygget med en base-modifier klasse tilnærming. Dette betyr at hoveddelen av stilen er inneholdt i en basisklasse (f.eks. .btn) mens stilvariasjoner er begrenset til modifikatorklasser (f.eks. .btn-danger). Disse modifikatorklassene er bygget fra $theme-colorskartet for å tilpasse antallet og navnet på modifikatorklassene våre.

Her er to eksempler på hvordan vi går over $theme-colorskartet for å generere modifikatorer til .alertkomponenten og alle .bg-*bakgrunnsverktøyene våre.

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

Mottakelig

Disse Sass-løkkene er heller ikke begrenset til fargekart. Du kan også generere responsive varianter av komponentene eller verktøyene dine. Ta for eksempel våre responsive tekstjusteringsverktøy der vi blander en @eachløkke for $grid-breakpointsSass-kartet med en mediespørring.

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

Hvis du trenger å endre $grid-breakpoints, vil endringene gjelde for alle løkkene som itererer over det kartet.

CSS-variabler

Bootstrap 4 inkluderer rundt to dusin egendefinerte CSS-egenskaper (variabler) i den kompilerte CSS. Disse gir enkel tilgang til ofte brukte verdier som våre temafarger, bruddpunkter og primære skriftstabler når du arbeider i nettleserens Inspector, en kodesandkasse eller generell prototyping.

Tilgjengelige variabler

Her er variablene vi inkluderer (merk at det :rooter obligatorisk). De ligger i _root.scssfilen vår.

: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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Eksempler

CSS-variabler tilbyr lignende fleksibilitet som Sass sine variabler, men uten behov for kompilering før de blir servert til nettleseren. For eksempel, her tilbakestiller vi sidens font- og lenkestiler med CSS-variabler.

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

Du kan også bruke våre bruddpunktvariabler i mediespørringene dine:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}