organic
CSS
o que é?
Um framework baseaso em SASS que "trata" o
seu código utilizando o conceito de organismos
e átomos.
mas... porque?
"Os atomos são os blocos de construção básicos da matéria."
Teremos um nível hierarquico e uma organização ...
... e também ...
Pensar no código associando sua estrutura com algo
que já conhecemos faz com que nosso esforço cognitivo
...
como funciona?
Estrutura básica do framework
átomo
Uma simples propriedade com valor.
@include define-atom("block") {
display: block;
}
@include define-atom("font-fami...
molécula
Molécula é um elemento DOM que precisa de estilo
e não tem elementos filho ligados a ele.
@mixin header {
@includ...
organela
Uma organela necessariamente é um componente que contém
moléculas e atomos.
Nenhum estilo deve ser aplicado diret...
como organizar?
Existem casos onde um elemento necessita de átomos mas não é
uma molécula pelo fato de conter organelas.
N...
foca no css
E o resto?
Basta seguir a hierarquia: celula
→ tecido → órgão → Sistema
→ organismo.
Organic CSS funciona bem com
SMACSS e...
Organic CSS já contém um
repositório com átomos e
moléculas pré-definidos.
github.com/krasimir/organic-css
take it sleazy…
and i'm out!
Próximos SlideShares
Carregando em…5
×

Organic CSS

869 visualizações

Publicada em

Mini-Talk sobre OrganicCSS, framework baseado em SASS que trata e organiza folhas de estilos como organismos vivos.

Publicada em: Tecnologia

Organic CSS

  1. 1. organic CSS
  2. 2. o que é? Um framework baseaso em SASS que "trata" o seu código utilizando o conceito de organismos e átomos.
  3. 3. mas... porque? "Os atomos são os blocos de construção básicos da matéria." Teremos um nível hierarquico e uma organização muito próxima dos conceitos científicos na construção de uma matéria. No nosso caso, na construção de uma folha de estilo.
  4. 4. ... e também ... Pensar no código associando sua estrutura com algo que já conhecemos faz com que nosso esforço cognitivo para organizar e entender seja bem menor. Além de ser mais legal.
  5. 5. como funciona? Estrutura básica do framework
  6. 6. átomo Uma simples propriedade com valor. @include define-atom("block") { display: block; } @include define-atom("font-family") { font-family: Georgia; }
  7. 7. molécula Molécula é um elemento DOM que precisa de estilo e não tem elementos filho ligados a ele. @mixin header { @include atoms(( block, clearfix, font-family )); }
  8. 8. organela Uma organela necessariamente é um componente que contém moléculas e atomos. Nenhum estilo deve ser aplicado diretamente a ele. .header { @include header; @include header-title; @include header-column; @include header-column-link; @include header-title-small-text; }
  9. 9. como organizar? Existem casos onde um elemento necessita de átomos mas não é uma molécula pelo fato de conter organelas. Nesse caso...
  10. 10. foca no css
  11. 11. E o resto? Basta seguir a hierarquia: celula → tecido → órgão → Sistema → organismo. Organic CSS funciona bem com SMACSS e Atomic Design! É uma questão de escolha a forma que você vai abstrair o seu código.
  12. 12. Organic CSS já contém um repositório com átomos e moléculas pré-definidos. github.com/krasimir/organic-css
  13. 13. take it sleazy… and i'm out!

×