Slide 1

Slide 1 text

CONSTRUINDO UM FRAMEWORK CSS

Slide 2

Slide 2 text

DIEGO EIS slideshare.net/diegoeis bit.ly/locawebstyle @diegoeis @tableless tableless.com.br

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

POR QUE USAR UM FRAMEWORK?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

PRODUTIVIDADE Menos tempo montando wireframes, menos tempo desenhando um layout, menos tempo codificando.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

POR QUE NÃO USAR UM FRAMEWORK?

Slide 11

Slide 11 text

HTML ENGESSADO O HTML tem que ser bem pensado no início.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

PRINCÍPIOS PRÁTICOS

Slide 17

Slide 17 text

A estrutura de arquivos inicial

Slide 18

Slide 18 text

stylesheets javascripts assets

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

// // 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”

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Módulo

Slide 24

Slide 24 text

Módulo

Slide 25

Slide 25 text

Módulo

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

.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.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Isso pode ser um: • link • input button • span • etc... .btn

Slide 30

Slide 30 text

MINIMIZE SELETORES Quem escreve seletor comprido faz xixi na cama.

Slide 31

Slide 31 text

{ ! margin-right: 0; ! padding-right: 0; ! box-shadow: none; } a #main_container.menu_style.menu_orientation_horizontal #site_menu .wrapper ul li:last-child

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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. Fusce suscipit mattis odio, vel scelerisque libero. Donec et ligula eget augue porta blandit sit amet vel dui. um botão 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. 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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

[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";}

Slide 39

Slide 39 text

icomoon.io fontello.com

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

// 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

Slide 42

Slide 42 text

.title-dropdown " font: .81em verdana font-weight: bolder " color: #2a2a2a " &:after " @include arrow-down(#000, 5px) " " margin: 0 0 0 5px

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

// 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

Slide 45

Slide 45 text

// 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

Slide 46

Slide 46 text

variáveis com cores

Slide 47

Slide 47 text

// // Cor verde // $theme-color: ".color-green" $color1: #8ecf00 $color2: #00a272 $color3: #519700 $color4: #f8fcf0 $color5: #163400

Slide 48

Slide 48 text

#{$theme-color} " a " " color: $color2 " .header " " background-color: $color1 " " border-bottom-color: $color3 " " .menu " " " a " " " border-left-color: $color1

Slide 49

Slide 49 text

NÃO TRAVE AS DIMENSÕES O 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.

Slide 50

Slide 50 text

ALGUMAS CONSIDERAÇÕES...

Slide 51

Slide 51 text

LEVE E RÁPIDO Compilar 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.

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

MODULAR Possibilidade de combinar componentes para criar elementos de layout.

Slide 54

Slide 54 text

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.

Slide 55

Slide 55 text

REGRA DA SIMILARIDADE Se 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.

Slide 56

Slide 56 text

MANTENHA UMA DOCUMENTAÇÃO ATUALIZADA A 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.

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

ENTÃO, FECHOU! A palestra vai ficar aqui: slideshare.net/diegoeis @diegoeis @tableless tableless.com.br bit.ly/locawebstyle