smcss — a css for prototyping

Container

Container — is a place for elements.

The only responsibility of containers is to perform layout. They are expected to manage the following properties:

• position, top, left, right, bottom
• width, height
• margin, padding

Only containers are responsible for managing this properties.

Margin Group

Margin group — is a way to distribute space among immediate children. Technically, its a class on an element which will set margin-bottom (or margin-right) on each of its immediate children except the last one.

Block-level margin group mgN

Inline-level margin group miN

Block-level group (margin group)

xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
...................... - margin/padding
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
...................... - margin/padding
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
...................... - margin/padding
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx

Inline-level group (inline group)

xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx
xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx
xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx
xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx
          |          |          |
          margin     margin     margin
          padding    padding    padding

hsplit

A way to create layouts by splitting space horizontally or vertically (but not both).