Organic CSS

815 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
2 comentários
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
815
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
5
Comentários
2
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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!

×