![Page 1: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/1.jpg)
Rails front-end com Bourbon e sua família
Front in Maceió
![Page 2: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/2.jpg)
Mauro quem…
![Page 3: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/3.jpg)
![Page 4: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/4.jpg)
![Page 5: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/5.jpg)
Um pouco de história
![Page 6: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/6.jpg)
Minha história com front-end
Acessibilidade
Usabilidade
Web semântica
SEOHTML 5
Back End
![Page 7: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/7.jpg)
Startupdev
![Page 8: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/8.jpg)
❖ Mais de 50 projetos!❖ Projeto novo toda semana!❖ Pah
Startupdev
![Page 9: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/9.jpg)
Pah
![Page 10: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/10.jpg)
❖ Rails template!❖ Gerador de aplicações!❖ CSS padrão???
Pah
![Page 11: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/11.jpg)
Pah
![Page 12: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/12.jpg)
Pah
❖ Manter!❖ Testar!❖ Documentação!❖ Contribua com o que já existe
![Page 13: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/13.jpg)
Bourbon
![Page 14: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/14.jpg)
❖ Sass!❖ Apenas o que é usado é incluido!❖ Sem mais vendor-prefixed
Bourbon
![Page 15: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/15.jpg)
Bourbon
Sass.users-index { @include background(linear-gradient(red, green) left repeat);}
Mixins
CSS.users-index { background: -webkit-linear-gradient( red, green) left repeat; background: linear-gradient( red, green) left repeat;}
![Page 16: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/16.jpg)
Bourbon
Sassspan { @include retina-image(home-icon, 32px 20px)}
Add-ons
CSSspan { 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; }
![Page 17: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/17.jpg)
NEAT
![Page 18: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/18.jpg)
NEAT
❖ No topo do bourbon!❖ Não polui o HTML
![Page 19: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/19.jpg)
Marcação extra no HTMLBootstrap
![Page 20: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/20.jpg)
Marcação extra no HTMLFoundation
![Page 21: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/21.jpg)
Sem Marcação extra no HTMLNEAT
![Page 22: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/22.jpg)
NEAT
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
Sasssection { @include outer-container; aside { @include span-columns(3); } article { @include span-columns(9); }}
![Page 23: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/23.jpg)
Bitters
![Page 24: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/24.jpg)
Bitters
❖ Estilos padrões, variáveis e estrutura!❖ No topo do bourbon!❖ Feito para ser extendido
![Page 25: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/25.jpg)
Bitters
![Page 26: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/26.jpg)
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);
![Page 27: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/27.jpg)
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;
![Page 28: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/28.jpg)
Bitters
base/_typography.scssbody { -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}
![Page 29: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/29.jpg)
Refills
![Page 30: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/30.jpg)
Refills
❖ Padrões e componentes!❖ No topo do bourbon, bitters e neat!❖ Feito para ser extendido
![Page 31: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/31.jpg)
Refills
![Page 32: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/32.jpg)
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>
![Page 33: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/33.jpg)
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;
![Page 34: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/34.jpg)
Organização
![Page 35: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/35.jpg)
Organização
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;
Não tudo no application.css
![Page 36: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/36.jpg)
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
![Page 37: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/37.jpg)
OrganizaçãoBitters
![Page 38: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/38.jpg)
OrganizaçãoConvenções
![Page 39: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/39.jpg)
OrganizaçãoConvenções
![Page 40: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/40.jpg)
OrganizaçãoConvenções
![Page 41: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/41.jpg)
Organização
HTML<body class="users users-index">
Flutie
SASS.users-index { // My users/index css here}
![Page 42: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/42.jpg)
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); }
![Page 43: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/43.jpg)
Conclusão
❖ Não recrie o que já existe, contribua!!❖ Organização para a sanidade do time.!❖ Utilize de convenções
![Page 44: Rails front-end com bourbon e sua familia @ Front in Maceió 2014](https://reader030.vdocuments.mx/reader030/viewer/2022012916/559c1d631a28abc7298b45b7/html5/thumbnails/44.jpg)
Obrigado!