Académique Documents
Professionnel Documents
Culture Documents
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
um boto 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 .grid-4 .box-uiui
" &: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
// 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
@diegoeis
@tableless
tableless.com.br
bit.ly/locawebstyle