HTML, CSS e JQuery Wendell Silva Soares. Sumário HTML CSS JQuery Referências.
Construindo seu framework CSS
-
Upload
diego-eis -
Category
Technology
-
view
17.389 -
download
2
description
Transcript of Construindo seu framework CSS
![Page 1: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/1.jpg)
CONSTRUINDO UMFRAMEWORK CSS
![Page 3: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/3.jpg)
![Page 4: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/4.jpg)
POR QUE USAR UM FRAMEWORK?
![Page 5: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/5.jpg)
PROTOTIPAÇÃOA equipe pode simular o real para chegar a conclusões mais precisas.
![Page 6: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/6.jpg)
PRODUTIVIDADEMenos tempo montando wireframes, menos tempo desenhando um layout, menos tempo codificando.
![Page 7: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/7.jpg)
MANUTENÇÃO FÁCILFacilita a manutenção diminuindo o tempo de retrabalho.
![Page 8: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/8.jpg)
PADRÃO PRA TUDOPadroniza layout.Padroniza comportamento.Padroniza elementos.Padroniza estrutura.Padroniza código.
![Page 9: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/9.jpg)
CONTROLEUm erro pode ser resolvido para todos os sistemas.Uma atualização afeta todos os projetos.
![Page 10: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/10.jpg)
POR QUE NÃO USAR UM FRAMEWORK?
![Page 11: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/11.jpg)
HTML ENGESSADOO HTML tem que ser bem pensado no início.
![Page 12: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/12.jpg)
LAYOUTS DIFERENTESFica muito difícil de manter se os layouts forem muito diferentes.
![Page 13: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/13.jpg)
ATUALIZAÇÃO FREQUENTEE equipe precisa trabalhar no framework, não nos projetos.
![Page 14: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/14.jpg)
CURVA DE APRENDIZADOQuando há alguém novo na equipe, a curva de aprendizado não pode ser longa.
![Page 15: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/15.jpg)
POR QUE EXISTEM OUTROS NO MERCADONão reinvente a roda se você não tem um problema específico para resolver.
![Page 16: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/16.jpg)
PRINCÍPIOS PRÁTICOS
![Page 17: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/17.jpg)
A estrutura de arquivos inicial
![Page 18: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/18.jpg)
stylesheetsjavascripts
assets
![Page 19: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/19.jpg)
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
![Page 20: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/20.jpg)
//// 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”
![Page 21: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/21.jpg)
MODULARIZE COMPONENTESMódulos são como legos: plugando diversas peças você forma uma peça maior.
![Page 22: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/22.jpg)
![Page 23: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/23.jpg)
Módulo
![Page 24: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/24.jpg)
Módulo
![Page 25: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/25.jpg)
Módulo
![Page 26: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/26.jpg)
CSS INCREMENTALCustomize elementos aplicando multiplas classes.Um botão pode ter vários tamanhos, cores ou posições.
![Page 27: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/27.jpg)
.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.
![Page 28: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/28.jpg)
EVITE TAGS EM SELETORESMantenha foco nas classes.Um componente pode ser feito usando diferentes tags.
![Page 29: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/29.jpg)
Isso pode ser um:
• link
• input button
• span
• etc...
.btn
![Page 30: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/30.jpg)
MINIMIZE SELETORESQuem escreve seletor comprido faz xixi na cama.
![Page 31: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/31.jpg)
{! margin-right: 0;! padding-right: 0;! box-shadow: none;}
a#main_container.menu_style.menu_orientation_horizontal #site_menu .wrapper ul li:last-child
![Page 32: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/32.jpg)
![Page 33: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/33.jpg)
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.
![Page 34: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/34.jpg)
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
![Page 35: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/35.jpg)
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.
![Page 36: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/36.jpg)
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
![Page 37: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/37.jpg)
FONTS PARA ÍCONESCom fonts você consegue aumentar o tamanho e consegue mudar a cor.
![Page 38: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/38.jpg)
[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";}
![Page 39: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/39.jpg)
icomoon.io
fontello.com
![Page 40: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/40.jpg)
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.
![Page 41: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/41.jpg)
// 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
![Page 42: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/42.jpg)
.title-dropdown" font: .81em verdanafont-weight: bolder
" color: #2a2a2a
" &:after" @include arrow-down(#000, 5px)
" " margin: 0 0 0 5px
![Page 43: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/43.jpg)
VARIÁVEISAs variáveis te ajudam a não perder o padrão durante o projeto.
![Page 44: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/44.jpg)
// 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
![Page 45: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/45.jpg)
// 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
![Page 46: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/46.jpg)
variáveis com cores
![Page 47: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/47.jpg)
//// Cor verde//$theme-color: ".color-green"
$color1: #8ecf00$color2: #00a272$color3: #519700$color4: #f8fcf0$color5: #163400
![Page 48: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/48.jpg)
#{$theme-color}" a" " color: $color2
" .header" " background-color: $color1" " border-bottom-color: $color3
" " .menu" " " a" " " border-left-color: $color1
![Page 49: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/49.jpg)
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.
![Page 50: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/50.jpg)
ALGUMAS CONSIDERAÇÕES...
![Page 51: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/51.jpg)
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.
![Page 52: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/52.jpg)
SIMPLES Simples de aprender.Simples de implementar em um projeto.Simples de atualizar.Simples de fazer manutenção.
![Page 53: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/53.jpg)
MODULARPossibilidade de combinar componentes para criar elementos de layout.
![Page 54: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/54.jpg)
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.
![Page 55: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/55.jpg)
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.
![Page 56: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/56.jpg)
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.
![Page 57: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/57.jpg)
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.
![Page 58: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/58.jpg)
RESUMINDO: TUDO SE TRATA DE OOCSSCSS Orientado a Objeto não é nada mais do que CSS escrito do jeito certo.
![Page 59: Construindo seu framework CSS](https://reader033.fdocumentos.com/reader033/viewer/2022051515/553943384a7959f66c8b492f/html5/thumbnails/59.jpg)
ENTÃO, FECHOU!
A palestra vai ficar aqui:slideshare.net/diegoeis
bit.ly/locawebstyle