Barvy

Barvy

Oživte obsah barevnou paletou. Snažte se počet zobrazených barevných prvků držet v rozumné míře – méně je někdy více.

Paleta

Široká škála barev umožňuje vždy vybrat danou akci. Jelikož jsou barvy velmi výrazné, vyhněte se použití barevného pozadí na velké ploše, působilo by rušivě. Naopak se pokuste zasadit barvy do aplikace minimalisticky tak, aby jasně zvýranili kýžený prvek, ale zároveň uživatele nerušily.

Markup

<div class="foo"></div>
<div class="bar"></div>
<div class="qux"></div>
.foo {
  .themify(background-color, @green);
}

.bar {
  .themify(background-color, @wb); // @wb: @white @black
}

.qux {
  .themify(background-color, @white @grey-3-dark);
}

Důležité Na příkladu výše si lze všimout, že stylování barev MultiWebu není jen prosté přiřazení hodnoty k CSS property, ale má za sebou jistou logiku. Každá proměnná barvy v sobě nese dvě složky – barvu pro světlé téma a barvu pro tmavé téma. Podrobnější informace jsou uvedeny v tématech.

Důležité Jakým způsobem zacházet s barevným písmem se dozvíte v kontrastu.

Odstíny šedi

Neutrální barvy jsou vhodné pro velkých bloků, například pozadí aplikace, formuláře, dialogu, karty.

Ne Pro text v odstínech šedi nepoužívejte odstíny šedi pro pozadí.

Branding

Kombinací primární a sekundární barvy je možné vytvořit vlastní branding, pokud by zákazník vyžadoval použití svých barev. Výchozí modrofialové schéma není potřeba dodržovat.

<div class="foo foo--primary"></div>
<div class="foo foo--secondary"></div>
.foo--primary {
  .themify(background-color, @color-primary);   
}

.foo--secondary {
  .themify(background-color, @color-secondary);   
}

Jak změnit branding

@color-primary-dark:    @orange-dark;
@color-primary-light:   @orange-light;
@color-secondary-dark:  @yellow-dark;
@color-secondary-light: @yellow-light;

Po této úpravě ve vlastních stylech a následné kompilaci dojde k přetěžení proměných výchozích barev brandingu. V tomto konkrétním příkladu se změní primární barva na oranžovou a sekundární barva na žlutou.

Stav

K barevnému zvýraznění stavu stačí využít předvolených barev. Není tak nutné si pamatovat nebo zpětně dohledávat přesnou barvu.

<div class="foo foo--success"></div>
<div class="foo foo--warning"></div>
<div class="foo foo--error"></div>
<div class="foo foo--information"></div>
.foo--success {
  .themify(background-color, @color-success);   
}

.foo--warning {
  .themify(background-color, @color-warning);   
}

.foo--error {
  .themify(background-color, @color-error);   
}

.foo--information {
  .themify(background-color, @color-information);   
}
            
Opatrně Barva písma musí být kontrastní oproti pozadí. Navštivte kontrast a zjistěte více.

Práva

K barevnému zvýraznění práv stačí využít předvolených barev. Není tak nutné si pamatovat nebo zpětně dohledávat přesnou barvu. Méně syté barvy jsou k dispozici také v ControlsVariables.less v sekci EditableControl.

<div class="foo foo--required"></div>
<div class="foo foo--posponedrequired"></div>
<div class="foo foo--recommended"></div>
.foo--required {
  .themify(background-color, @color-required);   
}

.foo--posponedrequired {
  .themify(background-color, @color-posponedrequired);   
}

.foo--recommended {
  .themify(background-color, @color-recommended);   
}

Oddělovač

Oddělovač je tenká linka napomáhající rozdělit skupiny prvků, například řádky seznamu.

<div class="list__item"> … </div>
<div class="list__item"> … </div>
<div class="list__item"> … </div>
.list__item {
  padding: var(--base) 0;

  // Oddělovač mají všechny položky kromě poslední
  &:not(:last-child) {
       border-bottom: 1px solid;
       .themify(border-bottom-color, @divider);
  }
}
1 900 000 Kč
Před 3 min
Werner Heisenberg
12 500 000 Kč
Dnes 8:31
Niels Bohr
120 540 Kč
12. 6. 2018
Ernest Rutherford
1 900 000 Kč
Před 3 min
Werner Heisenberg
12 500 000 Kč
Dnes 8:31
Niels Bohr
120 540 Kč
12. 6. 2018
Ernest Rutherford

Tip Pokuste se nejprve obsah oddělit bez použití oddělovače – využijte tzv. gestalt principů designu. Lidský mozek funguje na rozpoznávání vzorců, proto se zaměřte na repetici, podobnost a blízkost.

Ne Pro oddělovače nepoužívejte odstíny šedi pro pozadí.