- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do Responsive Web Design ! 1. Design flexível, baseado em grids;! 2. Imagens e mídias flexíveis;! 3. Media-queries. #RWD
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 @pad: 20px;! ! .clearfix(){ ! ! &:after {! ! ! content: "";! ! ! display: table;! ! ! clear: both;! ! }! }! Elementos do RWD: Media Queries Refactoring Time, agora em LESS! Sempre podemos fazer melhor!
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Refactoring Time, agora em LESS! Sempre podemos fazer melhor! *, *:after, *:before {! box-sizing: border-box;! }! ! img {! display: block;! width: 100%; !//relativo ao pai ! height: auto; //evita distorção ! }!
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 .row {! margin-left: -@pad;! clear: both;! .clearfix();! } Elementos do RWD: Media Queries Refactoring Time, agora em LESS! Linha do grid com margin negativa + clearfix
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Refactoring Time, agora em LESS! Gutters são as bordas transparentes .col {! float: left;! padding: 0;! position: relative;! background-clip: padding-box !important;! border: 0 solid transparent;! border-left-width: @pad;! border-bottom-width: @pad;! background: red; // para visualizarmos! }!
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Refactoring Time, agora em LESS! Melhor uso dos seletores, mais D.R.Y. .phone-1-2 {! ! width: 50%! }! ! .phone-2-2,! .phone-full{! ! width: 100%;! } Mobile First
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Refactoring Time, agora em LESS! Estilos “tablet" sobrepondo estilos "phone"
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Phone, Tablet, Desktop, etc… ! Organize seus breakpoints como desejar // Menor que tablets @media screen and (max-width : 767px) { ! // estilos ! } Mobile First
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Phone, Tablet, Desktop, etc… ! Organize seus breakpoints como desejar // Menor que tablets @media screen and (max-width : 767px) { ! .phone-1-2 { width: 50% } ! .phone-2-2, .phone-full{ width: 100%; } ! } Mobile First
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Phone, Tablet, Desktop, etc… ! Organize seus breakpoints como desejar // Tablets ou maiores @media screen and (mix-width : 768px) { ! // estilos ! }
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Phone, Tablet, Desktop, etc… ! Organize seus breakpoints como desejar // Tablets ou maiores @media screen and (mix-width : 768px) { ! ! .tablet-1-5 {! width: 20%;! } ! ! .tablet-2-5 {! width: 40%;! }! ! ! ! . . .! }
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries if(Media_queries == ("Lógica if, else")) {! // true /* Tablets ou maiores */ @media all and (min-width : 768px) { ! .col-tablet-1-5 { width: 20%; } .col... } all only not not all , (or)
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Media queries: Seletores /* Tablets ou maiores */ @media only screen and (min-width : 768px) { ! .col-tablet-1-5 { width: 20%; } .col... } width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Exemplos de Media Queries! Específico somente quando ter certeza /* iPads (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { ! .tablet-1-5 { width: 20%; } .tablet-2-5 { width: 40%; } .... }
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Exemplos de Media Queries! Específico somente quando ter certeza /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { ! /* Styles */ ! }
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Exemplos de Media Queries! Específico somente quando ter certeza /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ ! }
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Exemplos de Media Queries! Boa prática html { background: red; } ! @media (min-width: 600px) { html { background: green; } } ! @media (min-width: 800px) { html { background: blue; } } Mobile First
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Exemplos de Media Queries! Prática segura, apenas uma MQ ativa por vez Mobile First @media (max-width: 400px) { html { background: red; } } @media (min-width: 401px) and (max-width: 800px) { html { background: green; } } @media (min-width: 801px) { html { background: blue; } }
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries O meta viewport! Do bem, e do mal. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1”> <title>My website</title> </head> ! <body> Conteudo… </body> </html>
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries O meta viewport! Do bem, e do mal. <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> ! <body> . . . <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no”> </head> ! <body> . . .
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Media Queries Container! Parte importante do RWD 5% .container { width: 90%; background: pink; margin: 0 auto; }
- Webdesign Responsivo by Rhawbert Costa - Mar/2014 Bônus!!!1 Tooling / Ferramentas ! 1. Linha de comando + amigável;! 2. Editor féra, free e multi-plataforma;! 3. Servidor Local FTW;! 4. Ferramentas de build/compilação
estão complexas?! Simplifique sua vida 1. Só use ferramentas que for usar; 2. Só automatize processos que forem repetitivos; 3. Curva de aprendizado vs. real ganho de velocidade. Bônus: Tooling e ferramentas
rhawbert
ysuda
motokoishida
takanorip
piyo7
freee
gakuoya
.jpeg){kind=avatar}
arthur1
giofortuna_story
t32k
senryakuka
kkaru
.jpg){kind=avatar}
iflection
tanoku
tammyeverts
davidbonilla
eitanlees
3n
wjessup
kastner
eileencodes
marcduiker
csswizardry
lara
aki_iinuma
