O documento discute frameworks front-end para design responsivo, comparando Twitter Bootstrap e Material Design Lite. O Twitter Bootstrap facilita o desenvolvimento de layouts de forma rápida e responsiva através de sua grade de colunas e documentação detalhada. Já o Material Design Lite aplica os padrões de design do Google para dispositivos móveis de forma leve e responsiva.

1. FRAMEWORKS FRONT-END PARA
DESIGN RESPONSIVO

3. Quem sou eu?
Airton Zanon
Programador PHP
Daltônico
Evangelista PHPNP
www.airtonzanon.com
airtonzanon@gmail.com
twitter.com/airtonzanon
Airton Zanon

5. Linha do Tempo da Web
1969 – Arpanet
1974 – TCP/IP
1983 – DNS
1990 – Tim Berners-Lee (www)
1991 – HTML
1996 – CSS + JavaScript
2001 – Media Query (CSS3)
2009 – HTML5

6. Responsive Web Design
(...)Responsive Web Design é acima de tudo um
conceito. Nós nos responsabilizamos a
apresentar a informação de forma acessível e
confortável para diversos meios de acesso.
Muitos websites restringem o conceito a
aparelhos com telas de diversos tamanhos, mas o
conceito é muito mais abrangente.(...)
(Tableless, 2011)

8. O poder da Media Query

9. Como utilizar?
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
Desktop
@media screen and (min-width: 1300px) {
.figure {
width: 500px;
}
}
Tablet
@media screen and (min-width: 768px) {
.figure {
width: 250px;
}
}
Smartphone
@media screen and (min-width: 320px) {
.figure {
display: none;
}
}

10. Mas e os Frameworks?
Twitter Bootstrap
Material Design Lite

11. O Twitter Bootstrap
Site + Documentação – getbootstrap.com
Versão atual: 3.3.6
Benefícios
#1 – Agilidade em Desenvolver Layouts
#2 – Responsivo
#3 – Fácil Documentação
Gratuito

12. Grids

13. Grids – Esse Código ...<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

14. Gera, essas Grids

15. Coding..

16. O Material Design Lite
Site + Documentação – getmdl.io
Versão atual: 1.0.6
Benefícios
#1 – Google Design Mobile
#2 – Responsivo
#3 – Tamanho
Gratuito

17. Iniciando no MDL
<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

18. Coding..