CSS3 a jQuery knihovny

Pokud ale tvoříte weby na WordPress nebo jedete Angular, React apod., tak vás toto téma asi moc zajímat nebude. Všichni ostatní si mohou přečíst něco málo o mnou používaných knihovnách, které se mi osvědčily u různých web aplikací nebo webových stránek.

jQuery lightgallery
A customizable, modular, responsive, lightbox gallery plugin for jQuery.
http://sachinchoolur.github.io/lightGallery/index.html

První byl LightBox, který mi přijde neskutečně pomalý, nudný apod. Navíc jsem chtěl mít webdílnu responzivní, takže jsem hledal něco, co fakt funguje na mobilech i tabletech. LightGallery je velká paráda pro obrázkové galerie v Lightboxu. Navíc je vše mobilní a dotykové. Poslední verze umí i nespočet funkcí, což je trochu na škodu, pokud chcete úplně jednoduchou knihovnu. Tady už to klasicky bobtná do obří knihovny, ačkoliv chcete jen kvalitně a jednoduše otevřít obrázek nejen na desktopu.

Swiper
Swiper – is the free and most modern mobile touch slider
http://idangero.us/swiper/

Pro animovaný slider jsem dlouho hledal nějaké funkční řešení. Nakonec to vyhrál Swiper s možností parallax efektu pro jednotlivé slidy. Alespoň tak to je např. ve webdílně (webdilna.com), kde je vidět slider v provozu. Jsou samozřejmě i kvalitnější či placené slidry, ale tento mi přišel ze všech free řešení jako nejhezčí. A navíc umí řadu dalších věcí, viz dokumentace. Velkou výhodou je i to, že je mobilní a dotykový. Opět lze vyzkoušet na demu webdílny stejně jako LightGallery.

jQuery Validation Plugin
Form validation with jQuery
http://jqueryvalidation.org

Skvělá jQuery knihovna pro validaci / kontrolu formulářů před odesláním. Umožňuje kontrolu všech možných parametrů, jako je číslo, minimální počet, maximální počet, datum, url a jiné. U e-mailu nepochopitelně projde e-mailová adresa bez koncovky, ale to lze vyřešit vlastní metodou. U knihovny hodnotím kladně jednoduchost a srozumitelnost zápisu. Navíc je v CDN, takže pro vývoj můžete zkusit poslední verzi. Důležité je myslet na validaci dat i bez javascriptu.

Všechno CSS je BOOTSTRAP

Bootstrap je asi nerozšířenější HTML, CSS, mobile, responsive framework. Máte v něm nakodované úplně všechno, na co si vzpomenete. Stačí znát správný zápis a můžete šablony střílet raz dva. Vlastně jako u všech frameworků nemusíte znát CSS. Stačí umět zapsat HTML podle Bootstrap či jiné dokumentace. Nevýhodu používání je, že audit stránky vám vyhodí něco jako toto: Remove unused CSS rules (2666) – 2667 rules (90%) of CSSnot used by the current page.

90% je celkem dost, ale pro rychlou tvorbu rozhraní, především u jednoduchých aplikací, je to velký pomocník. Využití frameworku je výhodné i pro klienty. Zaručuje alespoň nějakou kvalitu HTML a CSS kódu.

Další frameworky, všechny samozřejmě responzivní, které jsem vyzkoušel, jsou tady:

• http://bootflat.github.io (povedená nadstavba bootstrapu)
• http://semantic-ui.com (moc krásný Framework, jednou bych chtěl použít)
• http://foundation.zurb.com (další povedený Framework)
• http://purecss.io

Frameworků existuje celá řada, stačí trošku hledat. Pro všechny uvedené frameworky najdete i řadu ukázek a návodů, což je velká výhoda hlavně v začátcích.

CSS3 knihovny 

Imagehover.css
A Scaleable & Light Image Hover CSS Library
http://www.imagehover.io

Skvělá CSS knihovna pro animované hover efekty nad obrázky, kterých je plný internet a snad všechny WordPress šablony. Pokud tvoříte vlastní web a chcete nějakou z podobných animací na webu, třeba najdete, co hledáte. Jednoduchost zápisu v HTML5 je super. Na výběr máte ze 40 různých efektů.

Hover.css
http://ianlunn.github.io/Hover

Jednoduchá CSS knihovna na hover efekty tlačítek, ikonek, boxů apod. Efekty nejsou nijak propracované, ale dají se využít a web se tak trochu oživí. Není nic horšího než statické a nepřehledné stránky.

Hamburger menu
Jedním z trendů roku je tzv. hamburger menu. Američani už vidí všechno jako hamburger. Mohlo to být i Three line menu. Veliký přehled všech CSS, jQuery hamburger, swipe, slide, off-canvas, pull down menu najdete zde: http://navnav.co

Ikonky, ikonky a zase ikonky

Jedna z nejdůležitějších součástí každého moderního webu. Většinou nejmenší prvek, na který se kliká, ale jsou všude. Nahrazují slova, dají se modifikovat a v době vectorů se s nimi dá dále pracovat.

Font Awesome
http://fontawesome.io

Asi nejpoužívanější a největší sada ikon, která má webfont i OFT, takže se dá nainstalovat do systému jako písmo a můžete s ikonkami pracovat téměř kdekoliv. Navíc má Cheatsheet , takže můžete jednoduše ikonku zkopírovat. Vadí mi trošku, že ikony nejsou více decentní. Jsou trochu moc tlusté při zvětšení.

A pozor: pokud tvoříte web, máte nainstalované FontAwesome ve fontech, ale máte špatně cestu k CSS souborům, ikony se vám na webu normálně načtou, ale zákazníkům už nikoliv. Proto je nutné zkontrolovat si vše z mobilu nebo z jiného zařízení. Stejně jako třeba Google fonty.

Simple line icons
https://github.com/thesabbir/simple-line-icons

Decentní sada ikonek, není tak rozsáhlá, ale design ikon je famózní. Pro grafiku lze využít http://graphicburger.com/simple-line-icons-webfont. Na webu pak využijete první odkaz.

Bonus

Jako bonus lze dodat jediné – 11 Web Design Trends for 2016. Vybral jsem pár bodů, které jsou zajímavé a na webu jich v letošním roce uvidíme nespočet. Tak pěknou zábavu.

• More Card-Style Interfaces
• Tiny Animations
• Even More Beautiful Typography
• More Hamburgers and Iconography
• Websites with Slides

Trend na rok 2016! Vstupní stránka nějaké šablony, navíc postavená na Bootstrap s full background video. Podobné weby nás čekají čím dál více, alespoň v zahraničí. V Česku je problém, že čím dál častěji chybějí kvalitní podklady (fotky, videa, texty) pro výrobu podobně kvalitních webů.

• Příroda mluví
• Fotobanky zdarma