Lemonade

1,004 views

Published on

Apresentação no GURU-SP do dia 11/dez/2010

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,004
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • Twitter, Gtalk, Desenvolvedor Front-End Gonow, Equipe Rails\n
  • Gerador de CSS sprites, facil de usar, sem configuração, sem Photoshop. \n
  • Vejamos o Menu da Apple, o Menu da Apple tem 4 estados diferentes, o Normal\n
  • o Hover\n
  • o Click\n
  • e o Link, Pensando a forma mais tosca de fazer essa menu\n
  • Pegamos 4 imagens dos 4 estados e adicionamos como background \n
  • Um dos problema é que, no caso, teremos 4 requisições, imagina um menu maior. Dai vem a tecnica do CSS Sprites >>\n
  • basicamente, >>\n
  • adicionamos tudo em uma imagem >>\n
  • e manipulamos a posição do background com background-position. isso é Simples, não nada novo algo usado hoje mais, mais não resolve alguns problemas, imagine que temos isso>>>\n
  • Você mapiou isso de alguma forma, mais por algum motivo o sistema foi atualizado e adicionaram items>>\n
  • é inviavel ficar aumentando e diminuindo pixel, Então ….\n
  • como eu disse antes, simples, Lembrando que isso é no SASS…..Uma parte do exemplo anterior pode ser escrito assim\n
  • Imaginamemos que temos esse tres icones, add imagem , upload e exportar\n
  • Add o mixin do Lemonade ‘sprite-image’\n
  • \n
  • Esta vendo essa nav.png?\n
  • o lemonade indentifica a pasta que esta suas imagens sozinhas >>\n
  • Então se voce quiser criar mais de uma sprite, por exemplo, vamos dizer que a add imagem não faz parte do sprite nav\n
  • Trocamos ela de pasta\n
  • ele ira criar outra.\n
  • O lemonade ira gerar algo parecido com isso. Alguns extras>>\n
  • Como eu já disse o sprite-image é um mixin do sass, ele tem parametros, o primeiro agente viu que é a imagem>>\n
  • que é a imagem, o Segundo e o Terceiro, são os offsets\n
  • X e Y respectivamente, eles vão controlar a posição da sua imagem na tela\n
  • Em muitos casos precisamos que as imagens esteja com um espaçamento maior entre elas, isso ocorre temos uma area grande e dai a outras imagens ira aparecer\n
  • o 4º coloca espaçamento em cima e em baixo da imagem atual \n
  • se quiser ser mais preciso em relação aos espacamento o 5º controla o espacamento de baixo, deixo para o 4 a funcao de controlar a de cima\n
  • Instalar….I’ve tested it with both Ruby 1.8.7 and 1.9.2. It works with Haml/Sass 3.0.x. But it depends on Compass 0.10.x. You can integrate it in Rails 2.3.x and 3.0, Staticmatic or just run compass watch.\n\n
  • em dev, e em produção, se usar o inploy >>>\n
  • automaticamente\n
  • \n
  • Lemonade

    1. 1. Emerson Viniciustwitter: @emersonvinicius gtalk: duke.m16
    2. 2. LemonadeGenerates CSS sprites on the fly (for Sass/SCSS/Compass).
    3. 3. normal
    4. 4. normalhover
    5. 5. normalhoverclick
    6. 6. normalhoverclicklink
    7. 7. #button li a background-image: url(menu_default.png)menu_default.png #button li a:hovermenu_hover.png background-image: url(menu_hover.png)menu_active.png #button li a:activemenu_link.png background-image: url(menu_active.png) #button li a.link background-image: url(menu_link.png)
    8. 8. #button li a background-image: url(menu_default.png) e smenu_default.png õ #button li a:hover is iç background-image: url(menu_hover.png)menu_hover.pngmenu_active.png R e qu 4 #button li a:activemenu_link.png background-image: url(menu_active.png) #button li a.link background-image: url(menu_link.png)
    9. 9. #button li a background: url(background_menu.png) no-repeat 0 0background_menu.png #button li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
    10. 10. #button li a background: url(background_menu.png) no-repeat 0 0background_menu.png #button li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
    11. 11. #button li a background: url(background_menu.png) no-repeat 0 0 0 background_menu.png #button li a:hover-39px background-position: 0 -39px -82px-123px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
    12. 12. background: sprite-image(‘icons/home.png’)
    13. 13. #nav li a.addimage#nav li a.upload#nav li a.export
    14. 14. #nav li a.addimage background: sprite-image(‘nav/addimage.png’)#nav li a.upload#nav li a.export nav.png nav.png
    15. 15. #nav li a.addimage background: sprite-image(‘nav/addimage.png’)#nav li a.upload background: sprite-image(‘nav/upload.png’)#nav li a.export nav.png nav.png
    16. 16. #nav li a.addimage background: sprite-image(‘nav/addimage.png’)#nav li a.upload background: sprite-image(‘nav/upload.png’)#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
    17. 17. #nav li a.addimage background: sprite-image(‘nav/addimage.png’)#nav li a.upload background: sprite-image(‘nav/upload.png’)#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
    18. 18. #nav li a.addimage background: sprite-image(‘nav/addimage.png’)#nav li a.upload background: sprite-image(‘nav/upload.png’)#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
    19. 19. #nav li a.addimage background: sprite-image(‘bar/addimage.png’)#nav li a.upload background: sprite-image(‘nav/upload.png’)#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
    20. 20. #nav li a.addimage background: sprite-image(‘bar/addimage.png’)#nav li a.upload background: sprite-image(‘nav/upload.png’)#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png bar.png
    21. 21. #nav li a.addimage{ background: url(‘/images/nav.png’);}#nav li a.upload{ background: url(‘/images/nav.png’) 0 -23px;}#nav li a.export{ background: url(‘/images/nav.png’) 0 -46px;}
    22. 22. background: sprite-image(‘nav/addimage.png’)
    23. 23. background: sprite-image(‘nav/addimage.png’)
    24. 24. background: sprite-image(‘nav/addimage.png’, 0, 0)
    25. 25. background: sprite-image(‘nav/addimage.png’, 0, 0)
    26. 26. background: sprite-image(‘nav/addimage.png’, 0, 0, 5px) nav.png nav.png
    27. 27. background: sprite-image(‘nav/addimage.png’,0,0, 5px, 20px) nav.png nav.png
    28. 28. gem install compass lemonade config/compass.rb require “lemonade”
    29. 29. development Automatico, quando gera o SASSproduction compass compile
    30. 30. development Automatico, quando gera o SASSproduction compass compile
    31. 31. LEMONADE INGREDIENTS PURE RUBY, SASS, COMPASS, RMAGICK, NO ARTIFICIAL FLAVORS OR SUGAR ADDED. Obrigado!http://bit.ly/lemo-info @emersonvinicius

    ×