Rails front-end com 
Bourbon e sua família Front in Maceió
Mauro quem…
Um pouco de história
Minha história com front-end 
Back 
Acessibilidade 
Usabilidade 
End 
Web semântica 
SEO 
HTML 5
Startupdev
❖ Mais de 50 projetos! 
❖ Projeto novo toda semana! 
❖ Pah 
Startupdev
Pah
❖ Rails template! 
❖ Gerador de aplicações! 
❖ CSS padrão??? 
Pah
Pah
Pah 
❖ Manter! 
❖ Testar! 
❖ Documentação! 
❖ Contribua com o que já existe
Bourbon
❖ Sass! 
Bourbon 
❖ Apenas o que é usado é incluido! 
❖ Sem mais vendor-prefixed
Bourbon 
Mixins 
Sass 
.users-index { 
@include background(linear-gradient(red, green) left repeat); 
} 
CSS 
.users-index...
Bourbon 
Add-ons 
Sass 
span { 
@include retina-image(home-icon, 32px 20px) 
} 
CSS 
span { 
background-image: url(home-ic...
NEAT
NEAT 
❖ No topo do bourbon! 
❖ Não polui o HTML
Marcação extra no 
HTML 
Bootstrap
Marcação extra no 
HTML 
Foundation
Sem Marcação extra 
no HTML 
NEAT
NEAT 
Sass 
HTML 
<section> 
<aside>What is it about?</aside> 
<article>Neat is an open source semantic grid framework bui...
Bitters
Bitters 
❖ Estilos padrões, variáveis e estrutura! 
❖ No topo do bourbon! 
❖ Feito para ser extendido
Bitters
Bitters 
base/_grid-settings.scss 
@import 'neat-helpers'; 
! 
$max-width: em(960); 
! 
// Neat Breakpoints 
$medium-scree...
Bitters 
base/_variables.scss 
// Typography 
$sans-serif: $helvetica; 
$serif: $georgia; 
$base-font-family: $sans-serif;...
Bitters 
base/_typography.scss 
body { 
-webkit-font-smoothing: antialiased; 
background-color: $base-background-color; 
c...
Refills
Refills 
❖ Padrões e componentes! 
❖ No topo do bourbon, bitters e neat! 
❖ Feito para ser extendido
Refills
Refills 
HTML 
<div class="cards"> 
<div class="card"> 
<div class="card-image"> 
<img src="https://raw.githubusercontent....
Refills 
Sass 
.cards { 
@include clearfix; 
} 
! 
.card { 
$card-border-color: $base-border-color; 
$card-border: 1px sol...
Organização
Organização 
Não tudo no application.css 
application.css.scss 
/* MAIN */ 
! 
@import "colors", "mixins"; 
! 
body { 
fon...
Organização 
application.css.scss 
/* MAIN */ 
! 
//… 
! 
/* HEADING */ 
! 
h1, h2, h3 { 
margin: 0 0 .2em; 
font-weight: ...
Organização 
Bitters
Organização 
Convenções
Organização 
Convenções
Organização 
Convenções
Organização 
Flutie 
HTML 
<body class="users users-index"> 
SASS 
.users-index { 
// My users/index css here 
}
Organização 
HTML 
<form class="simple_form new_user" id="new_user" ...> 
<div class="input string optional user_name"> 
<...
Conclusão 
❖ Não recrie o que já existe, contribua!! 
❖ Organização para a sanidade do time.! 
❖ Utilize de convenções
Obrigado!
maurogeorge.com.br
Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Próximos SlideShares
Carregando em…5
×

Rails front-end com bourbon e sua familia @ Front in Maceió 2014

685 visualizações

Publicada em

Nesta palestra veremos:

- Por que não recriar o que já existe
- Bourbon
- NEAT
- Bitters
- Refills
- Organização de CSS em uma app rails

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Rails front-end com bourbon e sua familia @ Front in Maceió 2014

  1. 1. Rails front-end com Bourbon e sua família Front in Maceió
  2. 2. Mauro quem…
  3. 3. Um pouco de história
  4. 4. Minha história com front-end Back Acessibilidade Usabilidade End Web semântica SEO HTML 5
  5. 5. Startupdev
  6. 6. ❖ Mais de 50 projetos! ❖ Projeto novo toda semana! ❖ Pah Startupdev
  7. 7. Pah
  8. 8. ❖ Rails template! ❖ Gerador de aplicações! ❖ CSS padrão??? Pah
  9. 9. Pah
  10. 10. Pah ❖ Manter! ❖ Testar! ❖ Documentação! ❖ Contribua com o que já existe
  11. 11. Bourbon
  12. 12. ❖ Sass! Bourbon ❖ Apenas o que é usado é incluido! ❖ Sem mais vendor-prefixed
  13. 13. Bourbon Mixins Sass .users-index { @include background(linear-gradient(red, green) left repeat); } CSS .users-index { background: -webkit-linear-gradient( red, green) left repeat; background: linear-gradient( red, green) left repeat; }
  14. 14. Bourbon Add-ons Sass span { @include retina-image(home-icon, 32px 20px) } CSS span { background-image: url(home-icon.png); } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min- device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) { span { background-image: url(home-icon_2x.png); background-size: 32px 20px; }
  15. 15. NEAT
  16. 16. NEAT ❖ No topo do bourbon! ❖ Não polui o HTML
  17. 17. Marcação extra no HTML Bootstrap
  18. 18. Marcação extra no HTML Foundation
  19. 19. Sem Marcação extra no HTML NEAT
  20. 20. NEAT Sass HTML <section> <aside>What is it about?</aside> <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon</article> </section> Sass section { @include outer-container; aside { @include span-columns(3); } article { @include span-columns(9); } }
  21. 21. Bitters
  22. 22. Bitters ❖ Estilos padrões, variáveis e estrutura! ❖ No topo do bourbon! ❖ Feito para ser extendido
  23. 23. Bitters
  24. 24. Bitters base/_grid-settings.scss @import 'neat-helpers'; ! $max-width: em(960); ! // Neat Breakpoints $medium-screen: em(640); $large-screen: em(860); ! $medium-screen-up: new-breakpoint(min-width $medium-screen 4); $large-screen-up: new-breakpoint(min-width $large-screen 8);
  25. 25. Bitters base/_variables.scss // Typography $sans-serif: $helvetica; $serif: $georgia; $base-font-family: $sans-serif; $header-font-family: $base-font-family; ! // Sizes $base-font-size: 1em; $base-line-height: $base-font-size * 1.5; $unitless-line-height: $base-line-height / ($base-line-height * 0 + 1); $header-line-height: $base-font-size * 1.25; $base-border-radius: em(3); $base-body-color: white;
  26. 26. Bitters base/_typography.scss body { -webkit-font-smoothing: antialiased; background-color: $base-background-color; color: $base-font-color; font-family: $base-font-family; font-size: $base-font-size; line-height: $unitless-line-height; } ! h1, h2, h3, h4, h5, h6 { font-family: $header-font-family; line-height: $header-line-height; margin: 0; text-rendering: optimizeLegibility; // Fix the character spacing for headings }
  27. 27. Refills
  28. 28. Refills ❖ Padrões e componentes! ❖ No topo do bourbon, bitters e neat! ❖ Feito para ser extendido
  29. 29. Refills
  30. 30. Refills HTML <div class="cards"> <div class="card"> <div class="card-image"> <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/ source/images/mountains.png" alt=""> </div> <div class="card-header"> First Card </div> <div class="card-copy"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p> </div> <div class="card-stats"> <ul> <li>98<span>Items</span></li> <li>298<span>Things</span></li> <li>923<span>Objects</span></li>
  31. 31. Refills Sass .cards { @include clearfix; } ! .card { $card-border-color: $base-border-color; $card-border: 1px solid $card-border-color; $card-background: lighten($card-border-color, 10); $card-header-background: $card-background; $card-hover-background: lighten($card-background, 5); $card-image-background: #DBD199; $card-image-hover-background: lighten($card-image-background, 5); $card-stats-color: lighten($base-accent-color, 10); ! @include transition (all 0.2s ease-in-out); background-color: $card-background; border-radius: $base-border-radius; border: $card-border; margin-bottom: $base-spacing;
  32. 32. Organização
  33. 33. Organização Não tudo no application.css application.css.scss /* MAIN */ ! @import "colors", "mixins"; ! body { font-size: 75%; line-height: 1.25; font-family: Helvetica, Arial, sans-serif; background: transparent image-url("bg-content.png"); color: #333; } ! .plaecholder, input:-moz-placeholder { color: #999; } ! a, a:active { color: $thought-you-were;
  34. 34. Organização application.css.scss /* MAIN */ ! //… ! /* HEADING */ ! h1, h2, h3 { margin: 0 0 .2em; font-weight: bold; } ! h1 { font-size: 1.4em; letter-spacing: -1px; color: $thought-you-were; ! strong { color: #000; } Comentários sucks
  35. 35. Organização Bitters
  36. 36. Organização Convenções
  37. 37. Organização Convenções
  38. 38. Organização Convenções
  39. 39. Organização Flutie HTML <body class="users users-index"> SASS .users-index { // My users/index css here }
  40. 40. Organização HTML <form class="simple_form new_user" id="new_user" ...> <div class="input string optional user_name"> <label class="string optional" for="user_name">Name</label> <input class="string optional" id="user_name" name="user[name]" type="text" /> </div> Simple Form SASS .simple_form.new_user { @include outer-container; ! .user_name { @include span-columns(5); }
  41. 41. Conclusão ❖ Não recrie o que já existe, contribua!! ❖ Organização para a sanidade do time.! ❖ Utilize de convenções
  42. 42. Obrigado!
  43. 43. maurogeorge.com.br

×