CONSTRUINDO UM

FRAMEWORK CSS
DIEGO EIS

@diegoeis
@tableless
tableless.com.br

slideshare.net/diegoeis
bit.ly/locawebstyle
POR QUE USAR UM
FRAMEWORK?
PROTOTIPAO
A equipe pode simular o real para chegar a concluses mais
precisas.
PRODUTIVIDADE
Menos tempo montando wireframes, menos tempo desenhando
um layout, menos tempo codificando.
MANUTENO FCIL
Facilita a manuteno diminuindo o tempo de retrabalho.
PADRO PRA TUDO
Padroniza layout.
Padroniza comportamento.
Padroniza elementos.
Padroniza estrutura.
Padroniza cdigo.
CONTROLE
Um erro pode ser resolvido para todos os sistemas.
Uma atualizao afeta todos os projetos.
POR QUE NO USAR UM
FRAMEWORK?
HTML ENGESSADO
O HTML tem que ser bem pensado no incio.
LAYOUTS DIFERENTES
Fica muito difcil de manter se os layouts forem muito diferentes.
ATUALIZAO
FREQUENTE
E equipe precisa trabalhar no framework,
no nos projetos.
CURVA DE APRENDIZADO
Quando h algum novo na equipe, a curva de aprendizado no
pode ser longa.
POR QUE EXISTEM
OUTROS NO MERCADO
No reinvente a roda se voc no tem um problema especfico
para resolver.
PRINCPIOS PRTICOS
A estrutura de
arquivos inicial
 assets

javascripts stylesheets
 reset.css
fonts.css grids.css
base.css etc...
base etc... structure

buttons.css
collapse.css colors.css
sliders.css print.css
modules header.css layout etc...
etc...
//
// 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
COMPONENTES
Mdulos so como legos: plugando diversas peas voc forma
uma pea maior.
Mdulo
Mdulo
Mdulo
CSS INCREMENTAL
Customize elementos aplicando multiplas classes.
Um boto pode ter vrios tamanhos, cores ou posies.
 .btn .btn .btn .btn
.btn-large .btn-large .btn-large
.btn-primary .btn-primary
.ico-star

cuidado para no misturar informao com formatao.

EVITE TAGS EM SELETORES
Mantenha foco nas classes.
Um componente pode ser feito usando diferentes tags.
 .btn

Isso pode ser um:

link
input button
span
etc...
MINIMIZE SELETORES
Quem escreve seletor comprido faz xixi na cama.
 #main_container.menu_style.menu_orientation_horizontal #site_menu .wrapper ul li:last-child a {
! margin-right: 0;
! padding-right: 0;
! box-shadow: none;
}
SEPARE O CONTEDO DO
CONTAINER
O estilo do contedo no pode ser dependente do seu container.
Para isso, trate o container como um mdulo.
 .box-dark
Um ttulo 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. Fusce suscipit
mattis odio, vel scelerisque libero.
Donec et ligula eget augue porta
blandit sit amet vel dui.
um boto
.box-uiui
Um ttulo 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. Fusce suscipit
mattis odio, vel scelerisque libero.
Donec et ligula eget augue porta
blandit sit amet vel dui.
um boto
SEPARE A ESTRUTURA
DO LAYOUT
Voc pode ter a liberdade de estilizar a estrutura. O container
pode ser estruturado de vrias formas, com diferentes layouts.
 .grid-4 .box-dark
Um ttulo 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 boto
Um ttulo 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 boto
.grid-4 .box-uiui
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 boto
FONTS PARA CONES
Com 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 CDIGOS
ESPECIAIS
Os mixins te ajudam na repetio e na insero de cdigo
especiais. Como fazer setas, cdigo 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 verdana
font-weight: bolder
" color: #2a2a2a

" &:after
" @include arrow-down(#000, 5px)
" " margin: 0 0 0 5px
VARIVEIS
As variveis te ajudam a no perder o padro durante o projeto.
// GRID
// Adequando a largura mxima 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 cdigo aqui se houver

// Tablets e telas mdias

@media #{$medium-screens}
" // Seu cdigo aqui se houver

// Desktops
@media #{$big-screens}
" // Seu cdigo 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
variveis 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
NO TRAVE AS
DIMENSES
O grid controla a largura. O contedo controla a altura. No
trave essas dimenses a no ser que seja extremamente
necessrio.
 ALGUMAS
CONSIDERAES...
LEVE E RPIDO
Compilar e minificar seu CSS pode no ser o bastante. No tente
abraar 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 manuteno.
MODULAR
Possibilidade de combinar componentes para criar elementos de
layout.
TENHA POUCAS
DEPENDNCIAS
No saia colocando plugins e outras depndencias a no ser que
sejam teis para a maioria dos projetos que usaro o framework.
REGRA DA SIMILARIDADE
Se dois elementos so muito parecidos para estarem em uma
pgina, provavelmente eles so muito parecidos para serem
includos no framework.
Ento, escolha um.
MANTENHA UMA
DOCUMENTAO
ATUALIZADA
A documentao no importante apenas pra voc, mas para
outras equipes como UX e Back-end. Se o framework for pblico,
outros devs usaro tambm.
USE PR PROCESSADORES
COM CUIDADO
Pr processadores podem te ajudar em diversas tarefas, mas a
sopa de Mixins, Extends e variveis pode te fazer perder o
controle.
RESUMINDO: TUDO SE
TRATA DE OOCSS
CSS Orientado a Objeto no nada mais do que CSS escrito do
jeito certo.
ENTO, FECHOU!

A palestra vai ficar aqui:

slideshare.net/diegoeis

@diegoeis
@tableless
tableless.com.br

bit.ly/locawebstyle