mdgriffith commented 7 years ago

Spacing

The spacing attribute sets the spacing between all child elements (using the margin property). A child can't set it's own margin, though I'm interested in exploring cases where this might be required.

The ultimate design goal is similar to this system.

TextLayout

This is the name for the standard "block" layout we're all familiar with. In this library it's the only layout that allows floats and inline elements, as those are both text constructs that shouldn't be used for more complicated layout.

Floats

Floats are useful only in the context of floating an element so that text can flow around it. Floats also partially ignore the spacing set by the parent. For example:

Style.floatLeft ignores spacing given on the left so that it lines up with the edge of the page.

Inline

Style.inline is meant only for literal inline elements in text. inline actually renders as inline-block, it ignores all spacing, and is only allowed in a textLayout.

Flexbox

Flexbox parent attributes are captured as flowDirection style functions.

Style.flowRight
    { wrap = True
    , horizontal = center
    , vertical = alignBottom
    }

Grid Layout

To be designed!

mpizenberg commented 7 years ago

Mozilla Tech made few really intersting announcements recently including one about CSS Grid. You can see the video on their youtube account. An article on MDN has also been published. It seemed to be worth mentioning here.