A responsive atomic css inspired framework
The spacing system in ajcss is based on atomic css principles. One should be able to position the majority of elements without having to write custom css.
The simplest way to think of this property is by thinking of a balloon with a force field around it. Margin increases the strength of the force field, while padding makes the balloon larger. Applying padding to an element makes it expand, while applying margin to an element pushes other elements away.
There is a simple shorthand for remembering the way padding and margin work in ajcss. Let's use an example: pt4.
The "p" part of this class name stands for padding. The "t" part of this class name tells you where it is going to be applied (top) and the "4" part of it is the strength.
The list of potential modifiers for the first part is just p and m, for padding and margin.
The list of potential modifiers for the second part is r, l, t, b, v, and h. Right, left, top, and bottom probably make sense by now, but what is this v and h? V stands for vertical, and it means having spacing on both top and bottom, and h stands for horizontal, which means having spacing on right and left. A third modifier is to have nothing at all, for example p3. No modifier for the second means that the spacing will be applied to all sides.
The third modifier is simply the numbers 1-5.
Some text padded from the left
Some text margin from the left
Some text padded on all sides
This shouldn't be to hard to understand. It can be quite powerful when paired with other parts of ajcss.