rails front-end com bourbon e sua familia @ front in maceió 2014
Post on 08-Jul-2015
314 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
top related