Layout Spacing for Goldilocks CSS

Commentary

Typical Bootstrap type fine-grained margin and padding controls are complex and hard to keep track of. This type of spacing control also becomes harder to maintain when the UI undergoes changes.

In Goldilocks-CSS, we prefer to predefine simpler spacing controls. In general, all elements and components have no margin so that they can be positioned by parent layout blocks or components. Components, certain layout contols and certain elements may also provide their own padding for their children items.

White space can be provided with optional spacing controls. The spacing is vertical only, horizontal only or both vertical and horizontal. Spacing margins are normal (set by variable --base-font-size. Normal is 1x --base-font-size. Medium is 2x and large is 5x.

Usage

Classes:
`.space-element`, `.space-block`, `.space-collection`, `.space-container`	Provides default horizontal and vertical margins of 1, 2, 4 or 5 times base font size
`.space-element-horz`, `.space-block-horz`, `.space-collection-horz`, `.space-container-horz`	Provides default zero vertical margins and horizontal margins of 1, 2, 4 or 5 times base font size
`.space-element-vert`, `.space-block-vert`, `.space-collection-vert`, `.space-container-vert`	Provides default zero horizontal margins and vertical margins of 1, 2, 4 or 5 times base font size
`.space-items`, `.space-items-medium`, `.space-items-large`	Provides default zero horizontal margins and vertical margins of 1, 2 or 5 times base font size. These also sets an element height of 1px. Typically, used with a `div` HTML tag to create a spacer.

Dependencies:
File:	spacing.css
Variables:	--space-element, --space-block, --space-collection, --space-container

Examples

Component / Element Spacing

.space-element Lorem Ipsum 1 ...

.space-block Lorem Ipsum 2 ...

.space-block-vert Lorem Ipsum 3 ...

.space-container Lorem Ipsum 3 ...


                <div class="space-element">
                    <section class="box-shadow">
                        <h4>.space-element Lorem Ipsum 1 ... </h4>
                    </section>
                </div>

                <div class="space-block">
                    <section class="box-shadow">
                        <h4>.space-block Lorem Ipsum 2 ...</h4>
                    </section>
                </div>

                <div class="space-block-vert">
                    <section class="box-shadow">
                        <h4>.space-block-vert Lorem Ipsum 2 ...</h4>
                    </section>
                </div>

                <div class="space-container">
                    <section class="box-shadow">
                        <h4>.space-container Lorem Ipsum 3 ...</h4>
                    </section>
                </div>

Inter-Component Spacing


                <div class="space-items"></div>

                <div class="space-items-medium"></div>

                <div class="space-items-large"></div>