FRAMEWORKS FRONT-END PARA DESIGN RESPONSIVO

Quem sou eu?

�Airton Zanon�Programador PHP�Daltônico�Evangelista PHPNP

�www.airtonzanon.com�airtonzanon@gmail.com�twitter.com/airtonzanon�Airton Zanon

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

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)

O poder da Media Query

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; }}

Mas e os Frameworks?

�Twitter Bootstrap�Material Design Lite

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

Grids

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>

Gera, essas Grids

Coding..

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

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

Coding..