• smcssv1.2.0

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

-
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8
mg5
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8
mg10
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8
mg15
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8

Inline-level margin group miN

-
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8
mi5
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8
mi10
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8
mi15
child 1
child 2
child 3
child 4
child 5
child 6
child 7
child 8

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).