Download pdf - Design Responsivo com Sass

Transcript

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/

http://rubyinstaller.org/

Sass

h1 { color: #fff; background: #000; }

//estilo.sass //ou //estilo.scss

h1 { color: #fff; background: #000; }

//estilo.css

SASS

h1 { color: #fff; background: #000; }

h1 color: #fff background: #000

Scss – estilo.scss Sass – estilo.sass

Sass: sintaxe

Sass: recursos

‣ Uma amostra dos recursos:

‣ Aninhamento;

‣ Variáveis;

‣ Mixins;

‣ Mais recursos: http://sass-lang.com/guide

http://sass-lang.com/guide

ul { li { propriedade: valor; } a { propriedade: valor; } }

ul li { propriedade: valor; } ul a { propriedade: valor; }

estilo.scss estilo.css

Sass: aninhamento

$width: 100%; $height: 40px;

header { width: $width; height: $height; }

header { width: 100%; height: 40px; }

estilo.scss estilo.css

Sass: variáveis

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

estilo.scss estilo.css

Sass: mixins

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 entrada saídaobserva

Sass: compilar

Tony Stark Homem de Ferro Homem de Ferro: Máquina de Combate

CSS SASS COMPASS

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

Compass: compilar

‣ Prompt (Windows) ou Terminal (Mac OS);

$ cd /caminho/projeto

$ compass watch

Compass: biblioteca

‣ CSS3

‣ Helpers

‣ Layout

‣ Reset

‣ Typography

@import “compass/css3";

.box { @include border-radius(10px); }

//screen.scss

Compass: css3

Spriting with Sass and Compasshttp://thesassway.com/intermediate/spriting-with-sass-and-compass

http://thesassway.com/intermediate/spriting-with-sass-and-compass

Compass: biblioteca

‣ Mais detalhes:

‣ http://compass-style.org/reference/compass/

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/

https://github.com/at-import/breakpoint/wiki/

Breakpoint: instalação

‣ Prompt (Windows) ou Terminal (Mac OS);

$ gem install breakpoint

//Outros @imports @import “breakpoint”;

//screen.scss

require 'breakpoint'

//config.rb

Breakpoint: preparação

$adolescente : 600px; $adulto : 600px 1024px;

.seletor { propriedade: valor;

@include breakpoint($adolescente) { propriedade: valor; } @include breakpoint($adulto) { propriedade: valor; } }

//screen.scss

Breakpoint: start

.seletor { propriedade: valor; } @media (min-width: 600px) { .seletor { propriedade: valor; } } @media (min-width: 600px) and (max-width: 1024px) { .seletor { propriedade: valor; } }

//screen.css

Breakpoint: start

$retina: min-resolution 2dppx; // Retina displays

.seletor { propriedade: valor;

@include breakpoint($retina) { propriedade: valor; } }

//screen.scss

Breakpoint: resolução

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

//screen.css

Breakpoint: resolução

http://bohemiancoding.com/sketch/

https://github.com/bjango/bjango-actions/

http://bohemiancoding.com/sketch/

https://github.com/bjango/bjango-actions/

Susy

Susy

‣ Framework Sass;

‣ Foco: Grid;

‣ Economia de tempo!

‣ Requer Sass.

‣ Documentação: http://susydocs.oddbird.net/en/latest/

http://susydocs.oddbird.net/en/latest/

Susy: instalação

‣ Prompt (Windows) ou Terminal (Mac OS);

$ gem install susy

//Outros @imports @import “susy”;

//screen.scss

require 'susy'

//config.rb

Susy: preparação

header

content

footer

sidebar

Susy: tretas

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

.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.scss

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

//screen.css.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;}

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

//screen.scss

Susy: tretas

“Aiiimmmm, vai gerar muito código!…

mimimi…

Você usa 100% dos recursos do seu framework

favorito?

Susy + Breakpoint

header

content

footer

sidebar

header

content

footer

sidebar

mín. 768px

Susy / Breakpoint

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

//screen.scss

Susy / Breakpoint

mín. 768px

.galeria-item .galeria-item .galeria-item .galeria-item

.galeria-item .galeria-item .galeria-item

.galeria-item

.galeria-item .galeria-item

Susy / Breakpoint

Susy / Breakpoint

$adolescente : 768px;

.galeria-item { @include gallery(6 of 12); }

@include breakpoint($adolescente) { .galeria-item { @include gallery(4 of 12); } }

//screen.scss

Susy / Breakpoint

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

//screen.css

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

Susy / Breakpoint