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

1. Rails front-end com
Bourbon e sua família Front in Maceió

2. Mauro quem…

5. Um pouco de história

6. Minha história com front-end
Back
Acessibilidade
Usabilidade
End
Web semântica
SEO
HTML 5

7. Startupdev

8. ❖ Mais de 50 projetos!
❖ Projeto novo toda semana!
❖ Pah
Startupdev

9. Pah

10. ❖ Rails template!
❖ Gerador de aplicações!
❖ CSS padrão???
Pah

11. Pah

12. Pah
❖ Manter!
❖ Testar!
❖ Documentação!
❖ Contribua com o que já existe

13. Bourbon

14. ❖ Sass!
Bourbon
❖ Apenas o que é usado é incluido!
❖ Sem mais vendor-prefixed

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

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

17. NEAT

18. NEAT
❖ No topo do bourbon!
❖ Não polui o HTML

19. Marcação extra no
HTML
Bootstrap

20. Marcação extra no
HTML
Foundation

21. Sem Marcação extra
no HTML
NEAT

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

23. Bitters

24. Bitters
❖ Estilos padrões, variáveis e estrutura!
❖ No topo do bourbon!
❖ Feito para ser extendido

25. Bitters

26. 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);

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

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

29. Refills

30. Refills
❖ Padrões e componentes!
❖ No topo do bourbon, bitters e neat!
❖ Feito para ser extendido

31. Refills

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

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

34. Organização

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

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

37. Organização
Bitters

38. Organização
Convenções

39. Organização
Convenções

40. Organização
Convenções

41. Organização
Flutie
HTML
<body class="users users-index">
SASS
.users-index {
// My users/index css here
}

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

43. Conclusão
❖ Não recrie o que já existe, contribua!!
❖ Organização para a sanidade do time.!
❖ Utilize de convenções

44. Obrigado!

45. maurogeorge.com.br