O documento discute o uso de pré-processadores CSS como Sass e Compass para criar designs responsivos. Ele explica como Sass fornece recursos como aninhamento, variáveis e mixins que facilitam o desenvolvimento. O documento também descreve como Compass e Breakpoint ajudam na compatibilidade entre navegadores e consultas de mídia, respectivamente. Por fim, é apresentado Susy como uma forma flexível de criar grids responsivos.

1. DESIGN
RESPONSIVO
com

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.

4. Designer / Front-ender

5. Sass

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

16. Sass: compilar

17. CSS SASS COMPASS
Tony Stark Homem de Ferro
Homem de Ferro:
Máquina de Combate

18. Compass

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

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

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

39. https://github.com/bjango/bjango-actions/
http://bohemiancoding.com/sketch/

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!

61. Foundation
http://foundation.zurb.com/

62. “Quando decidimos usar um
pré-processador é um caminho
sem volta.”
– Diego Eis, tableless.com.br

63. Obrigado!
hello@vitorgarcia.com
fb.com/vitorgarciamoreira