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

Acessibilidade

Usabilidade

Web semântica

SEOHTML 5

Back End

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!❖ Apenas o que é usado é incluido!❖ Sem mais vendor-prefixed

Bourbon

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

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

NEAT

NEAT

❖ No topo do bourbon!❖ Não polui o HTML

Marcação extra no HTMLBootstrap

Marcação extra no HTMLFoundation

Sem Marcação extra no HTMLNEAT

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

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

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;

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}

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

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;

Organização

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

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

OrganizaçãoBitters

OrganizaçãoConvenções

OrganizaçãoConvenções

OrganizaçãoConvenções

Organização

HTML<body class="users users-index">

Flutie

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"> <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); }

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