design responsivo com sass
Post on 07-Jul-2015
443 Views
Preview:
DESCRIPTION
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/
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
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
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
@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
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
//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/
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
//Outros @imports @import “susy”;
//screen.scss
require 'susy'
//config.rb
Susy: preparação
header
content
footer
sidebar
Susy: tretas
<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.
‣ …
<div class="container"> <header class="header"></header>
<section class=“content”></section> <aside class="sidebar"></aside>
<footer class="footer"></footer> </div>
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
.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
$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
“Aiiimmmm, eu não utilizo só
breakpoint e grid,… e o modal? player?…
O Boostrap tem!
– Diego Eis, tableless.com.br
“Quando decidimos usar um pré-processador é um caminho
sem volta.”
hello@vitorgarcia.com
fb.com/vitorgarciamoreira
Obrigado!
top related