Frontendové frameworky

Co to je?

Frontendový framework pro vývoj webových stránek je sbírka hotových HTML / CSS / JS dílů, které můžeme používat pro naše návrhy. Existuje mnoho frameworků, ale který si vybrat? Níže najdete některé z nejmocnějších a nejpopulárnějších frameworků, které jsou dnes k dispozici.

K čemu slouží?

Frontendový framework slouží k rychlému vytvoření designu webu, zlepšení funkčnosti a výkonu webu nebo webové aplikace, k ušetření práce kodérovy nebo k vyřešení zobrazování napříč různě velkými displeji.

Strategie

Jednou z hlavních strategií, kterou používáme když se chce přizpůsobit s neznámou velikostí dipleje, je responzivita, kterou nám framework velice usnadní. Ve výchozím nastavení je většina prohlížečů na malých zařízeních, jakou jsou telefony nebo tablety, zmenšena tak aby se vešel veškterý obsah na obrazovku zařízení a poskytuje možnost tzv. „zoomování“. Ačkoli to technicky funguje, není to velký zážitek. Text je nečitelný, odkazy příliš malé a klepněte si na tlačítko aniž by jste museli vše zoomovat a posouvat se. Je to příliš rušivé, že ano?

Upozornění

Tento článek neprošel gramatickou korekturou a nebyl ani jinak chemicky upravován.


Bootstrap

Bootstrap je nesporným lídrem mezi frameworky. Vzhledem ke své obrovké popularitě, která každým dnem roste si můžete být jisti, že tato úžasná sada nástrojů vás nezklame. Nechá vám volné ruce k budování vašeho webu.

Informace

  • Vývojáři: Mark Otto & Jacob Thornton
  • Vydáno: 2011
  • Popularita: 79 000+ na GitHub
  • Velikost: 1,013KB
  • Responzivní: ANO
  • Preprocesory: Less ,Sass
  • Ikony: ANO – Halflings kolekce
  • Speciální: Jumbotron
  • Dokumentace:
  • Customizer: Základní GUI customizer. Bohužel musíte zadat barevné hodnotu ručně, protože tam není žádný výběr barev k dispozici.
  • Licence: MIT

Foundation

Foundation je druhým velký hráčem v tomto srovnání. Se solidní společností jako je ZURB je tento framework opravdu kvalitní. Koneckonců, Foundation je používán na mnoha velkých internetových stránkách jako je Facebook, Mozilla, eBay nebo Yahoo!.

Informace

  • Vývojáři: ZUBR
  • Vydáno: 2011
  • Popularita: 19 600+ na GitHub
  • Velikost: 850KB
  • Responzivní: ANO
  • Preprocesory: Sass
  • Ikony: ANO – Foundation Icon Fonts
  • Speciální: Lišta s ikonama, lightbox, video, klávesové zkratky
  • Dokumentace:
  • Customizer: Nepodporuje GUI customizer, má pouze manuální customizer
  • Licence: MIT

Semantic UI

Sematic UI je pokračujicí snaha, aby bylo budování webové stránky více sématické. Využívá principů přirozeného jazyka, čímž se kód stane mnohem čitelnějším a srozumitelnějším.

Informace

  • Vývojáři: Jack Lukic
  • Vydáno: 2013
  • Popularita: 15 700+   na GitHub
  • Velikost: 7460KB
  • Responzivní: ANO
  • Preprocesory: Less
  • Ikony: ANO – Font Awesome
  • Speciální: Karty, položky, hodnocení, reklamy, ukázky, statistiky
  • Dokumentace: 
  • Customizer: Nepodporuje GUI customizer, má pouze manuální customizer
  • Licence: MIT

Pure!

Pure je lehký, modulární framework – napsaný v čistém CSS -, která obsahuje prvky, které mohou být použity společně nebo odděleně v závilosti na vašich potřebách.

Informace

  • Vývojáři: Yahoo
  • Vydáno: 2013
  • Popularita: 10 800+ na GitHub
  • Velikost: 241KB
  • Responzivní: Ano
  • Preprocesory:
  • Ikony: Ne, ale můžete použít Font Awesome
  • Speciální:
  • Dokumentace:
  • Customizer: Jednoduchý GUI customizer
  • Licence: Yahoo! Inc. BSD

HTML KickStar

HTML KickStar je ultraštíhlý HTML, CSS a Javascript často používaný pro extrémně rychlejší vývoj webových apliakcí. Byl vyvinut na základě Twitter Bootstrap s podporou ikonek Font Awesome. Ušetří až 10 hodin nebo i víc na vybudování kostry webu.

Informace

  • Vývojáři: Joshua Gatcke
  • Vydáno: 2011
  • Popularita: 1 100+ na GitHub
  • Velikost: 1 030KB
  • Responzivní: ANO
  • Preprocesory: Sass
  • Ikony: Font Awesome
  • Speciální: Seznam, tabulky, tlačítka
  • Dokumentace:
  • Customizer: NE
  • Licence: MIT

Skeleton

Skeleton je lehký CSS framework, který využívá systému 12 sloupcové mřížky. Narozdíl od Bootstrapu nebo Foundation. Skeleton poskytuje několik fundamentálních prvků jako je tlačítko, seznamy, tabulky nebo formuláe.

Informace

  • Vývojáři: Dave Gamache
  • Vydáno: 2012
  • Popularita: 8 000+ na GitHub
  • Velikost: 22KB
  • Responzivní: ANO
  • Preprocesory: Sass
  • Ikony: Font Awesome
  • Speciální: Tlačítka, mřížky, formuláře, seznamy, tabulky, typografie
  • Dokumentace:
  • Customizer:
  • Licence: MIT

Gumby

Gumby je pružný a citlivý framework postavený s preprocessorem Sass pro rychlejší vývoj webovách aplikací. Jeho customizer vám umožní snad vyladit a přizpůsobit celý IUkit design, aby vyhovoval vaším nejlepším preferencím. Gumby má několik typů sítíí s různými variancemi sloupců ve výchozím nastavení.

Informace

  • Vývojáři: Digital Surgeons
  • Vydáno: 2012
  • Popularita: 380+ na GitHub
  • Velikost: 1460KB
  • Responzivní: ANO
  • Preprocesory: Sass
  • Ikony: Entypo
  • Speciální: Mřížky, typografie
  • Dokumentace:
  • Customizer: ANO
  • Licence: MIT

UIkit

Nakonec tu je UIkit, stručná kolekce snadno ovladatelná a se snadno přízpůsobitelnými komponenty. I když není tak populární jako jeho konkurenti, nabízí stejnou funkčnost a kvalitu.

Informace

  • Vývojáři: YOOtheme
  • Vydáno: 2013
  • Popularita: 4400+ na GitHub
  • Velikost: 1960KB
  • Responzivní: ANO
  • Preprocesory: Less, Sass
  • Ikony: ANO – Font Awesome
  • Speciální: article, flex, obal, HTML Editor
  • Dokumentace:
  • Customizer: Pokročilý GUI customizer
  • Licence: MIT

Sdílet na

FacebookTwitterGoogleTumblrLinkedInRedditPinterest