Tweet
Tweet

Slide 1

Slide 1 text

SMACSS Uma arquitetura escalável e modular para CSS

Slide 2

Slide 2 text

SMACSS NÃO É UM FRAMEWORK

Slide 3

Slide 3 text

5 Príncipios do SMACSS Categorizar Convenção de Nomenclatura Desacoplar Aumentar a Semântica Design Baseado em Estados

Slide 4

Slide 4 text

CATEGORIZAÇÃO Base Layout Module State Theme

Slide 5

Slide 5 text

CONVENÇÃO DE NOMENCLATURA .m-slide { text-align: center; } .l-signup .m-slide { float: left; } Esclareça sua intenção Prefix Modules All css modules start with prefix m-. Just the first class (container) of module. https://github.com/magnetis/styleguide/

Slide 6

Slide 6 text

DESACOPLAR .main-title { color: red; } .list { padding: 4px; } h1 { color: red; } ul { padding: 4px; }

Slide 7

Slide 7 text

SEMÂNTICA CSS .link { text-decoration: underline; } .button { padding: 2px; } .list { padding: 4px; } .list .item { display: inline-block; } HTML

Lorem

Slide 8

Slide 8 text

DESIGN BASEADO EM ESTADOS .is-active { color: blue; } .is-hidden { display: none; } .is-disabled { opacity: .5; }

Slide 9

Slide 9 text

seja você também! SMACSS é livre,

Slide 10

Slide 10 text

Obrigado! Randson Oliveira randsonjs.com http://randsonjs.com/blog/upgraded-my-blog-and-iam-using-smacss /randsonjs /randsonjs