Layout

NOTE

Additions needed to the design frame work

Fixed positions were deleted because of the elements not living on the page. Add these in again.

Margins need to be expanded for left right and bottom spacing.

Test a new spacing framework that relies on parent measurements to update easily in one place.

- Mobile grids
- Mobile Padding
- Mobile Margin
- Documentation
- Update Tag elements

structure / section

section

section content

structure / image

image parent

image child

alignment

section content

align left

section content

align center

section content

align right

percentage

width auto

height auto

width 1/1

width 1/2

width 1/2

width 2/3

width 1/3

width 1/3

width 1/3

width 1/3

width 1/4

width 1/4

width 1/4

width 1/4

width 1/5

width 1/5

width 1/5

width 1/5

width 1/5

max

max width all

screen size

screen width 100

screen width 50

screen height 100

screen height 50

flex

flex

horizontal

horizontal

horizontal

vertical

vertical

flex center

flex right

flex distribute

flex distribute

flex distribute

flex split

flex split

grid

grid

grid col

grid col

grid gap 0

grid gap 0

grid gap 1

grid gap 1

grid gap 2

grid gap 2

grid gap 3

grid gap 3

grid gap 4

grid gap 4

grid gap 5

grid gap 5

1 col

2 col

2 col

3 col

3 col

3 col

4 col

4 col

4 col

4 col

5 col

5 col

5 col

5 col

5 col

6 col

6 col

6 col

6 col

6 col

6 col

7 col

7 col

7 col

7 col

7 col

7 col

7 col

8 col

8 col

8 col

8 col

8 col

8 col

8 col

8 col

9 col

9 col

9 col

9 col

9 col

9 col

9 col

9 col

9 col

10 col

10 col

10 col

10 col

10 col

10 col

10 col

10 col

10 col

10 col

11 col

11 col

11 col

11 col

11 col

11 col

11 col

11 col

11 col

11 col

11 col

12 col

12 col

12 col

12 col

12 col

12 col

12 col

12 col

12 col

12 col

12 col

12 col

stack

stack 0

stack 1

stack 2

stack 3

stack 4

stack 5

padding

pad 0

pad 1

pad 2

pad 3

pad 4

pad 5

pad 5

pad 6

pad 7

pad 8

pad 9

pad 10

pad l 0

pad r 0

pad t 0

pad b 0

pad tb 0

pad lr 0

pad med 0

pad med .25

pad med .5

pad med .75

pad med 1

pad med 2

pad med 3

pad med 4

pad med 5

pad med l 0

pad med r 0

pad med t 0

pad med b 0

pad tb tb 0

pad med lr 0

margin

mgn 0

mgn 1

mgn 2

mgn 3

mgn 4

mgn 5

mgn 6

mgn 7

mgn 8

mgn 9

mgn 10

mgn l 0

mgn r 0

mgn t 0

mgn b 0

mgn b 1

mgn b 2

mgn b 3

mgn b 4

mgn b 5

mgn b 1

mgn b 2

mgn b 3

mgn b 4

mgn b 5

mgn r 1

mgn r 2

mgn r 3

mgn r 4

mgn r 5

visibility

Hide (hidden element)

Show

Show Flex

hide med (Tablet)

show md (Tablet)

hide sm (Mobile Landscape)

show sm (Mobile Landscape)

show xs (Mobile Portrait)

hide xs (Mobile Portrait)

position

abs

abs / top left

abs / mid left

abs / btm left

abs / top right

abs / mid right

abs / btm right

abs / top mid

abs / btm mid

rel

fix

fix screen parent (full screen)

fix / top left

fix / mid left

fix / btm left

fix

fix / mid top

fix / mid btm

fix / top right

fix -/mid right

fix / btm right