SlideShare uma empresa Scribd logo
1 de 63
Baixar para ler offline
DESIGN 
RESPONSIVO 
com
Vitor Garcia 
‣ Design & Front-end; 
‣ Sócio da Rino3; 
‣ Professor de Web 
Design Senac
Problema: Um design, um conteúdo e incontáveis telas.
Designer / Front-ender
Sass
Sass 
‣ Pré-processador CSS; 
‣ Css com Superpoderes; 
‣ Requisito: 
‣ Ruby instalado na máquina; 
‣ Mac OS: Já vem instalado : ) 
‣ Windows: Se vira nos 30! :’( 
‣ http://rubyinstaller.org/
Sass 
//estilo.sass 
//ou 
//estilo.scss 
h1 { 
color: #fff; 
background: #000; 
} 
//estilo.css 
h1 { 
color: #fff; 
background: #000; 
} 
SASS
Sass: sintaxe 
Scss – estilo.scss Sass – estilo.sass 
h1 { 
color: #fff; 
background: #000; 
} 
h1 
color: #fff 
background: #000
Sass: recursos 
‣ Uma amostra dos recursos: 
‣ Aninhamento; 
‣ Variáveis; 
‣ Mixins; 
‣ Mais recursos: http://sass-lang.com/guide
Sass: aninhamento 
estilo.scss estilo.css 
ul { 
li { 
propriedade: valor; 
} 
a { 
propriedade: valor; 
} 
} 
ul li { 
propriedade: valor; 
} 
ul a { 
propriedade: valor; 
}
Sass: variáveis 
estilo.scss estilo.css 
$width: 100%; 
$height: 40px; 
header { 
width: $width; 
height: $height; 
} 
header { 
width: 100%; 
height: 40px; 
}
Sass: mixins 
estilo.scss estilo.css 
@mixin border-radius($radius) { 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
-ms-border-radius: $radius; 
border-radius: $radius; 
} 
.box { 
@include border-radius(10px); 
} 
.box { 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-ms-border-radius: 10px; 
border-radius: 10px; 
}
Sass: instalação 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ gem install sass
Sass: compilar 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ cd /caminho/nome-da-pasta 
$ scss estilo.scss:estilo.css 
sintaxe entrada saída
Sass: compilar 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ cd /caminho/nome-da-pasta 
$ scss --watch estilo.scss:estilo.css 
sintaxe observa entrada saída
Sass: compilar
CSS SASS COMPASS 
Tony Stark Homem de Ferro 
Homem de Ferro: 
Máquina de Combate
Compass
Compass 
‣ Framework Ruby/Sass 
‣ Vantagens: 
‣ Ajuda na compatibilidade cross-browser; 
‣ Recursos que facilitam no trabalho com Css3; 
‣ Sprite com o pé na nuca; 
‣ Alta produtividade!
Compass: instalação 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ gem install compass
Compass: start 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ cd /caminho/nome-da-pasta 
$ compass create projeto
Compass: estrutura 
projeto/ 
|——— sass/ 
| |——— ie.scss 
| |——— print.scss 
| |——— screen.scss 
|——— stylesheets/ 
| |——— ie.css 
| |——— print.css 
| |——— screen.css 
|——— config.rb
Compass: compilar 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ cd /caminho/projeto 
$ compass watch
Compass: biblioteca 
‣ CSS3 
‣ Helpers 
‣ Layout 
‣ Reset 
‣ Typography
Compass: css3 
//screen.scss 
@import “compass/css3"; 
.box { 
@include border-radius(10px); 
}
Spriting with Sass and Compass 
http://thesassway.com/intermediate/spriting-with-sass-and-compass
Compass: biblioteca 
‣ Mais detalhes: 
‣ http://compass-style.org/reference/compass/
Homem de Ferro: 
Hulkbuster 
COMPASS 
+ 
SUSY 
+ 
BREAKPOINT
Breakpoint
Breakpoint 
‣ Framework Sass; 
‣ Faz consultas de mídia de forma simples e 
organizada; 
‣ Economia de tempo! 
‣ Requer Sass e Compass. 
‣ Documentação: https://github.com/at-import/ 
breakpoint/wiki/
Breakpoint: instalação 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ gem install breakpoint
Breakpoint: preparação 
//config.rb 
require 'breakpoint' 
//screen.scss 
//Outros @imports 
@import “breakpoint”;
Breakpoint: start 
//screen.scss 
$adolescente : 600px; 
$adulto : 600px 1024px; 
.seletor { 
propriedade: valor; 
@include breakpoint($adolescente) { 
propriedade: valor; 
} 
@include breakpoint($adulto) { 
propriedade: valor; 
} 
}
Breakpoint: start 
//screen.css 
.seletor { 
propriedade: valor; 
} 
@media (min-width: 600px) { 
.seletor { 
propriedade: valor; 
} 
} 
@media (min-width: 600px) and (max-width: 1024px) { 
.seletor { 
propriedade: valor; 
} 
}
Breakpoint: resolução 
//screen.scss 
$retina: min-resolution 2dppx; // Retina displays 
.seletor { 
propriedade: valor; 
@include breakpoint($retina) { 
propriedade: valor; 
} 
}
Breakpoint: resolução 
//screen.css 
.seletor { 
propriedade: valor; 
} 
@media (min-resolution: 2dppx), 
(-webkit-min-device-pixel-ratio: 2), 
(min--moz-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
.seletor { 
propriedade: valor; 
} 
}
https://github.com/bjango/bjango-actions/ 
http://bohemiancoding.com/sketch/
Susy
Susy 
‣ Framework Sass; 
‣ Foco: Grid; 
‣ Economia de tempo! 
‣ Requer Sass. 
‣ Documentação: http://susydocs.oddbird.net/en/ 
latest/
Susy: instalação 
‣ Prompt (Windows) ou Terminal (Mac OS); 
$ gem install susy
Susy: preparação 
//config.rb 
require 'susy' 
//screen.scss 
//Outros @imports 
@import “susy”;
Susy: tretas 
header 
content 
footer 
sidebar
<div class="container"> 
<div class="row"> 
<div class="col-md-12"></div> 
</div> 
<div class="row"> 
<div class=“col-md-8"></div> 
<div class=“col-md-4"></div> 
</div> 
<div class="row"> 
<div class="col-md-12"></div> 
</div> 
</div> 
Bootstrap 
Susy: tretas
Susy: tretas 
‣ Problemas no método tradicional do Bootstrap (e 
outros frameworks): 
‣ Falta de flexibilidade; 
‣ código poluído; 
‣ Número de colunas divisível por 12. 
‣ …
Susy: tretas 
<div class="container"> 
<header class="header"></header> 
<section class=“content”></section> 
<aside class="sidebar"></aside> 
<footer class="footer"></footer> 
</div>
//screen.scss 
Susy: tretas 
.container { @include container(1024px); } 
.header { @include span(12 of 12); } 
.content { @include span(8 of 12); } 
.sidebar { @include span(last 4 of 12); } 
.footer { @include span(12 of 12); }
//screen.css 
Susy: tretas 
.container { 
max-width: 1024px; 
margin-left: auto; 
margin-right: auto; } 
.container:after { 
content: " "; 
display: block; 
clear: both; } 
.header { 
width: 100%; 
float: left; 
margin-left: 0; 
margin-right: 0;} 
.content { 
width: 66.10169%; 
float: left; 
margin-right: 1.69492%; } 
.sidebar { 
width: 32.20339%; 
float: right; 
margin-right: 0; } 
.footer { 
width: 100%; 
float: left; 
margin-left: 0; 
margin-right: 0;}
//screen.scss 
Susy: tretas 
.container { @include container(1024px); } 
.header { @include span(12 of 12); } 
.content { @include span(6 of 7); } 
.sidebar { @include span(last 1 of 7); } 
.footer { @include span(12 of 12); }
“Aiiimmmm, 
vai gerar muito código!… 
mimimi…
Você usa 100% dos 
recursos do seu framework 
favorito?
+ 
Susy + Breakpoint
Susy / Breakpoint 
header 
content 
footer 
sidebar 
header 
content 
sidebar 
footer 
mín. 768px
Susy / Breakpoint 
//screen.scss 
$adolescente : 768px; 
.content { @include span(4 of 4); } 
.sidebar {@include span(4 of 4); } 
@include breakpoint($adolescente) { 
.content { @include span(8 of 12); } 
.sidebar { @include span(last 4 of 12); } 
}
Susy / Breakpoint 
.galeria-item .galeria-item .galeria-item .galeria-item 
.galeria-item .galeria-item .galeria-item 
mín. 768px 
.galeria-item 
.galeria-item .galeria-item 
.galeria-item .galeria-item
Susy / Breakpoint 
<div class="container"> 
<div class=“galeria-item”></div> 
<div class=“galeria-item”></div> 
<div class=“galeria-item”></div> 
<div class=“galeria-item”></div> 
<div class=“galeria-item”></div> 
<div class=“galeria-item”></div> 
…. 
</div>
Susy / Breakpoint 
//screen.scss 
$adolescente : 768px; 
.galeria-item { @include gallery(6 of 12); } 
@include breakpoint($adolescente) { 
.galeria-item { @include gallery(4 of 12); } 
}
Susy / Breakpoint 
//screen.css 
.galeria-item { 
width: 49.15254%; 
float: left; } 
.galeria-item:nth-child(2n + 1) { 
margin-left: 0; 
margin-right: -100%; 
clear: both; 
margin-left: 0; } 
.galeria-item:nth-child(2n + 2) { 
margin-left: 50.84746%; 
margin-right: -100%; 
clear: none; } 
@media (min-width: 768px) { 
.galeria-item { 
width: 32.20339%; 
float: left; } 
.galeria-item:nth-child(3n + 1) { 
margin-left: 0; 
margin-right: -100%; 
clear: both; 
margin-left: 0; } 
.galeria-item:nth-child(3n + 2) { 
margin-left: 33.89831%; 
margin-right: -100%; 
clear: none; } 
.galeria-item:nth-child(3n + 3) { 
margin-left: 67.79661%; 
margin-right: -100%; 
clear: none; } }
“Aiiimmmm, 
eu não utilizo só 
breakpoint e grid,… 
e o modal? player?… 
O Boostrap tem!
Foundation 
http://foundation.zurb.com/
“Quando decidimos usar um 
pré-processador é um caminho 
sem volta.” 
– Diego Eis, tableless.com.br
Obrigado! 
hello@vitorgarcia.com 
fb.com/vitorgarciamoreira

Mais conteúdo relacionado

Mais procurados

Lista de relações métricas no triangulo retângulo
Lista de  relações métricas no triangulo retânguloLista de  relações métricas no triangulo retângulo
Lista de relações métricas no triangulo retângulo
Rosana Santos Quirino
 
Descritores de matemática
Descritores de matemáticaDescritores de matemática
Descritores de matemática
Jorgia Santos
 
51582839 caderno-de-exercicios-de-matematica-basica
51582839 caderno-de-exercicios-de-matematica-basica51582839 caderno-de-exercicios-de-matematica-basica
51582839 caderno-de-exercicios-de-matematica-basica
Simone Belorte de Andrade
 
Espelho de classe.png
Espelho de classe.pngEspelho de classe.png
Espelho de classe.png
Gabih Vequi
 
Descritores guia matematica
Descritores guia matematicaDescritores guia matematica
Descritores guia matematica
josivaldopassos
 
Logica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 SubalgoritmosLogica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 Subalgoritmos
Regis Magalhães
 

Mais procurados (20)

Lista de relações métricas no triangulo retângulo
Lista de  relações métricas no triangulo retânguloLista de  relações métricas no triangulo retângulo
Lista de relações métricas no triangulo retângulo
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Descritores de matemática
Descritores de matemáticaDescritores de matemática
Descritores de matemática
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
51582839 caderno-de-exercicios-de-matematica-basica
51582839 caderno-de-exercicios-de-matematica-basica51582839 caderno-de-exercicios-de-matematica-basica
51582839 caderno-de-exercicios-de-matematica-basica
 
RELAÇÕES MÉTRICAS NO TRIÂNGULO RETÂNGULO I
RELAÇÕES MÉTRICAS NO TRIÂNGULO RETÂNGULO IRELAÇÕES MÉTRICAS NO TRIÂNGULO RETÂNGULO I
RELAÇÕES MÉTRICAS NO TRIÂNGULO RETÂNGULO I
 
Lista de Exercicios Sistemas Lineares do 1 grau.
Lista de Exercicios Sistemas Lineares do 1 grau.Lista de Exercicios Sistemas Lineares do 1 grau.
Lista de Exercicios Sistemas Lineares do 1 grau.
 
Turma A - Volume.pdf
Turma A - Volume.pdfTurma A - Volume.pdf
Turma A - Volume.pdf
 
Modelagem de Dados - Introdução à UML
Modelagem de Dados - Introdução à UMLModelagem de Dados - Introdução à UML
Modelagem de Dados - Introdução à UML
 
1ª LISTA DE EXERCÍCIOS( PIRÂMIDES)
1ª LISTA DE EXERCÍCIOS( PIRÂMIDES)1ª LISTA DE EXERCÍCIOS( PIRÂMIDES)
1ª LISTA DE EXERCÍCIOS( PIRÂMIDES)
 
Padrões de Projeto de Software
Padrões de Projeto de SoftwarePadrões de Projeto de Software
Padrões de Projeto de Software
 
Relação letra x fonema
Relação letra x fonemaRelação letra x fonema
Relação letra x fonema
 
Espelho de classe.png
Espelho de classe.pngEspelho de classe.png
Espelho de classe.png
 
Provas com cdescritores para teste matematica e portugues
Provas com cdescritores para teste matematica e portuguesProvas com cdescritores para teste matematica e portugues
Provas com cdescritores para teste matematica e portugues
 
Descritores guia matematica
Descritores guia matematicaDescritores guia matematica
Descritores guia matematica
 
Aula 20 div e spans
Aula 20 div e spansAula 20 div e spans
Aula 20 div e spans
 
Logica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 SubalgoritmosLogica Algoritmo 07 Subalgoritmos
Logica Algoritmo 07 Subalgoritmos
 

Semelhante a Design Responsivo com Sass

Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1
Daniel Lopes
 

Semelhante a Design Responsivo com Sass (20)

Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
TDC 2016 - Sass: CSS com super-poderes.
TDC 2016 - Sass: CSS com super-poderes.TDC 2016 - Sass: CSS com super-poderes.
TDC 2016 - Sass: CSS com super-poderes.
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASS
 
Less
LessLess
Less
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
GBD Pattern
GBD PatternGBD Pattern
GBD Pattern
 
Funcionalidades do SASS
Funcionalidades do SASSFuncionalidades do SASS
Funcionalidades do SASS
 
Javascript + jQuery
Javascript + jQueryJavascript + jQuery
Javascript + jQuery
 
Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
 
Html5
Html5Html5
Html5
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
 
TDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativosTDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativos
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
 

Design Responsivo com Sass

  • 2. Vitor Garcia ‣ Design & Front-end; ‣ Sócio da Rino3; ‣ Professor de Web Design Senac
  • 3. Problema: Um design, um conteúdo e incontáveis telas.
  • 6. Sass ‣ Pré-processador CSS; ‣ Css com Superpoderes; ‣ Requisito: ‣ Ruby instalado na máquina; ‣ Mac OS: Já vem instalado : ) ‣ Windows: Se vira nos 30! :’( ‣ http://rubyinstaller.org/
  • 7. Sass //estilo.sass //ou //estilo.scss h1 { color: #fff; background: #000; } //estilo.css h1 { color: #fff; background: #000; } SASS
  • 8. Sass: sintaxe Scss – estilo.scss Sass – estilo.sass h1 { color: #fff; background: #000; } h1 color: #fff background: #000
  • 9. Sass: recursos ‣ Uma amostra dos recursos: ‣ Aninhamento; ‣ Variáveis; ‣ Mixins; ‣ Mais recursos: http://sass-lang.com/guide
  • 10. Sass: aninhamento estilo.scss estilo.css ul { li { propriedade: valor; } a { propriedade: valor; } } ul li { propriedade: valor; } ul a { propriedade: valor; }
  • 11. Sass: variáveis estilo.scss estilo.css $width: 100%; $height: 40px; header { width: $width; height: $height; } header { width: 100%; height: 40px; }
  • 12. Sass: mixins estilo.scss estilo.css @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
  • 13. Sass: instalação ‣ Prompt (Windows) ou Terminal (Mac OS); $ gem install sass
  • 14. Sass: compilar ‣ Prompt (Windows) ou Terminal (Mac OS); $ cd /caminho/nome-da-pasta $ scss estilo.scss:estilo.css sintaxe entrada saída
  • 15. Sass: compilar ‣ Prompt (Windows) ou Terminal (Mac OS); $ cd /caminho/nome-da-pasta $ scss --watch estilo.scss:estilo.css sintaxe observa entrada saída
  • 17. CSS SASS COMPASS Tony Stark Homem de Ferro Homem de Ferro: Máquina de Combate
  • 19. Compass ‣ Framework Ruby/Sass ‣ Vantagens: ‣ Ajuda na compatibilidade cross-browser; ‣ Recursos que facilitam no trabalho com Css3; ‣ Sprite com o pé na nuca; ‣ Alta produtividade!
  • 20. Compass: instalação ‣ Prompt (Windows) ou Terminal (Mac OS); $ gem install compass
  • 21. Compass: start ‣ Prompt (Windows) ou Terminal (Mac OS); $ cd /caminho/nome-da-pasta $ compass create projeto
  • 22. Compass: estrutura projeto/ |——— sass/ | |——— ie.scss | |——— print.scss | |——— screen.scss |——— stylesheets/ | |——— ie.css | |——— print.css | |——— screen.css |——— config.rb
  • 23. Compass: compilar ‣ Prompt (Windows) ou Terminal (Mac OS); $ cd /caminho/projeto $ compass watch
  • 24. Compass: biblioteca ‣ CSS3 ‣ Helpers ‣ Layout ‣ Reset ‣ Typography
  • 25. Compass: css3 //screen.scss @import “compass/css3"; .box { @include border-radius(10px); }
  • 26.
  • 27.
  • 28. Spriting with Sass and Compass http://thesassway.com/intermediate/spriting-with-sass-and-compass
  • 29. Compass: biblioteca ‣ Mais detalhes: ‣ http://compass-style.org/reference/compass/
  • 30. Homem de Ferro: Hulkbuster COMPASS + SUSY + BREAKPOINT
  • 32. Breakpoint ‣ Framework Sass; ‣ Faz consultas de mídia de forma simples e organizada; ‣ Economia de tempo! ‣ Requer Sass e Compass. ‣ Documentação: https://github.com/at-import/ breakpoint/wiki/
  • 33. Breakpoint: instalação ‣ Prompt (Windows) ou Terminal (Mac OS); $ gem install breakpoint
  • 34. Breakpoint: preparação //config.rb require 'breakpoint' //screen.scss //Outros @imports @import “breakpoint”;
  • 35. Breakpoint: start //screen.scss $adolescente : 600px; $adulto : 600px 1024px; .seletor { propriedade: valor; @include breakpoint($adolescente) { propriedade: valor; } @include breakpoint($adulto) { propriedade: valor; } }
  • 36. Breakpoint: start //screen.css .seletor { propriedade: valor; } @media (min-width: 600px) { .seletor { propriedade: valor; } } @media (min-width: 600px) and (max-width: 1024px) { .seletor { propriedade: valor; } }
  • 37. Breakpoint: resolução //screen.scss $retina: min-resolution 2dppx; // Retina displays .seletor { propriedade: valor; @include breakpoint($retina) { propriedade: valor; } }
  • 38. Breakpoint: resolução //screen.css .seletor { propriedade: valor; } @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 192dpi) { .seletor { propriedade: valor; } }
  • 40. Susy
  • 41. Susy ‣ Framework Sass; ‣ Foco: Grid; ‣ Economia de tempo! ‣ Requer Sass. ‣ Documentação: http://susydocs.oddbird.net/en/ latest/
  • 42. Susy: instalação ‣ Prompt (Windows) ou Terminal (Mac OS); $ gem install susy
  • 43. Susy: preparação //config.rb require 'susy' //screen.scss //Outros @imports @import “susy”;
  • 44. Susy: tretas header content footer sidebar
  • 45. <div class="container"> <div class="row"> <div class="col-md-12"></div> </div> <div class="row"> <div class=“col-md-8"></div> <div class=“col-md-4"></div> </div> <div class="row"> <div class="col-md-12"></div> </div> </div> Bootstrap Susy: tretas
  • 46. Susy: tretas ‣ Problemas no método tradicional do Bootstrap (e outros frameworks): ‣ Falta de flexibilidade; ‣ código poluído; ‣ Número de colunas divisível por 12. ‣ …
  • 47. Susy: tretas <div class="container"> <header class="header"></header> <section class=“content”></section> <aside class="sidebar"></aside> <footer class="footer"></footer> </div>
  • 48. //screen.scss Susy: tretas .container { @include container(1024px); } .header { @include span(12 of 12); } .content { @include span(8 of 12); } .sidebar { @include span(last 4 of 12); } .footer { @include span(12 of 12); }
  • 49. //screen.css Susy: tretas .container { max-width: 1024px; margin-left: auto; margin-right: auto; } .container:after { content: " "; display: block; clear: both; } .header { width: 100%; float: left; margin-left: 0; margin-right: 0;} .content { width: 66.10169%; float: left; margin-right: 1.69492%; } .sidebar { width: 32.20339%; float: right; margin-right: 0; } .footer { width: 100%; float: left; margin-left: 0; margin-right: 0;}
  • 50. //screen.scss Susy: tretas .container { @include container(1024px); } .header { @include span(12 of 12); } .content { @include span(6 of 7); } .sidebar { @include span(last 1 of 7); } .footer { @include span(12 of 12); }
  • 51. “Aiiimmmm, vai gerar muito código!… mimimi…
  • 52. Você usa 100% dos recursos do seu framework favorito?
  • 53. + Susy + Breakpoint
  • 54. Susy / Breakpoint header content footer sidebar header content sidebar footer mín. 768px
  • 55. Susy / Breakpoint //screen.scss $adolescente : 768px; .content { @include span(4 of 4); } .sidebar {@include span(4 of 4); } @include breakpoint($adolescente) { .content { @include span(8 of 12); } .sidebar { @include span(last 4 of 12); } }
  • 56. Susy / Breakpoint .galeria-item .galeria-item .galeria-item .galeria-item .galeria-item .galeria-item .galeria-item mín. 768px .galeria-item .galeria-item .galeria-item .galeria-item .galeria-item
  • 57. Susy / Breakpoint <div class="container"> <div class=“galeria-item”></div> <div class=“galeria-item”></div> <div class=“galeria-item”></div> <div class=“galeria-item”></div> <div class=“galeria-item”></div> <div class=“galeria-item”></div> …. </div>
  • 58. Susy / Breakpoint //screen.scss $adolescente : 768px; .galeria-item { @include gallery(6 of 12); } @include breakpoint($adolescente) { .galeria-item { @include gallery(4 of 12); } }
  • 59. Susy / Breakpoint //screen.css .galeria-item { width: 49.15254%; float: left; } .galeria-item:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .galeria-item:nth-child(2n + 2) { margin-left: 50.84746%; margin-right: -100%; clear: none; } @media (min-width: 768px) { .galeria-item { width: 32.20339%; float: left; } .galeria-item:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .galeria-item:nth-child(3n + 2) { margin-left: 33.89831%; margin-right: -100%; clear: none; } .galeria-item:nth-child(3n + 3) { margin-left: 67.79661%; margin-right: -100%; clear: none; } }
  • 60. “Aiiimmmm, eu não utilizo só breakpoint e grid,… e o modal? player?… O Boostrap tem!
  • 62. “Quando decidimos usar um pré-processador é um caminho sem volta.” – Diego Eis, tableless.com.br