RESPONSIVEhttp://motherfuckingwebsite.com
It’s all about mobile!- 1 miliard sprzedanych urządzeń mobilnych w 2013- 2 miliardy aktywnych urządzeń mobilnych w 2013
http://mashable.com/2013/01/08/tablets-outsell-notebooks/
Responsive - 3 charakterystyki
http://alistapart.com/article/responsive-web-design
http://blogs.endjin.com/2013/09/bootstrap-3-at-a-glance-part-one-motivations/
CSS grid
Skalowalny kontent / obrazki
@media-queries
Praktyczne porady● nie używamy zafixowanych szerokości oraz długości elementów
(szczególnie obrazków) - zastępujemy % (tam gdzie można)● zapominamy o <br /> oraz i zastępujemy je marginesami i
paddingiem● wszystkie elementy wystepujące na stronie otaczamy odpowiednią
strukturą i tagami HTML (nic nie “wisi w powietrzu”)● ukrywamy zbędne elementy dla mobile (z umiarem!)● pamiętamy, ż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/
Twitter Bootstrap - by nerds, for nerds
- Open Source - Github- LESS & Node.js- sierpień 2011 - Mark Otto (@mdo)
& Jackob Thorton (@fat)
Cele pierwszej wersji● wszystkie popularne komponenty dostępne w jednym miejscu● reużywalne komponenty● wykorzystanie LESS do budowania CSS● radzenie sobie z różnym stopniem wsparcia przeglądarek● ten sam wygląd na każdym PC
Projekt numer 1 na Github (od 2012)
Stan na grudzień 2013:22.000+ forks61.000+ stars
4900+ watchers
Bootstrap 2 (2012)● świadomość pojawiania się coraz szerszej gamy urządzeń mobilnych● CSS3● mix responsywnego gridu (fluid layouts) z fixed oraz możliwość wyboru
pomiędzy nimi● wykorzystanie media queries● dostosowywanie się do różnych rodzajów urządzeń / rozdzielczości● rozwój komponentów (gradienty, przejścia, animacje, cienie)● rozwój pluginów JS
Bootstrap 3 (19.08.2013)● “mobile first & totally responsive”● “flat & ascetic”● kompilowany po stronie przeglądarki (Grunt + Bower)● całość 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/
Cele w wersji 3● mniejszy i lżejszy CSS● zmniejszenie wymagań na renderowanie komponentów (rezygnacja z
cieni, gradientów, animacji)● cały layout responsywny (by default)● graficzne elementy (czcionki) zamienione na Web Fonts i CSS
Wsparcie przeglądarek● od wersji 3 - porzucono (oficjalne) wsparcie dla IE7● IE8 - brak kilku elementów: border-radius, box-shadow, transition,
transform, placeholder (ale Modernizr lub HTML5shiv)● IE9 - z wykorzystaniem prefixów -ms-● oficjalnie - wszystkie najnowsze wersje popularnych przeglądarek● nieoficjalnie - także IE7 i wszystkie Linuxowe wersje open source
przeglądarek
http://getbootstrap.com/getting-started/#browsers
Komponenty HTML / CSS● ikony● menu (w tym rozwijane)● przyciski (+ możliwość łączenia w grupy)● komponenty formularzy● nawigacja (+ breadcrumb)● paginacja● opisy● alerty● nagłówki● listy● panele
… i wiele wiele więcej
Komponenty JavaScript● efekty przejść● okienka na warstwie (modal)● menu (dropdown)● scrollspy (podążanie za scrollem w menu)● affix (statyczne elementy, które podążają wraz ze scrollem)● taby● podpowiedzi (tooltip)● zwijana treść (collapse, dawniej accordion)● slider (carousel)
… i wiele wiele więcej
NarzędziaBudowa szablonu WYSIWYG:● http://shoelace.io● http://www.layoutit.com/build● http://www.bootstrapdesigner.com● https://jetstrap.com● http://www.divshot.com
Zmiana kolorów / 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
Repozytoria szablonówPolecam: 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
jQuery UI BootstrapjQuery UI w stylach Twitter Bootstrap● http://addyosmani.github.io/jquery-ui-bootstrap
Odpowiednik AngularJS (Angular UI)● http://angular-ui.github.io
Use cases / snippets● http://www.lovebootstrap.com● https://bootsnipp.com
● http://alefeuvre.github.io/foundation-grid-displayer
AlternatywyFoundation (ZURB) - http://foundation.zurb.comPure (by Yahoo) - http://purecss.ioFlat UI - http://designmodo.github.io/Flat-UIGumby - http://gumbyframework.comSkeleton - http://www.getskeleton.com960 - http://960.gsInK - http://ink.sapo.ptBlueprint - http://blueprintcss.org
http://responsive.vermilion.com/compare.php
https://medium.com/frontend-and-beyond/8b3812c7007c
http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/
Top Related