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 ...

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.

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

Syntaxe řádku

    <div class="row">
        <div class="col-xs-6 col-md-4">...</div>
        <div class="col-xs-6 col-md-8">...</div>
    </div>

Vnořené sloupce

<div class="row">
    <div class="col-md-8">
        Level 1 column
        <div class="row">
            <!-- vnořené sloupce jsou opět dělené na 12 sloupců -->
            <div class="col-md-8">Level 2</div>
            <div class="col-md-4">Level 2</div>
        </div>
    </div>
</div>

Zalamování sloupců

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Float clearfix

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Offset sloupců syntaxe

<div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-3 col-md-offset-2">3 offset2</div>
</div>

Pořadí sloupců

<!-- You can control centering just for small or large or both-->
<div class="row">
    <div class="col-md-2 col-md-push-10">2</div>
    <div class="col-md-10 col-pull-2">10, last</div>
</div>
<div class="row">
    <div class="col-md-3 col-push-9 columns">3</div>
    <div class="col-md-9 col-pull-3 columns">9, last</div>
</div>

Potřebujete více?

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

Responzivita

UI and Widgety

• Typography
• Tables
• Forms
• Buttons
• Images
• Helper classes
• Glyphicons
• Dropdowns
• Button groups
• Button dropdown
• Input groups
• Navs
• Navbar
• Breadcrumbs
• Pagination
• Labels
• Badges
• Jumbotron
• Page header
• Thumbnails
• Alerts
• Progress bars
• Media object
• List group
• Panels
• Wells

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.

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

Syntaxe řádku

    <div class="row">
        <div class="small-6 large-6 columns">...</div>
        <div class="small-6  large-6 columns">...</div>
    </div>

Syntaxe vnořených sloupců

<div class="row">
    <div class="large-8 columns">
        8
        <div class="row">
            <div class="large-8 columns">
                8 Nested
                <!-- nested columns add up to 12 -->
                <div class="row">
                    <div class="large-8 columns">8 Nested Again</div>
                    <div class="large-4 columns">4</div>
                </div>
            </div>
            <div class="large-4 columns">4</div>
        </div>
    </div>
    <div class="large-4 columns">4</div>
</div>

Offset syntaxe

<div class="row">
    <div class="large-1 columns">1</div>
    <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>

Pořadí sloupců

<div class="row">
    <div class="small-2 small-push-10 columns">2</div>
    <div class="small-10 small-pull-2 columns">10, last</div>
</div>
<div class="row">
    <div class="large-3 large-push-9 columns">3</div>
    <div class="large-9 large-pull-3 columns">9, last</div>
</div>

Block Grid syntaxe

<!-- Using both block grids together for different layouts -->
<ul class="small-block-grid-2 large-block-grid-4">
    <li><img src="../img/demos/demo1.png"></li>
    <li><img src="../img/demos/demo2.png"></li>
    <li><img src="../img/demos/demo3.png"></li>
    <li><img src="../img/demos/demo4.png"></li>
</ul>

Další možnosti

Sloupce bez mezer

<div class="row collapse">
    <label>Input Label</label>
    <div class="large-9 columns">
        <input type="text" placeholder="large-9.columns"></div>
    <div class="large-3 columns">
        <span class="postfix">.com</span>
    </div>
</div>

Centrované sloupce

<!-- Můžete definovat zda chcete centrovat small nebo large nebo vše-->
<div class="row">
    <div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
    <div class="small-11 small-centered columns">11 centered</div>
</div>

Podle velikosti obrazovky

/* The show classes */
  .show-for-small-only
  .show-for-medium-up
  .show-for-medium-only
  .show-for-large-up
  .show-for-large-only
  .show-for-xlarge-up
  .show-for-xlarge-only
  .show-for-xxlarge-up

/* The hide classes */
  .hide-for-small-only
  .hide-for-medium-up
  .hide-for-medium-only
  .hide-for-large-up
  .hide-for-large-only
  .hide-for-xlarge-up
  .hide-for-xlarge-only
  .hide-for-xxlarge-up

Responzivní viditelnost zohledňující i čtečky obrazovek pro slepce

/* The show classes */
  .visible-for-small-only
  .visible-for-medium-up
  .visible-for-medium-only
  .visible-for-large-up
  .visible-for-large-only
  .visible-for-xlarge-up
  .visible-for-xlarge-only
  .visible-for-xxlarge-up

/* The hide classes */
  .hidden-for-small-only
  .hidden-for-medium-up
  .hidden-for-medium-only
  .hidden-for-large-up
  .hidden-for-large-only
  .hidden-for-xlarge-up
  .hidden-for-xlarge-only
  .hidden-for-xxlarge-up

Ostatní podle orientace, tisk

/* Podle orientace */
  .show-for-landscape
  .show-for-portrait
  .show-for-touch
  .hide-for-touch

/* Pro tisk */
.show-for-print , .print-only 
.hide-for-print , .hide-on-print

UI a Widgety

• Interchange Responsive Content
• Right-to-Left Support
• Off-canvas
• Top Bar
• Icon Bar
• Side Nav
• Magellan Sticky Nav
• Sub Nav
• Breadcrumbs
• Pagination
• Orbit Slider
• Thumbnails
• Clearing Lightbox
• Flex Video
• Forms
• Switches
• Range Sliders
• Abide Validation
• Buttons
• Button Groups
• Split Buttons
• Dropdown Buttons
• Type
• Inline Lists
• Labels
• Keystrokes
• Reveal Modal
• Alerts
• Panels
• Tooltips
• Joyride
• Dropdowns
• Pricing Tables
• Progress Bars
• Tables
• Accordion
• Tabs
• Equalizer

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?

Žádná volba není špatná.

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

Otázky?

Konec

Děkuji za pozornost

Zdroje

• http://responsive.vermilion.com/compare.php
• http://foundation.zurb.com/
• http://getbootstrap.com/
• https://medium.com/what-i-learned-building/b4daab987fb0
• http://css-tricks.com/
• http://www.youtube.com/watch?v=FlW2vvl0yvo
• http://compass-style.org/