Semantic UI

Web Semantic UI

Jak název semantic možná už vypovídá, hlavní rozdíl oproti jiným frameworkům (jako je Bootstrap, Foundation nebo Kraken) je v zápisu formátovacích tříd v přirozenějším jazyce.

Místo ne úplně intuitivního zápisu v Bootstrapu:

<div class="row">
  <div class="col-lg-4">1</div>
  <div class="col-lg-4">2</div>
  <div class="col-lg-4">3</div>
</div>

Se v Semantic UI používá:

<div class="ui three column grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>

To je docela sympatické — nemusí se dopočítávat žádné sloupce, ale jednoduše se napíše „ui tří sloupcová mřížka“, přidají se tři sloupce a je to. Tento duch se táhne napříč celým projektem. Co se před-připravených částí týká, je k disposici přibližně totéž co v Bootstrapu:

  1. grid systém (rozložení layoutu),
  2. tlačítka,
  3. ikony,
  4. nadpisy,
  5. tabulky,
  6. seznamy,
  7. navigace,
  8. drobečkové navigace,
  9. stavové hlášky,
  10. formuláře
  11. a mnoho dalšího.

Stažení a obsah frameworku

Po stažení 5MB archivu v něm nalezneme několik složek. Najdeme například původní zdrojový kód pro CSS preprocesor LESS, z toho vygenerované CSS, soubory minifikované a konečně pro finální nasazení asi nejvhodnější — zabalená a zmenšená verse v adresáři packed (CSS a JS soubory semantic.min.css, resp semantic.min.js).

Použití

Stačí připojit zmenšený CSS a JS soubor (o velikosti 213 kB, respektive 121 kB) a začít používat příslušné třídy. Pro JS vymoženosti je ještě potřeba jQuery.

V případě využívání jen částí by bylo vhodné si ty potřebné poskládat ze souborů v adresáři minified.

Podpora napříč prohlížeči

Zatím není valná. Autor ji sice uvádí jako IE8+, ale podle mých testů framework Semantic UI funguje jakžtakž až od IE 9, výsledek v Internet Exploreru 8 mi moc funkčně nepřipadá.

Možná se to časem zlepší…

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS framework Kraken

CSS framework Kraken

Kromě populárního CSS frameworku Bootstrap existují i další zajímavé. Kraken je jeden takový.

CSS resetování

Způsoby CSS resetování

Používat CSS reset, nebo ne? Jaká jsou pro a proti.

5minutový rychlokurs Bootstrapu

5minutový rychlokurs Bootstrapu

Jak za 5 minut vytvořit web pomocí CSS frameworku Bootstrap.

Tailwind CSS

Tailwind CSS

CSS framework pro stylování webů přes utility třídy.

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

Komentáře