Barevný Bootstrap v5.3

Ve verzi 5.3.0 se barevná paleta Bootstrapu dále rozšiřuje a stává se propracovanější. Přidali jsme nové proměnné pro sekundární a terciární barvy textu a pozadí a také -bg-subtle, -border-subtle a -text-emphasis pro barvu našeho motivu. Tyto nové barvy jsou dostupné prostřednictvím proměnných Sass a CSS (ale nikoliv našich barevných map nebo užitných tříd) s explicitním cílem usnadnit přizpůsobení více barevných režimů, jako je světlý a tmavý. Tyto nové proměnné jsou nastaveny globálně na :root a jsou přizpůsobeny našemu novému tmavému barevnému režimu, zatímco původní barvy motivu zůstávají nezměněny.

Barvy končící na -rgb poskytují hodnoty červené, zelené a modré pro použití v barevných režimech rgb() a rgba(). Například rgba(var(—bs-secondary-bg-rgb), .5) .

Varování! Může dojít k určitému zmatku ohledně našich nových sekundárních a terciárních barev a stávající sekundární barvy motivu, stejně jako ohledně světlých a tmavých barev motivu. Očekává se, že tento problém bude ve verzi 6 opraven.

Použití nových barev

Tyto nové barvy jsou dostupné prostřednictvím proměnných CSS a utilitních tříd, jako jsou –bs-primary-bg-subtle a .bg-primary-subtle, což vám umožňuje vytvářet si vlastní pravidla CSS pomocí proměnných nebo rychle aplikovat styly prostřednictvím tříd. Utility jsou vytvořeny s proměnnými CSS souvisejícími s barvami a protože tyto proměnné CSS přizpůsobujeme pro tmavý režim, přizpůsobují se také výchozímu barevnému režimu.

Příklad prvku s utilitami

div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">  Пример элемента с утилитами div>

Barvy motivu

Pro vytvoření menší barevné palety používáme podmnožinu všech barev, která slouží k vytvoření barevných schémat. Tato schémata jsou k dispozici také jako proměnné Sass a mapa Sass v souboru scss/_variables.scss.

Všechny tyto barvy jsou k dispozici jako mapa Sass, $theme-colors.

$theme-colors: (  "primary": $primary,  "secondary": $secondary,  "success": $success,  "info": $info,  "warning": $warning,  "danger": $danger,  "light": $light,  "dark": $dark ); 

Podívejte se na naši dokumentaci k mapám a smyčkám Sass, kde se dozvíte, jak tyto barvy změnit.

Všechny barvy

Všechny barvy Bootstrapu jsou k dispozici jako proměnné Sass a mapa Sass v souboru scss/_variables.scss. Abychom zabránili přílišnému zvětšení souborů, nevytváříme pro každou z těchto proměnných třídy barev textu ani pozadí. Místo toho vybíráme podmnožinu těchto barev pro paletu motivů.

Při úpravě barev nezapomeňte sledovat kontrastní poměr. Jak je uvedeno níže, ke každé z primárních barev jsme přidali tři kontrastní poměry: jeden pro aktuální vzorové barvy, jeden pro bílou a jeden pro černou.

$modrá #0d6efd
$indigo #6610f2
fialová #6f42c1
růžová #d63384
$červená #dc3545
oranžová #fd7e14
žlutá #ffc107
$green #198754
tyrkysově modrozelená #20c997
$azurová #0dcaf0
$gray-500 #adb5bd
černá #000
$bílá #fff

Poznámky k Sassu

Sass neumí programově generovat proměnné, takže jsme si proměnné pro každý odstín a stín vytvořili ručně. Zadáme střední hodnotu (např. $blue-500) a pomocí vlastních barevných funkcí mix() zesvětlíme nebo ztmavíme naše barvy.

Použití mix() není totéž jako lighten() a darken() – první jmenovaná metoda míchá zadanou barvu s bílou nebo černou, zatímco druhá pouze upravuje hodnotu jasu každé barvy. Výsledkem je mnohem kompletnější sada barev, jak je ukázáno v této ukázce CodePenu.

Naše funkce tint-color() a shade-color() používají mix() spolu s proměnnou $theme-color-interval, která definuje stupňovitou procentuální hodnotu pro každou smíchanou barvu, kterou vytvoříme. Úplný zdrojový kód naleznete v souborech scss/_functions.scss a scss/_variables.scss.

Barevné mapy Sass

Zdrojové soubory Sass od Bootstrapu obsahují tři mapy, které vám pomohou rychle a snadno zobrazit seznam barev a jejich hexadecimálních hodnot.

• Seznam všech dostupných základních barev ($colors) (500)
• $theme-colors seznam všech barev motivu se sémantickými názvy (viz níže)
• $grays seznam všech odstínů a tónů šedé

V souboru scss/_variables.scss najdete barevné proměnné Bootstrapu a mapu Sass. Zde je příklad mapy Sass s převodníkem $colors:

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

Přidáním, odebráním nebo změnou hodnot na mapě aktualizujete způsob jejich použití v mnoha dalších komponentách. Bohužel v současné době neexistuje žádná možnost. každý Komponenta používá tuto mapu Sass. V budoucích aktualizacích se ji pokusíme vylepšit. Prozatím plánujte používat proměnné $ a tuto mapu Sass.

příklad

Zde je návod, jak je můžete použít ve svém Sassu:

.alpha color: $purple; > .beta  color: $yellow-300;  background-color: $indigo-900; > 

K dispozici jsou také nástroje Barva a Pozadí pro nastavení barvy a barvy pozadí s použitím hodnot barev 500.

Generování energií

Bootstrap neobsahuje utility pro barvu a barvu pozadí pro každou barevnou proměnnou, ale můžete si je vytvořit sami pomocí našeho utility API a našich rozšířených map Sass přidaných ve verzi 5.1.0.

1. Nejprve se ujistěte, že jste importovali naše funkce, proměnné, mixiny a utility.
2. Pomocí naší funkce map-merge-multiple() můžete rychle sloučit více Sass map do nové mapy.
3. Zkombinujte tuto novou kombinovanou kartu a vylepšete tak jakoukoli utilitu s názvem třídy – .

Zde je příklad, který generuje utility pro barvu textu (např. .text-purple-500) pomocí výše uvedených kroků.

@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities";  $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);  $utilities: map-merge(  $utilities,  (  "color": map-merge(  map-get($utilities, "color"),  (  values: map-merge(  map-get(map-get($utilities, "color"), "values"),  (  $all-colors  ),  ),  ),  ),  ) );  @import "bootstrap/scss/utilities/api"; 

Tím se pro každou barvu a úroveň vytvoří nové textové nástroje. Totéž lze provést pro jakékoli další nástroje a vlastnosti.

• Navrženo a vytvořeno s láskou týmem Bootstrap s pomocí našich přispěvatelů.
• Kód pod licencí MIT, dokumentace CC BY 3.0.
• Aktuální verze 5.3.5.

V CSS existuje mnoho barevných formátů – hexadecimální kódy, rgb(), hsl(), lch() a několik dalších. Je těžké vědět, který použít, protože mezi formáty existují důležité rozdíly. A upřímně řečeno, mnoho z nás považuje „důležité“ za zcela odlišné věci.

V tomto článku vás provedu různými barevnými formáty. Uvidíme, jak fungují, jak jim porozumět a jak je nejefektivněji používat. Ke konci vám ukážu, jak si můžete barvy v moderním CSS upravovat za chodu, pokud si vyberete správný barevný formát.

Pojmenované barvy

Technicky vzato se nejedná o formát barev. V HTML je k dispozici 140 pojmenovaných barev. Jsou to speciální klíčová slova jako dodgerblue, hotpink nebo tomato.

 body 
Hello world!
 

Vývojář Anthony Lieuallen vytvořil demo se všemi 140 pojmenovanými barvami v jednom kole:

Pojmenované barvy lze použít, když potřebujete barevný blok místo obrázku – například při vytváření prototypů webových stránek. Nebo pokud vytváříte školicí materiály, protože nic není jasnější než barva: červená.

Málokdy se o tom mluví, ale pojmenované barvy se ve skutečném vývoji webových stránek nejčastěji nepoužívají. 140 barev je velmi málo, dokonce méně než XNUMXbitová barevná paleta na NESu.

. Se světem na provázku

Zde jsou dvě pojmenované barvy:

Jak je možné, že tmavě šedá je světlejší než šedá?!

Jde o to, že těchto 140 barev bylo kousek po kousku shromážděno z celého světa. Mezi zdroji byla specifikace HTML4, unixový okenní systém X11 a barvy přidané na památku konkrétních lidí.

Výsledkem byla ne vždy logická směsice různých palet.

RGB

Toto je první „skutečný“ barevný formát. Zde je návod, jak ho používat:

 body 
Hello world!
 

Stejně jako většina barevných formátů je RGB zkratkou pro červenou (red) zelenou (green) modrou (blue).

RGB je ze všech barevných formátů v tomto článku nejméně abstraktní. Obrazovka vašeho počítače nebo telefonu je doslova sbírkou milionů malých červených, zelených a modrých žároviček, které jsou uspořádané do pixelů. Formát RGB nám umožňuje přímo ovládat jas těchto žárovek.

Každá hodnota – červená, zelená nebo modrá – se nazývá kanál. Hodnota kanálu se pohybuje od 0 do 255. Smícháním těchto kanálů v různých poměrech můžeme vytvořit více než 16 milionů různých barev.

Takto vypadá RGB výběr barev.

Skvělé na RGB je, že je založeno na fyzice světla. Můžeme smíchat červenou, zelenou a modrou a vytvořit tak libovolnou barvu. Pokud každou z nich nastavíme na maximum, dostaneme bílou. A pokud vše nastavíme na 0, dostaneme černou.

V RGB existuje také čtvrtá volitelná hodnota pro tzv. alfa kanál, který řídí průhlednost:

Alfa kanál nabývá hodnot od 0 (plně průhledný) do 1 (plně neprůhledný). Jakékoli hodnoty mezi nimi, například 0.5, vytvářejí poloprůhlednou barvu.

Co je to za novodobou syntaxi?!

Až donedávna CSS specifikoval barvu RGB trochu jinak a hodnotu pro každý kanál zapisoval oddělenou čárkami. Takto:

tělo

A průsvitné barvy byly nastaveny pomocí funkce rgba:

.průsvitná-krabice

Tento přístup se změnil ve standardu CSS Colors úrovně 4, který zavedl novou jednotnou notaci pro všechny barevné formáty. Funkce rgba() není zcela zastaralá, ale je lepší používat rgb() s novou syntaxí (naštěstí ji prohlížeče dobře podporují).

Jak jste již viděli výše, nyní je průhlednost nastavena takto:

.translucent-box < background: rgb(255 0 0 / 0.5); >

Co znamená lomítko? Toto je oddělovač. Označuje, že první 3 hodnoty jsou součástí jedné skupiny a poslední hodnota patří do jiné. Dělení s tím nemá nic společného.

HEX kódy

Toto je pravděpodobně nejpoužívanější barevný formát na webu. Vypadá takto:

 body 
Hello world!
 

Zde je návod, jak to funguje: Šestimístný hexadecimální kód obsahuje tři dvoumístné hodnoty, jednu hodnotu pro každý kanál (červená, zelená, modrá). Tento formát používá místo desítkové soustavy hexadecimální soustavu.

Technicky vzato jsou hexadecimální kódy stejné jako hodnoty RGB. V obou případech potřebujeme hodnoty pro červenou, zelenou a modrou.

V desítkové soustavě obsahuje dvouciferné číslo maximálně 100 možných hodnot (10 × 10). V šestnáctkové soustavě je součet 256 (16 × 16). A toto číslo 256 je velmi podobné funkci rgb(), kde pro každý kanál zadáváme hodnotu od 0 do 255.

Zajímavost: pro určení průhlednosti barvy můžeme zadat hexadecimální kód osmi číslic:

 .translucent-box 

V tomto příkladu jsme nastavili alfa kanál na 80, což je 128 v desítkové soustavě. Díky tomu je barva z 50 % průhledná.

Osmimístné hexadecimální kódy jsou v moderních prohlížečích dobře podporovány. Smutnýale IE mezi ně nepatří :)

HSL

Dva předchozí formáty byly „obaly“ pro stejnou myšlenku – přenos specifických hodnot pro červený, zelený a modrý kanál.

Naštěstí to není jediný způsob, jak reprezentovat barvy. Podívejme se na HSL, což je zcela jiný barevný formát.

Tentokrát začneme s paletou:

Pravděpodobně vám je to povědomé a podobné paletám ve Figmě nebo Photoshopu.

V HSL jsou specifikovány tři různé hodnoty:

• Odstín. Barva, kterou chceme použít. Může být v rozsahu od 0 do 360 stupňů a zadáváme ji ve stupních, protože stupnice odstínu je kulatá (0 stupňů a 360 stupňů jsou stejná červená).
• Sytost: Kolik pigmentu je v naší barvě? Hodnoty se pohybují od 0 % (žádný pigment, odstín šedé) do 100 % (barva je co nejjasnější).
• Světlost: Jak tmavá nebo světlá je barva? Hodnoty se pohybují od 0 % (zcela černá) do 100 % (čistě bílá).

A tohle se zdá být velmi intuitivní způsob, jak nastavit barvu. Místo přímého ovládání červeno-modro-zelených žárovek jsme se posunuli na vyšší úroveň abstrakce, blíže tomu, jak si lidé obvykle reprezentují barvy.

Stejně jako v RGB můžeme průhlednost určit pomocí lomítka.

HSL vs. HSB

Je otravné, že většina grafického softwaru používá poměrně podobný formát HSB (Hue-Saturation-Brightness) místo HSL (Hue-Saturation-Lightness).

Zde je stejná barva v HSB a HSL:

V HSL je jas stupnice mezi černou a bílou. 0% jasu je vždy černá, 100% je vždy bílá. Pokud chceme jasnou, zářivou barvu, měli bychom nastavit jas na 50%, přesně mezi černou a bílou.

V HSB je všechno trochu složitější. „Jas“ je také mírou osvětlení a 0 % také dává černou, ale 100 % ne vždy dává bílou. Záleží na sytosti – při plném jasu a 0 % sytosti dává bílou a při 100 % sytosti získáme jasnou barvu.

Upřímně řečeno, mám rád model HSB, ale CSS ho prostě nemá. Máme jen HSL.

Pokud někdy od designéra dostanete rozvržení HSB, můžete snadno vygooglit nástroje pro převod HSB do HSL.

Moderní barevné formáty

Všechny popsané formáty existují již mnoho let. HSL byl dokonce podporován v prohlížeči Internet Explorer 9, který byl vydán v roce 2011.

Ale nedávno CSS zavedlo několik nových barevných formátů a zdá se, že před nimi není úniku.

Zobrazit P3

Tento článek pojednává o barevných formátech, syntaxích, které používáme k určení barev. A všechny formáty před tímto – rgb(), hexadecimální kódy a hsl() – souvisí se „standardním barevným prostorem RGB“. Často se mu říká sRGB.

Barevný prostor je sada dostupných barev, palet, ze kterých si barvu vybíráme. V sRGB existují miliony barev, ale to se ani zdaleka neblíží počtu, který lidské oko dokáže vidět.

Podívejte se na tyto dva červené čtverce:

Vlevo je barva rgb(255 0 0). Toto je nejčervenější červená dostupná v sRGB. A vpravo používáme barevný prostor P3. A toto je ještě červenější červená!

(Je docela pravděpodobné, že se vám tyto dva čtverce zdají stejné. Pokud ano, váš monitor nebo prohlížeč pravděpodobně nepodporuje požadovaný barevný rozsah. Zkontrolujte to v telefonu – některé iPhony začaly tyto formáty podporovat před pár lety.)

P3 rozšiřuje standardní prostor sRGB o zářivější barvy. Moc se mi líbí tento obrázek z blogu WebKit:

Bohužel v CSS je barevný prostor vázán na formát barev. Pokud používáte syntaxi rgb(), hexadecimální kódy nebo hsl(), máte přístup pouze k barvám v prostoru sRGB.

Pro barvy v prostoru P3 budete potřebovat jiný barevný formát. Zde je jeho syntaxe:

Funkce color() nabývá názvu barevného prostoru a sady hodnot R/G/B v rozsahu 0 až 1, namísto 255.

Prohlížeče tuto funkci zatím dobře nepodporují. barva() . V době psaní tohoto textu to funguje pouze v Safari.

Barevné formáty a obrázky

Ve všech typech Photoshopů si můžeme vybrat barevný prostor pro obrázky. To nám umožňuje „vložit“ P3 přímo do obrázku. A v prohlížečích, které P3 nepodporují, budou barvy v těchto obrázcích stále vypadat jinak.

Obecně je fajn mít velkou barevnou paletu, ale není fajn specifikovat hodnoty pro červený, modrý a zelený kanál. Naštěstí existují i jiné nové formáty.

LCH

Podívejte se na tyto dvě barvy ve formátu HSL:

Jak vidíte, obě barvy mají 50% „světlost“. Ale nepůsobí stejně světle. Žlutá vypadá mnohem světlejší než modrá.

Je to proto, že formát HSL byl založen na matematice a fyzice a vůbec nezohledňoval, jak lidé vnímají barvy. A co je důležité, lidé nevnímají barvy příliš přesně.

LCH si klade za cíl, aby byl všemi lidmi vnímán stejně. Dvě barvy se stejnou „lehkostí“ by měly působit stejně světle.

Například zde je žlutá a modrá s 55% jasem v LCH.

A tady je paleta LCH:

LCH znamená Světlost Chroma Odstín (světlost, intenzita, odstín). Intenzita je téměř synonymem pro sytost. Formát je koncepčně podobný HSL, ale existují dva velké rozdíly.

1. Jak již bylo uvedeno, formát je založen na lidském vnímání barev. Dvě barvy se stejným osvětlením by tedy měly působit stejně světle.
2. Není vázán na žádný konkrétní barevný prostor.

Na rozdíl od jiných formátů není LCH vázán na sRGB ani na P3.

V HSL se sytost pohybuje od 0 % (bez sytosti) do 100 % (plně sytá). Je to proto, že sRGB má konečný počet barev.

LCH ale není vázán na konkrétní barevný prostor a nevíme, kde je horní hranice sytosti, protože se neustále mění. S příchodem nových monitorů budeme schopni v takových prostorech vidět nové barvy. LCH bude automaticky schopen tyto barvy zobrazovat se zvyšujícími se hodnotami intenzity.

.red-box < /* Очень красный квадрат в LCH: */ background: lch(50% 120 20); /* Тот же цвет в sRGB, но с появлением новых мониторов он будет значиииииительно более красным. */ background: lch(50% 500 20); >

A než se příliš nadchnešLCH je podporován pouze v Safari (a Chrome brzy bude). S největší pravděpodobností bude možné nový formát používat bez obav za pár let.

Nedávno jsem se dozvěděl o dalším barevném formátu, oklch(). Je téměř identický s lch(), ale opravuje chybu se změnou odstínu modré se zvyšující se sytostí a jasem.

Za předpokladu, že prohlížeče budou podporovat oba formáty současně, oklch se jeví jako bezpečnější volba.

Jak vybrat správný barevný formát

Takže recenze se blíží ke konci a prohlédli jsme si mnoho barevných formátů. Který z nich bychom měli v naší práci použít?

Doporučuji HSL. Alespoň do té doby, než bude LCH podporováno většinou prohlížečů.

Vím, že mnoho vývojářů miluje hexadecimální kódy. Jsou jasné a univerzální a také se snadno kopírují a vkládají mezi Figmou a kódem. Musíte ale dělat kompromisy. I když se hexadecimálním kódem vyznáte, je těžké ho rozluštit. Odpovězte rychle: jaká je barva #0F52B7? A #F3E248?

HSL je ale intuitivní a dobře zapadá do našeho vnímání barev. S trochou cviku budete schopni okamžitě představit si jakoukoli barvu, když uvidíte její hodnotu hsl().

A to znamená, že můžeme snadno měnit barvy, aniž bychom museli otevírat paletu. Pokud chci tmavší barvu, snížím světlo. Pokud chci intenzivnější barvu, zvýším sytost na maximum.

HSL se stává ještě lepším v kombinaci s moderními funkcemi CSS.

Použití s preprocesory

Jsem zvyklý používat CSS preprocesor Sass. Jednou z jeho nejlepších funkcí je správa barev.

Pomocí HSL ovládáme barvy stejně jako v klasickém CSS.

 
This text is red.
 
This text is darker.
 
This text is transparent.
 
This text is softer.
 

html < --red-hue: 0deg; --red-sat: 100%; --red-lit: 50%; --red: hsl( var(--red-hue) var(--red-sat) var(--red-lit) ); --dark-red: hsl( var(--red-hue) var(--red-sat) calc(var(--red-lit) - 20%) ); --transparent-red: hsl( var(--red-hue) var(--red-sat) var(--red-lit) / 0.5 ); --soft-red: hsl( var(--red-hue) calc(var(--red-sat) - 30%) calc(var(--red-lit) + 10%) ); >

Co se tady děje. Proměnné CSS obsahují malé „fragmenty barev“ a z nich sestavujeme plné barvy.

Funkce calc() umožňuje tyto fragmenty změnit. Například zde je barva —tmavě červená:

html

Pro naši červenou použijeme normální odstín a sytost, ale snížíme světlost o 20 %. Barva se změní z hsl(0deg 100% 50%) na hsl(0deg 100% 30%).

To se může zdát složitější než Sass a je tam zahrnuto více kódu. Ale vše je napsáno v čistém CSS.

Na rozdíl od funkcí a proměnných Sassu, které jsou kompilovány do specifických hodnot pevně zakódovaných v kódu, se proměnné CSS snadno mění. Kteroukoli z nich můžeme nastavit pomocí JavaScriptu a všechny ostatní barvy se pak automaticky změní.

To je velmi praktické pro věci, jako je automatické tmavé téma, uživatelsky definovaná barevná schémata a podobně.

Doctype je časopis o frontendu. Čtěte, poslouchejte a učte se s námi.