Framework Layout

Containers

Container Fluid

Container 1440

Container 1024

Container 768

Container 414

Sections

Section Black

Section Slate Grey

Section Endpoint Blue

Section Turquoise

Section Mist

Section Pale Grey

Grid (A grid system based on the flex display property.)

Grid Column 12

6

6

4

4

4

3

3

3

3

2

2

2

2

2

2

1

1

1

1

1

1

1

1

1

1

1

1

Column 10

Column 2

9

3

8

4

7

5

6

6

5

7

4

8

3

9

2

10

1

11

Layout 2

Layout 8

Layout 2

Spacing

Margin Top

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: 8px; }

.mt-2 { margin-top: 24px; }

.mt-3 { margin-top: 100px; }

Margin Bottom

.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: 8px; }

.mb-2 { margin-bottom: 24px; }

.mb-3 { margin-bottom: 100px; }

Margin Left

.ml-0 { margin-left: 0; }

.ml-1 { margin-left: 8px; }

.ml-2 { margin-left: 24px; }

.ml-3 { margin-left: 100px; }

Margin Right

.mr-0 { margin-right: 0; }

.mr-1 { margin-right: 8px; }

.mr-2 { margin-right: 24px; }

.mr-3 { margin-right: 100px; }

Padding Top

.pt-0 { padding-top: 0; }

.pt-1 { padding-top: 8px; }

.pt-2 { padding-top: 24px; }

.pt-3 { padding-top: 100px; }

Padding Bottom

.pt-0 { padding-bottom: 0; }

.pt-1 { padding-bottom: 8px; }

.pt-2 { padding-bottom: 24px; }

.pt-3 { padding-bottom: 100px; }

Padding Left

.pt-0 { padding-left: 0; }

.pt-1 { padding-left: 8px; }

.pt-2 { padding-left: 24px; }

.pt-3 { padding-left: 100px; }

Padding Right

.pt-0 { padding-right: 0; }

.pt-1 { padding-right: 8px; }

.pt-2 { padding-right: 24px; }

.pt-3 { padding-right: 100px; }