Design Responsivo com Sass

  • View
    436

  • Download
    0

Embed Size (px)

DESCRIPTION

Palestra "Design Responsivo com Sass" no evento Siga in Front, em Campo Grande/MS.

Text of Design Responsivo com Sass

  • 1. DESIGNRESPONSIVOcom

2. Vitor Garcia Design & Front-end; Scio da Rino3; Professor de WebDesign Senac 3. Problema: Um design, um contedo e incontveis telas. 4. Designer / Front-ender 5. Sass 6. Sass Pr-processador CSS; Css com Superpoderes; Requisito: Ruby instalado na mquina; Mac OS: J vem instalado : ) Windows: Se vira nos 30! :( http://rubyinstaller.org/ 7. Sass//estilo.sass//ou//estilo.scssh1 {color: #fff;background: #000;}//estilo.cssh1 {color: #fff;background: #000;}SASS 8. Sass: sintaxeScss estilo.scss Sass estilo.sassh1 {color: #fff;background: #000;}h1color: #fffbackground: #000 9. Sass: recursos Uma amostra dos recursos: Aninhamento; Variveis; Mixins; Mais recursos: http://sass-lang.com/guide 10. Sass: aninhamentoestilo.scss estilo.cssul {li {propriedade: valor;}a {propriedade: valor;}}ul li {propriedade: valor;}ul a {propriedade: valor;} 11. Sass: variveisestilo.scss estilo.css$width: 100%;$height: 40px;header {width: $width;height: $height;}header {width: 100%;height: 40px;} 12. Sass: mixinsestilo.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: instalao 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.csssintaxe entrada sada 15. Sass: compilar Prompt (Windows) ou Terminal (Mac OS);$ cd /caminho/nome-da-pasta$ scss --watch estilo.scss:estilo.csssintaxe observa entrada sada 16. Sass: compilar 17. CSS SASS COMPASSTony Stark Homem de FerroHomem de Ferro:Mquina 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: instalao 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: estruturaprojeto/| 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. Spriting with Sass and Compasshttp://thesassway.com/intermediate/spriting-with-sass-and-compass 27. Compass: biblioteca Mais detalhes: http://compass-style.org/reference/compass/ 28. Homem de Ferro:HulkbusterCOMPASS+SUSY+BREAKPOINT 29. Breakpoint 30. Breakpoint Framework Sass; Faz consultas de mdia de forma simples eorganizada; Economia de tempo! Requer Sass e Compass. Documentao: https://github.com/at-import/breakpoint/wiki/ 31. Breakpoint: instalao Prompt (Windows) ou Terminal (Mac OS);$ gem install breakpoint 32. Breakpoint: preparao//config.rbrequire 'breakpoint'//screen.scss//Outros @imports@import breakpoint; 33. Breakpoint: start//screen.scss$adolescente : 600px;$adulto : 600px 1024px;.seletor {propriedade: valor;@include breakpoint($adolescente) {propriedade: valor;}@include breakpoint($adulto) {propriedade: valor;}} 34. 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;}} 35. Breakpoint: resoluo//screen.scss$retina: min-resolution 2dppx; // Retina displays.seletor {propriedade: valor;@include breakpoint($retina) {propriedade: valor;}} 36. Breakpoint: resoluo//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;}} 37. https://github.com/bjango/bjango-actions/http://bohemiancoding.com/sketch/ 38. Susy 39. Susy Framework Sass; Foco: Grid; Economia de tempo! Requer Sass. Documentao: http://susydocs.oddbird.net/en/latest/ 40. Susy: instalao Prompt (Windows) ou Terminal (Mac OS);$ gem install susy 41. Susy: preparao//config.rbrequire 'susy'//screen.scss//Outros @imports@import susy; 42. Susy: tretasheadercontentfootersidebar 43.

BootstrapSusy: tretas 44. Susy: tretas Problemas no mtodo tradicional do Bootstrap (eoutros frameworks): Falta de flexibilidade; cdigo poludo; Nmero de colunas divisvel por 12. 45. Susy: tretas

46. //screen.scssSusy: 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); } 47. //screen.cssSusy: 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;} 48. //screen.scssSusy: 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); } 49. Aiiimmmm,vai gerar muito cdigo!mimimi 50. Voc usa 100% dosrecursos do seu frameworkfavorito? 51. +Susy + Breakpoint 52. Susy / Breakpointheadercontentfootersidebarheadercontentsidebarfootermn. 768px 53. 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); }} 54. Susy / Breakpoint.galeria-item .galeria-item .galeria-item .galeria-item.galeria-item .galeria-item .galeria-itemmn. 768px.galeria-item.galeria-item .galeria-item.galeria-item .galeria-item 55. Susy / Breakpoint

.

56. Susy / Breakpoint//screen.scss$adolescente : 768px;.galeria-item { @include gallery(6 of 12); }@include breakpoint($adolescente) {.galeria-item { @include gallery(4 of 12); }} 57. 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; } } 58. Aiiimmmm,eu no utilizo sbreakpoint e grid,e o modal? player?O Boostrap tem! 59. Foundationhttp://foundation.zurb.com/ 60. Quando decidimos usar umpr-processador um caminhosem volta. Diego Eis, tableless.com.br 61. Obrigado!hello@vitorgarcia.comfb.com/vitorgarciamoreira