Upload
murilo-prestes
View
847
Download
0
Embed Size (px)
Citation preview
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 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.
... 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.
como funciona?Estrutura básica do framework
átomoUma simples propriedade com valor.
@include define-atom("block") {
display: block;
}
@include define-atom("font-family") {
font-family: Georgia;
}
moléculaMolé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
));
}
organelaUma 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;
}
como organizar?Existem casos onde um elemento necessita de átomos mas não é
uma molécula pelo fato de conter organelas.
Nesse caso...
foca no css
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.
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!