8 důvodů, proč byste si měli vybrat WordPress

Každý rok se velké společnosti ze světa kreativy předbíhají v predikování barevných trendů pro aktuální rok. Každá má k tomu svůj vlastní postup, vždy je však založen na datech a zkušenostech. My jsme se podívali na to, co pro rok 2021 vybrali Shutterstock a Pantone. A dali jsme ti to i do přehledné infografiky v závěru. Barva je v grafickém designu jeden z nejvýraznějších elementů. A je úplně jedno, o jaký typ designu se jedná. Stejně jako fonty či obrázky dokáže upoutat či odpudit pozornost, popřípadě vyvolat nějakou konkrétní asociaci. Výběru barev pro své projekty by si proto měl věnovat náležitou pozornost a nezkazit to hned na začátku. Pokud vidíš svou budoucnost právě v kreativním byznysu, nebude na škodu seznámit se s teorií barev a stavět na léty ověřených základech. Vždy je ale dobré vědět, jaké barvy aktuálně letí. Hezký pohled na věc nám nabízí report barevných trendů od známé společnosti Shutterstock. Jejich predikce stojí na analýze zvýšené aktivity či nárůstu stažení jednotlivých obrázků. Je až neuvěřitelné, že se dívaly na HEX kódy pro každý jeden pixel těchto obrázků. Takto vznikly predikce barevných trendů pro rok 2021. Set Sail Champagne (#FAEBD7)[Image]Jedná se o přírodní odstín s velmi univerzálním použitím. Zejména chceme-li v designech docílit „zemitého“ přírodního efektu. Jedná se o jemný a světlý odstín oranžové, pěkně doplňuje modré barevné palety. Fortuna Gold (#DAA520)[Image]Název Fortuna pochází z římského pojmenování bohyně štěstí. Jedná se o výrazný, tmavý odstín žluté. Je velmi vděčná u metalických designů, případně jako komplementární barva pro předchozí.  Tidewater Green (#2F4F4F)[Image]Základem této barvy jsou modrá a zelená. Je velmi vhodná pro doplnění designů s velkou saturací barevného schématu. Případně ji můžeme použít jako vylepšenou verzi pro neutrální části designů, například místo šedé. Shutterstock ale není jediný, kdo má co říci k barevným trendům. Společnost Pantone rovněž představila barvy pro rok 2021. Jejich předpověď stojí na šedé barvě Ultimate Gray a žluté barvě s přitažlivým názvem Illuminating. Měly by reprezentovat pocit tepla domova a zodpovědnosti, což je pro aktuální situaci na místě. Schopnost společnosti Pantone předpovídat barevné trendy je jejich marketingovou silou, která pomáhá designérům z různých oborů jít s trendy od sezóny k sezóně. Illuminating Yellow (#F5DF4D)[Image]Podle jejich vlastního vyjádření jde o hřejivý odstín „jasné a veselé žluté s temperamentem“. Tento popis je pro danou barvu vcelku výstižný. Ultimate Gray (# 939597)[Image]Jedná se o „kamenitou“ barvu reprezentující to pevné a spolehlivé v životě. Je dobře asociován se stabilitou v životě. Tyto barvy by měly tedy v aktuálním roce dominovat. Ovšem pozor na to, abyste se jimi nenechali příliš unést. Stále jsou to jen trendy. A ty přicházejí a odcházejí. Vždy je třeba se zamyslet a vybrat barvy pro svůj projekt na základě několika faktorů. Někdy je třeba být trendy, někdy nadčasový a někdy to je třeba zkombinovat. Připravili jsme si pro tebe i jednoduchou infografiku ke stažení, kde jsou všechny trendy barvy roku 2021 pohromadě:[Image] Docela zajímavé jsou i preference barev rozdělené podle zemí. Slovensko tam sice uvedeno není, ale když se podíváš na Francii, Německo, Švýcarsko či Itálii, trend je jasný. Náš odhad pro top barvu Slovenska by byla některá z nich. Co ty na to?[Image] Zdroj: Shutterstock

Připravili jsme si pro tebe parádní akci - vyzkoušej si naše online kurzy na 30 dní zdarma. Žádné triky, skryté podmínky. Jednoduše se přihlásíš do předplatného na měsíc a můžeš studovat to, na co máš chuť. Postup aktivace kurzů na 30 dní zdarmaJe třeba jít na stránku https://skillmea.sk/akcia a potom klepnout na OBJEDNAT.[Akcia od Learn2Code]Pokud nejsi u nás zaregistrován, vytvoříš si registraci se svým emailem. Pokud již zaregistrovaný jsi, jednoduše se přihlásíš do svého účtu. Následně se dostaneš na objednávkový formulář a musíš zaškrtnout políčko 'Mám slevový kupón'. A do tohoto políčka vložíš kód “yablko  [V políčku zľavový kód zadaj: yablko]” Voilà, už jen klikneš Vstoupit do kurzu a předplatné máš aktivované. Pak už si jen vybereš kurzy, které chceš studovat. Například půjdeš na stránku https://skillmea.sk/kurzy/online-kurz-javascript-es6 a klikneš Zapsat kurz. Platnost tvého předplatného se zobrazuje ve tvém profilu, můžete si to hezky zkontrolovat. Kód je platný pouze do 31.8.2020. Co všechno na tebe čekáAbsoluj tolik kurzů, kolik jen chceš! Ať už se zaměřuješ na grafiku, weby, video či marketing, vybrat si můžeš z více než 140 online kurzů zahrnujících stovky hodin videa. Tvorba stránek, programování, Excel, ale ani fotografování či střih videa ti už nebudou dělat sebemenší problém 💪 Pojď na to a aktivuj si své předplatné na měsíc ještě dnes, kód je platný do 31.8.2020 👇

Od poloviny června máme přístup k první alpha verzi Bootstrap 5. Kromě nové verze loga v sexy závorkách {B} se dočkáme i obrovského množství vylepšení na všech frontách. Už samotná dokumentace je ukázkou vylepšeného vzhledu a funkcionalit. Pokud se neumíš dočkat a chceš nový Bootstrap vyzkoušet ASAP, začni tady. Je to stále Alpha verze, nedoporučuji ji proto nasadit do žádného projektu. Než dostaneme první betaverzi, může projít změnami, které Ti vyrobí více práce než pomoci. Toto je "sestřih" nejvýraznějších změn, které jsme popsali přesně pro Tebe. Na míru. [Image] JavaScriptUž žádná podpora pro jQuery, i když..Pro některé killer feature, pro jiné nic podstatného. Nový Bootstrap 5 nebude již obsahovat jQuery jako jednu ze svých závislostí (i přesto, že jQuery „asi“ stále žije a v dubnu letošního roku jsme dostali novou verzi jQuery – 3.5). Víme to už dávno, už jsme se na to jen těšili. Ještě nemáme oficiální konečná čísla, ale očekáváme, že Bootstrap díky této zásadní změně ztratí jak na kilobajtech, tak na milisekundách. Pokud si rozumíme 😉 Pokud však stále jQuery ve svém projektu potřebuješ, Bootstrap o tom bude vědět a všechny komponenty přidá k modulům jQuery. V zásadě to znamená, že stále bude možné inicializovat například Tooltip komponent takovým (starým) způsobem (v případě, že Bootstrap detekuje přítomnost jQuery): $('[data-toggle="tooltip"]').tooltip(); Button pluginZměnami projde i state-management tlačítek. Ty využíváme například i jako indikátory ZAP/VYP při různých funkcionalitách našich aplikací. Ve starších verzích Bootstrap stav tlačítka řešil JavaScript. Bootstrap 5 se snaží state-management řešit v co nejvyšší míře dostupnými funkcionalitami a elementy HTML a CSS. Výsledkem tak je manažování stavu tlačítka pomocí checkbox a radio elementů. Naše ZAP/VYP tlačítka tak budou o něco spolehlivější mezi různými platformami. CSSCSS proměnnéS koncem podpory pro Internet Explorer přicházejí i nové možnosti. Jednou z nich jsou i CSS proměnné. Ty jsme spatřili již v předchozí verzi (root variables), avšak ne v takovém rozsahu jako ve verzi 5 – kde se css proměnné dostaly už i do jednotlivých komponent. Například do tabulek: .table { --bs-table-bg: #{$table-bg}; --bs-table-accent-bg: transparent; --bs-table-striped-color: #{$table-striped-color}; --bs-table-striped-bg: #{$table-striped-bg}; --bs-table-active-color: #{$table-active-color}; --bs-table-active-bg: #{$table-active-bg}; --bs-table-hover-color: #{$table-hover-color}; --bs-table-hover-bg: #{$table-hover-bg}; // Styles here... } Výhodou CSS proměnných je jejich používání bez nutnosti zkompilování SASS kódu do CSS. Takto bude možné hodnoty některých proměnných měnit v přímo Inspectoru prohlížeče, což urychlí práci například při prototypování. V Bootstrap 5 stále zůstane možnost definice proměnných v SASS (_variables.scss) souborech, tak, jak jsme to dělali dosud. Osobně bych neočekával kompletní přechod ze SASS proměnných do CSS proměnných. SASS má stále svou nenahraditelnou roli při vytváření proměnných pomocí mapování, proto očekávám, že budeme mít k dispozici kombinaci SASS proměnných s CSS proměnnými iv budoucnosti. Vylepšený gridZískáme nový grid-tier pro obrazovky o šířce větší než 1400px - .col-xxl-. Rovněž mezery mezi jednotlivými sloupci gridu budou nově "ohebnější". Získáme novou css utilitu g pro naše .row. S gutter hodnotami takto bude možné pracovat podobně jako s margin a padding hodnotami, na co jsme si již zvykli: .g-2 .gx-2 .gy-2 .g-lg-2 .g-0 FormulářeOd verze 4 jsme mohli ve svých aplikacích používat checkbox, radio a file elementy dvěma způsoby: 1. Buď jsme použili původní, systémový vzhled (poskytnutý browserem), 2. nebo jsme použili nový vzhled (custom-checkbox, custom-radio). Verze 5 bude obsahovat už jen nový vzhled těchto prvků. Formuláře tak budou vypadat rovněž v každém prohlížeči a operačním systému a přizpůsobení vzhledu těchto komponentů bude stejně jednodušší. Rovněž bude odstraněn i potřebný .form-group wrapper. Nové formuláře již budou obsahovat jen jednotlivé form elementy, bez tohoto DIV elementu. Hurá! Méně kódu! 🙂 <form> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> ... </form> Wrapper bude potřebný pouze pro custom elementy (.form-select, .form-check, .form-file) a také .form-group. Utilities APIUtility jsou velmi užitečné CSS třídy, kterými obvykle měníme parametry rámování, barev, způsobů zobrazení, stínování a různých velikostí (width, height, padding, margin,...). V praxi se občas stává, že se nevejdeme do předdefinovaných utilit, které jsou součástí Bootstrap-u. Proto jsme někdy vytvářeli vlastní třídy. Například pokud nastavujeme šířku nějakého elementu, máme k dispozici takové css třídy: .w-25 /* 25% */ .w-50 /* 50% */ .w-75 /* 75% */ .w-100 /* 100% */ .w-auto /* auto */ Pokud jsme potřebovali 33% width, 90% width, nebo jiné hodnoty, vytvořili jsme vlastní CSS třídy, udělali override na $sizes mapu v nějakém vlastním souboru, nebo jsme nebodaj editovali přímo $sizes mapu v souboru proměnných _variables.scss. Ve verzi Bootstrap 5 máme k dispozici čistší a užitečnější SASS nástroj, jak modifikovat stávající, nebo přidat nové utility do našeho projektu, tématu nebo pluginu pro Bootstrap - utilities API: $utilities: map-merge( ( "width": ( property: width, class: w, values: ( 33: 33%, 90: 90% ) ), "input-padding": ( property: padding, class: ip, values: ( 0: 0, 1: .3rem, 2: .5rem, 3: .7rem, 4: .9rem, 5: 1rem, ) ) ), $utilities); Výsledkem takového kódu budou nové css třídy utilit: .w-33 /* nastaví width na 33% */ .w-99 /* nastaví width na 90% */ .ip-1 /* nastaví padding na .3rem */ .ip-2 /* nastaví padding na .5rem */ .ip-3 /* nastaví padding na .7rem */ .ip-4 /* nastaví padding na .9rem */ .ip-5 /* nastaví padding na 1rem */ Ostatní vylepšeníIkonyS alpha verzí Bootstrap 5 přichází také pátá alpha verze Bootstrap Icons. Je to sada více než 1000 ikon, které jsou nadesignovány tak, aby parádně ladily s Bootstrapem. Nifty funkcionalita je také SVG sprite, která nám umožňuje vytvořit vlastní mapu SVG ikon a efektně ji používat v projektu, aniž bychom kód špinili samotným SVG zdrojovým kódem. <svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart-fill"/> </svg> Osobně jsem velkým fanouškem Fontawesome ikon, které obsahují kromě enormně většího množství ikon a jejich variant i velmi užitečné způsoby integrace do projektů. Fontawesome nejsou však dostupné zdarma, proto možná v dalším projektu i my v learn2code zvážíme integraci s Bootstrap ikonami. DokumentaceUž na první pohled je vidět, že dokumentace prošla změnami. Ty však nejsou jen vizuální, ale vylepšen je i samotný obsah. Orientace mezi sekcemi je díky novému postrannímu jménu rychlejší. Jednotlivé sekce obsahují také jakési "overview", které postupně přibývají do každé hlavní sekce dokumentace. I tyto změny urychlují navigaci v dokumentaci a hledání požadované informace je takto rychlejší. BarvyPřibyly také nové barevné odstíny a vylepšen bude také jejich kontrastní poměr. ZávěrTento text není a ani nechtěl být kompletním diffem verze 4 s novou verzí 5. Mnohem více novinek najdeš ve stále rostoucí dokumentaci k Bootstrap 5. Pokud jsem na něco důležitého zapomněl, klidně se ozvi v komentáři.