Inqub.it - responsive web design na przykładzie twitter bootstrap

  • Published on
    18-Dec-2014

  • View
    107

  • Download
    0

Embed Size (px)

DESCRIPTION

Responsive Web Design based on Twitter Bootstrap

Transcript

  • 1. Responsive Web Design na przykadzie Twitter Bootstrap 3
  • 2. RESPONSIVE http://motherfuckingwebsite.com
  • 3. Its all about mobile! - 1 miliard sprzedanych urzdze mobilnych w 2013 - 2 miliardy aktywnych urzdze mobilnych w 2013 http://mashable.com/2013/01/08/tablets-outsell-notebooks/
  • 4. Responsive - 3 charakterystyki http://alistapart.com/article/responsive-web-design http://blogs.endjin.com/2013/09/bootstrap-3-at-a-glance-part-one-motivations/
  • 5. CSS grid
  • 6. Skalowalny kontent / obrazki
  • 7. @media-queries
  • 8. Praktyczne porady nie uywamy zafixowanych szerokoci oraz dugoci elementw (szczeglnie obrazkw) - zastpujemy % (tam gdzie mona) zapominamy o
    oraz i zastpujemy je marginesami i paddingiem wszystkie elementy wystepujce na stronie otaczamy odpowiedni struktur i tagami HTML (nic nie wisi w powietrzu) ukrywamy zbdne elementy dla mobile (z umiarem!) pamitamy, e display: none; jedynie ukrywa elementy (one i tak si pobieraj - obrazki!) ograniczamy ilo wykorzystywanego JS - wykorzystujemy max z tego co daj nam frameworki CSS http://blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/
  • 9. Twitter Bootstrap - by nerds, for nerds - Open Source - Github - LESS & Node.js - sierpie 2011 - Mark Otto (@mdo) & Jackob Thorton (@fat)
  • 10. Cele pierwszej wersji wszystkie popularne komponenty dostpne w jednym miejscu reuywalne komponenty wykorzystanie LESS do budowania CSS radzenie sobie z rnym stopniem wsparcia przegldarek ten sam wygld na kadym PC
  • 11. Projekt numer 1 na Github (od 2012) Stan na grudzie 2013: 22.000+ forks 61.000+ stars 4900+ watchers
  • 12. Bootstrap 2 (2012) wiadomo pojawiania si coraz szerszej gamy urzdze mobilnych CSS3 mix responsywnego gridu (fluid layouts) z fixed oraz moliwo wyboru pomidzy nimi wykorzystanie media queries dostosowywanie si do rnych rodzajw urzdze / rozdzielczoci rozwj komponentw (gradienty, przejcia, animacje, cienie) rozwj pluginw JS
  • 13. Bootstrap 3 (19.08.2013) mobile first & totally responsive flat & ascetic kompilowany po stronie przegldarki (Grunt + Bower) cao jest wielkim gridem (box-sizing, border-box) Glyphicons & Font Awesome wszystkie pluginy JS napisane od zera 12 kolumn 4 zakresy klas http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
  • 14. Cele w wersji 3 mniejszy i lejszy CSS zmniejszenie wymaga na renderowanie komponentw (rezygnacja z cieni, gradientw, animacji) cay layout responsywny (by default) graficzne elementy (czcionki) zamienione na Web Fonts i CSS
  • 15. Wsparcie przegldarek od wersji 3 - porzucono (oficjalne) wsparcie dla IE7 IE8 - brak kilku elementw: border-radius, box-shadow, transition, transform, placeholder (ale Modernizr lub HTML5shiv) IE9 - z wykorzystaniem prefixw -ms- oficjalnie - wszystkie najnowsze wersje popularnych przegldarek nieoficjalnie - take IE7 i wszystkie Linuxowe wersje open source przegldarek http://getbootstrap.com/getting-started/#browsers
  • 16. Komponenty HTML / CSS ikony menu (w tym rozwijane) przyciski (+ moliwo czenia w grupy) komponenty formularzy nawigacja (+ breadcrumb) paginacja opisy alerty nagwki listy panele i wiele wiele wicej
  • 17. Komponenty JavaScript efekty przej okienka na warstwie (modal) menu (dropdown) scrollspy (podanie za scrollem w menu) affix (statyczne elementy, ktre podaj wraz ze scrollem) taby podpowiedzi (tooltip) zwijana tre (collapse, dawniej accordion) slider (carousel) i wiele wiele wicej
  • 18. Narzdzia Budowa szablonu WYSIWYG: http://shoelace.io http://www.layoutit.com/build http://www.bootstrapdesigner.com https://jetstrap.com http://www.divshot.com Zmiana kolorw / czcionek (LESS): http://getbootstrap.com/customize http://www.bootstrapthemeroller.com http://stylebootstrap.info http://pikock.github.io/bootstrap-magic (AngularJS) http://mashable.com/2013/10/20/bootstrap-editors
  • 19. Repozytoria szablonw Polecam: https://wrapbootstrap.com http://themeforest.net http://bootstrapstyler.com http://designmodo.com/flat Darmowe: http://bootswatch.com http://startbootstrap.com/all-templates http://getbootstrap.com/getting-started/#examples
  • 20. jQuery UI Bootstrap jQuery UI w stylach Twitter Bootstrap http://addyosmani.github.io/jquery-ui-bootstrap Odpowiednik AngularJS (Angular UI) http://angular-ui.github.io
  • 21. Use cases / snippets http://www.lovebootstrap.com https://bootsnipp.com http://alefeuvre.github.io/foundation-grid-displayer
  • 22. Alternatywy Foundation (ZURB) - http://foundation.zurb.com Pure (by Yahoo) - http://purecss.io Flat UI - http://designmodo.github.io/Flat-UI Gumby - http://gumbyframework.com Skeleton - http://www.getskeleton.com 960 - http://960.gs InK - http://ink.sapo.pt Blueprint - http://blueprintcss.org http://responsive.vermilion.com/compare.php https://medium.com/frontend-and-beyond/8b3812c7007c
  • 23. http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/