Porovnání CSS frameworků

Bootstrap

ZURB Foundation

Stanislav Kurinec / @stenlyk

Něco málo o mě

  • Studoval jsem na SPŠ a VOŠ Písek
  • Základy HTML jsem se učil od kolegů z VOŠ
  • Během školy jsem udělal pár webů pro známé
  • Později jsem učil v DDM Písek a "naprogramoval" svůj první IS na PHP a MySQL (2002 - 2006)
  • NEOTECH a.s. byl mou další zastávkou kde jsem pracoval jako Web developer, tvořil a rozšiřoval jsem zde webové produkty (CRM, CMS, E-shop, B2B, Logistics applications) (2006-2010)
  • V roce 2010 NEOTECH koupila ABRA Software a.s.
  • Za těch pět let v ABRA Software jsem prošel několik pracovních pozic a momentálně jsem Vedoucí zakázkového programování

Já a technologie

  • S HTML jsem začal před cca 15lety
  • Naučil se základy javascriptu a css
  • PHP
  • Vyzkoušel JS knihovny jako Mootols pak JQUERY
  • Blueprint CSS Framework
  • Zend Framework pak Nette
  • v roce 2010 pustil první web na HTML5
  • Pspad > Aptana > Netbeans > Vim > Sublime Text
  • Kendo UI from Telerik
  • ZURB Foundation 2 - 5.5
  • SASS & Compass
  • Knockout JS & Typescript & SPA & HTML5

CSS Frameworky?

Proč se učit framework? Vždyť je to jen hromada css. Je to něco co nepotřebuju a css napíšu vlastní!

Jo můžete ale ...

develop http://graphitemind.com/post/12226950413/color-verson-do-you-test-your-website-on-all

Ono to ale není jen o Frameworku

S frameworkem přichází i další technologie

CSS preprocessory

Co je CSS Preprocessor? Koukněte na tohle video.

Sass nebo LESS nebo Stylus který si vybrat?

Podle mého názoru je poměrně jednoduchá odpověď: Sass

Pokud se vám líbí více jiný preprocesor, nevadí. Hlavní je, že nějáký používáte.

Pěkné srovnání od Chrise Coyera z CSS-Tricks.

Budoucnost?

Preprocesory jsou fajn, ale hlavní nevýhodou je rychlost.

Díky technologiím (grunt, glump) se výhledově přesuneme z preprocesorů na postprocesory.

Výhody CSS Frameworků

  • Zlepšíte svou produktivitu a vyhnete se běžným chybám.
  • Normalizujete svůj kód a budete využívat stejnou základnu.
  • Budete mít lepší workflow v týmu a snáze se vám bude přecházet mezi projekty.
  • Vyhnete se řešení problémů s kompatibilitou prohlížečů.
  • Budete mít čistý a dobře strukturovaný kód.
  • Větší produktivita nových členů týmu (pokud znají framework).

Nevýhody CSS Frameworků

  • Potřebujete čas na pochopení frameworku.
  • S frameworkem si přinesete i cizí bugy.
  • Výsledná velikost css.
  • Začnete kódovat na základě framaworku a ne kvalitní znalosti CSS.

Bootstrap

V roce 2011 Twitter oznámil vydání Bootstrapu 1.0.

bootstrap

O Bootstrapu

  • Aktuální verze 3.3.4
  • Aktuálně podporuje LESS a SASS
  • Má poměrně velkou základnu uživatelů sám o sobě říká, že je nejpopulárnější
  • Grid: Fluidní a fixní
  • UI: přes 20 komponent pro rychlý vývoj
  • Bootstrap vyvinul Mark Otto a Jacob Thornton z Twitteru jako framework podporující konzistenci mezi interními nástroji.

Podpora prohlížečů

  • Počítač
    • Chrome
    • Firefox
    • Safari
    • Opera
    • IE8+
  • Mobil
    • "Tablety a smartphony"

Gridy a Responzibilita

Základní šířka:
Fluidní a fixní (480px, 768px, 992px; 1200px)
Sloupců:
12
Syntaxe sloupců:
.col-xs-1 > .col-xs-12
.col-sm-1 > .col-sm-12
.col-md-1 > .col-md-12
.col-lg-1 > .col-lg-12
Syntaxe kontaineru:
.container (fixní šířka podle breakpointů)
.container-fluid dobré pro applikace nebo weby s obsahem přes celou šířku

Použití? Co třeba galerie, výpis produktů ...

Potřebujete více?

možná ano, možná ne, počkejte na ZURB Foundation :)

Responzivita

Extra malé (<768px) Malé (≥768px) Střední (≥992px) Velké (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

UI and Widgety

Zhodnocení

Bootstrap 3 poslední verze která bude na Less.

Bootstrap je plně funkční framework, za kterým stojí velká komunita.

Je jednoduché ho rychle nasadit a začít prototypovat aplikaci nebo web.

Výhoda je možnost zvolit si preprocesor.

Nevýhoda je složitější optimalizace, pokud nechcete nějaké komponenty.

ZURB Foundation

V roce 2011 bylo oznámeno vydání Foundation 2.0.

foundation

O Foundation

  • Aktuální verze 5.5
  • Využívá SASS & Compass
  • Střední uživatelská základna
  • Grid: Fluidní (default max 62.5em) možnost libovolného nastavení. Libovolný počet sloupců.
  • UI: Přes 20 komponent snadná customizace a znovu použitelnost.

Podpora prohlížečů

  • Počítače
    • Chrome
    • Firefox
    • Safari
    • Opera
    • IE9+
  • Mobilní zařízení
    • iOS (iPhone)
    • iOS (iPad)
    • Android 2, 4 (Phone)
    • Android 2, 4 (Tablet)
    • Windows Phone 7+
    • Surface

Gridy a Responzibilita

Základní šířka nastavena na 62.5em
Sloupců:
1 - nekonečno defaultně 12
Syntaxe sloupců:
.small-1 > .small-12
.medium-1 > .medium-12
.large-1 > .large-12
Syntaxe kontaineru:
není potřeba

Ekvivalent v Bootstrapu je vložení více sloupců do jednoho row

Ukázka na formulářovém prvku což v Bootstrap jde také pomocí .form-group, ale už to nevyužijete v gridu

UI a Widgety

Zhodnocení

Foundation 5.5 je jeden ze tří frameworků které nedávno vznikly vedle foundation pro stránky ještě existují samostatné frameworky pro aplikace a pro emaily.

Oproti předchozím verzím je přechod z verze 4 na 5 poměrně bezbolestným.

IE8 není podporováno a to ani ve verzi 4.

Existuje neoficiální řešení jak docílit alespoň korektního zobrazení pro IE8 návod je zde.

Který si vybrat?

Bootstrap Foundation
Twitter 335K 45.3K
Počet komponent 29 34
Git hub
Sledování 5 008 1 431
Oblíbení 82 082 20 263
Přispěvovatelé 654 693
Fork 32 829 4 330
Commits 11 408 8 566
Releases 32 92
Releases 32 92

Žádná volba není špatná.

Úplné porovnání na základě funkcionalit http://responsive.vermilion.com/compare.php

Otázky?

Konec

Děkuji za pozornost

Online verze prezentace http://stenlyk.github.io/bcjc2015-css/

Zdroje