Bootstrap 4 Beta - další hluboká orba

Po až příliš dlouhém plácání se s Alfou přišel konečně (před měsícem) Bootstrap 4 Beta. A stejně jako už dříve nutila každá nová Alfa verze více či méně překopat v bláhové naději projekt rozběhnutý na její předchůdkyni, musíte i nyní vzít rýče a vidle a zarýt hluboce do kódu. Pokud tedy doufáte, že se každá nová Alfa i Beta verze více a více blíží verzi finální a současně věříte, že má smysl projekt upravovat v menších postupných krůčcích namísto velkého třesku.

Na štěstí pro své duševní zdraví nyní na Bootstrapu nic velkého nevyvíjím a i ten zmíněný projektík už mám na Gitlabu a pro upgrade Bootstrapu jsem si připravil branch. Po prvním načtení webu s novým bootstrapem jsem raději noťas zaklapl a šel spat.

Na další kolo se připravuji studiem rozdílů mezi první Betou a poslední Alfou Upgrade Bootstrap 4 Alpha 6 to Beta. Zkusím asi i tamtéž doporučený on-line nástroj Bootstrap 4 Upgrade (až bude umět Betu). A budu se "těšit" co přinese Beta 2.

Pár kusých poznámek na téma barvičky a Sass

Tentokrát jen pár kusých poznámek na téma "barvičky a Sass". Řešil jsem automatické odvozování odstínů zadané "základní barvy" (pro pozadí) a nalezení kontrastní barvy, aby na tomto pozadí byl text vždy čitelný.

Sass je na práci s barvami vybavený dost dobře. Nastuduj si Module: Sass::Script::Functions — Sass Documentation. K výše uvedenému zadání mi byly užitečné hlavně funkce lightness($color), lighten($color, $amount) a darken($color, $amount).

Jak na kontrastní barvu jsem dohledal postupně na How to dynamically change text color based on a background color, Compass Color Contrast | Compass Documentation, How to get an accurate contrast color with Sass – Medium.

A dále pak na Sass text-contrast mixin, Sass text-contrast mixin a nakonec pro změnu Sass text-contrast mixin. To jsou různé verze téhož. Výsledek se mírně liší. Však se podívej.

Trochu barevné teorie načerpej z HSL and HSV na Wikipedia a Barevný model – Wikipedie.

S přepočtem barev v různých barevných modelech včetně HSV si pohraj s Color Calculator nebo složitějším Color Wheel - Color Calculator na Sessions College. Na vytvoření celých barevných schémat použij RGB Hex HSL HTML | Colour Calculator | Colour Scheme Tool nebo notoricky známý Barevný kruh | Barevná schémata - Adobe Color CC.