oCSSorganic cascade style sheet

It's SASS based CSS preprocessor

It's open source GitHub repository

Micro framework following atomic design.

Atoms

As Brad Frost said "Atoms are the basic building blocks of matter".In the context of OrganicCSS the atom is simply a property and its value.

Example of an atom

font-size: 20px;

Definition

There is mixin which helps during the process. It actually registers a placeholder with the given name. Sure, you can do that manually, but the idea is to remember you (and your team mates) that this is an atom.

@include define-atom("block") {
    display: block;
}
@include define-atom("font-family") {
    font-family: Georgia;
}

Using atoms

There is again a mixin for that.

.login-box {
    @include atoms((
        block,
        font-family
    ));
}

Available atoms

The main idea of OrganicCSS is to provide the atoms. Very often what you build with them will be different. But the atoms are so generic and you can transfer them from project to project. A full list could be seen here.

Molecules

Molecule is a DOM element which needs styling, but doesn't have children. Or if it has children they are not directly connected to it. For example
<img src="logo.jpg" /> could be a molecule. If you find difficult to recognize the molecules in your page, just thing of what is build by atoms. If some element is build by other molecules it is probably an organel.

Definition

@mixin header {
    @include atoms((
        block,
        clearfix,
        font-family
    ));
}

And remember, the molecule should be build only by atoms.

Using molecules

.header {
    @include header;
    @include header-title;
    @include header-column;
    @include header-column-link;
    @include header-title-small-text;
}

Simply include the mixins. The thing which uses molecules is the organel.

Organelles

Once you recognize which DOM elements are molecules you will see what organelles are. For example the typical <form> element is a great example of organel. It contains molecules like label, input or textarea.

Definition and usage

.header {
    @include header;
    @include header-title;
    @include header-column;
    @include header-column-link;
    @include header-title-small-text;
}
The definition of organelles is actually writing selectors and including molecules (mixins). You should not apply any css rules directly here. That's what atoms and molecules for.

More abstractions

It's a matter of choice how you will continue abstracting your CSS.

The next thing after the organelle is a cell. So, it is normal to say that something which contains organelles is a cell. This could be the <body> tag or a <div> element. Sure, you can use the following hierarchy Atom → Molecule → Organelle → Cell → Tissue → Organ → Sys → Organism, but you may have more then 8 nested blocks. Also there are elements which need CSS styling happening via atoms, but they are not molecules. Like for example your main container. It is obvious that it is not a molecule, because it contains probably organelles. To simplify the things I decided to forget about the HTML markup and look only the stylesheets. If something needs atoms and nothing else then it is a molecule. If I need to put an organelle inside it, then it is a cell and so on.