CONSTRUINDO UMFRAMEWORK CSS

DIEGO EIS

slideshare.net/diegoeisbit.ly/locawebstyle

@diegoeis@tablelesstableless.com.br

POR QUE USAR UM FRAMEWORK?

PROTOTIPAÇÃOA equipe pode simular o real para chegar a conclusões mais precisas.

PRODUTIVIDADEMenos tempo montando wireframes, menos tempo desenhando um layout, menos tempo codificando.

MANUTENÇÃO FÁCILFacilita a manutenção diminuindo o tempo de retrabalho.

PADRÃO PRA TUDOPadroniza layout.Padroniza comportamento.Padroniza elementos.Padroniza estrutura.Padroniza código.

CONTROLEUm erro pode ser resolvido para todos os sistemas.Uma atualização afeta todos os projetos.

POR QUE NÃO USAR UM FRAMEWORK?

HTML ENGESSADOO HTML tem que ser bem pensado no início.

LAYOUTS DIFERENTESFica muito difícil de manter se os layouts forem muito diferentes.

ATUALIZAÇÃO FREQUENTEE equipe precisa trabalhar no framework, não nos projetos.

CURVA DE APRENDIZADOQuando há alguém novo na equipe, a curva de aprendizado não pode ser longa.

POR QUE EXISTEM OUTROS NO MERCADONão reinvente a roda se você não tem um problema específico para resolver.

PRINCÍPIOS PRÁTICOS

A estrutura de arquivos inicial

stylesheetsjavascripts

assets

colors.css

print.css

etc...layout

reset.css

fonts.css

base.css

etc...base

grids.css

etc...structure

buttons.css

collapse.css

sliders.css

header.css

etc...modules

//// Manifest//

@import “config”

@import “structure/grid”

@import “base/functional-classes”@import “base/reset”@import “base/mixins”@import “base/extends”@import “base/base”@import “base/fonts”@import “base/icons”@import “base/typography”

@import “modules/header”@import “modules/footer”@import “modules/sidebar”@import “modules/collapse”@import “modules/tabs”@import “modules/buttons”

@import “layout/colors/colors”

MODULARIZE COMPONENTESMódulos são como legos: plugando diversas peças você forma uma peça maior.

Módulo

Módulo

Módulo

CSS INCREMENTALCustomize elementos aplicando multiplas classes.Um botão pode ter vários tamanhos, cores ou posições.

.btn .btn

.btn-large

.btn

.btn-large

.btn-primary

.btn

.btn-large

.btn-primary

.ico-star

cuidado para não misturar informação com formatação.

EVITE TAGS EM SELETORESMantenha foco nas classes.Um componente pode ser feito usando diferentes tags.

Isso pode ser um:

• link

• input button

• span

• etc...

.btn

MINIMIZE SELETORESQuem escreve seletor comprido faz xixi na cama.

{! margin-right: 0;! padding-right: 0;! box-shadow: none;}

a#main_container.menu_style.menu_orientation_horizontal #site_menu .wrapper ul li:last-child

SEPARE O CONTEÚDO DO CONTAINERO estilo do conteúdo não pode ser dependente do seu container.Para isso, trate o container como um módulo.

Um título legalLorem ipsum dolor sit amet,

consectetur adipiscing elit. Sed

mauris erat, egestas sit amet

vestibulum quis, pulvinar in sem. Sed

elit leo, tincidunt at tempus quis,

gravida sit amet arcu. Fusce suscipit

mattis odio, vel scelerisque libero.

Donec et ligula eget augue porta

blandit sit amet vel dui.

um botão

Um título legalLorem ipsum dolor sit amet,

consectetur adipiscing elit. Sed

mauris erat, egestas sit amet

vestibulum quis, pulvinar in sem. Sed

elit leo, tincidunt at tempus quis,

gravida sit amet arcu. Fusce suscipit

mattis odio, vel scelerisque libero.

Donec et ligula eget augue porta

blandit sit amet vel dui.

um botão

.box-dark .box-uiui

SEPARE A ESTRUTURA DO LAYOUTVocê pode ter a liberdade de estilizar a estrutura. O container pode ser estruturado de várias formas, com diferentes layouts.

Um título legal

Lorem ipsum dolor sit

amet, consectetur

adipiscing elit. Sed mauris

erat, egestas sit amet

vestibulum quis, pulvinar in

sem. Sed elit leo, tincidunt

at tempus quis, gravida sit

amet arcu.

um botão

.grid-4 .box-dark

Rosinha, chuchu!

Lorem ipsum dolor sit amet,

consectetur adipiscing elit.

Sed mauris erat, egestas sit

amet vestibulum quis,

pulvinar in sem. Sed elit leo,

tincidunt at tempus quis,

gravida sit amet arcu. Sed

elit leo, tincidunt at tempus

quis, gravida sit amet arcu.

um botão

.grid-4 .box-uiui

Um título legal

Lorem ipsum dolor sit

amet, consectetur

adipiscing elit. Sed mauris

erat, egestas sit amet

vestibulum quis, pulvinar in

sem. Sed elit leo, tincidunt

at tempus quis, gravida sit

amet arcu.

um botão

FONTS PARA ÍCONESCom fonts você consegue aumentar o tamanho e consegue mudar a cor.

[class*="ico-"]:before {  display: inline-block;  font-family: font-icon;  speak: none;}

.ico-keyboard:before {content: "\22";}

.ico-split:before {content: "\23";}

.ico-up-dir:before {content: "\24";}

.ico-right-dir:before {content: "\25";}

icomoon.io

fontello.com

MIXINS PARA CÓDIGOS ESPECIAISOs mixins te ajudam na repetição e na inserção de código especiais. Como fazer setas, código de clearfix e etc.

// ARROWS// Cria setas.// $arrow-color define a cor da seta. $arrow-size define o tamanho da seta.@mixin arrow-structure  content: ""  display: inline-block  width: 0  height: 0

@mixin arrow-up($arrow-color, $arrow-size)  @include arrow-structure  border-left: $arrow-size solid transparent  border-right: $arrow-size solid transparent  border-bottom: $arrow-size solid $arrow-color

@mixin arrow-down($arrow-color, $arrow-size)  @include arrow-structure  border-left: $arrow-size solid transparent  border-right: $arrow-size solid transparent  border-top: $arrow-size solid $arrow-color

@mixin arrow-right($arrow-color, $arrow-size)  @include arrow-structure  border-top: $arrow-size solid transparent  border-bottom: $arrow-size solid transparent  border-left: $arrow-size solid $arrow-color

.title-dropdown" font: .81em verdanafont-weight: bolder

" color: #2a2a2a

" &:after" @include arrow-down(#000, 5px)

" " margin: 0 0 0 5px

VARIÁVEISAs variáveis te ajudam a não perder o padrão durante o projeto.

// GRID// Adequando a largura máxima para o GRID// Todo o resto é controlado pelo Bootstrap

$small-screens: "only screen and (max-width: 980px)"$medium-screens: "only screen and (min-width: 980px)"$big-screens: "only screen and (min-width: 1200px)"

// Smartphones e telas pequenas@media #{$small-screens}" // Seu código aqui se houver

// Tablets e telas médias@media #{$medium-screens}" // Seu código aqui se houver

// Desktops@media #{$big-screens}" // Seu código aqui se houver

// Para mobile (mobile first).header" border-bottom: 4px solid $gray1" background-color: $gray2

// Desktops@media #{$big-screens}

" .header" " border-top: 4px solid #bbb" " background-color: #FFF" " margin-bottom: 10px

variáveis com cores

//// Cor verde//$theme-color: ".color-green"

$color1: #8ecf00$color2: #00a272$color3: #519700$color4: #f8fcf0$color5: #163400

#{$theme-color}" a" " color: $color2

" .header" " background-color: $color1" " border-bottom-color: $color3

" " .menu" " " a" " " border-left-color: $color1

NÃO TRAVE AS DIMENSÕESO grid controla a largura. O conteúdo controla a altura. Não trave essas dimensões a não ser que seja extremamente necessário.

ALGUMAS CONSIDERAÇÕES...

LEVE E RÁPIDOCompilar e minificar seu CSS pode não ser o bastante. Não tente abraçar todos os browsers. Gracefull Degradation e Progressive Enhancement devem estar no seu sangue.

SIMPLES Simples de aprender.Simples de implementar em um projeto.Simples de atualizar.Simples de fazer manutenção.

MODULARPossibilidade de combinar componentes para criar elementos de layout.

TENHA POUCAS DEPENDÊNCIAS Não saia colocando plugins e outras depêndencias a não ser que sejam úteis para a maioria dos projetos que usarão o framework.

REGRA DA SIMILARIDADESe dois elementos são muito parecidos para estarem em uma página, provavelmente eles são muito parecidos para serem incluídos no framework. Então, escolha um.

MANTENHA UMA DOCUMENTAÇÃO ATUALIZADAA documentação não é importante apenas pra você, mas para outras equipes como UX e Back-end. Se o framework for público, outros devs usarão também.

USE PRÉ PROCESSADORES COM CUIDADOPré processadores podem te ajudar em diversas tarefas, mas a sopa de Mixins, Extends e variáveis pode te fazer perder o controle.

RESUMINDO: TUDO SE TRATA DE OOCSSCSS Orientado a Objeto não é nada mais do que CSS escrito do jeito certo.

ENTÃO, FECHOU!

A palestra vai ficar aqui:slideshare.net/diegoeis

@diegoeis@tablelesstableless.com.br

bit.ly/locawebstyle