Odstíny šedé barvy najdeme v každém webdesignu a webu. Pokud weby stavíte na Bootstrapu je důležité vědět, jak správně nastavit odstíny šedé barvy tak, aby se promítly do celého design systému a komponent, jenž Bootstrap využívá.
$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000000 !default;
Toto jsou výchozí odstíny šedé v Bootstrap proměnných. Jenže my potřebujeme Bootstrap přizpůsobit našemu webdesignu, který má definované vlastní odstíny.
Představme si, že známe všechny barvy, které jsou v grafice. V rámci tématiky tohoto článku se zaměříme pouze na šedé odstíny. Máme je všechny vypsané pod sebou, víme jak vizuálně vypadají, víme jejich hexadecimální kódy, ale kde je máme vložit? Vložíme je místo $gray-200 nebo $gray-800? Vybereme si proměnnou náhodně nebo se zamyslíme nad tím, jak to udělat správně?
Abychom naše odstíny správně zakomponovaly, nebo zcela nahradili výchozí od Bootstrapu, musíme zjistit tmavost/světlost barvy vyjádřenou v procentech. K tomu nám pomůže online pomůcka html color codes od w3schools.com.
Každou barvu zadáme do formuláře a poznačíme si její procentuální vyjádření v pravé části nástroje v sekci „lighter / darker“. Tady je výsledek:
//bootstrap variables
$white: #ffffff !default;//100%
$gray-100: #f8f9fa !default;//98%
$gray-200: #e9ecef !default;//93%
$gray-300: #dee2e6 !default;//89%
$gray-400: #ced4da !default;//83%
$gray-500: #adb5bd !default;//71%
$gray-600: #6c757d !default;//46%
$gray-700: #495057 !default;//31%
$gray-800: #343a40 !default;//23%
$gray-900: #212529 !default;//15%
$black: #000000 !default;//0%
//šedé barvy v webdesignu, barvy jsou smyšlené pro účely příkladu
$undefined-gray-1: #F5F5F5//96%
$undefined-gray-2: #ACACAC//67%
$undefined-gray-3: #150106//4%
Zjistili jsme, že výchozí šedé barvy od Bootstrapu jsou seřazené od nejsvětlejšího po nejtmavší. Taky jsme zjistili, že čím je procento vyšší tím je barva světlejší a naopak, čím je procento nižší, tím je barva tmavší.
Nyní, když víme jaké procento vyjadřuji jednotlivé šedé odstíny, můžeme naše barvy vložit na správné místo. Najdeme nejbližší číslo, které odpovídá naši barvě a nahradíme ji. Po vložení vlastní barvy odmažeme !default, abychom snadno v budoucnu poznali, která barva je ta naše a která je stále výchozí.
$white: #ffffff !default;//100%
$gray-100: #F5F5F5;//96%
$gray-200: #e9ecef !default;//93%
$gray-300: #dee2e6 !default;//89%
$gray-400: #ced4da !default;//83%
$gray-500: #ACACAC;//67%
$gray-600: #6c757d !default;//46%
$gray-700: #495057 !default;//31%
$gray-800: #343a40 !default;//23%
$gray-900: #150106;//4%
$black: #000000 !default;//0%
A to je vlastně všechno. Díky šikovnému online nástroji zjistíme procenta, ta pak porovnáme a vložíme vlastní barvy na správné místo. Jelikož Bootstrap pak tyto šedé odstíny využívá v různých komponentách, nemusíme se tak bát, že něco rozbijeme.
