├── .gitignore ├── .npmrc ├── assets ├── images │ ├── flower.png │ └── topography.svg └── style.css ├── 04 - CSS Grid Dev Tools ├── Line Meanings.png ├── dev-tools-START.html └── dev-tools-FINISHED.html ├── 20 - CSS Grid Image Gallery ├── images │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── image-gallery-START.html └── image-gallery-FINISHED.html ├── 24 - Responisve Website ├── images │ ├── taco.jpg │ └── queso-taco.png ├── responsive-START.css ├── responsive-START.html ├── responsive-FINISHED.html └── responsive-FINISHED.css ├── 03 - CSS Grid Fundamentals ├── css-grid-fundamentals-START.html └── css-grid-fundamentals-FINISHED.html ├── 09 - Sizing Grid Items ├── sizing-items-START.html └── sizing-items-FINISHED.html ├── 02 - Starter Files and Tooling Setup └── test-START.html ├── 22 - Recreating Codepen ├── style-START.css ├── style-FINISHED.css ├── codepen-START.html └── codepen-FINISHED.html ├── 06 - CSS grid-auto-flow Explained ├── autoflow-START.html └── autoflow-FINISHED.html ├── 05 - CSS Grid Implicit vs Explicit Tracks ├── implicit-vs-explicit-START.html └── implicit-vs-explicit-FINISHED.html ├── 23 - Bootstrappy Grid with CSS Variables ├── grid-START.html └── grid-FINISHED.html ├── 21 - Flexbox vs CSS Grid ├── perfectly-centered-START.html ├── stacked-layout-START.html ├── unknown-content-size-START.html ├── stacked-layout-FINISHED.html ├── flex-on-item-START.html ├── unknown-number-of-items-START.html ├── perfectly-centered-FINISHED.html ├── variable-widths-each-row-START.html ├── self-control-START.html ├── unknown-content-size-FINISHED.html ├── variable-widths-each-row-FINISHED.html ├── unknown-number-of-items-FINISHED.html ├── axis-flipping-START.html ├── flex-on-item-FINISHED.html ├── self-control-FINISHED.html ├── axis-flipping-FINISHED.html ├── controls-on-right-START.html └── controls-on-right-FINISHED.html ├── 18 - Re-ordering Grid Items ├── order-START.html └── order-FINISH.html ├── 13 - Using minmax() for Responsive Grids ├── minmax-START.html └── minmax-FINISHED.html ├── package.json ├── 12 - auto-fit and auto-fill ├── auto-fit-and-auto-fill-FINISHED.html └── auto-fit-and-auto-fill-START.html ├── 14 - Grid Template Areas ├── areas-START.html ├── areas-FINISHED.html ├── area-line-names-START.html └── area-line-names-FINISHED.html ├── 08 - CSS Grid repeat function ├── repeat-START.html └── repeat-FINISHED.html ├── 07 - Sizing tracks in CSS Grid ├── sizing-tracks-START.html └── sizing-tracks-FINISHED.html ├── 17 - CSS Grid Alignment + Centering ├── alignment-and-centering-FINISHED.html └── alignment-and-centering-START.html ├── 10 - Placing Grid Items ├── placing-START.html └── placing-FINISHED.html ├── 15 - Naming Lines in CSS Grid ├── naming-lines-START.html └── naming-lines-FINISHED.html ├── 11 - Spanning and Placing Cardio ├── get-sweaty-START.html └── get-sweaty-FINISHED.html ├── 16 - grid-auto-flow dense Block Fitting ├── dense-START.html └── dense-FINISHED.html ├── readme.md ├── 19 - Nesting Grid with Album Layouts ├── albums-START.html └── albums-FINISHED.html └── 25 - Full Bleed Blog Layout ├── full-bleed-blog-START.html └── full-bleed-blog-FINISHED.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | haters -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | fund=false 2 | audit=false 3 | legacy-peer-deps=true 4 | -------------------------------------------------------------------------------- /assets/images/flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/assets/images/flower.png -------------------------------------------------------------------------------- /04 - CSS Grid Dev Tools/Line Meanings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/04 - CSS Grid Dev Tools/Line Meanings.png -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/1.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/10.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/11.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/12.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/2.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/3.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/4.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/5.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/6.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/7.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/8.jpg -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/20 - CSS Grid Image Gallery/images/9.jpg -------------------------------------------------------------------------------- /24 - Responisve Website/images/taco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/24 - Responisve Website/images/taco.jpg -------------------------------------------------------------------------------- /24 - Responisve Website/images/queso-taco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/css-grid/HEAD/24 - Responisve Website/images/queso-taco.png -------------------------------------------------------------------------------- /24 - Responisve Website/responsive-START.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 15px; 3 | } 4 | 5 | button { 6 | background: #ffc600; 7 | border: 0; 8 | padding: 10px 20px; 9 | } 10 | 11 | img { 12 | max-width: 100%; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /03 - CSS Grid Fundamentals/css-grid-fundamentals-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Fundamentals! 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09 - Sizing Grid Items/sizing-items-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sizing Grid Items! 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /02 - Starter Files and Tooling Setup/test-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Starter Files and Tooling Setup! 9 | 10 | 11 | 18 | 19 | 20 |

Hello!

21 | 22 | 23 | -------------------------------------------------------------------------------- /22 - Recreating Codepen/style-START.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, 4 | Sans-Serif; 5 | font-weight: normal; 6 | color: #272727; 7 | text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); 8 | } 9 | 10 | *, 11 | *:before, 12 | *:after { 13 | box-sizing: inherit; 14 | } 15 | 16 | body { 17 | margin: 0; 18 | } 19 | 20 | iframe { 21 | width: 100%; 22 | height: 100%; 23 | } 24 | 25 | h1, 26 | h2, 27 | h3, 28 | h4, 29 | h5, 30 | h6 { 31 | font-weight: normal; 32 | margin: 0; 33 | font-size: 1.5em; 34 | } 35 | -------------------------------------------------------------------------------- /06 - CSS grid-auto-flow Explained/autoflow-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS grid-auto-flow Explained! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
16 | 17 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Implicit vs Explicit Grid Tracks! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
18 | 19 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /23 - Bootstrappy Grid with CSS Variables/grid-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bootstrappy Grid with CSS Variables! 9 | 10 | 11 | 12 | 13 | 14 |
15 |
1
16 |
2
17 |
3
18 |
4
19 |
20 | 21 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/perfectly-centered-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Perfectly Centered! 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Something Big Is Coming

16 |

Get Ready...

17 |
18 | 19 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /18 - Re-ordering Grid Items/order-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Re-ordering Grid Items! 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 |

I'm the Content!

17 |
18 |
19 | 20 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/stacked-layout-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Stacked Layout! 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
20 | 21 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/unknown-content-size-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Unknown Content Size! 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
Short
17 |
Longerrrrrr
18 |
19 | 20 |
21 |
💩
22 |
23 | 24 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /04 - CSS Grid Dev Tools/dev-tools-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Dev Tools! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
24 | 25 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /13 - Using minmax() for Responsive Grids/minmax-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Using minmax() for Responsive Grids! 9 | 10 | 11 | 12 |
13 |
Item 01
14 |
Bonjour!
15 |
Item 03
16 |
Item 04
17 |
18 | 19 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-grid", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "run-script-os", 8 | "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"", 9 | "//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition", 10 | "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "browser-sync": "^2.26.13", 16 | "run-script-os": "^1.1.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/stacked-layout-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Stacked Layout! 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
20 | 21 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /12 - auto-fit and auto-fill/auto-fit-and-auto-fill-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | auto-fit and auto-fill! 9 | 10 | 11 | 12 |
13 |
Item 01
14 |
Item 02
15 |
Item 03
16 |
Item 04
17 |
18 | 19 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/flex-on-item-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Flex on Item! 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 |
21 | 22 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/unknown-number-of-items-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Unknown Number of Items! 9 | 10 | 11 | 12 | 13 | 19 | 20 |
21 |
1
22 |
2
23 |
3
24 |
25 | 26 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /04 - CSS Grid Dev Tools/dev-tools-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Dev Tools! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
24 | 25 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/perfectly-centered-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Perfectly Centered! 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Something Big Is Coming

16 |

Get Ready...

17 |
18 | 19 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /13 - Using minmax() for Responsive Grids/minmax-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Using minmax() for Responsive Grids! 9 | 10 | 11 | 12 |
13 |
Item 01
14 |
Bonjour!
15 |
Item 03
16 |
Item 04
17 |
18 | 19 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /14 - Grid Template Areas/areas-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Template Areas 9 | 10 | 11 | 12 |
13 |
14 |

I'm Sidebar #1

15 |
16 |
17 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.

18 |

Lorem ipsum d

19 |
20 |
21 |

I'm Sidebar #2

22 |
23 | 26 |
27 | 28 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/variable-widths-each-row-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Variable Widths on Each Row! 9 | 10 | 11 | 12 |
13 |
Short
14 |
Longerrrrrrrrrrrrrr
15 |
💩
16 |
This is Many Words
17 |
Lorem, ipsum.
18 |
10
19 |
Snickers
20 |
Wes Is Cool
21 |
Short
22 |
23 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/self-control-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Self Control! 9 | 10 | 11 | 12 | 13 | 14 |
15 |
1
16 |
TWO
17 |
3
18 |
4
19 |
20 | 21 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /03 - CSS Grid Fundamentals/css-grid-fundamentals-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Fundamentals! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
24 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/unknown-content-size-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Unknown Content Size! 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
Short
17 |
Longerrrrrr
18 |
19 | 20 |
21 |
💩
22 |
23 | 24 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /18 - Re-ordering Grid Items/order-FINISH.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Re-ordering Grid Items! 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 |

I'm the Content!

17 |
18 |
19 | 20 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /05 - CSS Grid Implicit vs Explicit Tracks/implicit-vs-explicit-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Implicit vs Explicit Grid Tracks! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
22 | 23 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/variable-widths-each-row-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Variable Widths on Each Row! 9 | 10 | 11 | 12 |
13 |
Short
14 |
Longerrrrrrrrrrrrrr
15 |
💩
16 |
This is Many Words
17 |
Lorem, ipsum.
18 |
10
19 |
Snickers
20 |
Wes Is Cool
21 |
Short
22 |
23 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/unknown-number-of-items-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Unknown Number of Items! 9 | 10 | 11 | 12 | 13 | 19 | 20 |
21 |
1
22 |
2
23 |
3
24 |
25 | 26 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /08 - CSS Grid repeat function/repeat-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid repeat Function! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
29 | 30 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /07 - Sizing tracks in CSS Grid/sizing-tracks-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sizing Tracks in CSS Grid! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
29 | 30 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/axis-flipping-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Axis Flipping! 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 |
24 |
1
25 |
2
26 |
3
27 |
4
28 |
5
29 |
6
30 |
7
31 |
8
32 |
9
33 |
10
34 | 35 |
36 | 37 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/flex-on-item-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Flex on Item! 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 |
21 | 22 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /08 - CSS Grid repeat function/repeat-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid repeat Function! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
29 | 30 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /06 - CSS grid-auto-flow Explained/autoflow-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS grid-auto-flow Explained! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
3
17 |
3
18 |
3
19 |
3
20 |
3
21 |
3
22 |
3
23 |
3
24 |
3
25 |
3
26 |
3
27 |
28 | 29 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/self-control-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Self Control! 9 | 10 | 11 | 12 | 13 | 14 |
15 |
1
16 |
TWO
17 |
3
18 |
4
19 |
20 | 21 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /23 - Bootstrappy Grid with CSS Variables/grid-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bootstrappy Grid with CSS Variables! 9 | 10 | 11 | 12 | 13 | 14 |
15 |
1
16 |
17 | 18 |
19 |
1
20 |
2
21 |
22 | 23 |
24 |
3
25 |
4
26 |
27 | 28 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /07 - Sizing tracks in CSS Grid/sizing-tracks-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sizing Tracks in CSS Grid! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
Wes Bos Is Cool
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/axis-flipping-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Axis Flipping! 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 |
23 |
1
24 |
2
25 |
3
26 |
4
27 |
5
28 |
6
29 |
7
30 |
8
31 |
9
32 |
10
33 | 34 |
35 | 36 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /12 - auto-fit and auto-fill/auto-fit-and-auto-fill-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | auto-fit and auto-fill! 9 | 10 | 11 | 12 |
13 |
Item 01
14 |
Item 02
15 |
Item 03
16 |
Item 04
17 |
Item 05
18 |
Item 06
19 |
Item 07
20 |
Item 08
21 |
Item 09
22 |
Item 10
23 |
Item 11
24 |
Item 12
25 |
Item 13
26 |
Item 14
27 |
Item 15
28 |
Item 16
29 |
Item 17
30 |
Item 18
31 |
Item 19
32 |
Item 20
33 |
34 | 35 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /17 - CSS Grid Alignment + Centering/alignment-and-centering-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Alignment + Centering! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
Wes Is Cool
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
24 | 25 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/image-gallery-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Image Gallery! 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 22 | 23 | 24 | 83 | 84 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /14 - Grid Template Areas/areas-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Template Areas 9 | 10 | 11 | 12 |
13 |
14 |

I'm Sidebar #1

15 |
16 |
17 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.

18 |

Lorem ipsum d

19 |
20 |
21 |

I'm Sidebar #2

22 |
23 | 26 |
27 | 28 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /14 - Grid Template Areas/area-line-names-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Template Areas: Line Names from Grid Areas! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
16
29 |
17
30 |
18
31 |
19
32 |
20
33 |
21
34 |
22
35 |
23
36 |
24
37 |
25
38 |
26
39 |
27
40 |
28
41 |
29
42 |
30
43 |
44 | 45 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/controls-on-right-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Controls on Right! 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

The Future (Ft. The R.O.C.)

18 | 19 | 20 | 21 |
22 |
23 |

Bounce With Me (Ft. Jermaine Dupri & Xscape)

24 | 25 | 26 | 27 |
28 |
29 |

Puppy Love (Ft. Jagged Edge & Jermaine Dupri)

30 | 31 | 32 | 33 |
34 |
35 |

You Know Me (Ft. Da Brat & Jermaine Dupri)

36 | 37 | 38 | 39 |
40 |
41 |

The Dog in Me

42 | 43 | 44 | 45 |
46 |
47 |

Bow Wow (That's My Name) (Ft. Snoop Dogg)

48 | 49 | 50 | 51 |
52 |
53 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /10 - Placing Grid Items/placing-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Placing Grid Items! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
💩
22 |
9
23 |
10
24 |
11
25 |
12
26 |
13
27 |
14
28 |
15
29 |
16
30 |
17
31 |
18
32 |
19
33 |
20
34 |
21
35 |
22
36 |
23
37 |
24
38 |
25
39 |
26
40 |
27
41 |
28
42 |
29
43 |
30
44 |
45 | 46 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /15 - Naming Lines in CSS Grid/naming-lines-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Naming Lines in CSS Grid! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
16
29 |
17
30 |
18
31 |
19
32 |
20
33 |
21
34 |
22
35 |
23
36 |
24
37 |
25
38 |
26
39 |
27
40 |
28
41 |
29
42 |
30
43 |
44 | 45 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /21 - Flexbox vs CSS Grid/controls-on-right-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox vs CSS Grid: Controls on Right! 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

The Future (Ft. The R.O.C.)

18 | 19 | 20 | 21 |
22 |
23 |

Bounce With Me (Ft. Jermaine Dupri & Xscape)

24 | 25 | 26 | 27 |
28 |
29 |

Puppy Love (Ft. Jagged Edge & Jermaine Dupri)

30 | 31 | 32 | 33 |
34 |
35 |

You Know Me (Ft. Da Brat & Jermaine Dupri)

36 | 37 | 38 | 39 |
40 |
41 |

The Dog in Me

42 | 43 | 44 | 45 |
46 |
47 |

Bow Wow (That's My Name) (Ft. Snoop Dogg)

48 | 49 | 50 | 51 |
52 |
53 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /assets/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Oh Hello! 3 | 4 | These are some base styles so that our tutorial looks good. 5 | 6 | Let's go through the important bits real quick 7 | */ 8 | :root { 9 | --yellow: #ffc600; 10 | --black: #272727; 11 | } 12 | 13 | html { 14 | /* border-box box model allows us to add padding and border to our elements without increasing their size */ 15 | box-sizing: border-box; 16 | /* A system font stack so things load nice and quick! */ 17 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, 18 | Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 19 | font-weight: 900; 20 | font-size: 10px; 21 | color: var(--black); 22 | text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); 23 | } 24 | 25 | /* 26 | WAT IS THIS?! 27 | We inherit box-sizing: border-box; from our selector 28 | Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector 29 | */ 30 | *, 31 | *:before, 32 | *:after { 33 | box-sizing: inherit; 34 | } 35 | 36 | body { 37 | background-image: url("./images/topography.svg"), 38 | linear-gradient(110deg, #f93d66, #6d47d9); 39 | background-size: 340px, auto; 40 | min-height: calc(100vh - 100px); 41 | margin: 50px; 42 | /* background: white; */ 43 | background-attachment: fixed; 44 | letter-spacing: -1px; 45 | } 46 | 47 | h1, 48 | h2, 49 | h3, 50 | h4, 51 | h5, 52 | h6 { 53 | margin: 0 0 5px 0; 54 | } 55 | /* Each item in our grid will contain numbers */ 56 | .item { 57 | /* We center the contents of these items. You can also do this with flexbox too! */ 58 | display: grid; 59 | justify-content: center; 60 | align-items: center; 61 | border: 5px solid rgba(0, 0, 0, 0.03); 62 | border-radius: 3px; 63 | font-size: 35px; 64 | background-color: var(--yellow); /* best colour */ 65 | } 66 | 67 | .item p { 68 | margin: 0 0 5px 0; 69 | } 70 | -------------------------------------------------------------------------------- /09 - Sizing Grid Items/sizing-items-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sizing Grid Items! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
💩
22 |
9
23 |
10
24 |
11
25 |
12
26 |
13
27 |
14
28 |
15
29 |
16
30 |
17
31 |
18
32 |
19
33 |
20
34 |
21
35 |
22
36 |
23
37 |
24
38 |
25
39 |
26
40 |
27
41 |
28
42 |
29
43 |
30
44 |
45 | 46 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /10 - Placing Grid Items/placing-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Placing Grid Items! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
💩
22 |
9
23 |
10
24 |
11
25 |
12
26 |
13
27 |
14
28 |
15
29 |
16
30 |
17
31 |
18
32 |
19
33 |
20
34 |
21
35 |
22
36 |
23
37 |
24
38 |
25
39 |
26
40 |
27
41 |
28
42 |
29
43 |
30
44 |
45 | 46 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /14 - Grid Template Areas/area-line-names-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Template Areas: Line Names from Grid Areas! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
16
29 |
17
30 |
18
31 |
19
32 |
20
33 |
21
34 |
22
35 |
23
36 |
24
37 |
25
38 |
26
39 |
27
40 |
28
41 |
29
42 |
30
43 |
44 | 45 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /15 - Naming Lines in CSS Grid/naming-lines-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Naming Lines in CSS Grid! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
16
29 |
17
30 |
18
31 |
19
32 |
20
33 |
21
34 |
22
35 |
23
36 |
24
37 |
25
38 |
26
39 |
27
40 |
28
41 |
29
42 |
30
43 |
44 | 45 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /11 - Spanning and Placing Cardio/get-sweaty-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spanning & Placing Cardio! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
💩
22 |
9
23 |
10
24 |
11
25 |
12
26 |
13
27 |
14
28 |
15
29 |
16
30 |
17
31 |
18
32 |
19
33 |
20
34 |
21
35 |
22
36 |
23
37 |
24
38 |
25
39 |
26
40 |
27
41 |
28
42 |
29
43 |
30
44 |
45 | 46 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /17 - CSS Grid Alignment + Centering/alignment-and-centering-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Alignment + Centering! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
16
29 |
17
30 |
18
31 |
19
32 |
20
33 |
21
34 |
22
35 |
23
36 |
24
37 |
25
38 |
26
39 |
27
40 |
28
41 |
29
42 |
30
43 |
31
44 |
32
45 |
33
46 |
34
47 |
35
48 |
36
49 |
37
50 |
38
51 |
39
52 |
40
53 |
54 | 55 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /22 - Recreating Codepen/style-FINISHED.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --grey: #343436; 3 | } 4 | html { 5 | box-sizing: border-box; 6 | font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, 7 | Sans-Serif; 8 | font-weight: normal; 9 | color: #272727; 10 | text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); 11 | } 12 | 13 | *, 14 | *:before, 15 | *:after { 16 | box-sizing: inherit; 17 | } 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | iframe { 24 | width: 100%; 25 | height: 100%; 26 | } 27 | 28 | h1, 29 | h2, 30 | h3, 31 | h4, 32 | h5, 33 | h6 { 34 | font-weight: normal; 35 | margin: 0; 36 | font-size: 1.5em; 37 | } 38 | 39 | .codepen { 40 | display: grid; 41 | grid-template-rows: auto 1fr 1fr auto; 42 | height: 100vh; 43 | color: white; 44 | } 45 | 46 | .codepen >* { 47 | border:1px solid black; 48 | } 49 | 50 | 51 | /* Editor! */ 52 | .code { 53 | display:grid; 54 | grid-template-columns: repeat(3, 1fr); 55 | background: #1b2b34; 56 | } 57 | 58 | .editor { 59 | display: grid; 60 | grid-template-rows: auto 1fr; 61 | } 62 | 63 | .editor__header { 64 | display: grid; 65 | grid-template-columns: auto 1fr auto; 66 | align-items: center; 67 | padding: 5px; 68 | grid-gap: 5px; 69 | background: rgba(0,0,0,0.1); 70 | } 71 | 72 | .editor__code { 73 | display: grid; 74 | grid-template-columns: auto 1fr; 75 | } 76 | 77 | .editor__number { 78 | display: block; 79 | padding: 0 10px; 80 | } 81 | 82 | .editor__input { 83 | resize: none; 84 | background: none; 85 | border: 0; 86 | color: grey; 87 | font-size: 16px; 88 | line-height: 19px; 89 | } 90 | 91 | /* Pen Header */ 92 | 93 | .pen { 94 | display: grid; 95 | grid-template-columns: 1fr; 96 | grid-auto-flow: column; 97 | align-items: center; 98 | grid-gap: 10px; 99 | background: black; 100 | border-bottom: 5px solid var(--grey); 101 | color: white; 102 | padding: 10px; 103 | } 104 | 105 | .preview { 106 | display: grid; 107 | } 108 | 109 | /* Buttons */ 110 | 111 | .button { 112 | background: var(--grey); 113 | border: 0; 114 | color: white; 115 | padding: 10px; 116 | border-radius:5px; 117 | font-size: 15px; 118 | position: relative; 119 | } 120 | 121 | .button--small { 122 | font-size: 12px; 123 | padding: 4px; 124 | } 125 | 126 | .button--dirty:before { 127 | background: #ffc600; 128 | display: block; 129 | content: ''; 130 | height: 2px; 131 | width: calc(100% - 6px); 132 | position: absolute; 133 | left: 3px; 134 | top: 3px; 135 | } 136 | 137 | 138 | .settings { 139 | padding: 5px; 140 | background: black; 141 | border-top: 1px solid grey; 142 | } -------------------------------------------------------------------------------- /11 - Spanning and Placing Cardio/get-sweaty-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spanning & Placing Cardio! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
💩
22 |
9
23 |
10
24 |
11
25 |
12
26 |
13
27 |
14
28 |
15
29 |
16
30 |
17
31 |
18
32 |
19
33 |
20
34 |
21
35 |
22
36 |
23
37 |
24
38 |
25
39 |
26
40 |
27
41 |
28
42 |
29
43 |
30
44 |
45 | 46 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /22 - Recreating Codepen/codepen-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recreating Codepen! 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Some Amazing Pen Name

16 |

A Pen by Wes Bos

17 |
18 | 19 | 20 | 21 | 22 | Wes Bos 23 |
24 |
25 |
26 |
27 | 28 |

HTML

29 | 30 |
31 |
32 |
33 | 1 34 |
35 | 36 | 37 |
38 |
39 |
40 |
41 | 42 |

CSS

43 | 44 |
45 |
46 |
47 | 1 48 | 2 49 | 3 50 |
51 | 52 | 56 |
57 | 58 |
59 |
60 |
61 | 62 |

JS

63 | 64 |
65 |
66 |
67 | 1 68 |
69 | 70 |
71 | 72 |
73 |
74 |
75 | 76 |
77 | 82 |
83 | 84 | 85 | -------------------------------------------------------------------------------- /22 - Recreating Codepen/codepen-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recreating Codepen! 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Some Amazing Pen Name

16 |

A Pen by Wes Bos

17 |
18 | 19 | 20 | 21 | 22 | Wes Bos 23 |
24 |
25 |
26 |
27 | 28 |

HTML

29 | 30 |
31 |
32 |
33 | 1 34 |
35 | 36 | 37 |
38 |
39 |
40 |
41 | 42 |

CSS

43 | 44 |
45 |
46 |
47 | 1 48 | 2 49 | 3 50 |
51 | 52 | 56 |
57 | 58 |
59 |
60 |
61 | 62 |

JS

63 | 64 |
65 |
66 |
67 | 1 68 |
69 | 70 |
71 | 72 |
73 |
74 |
75 | 76 |
77 | 82 |
83 | 84 | 85 | -------------------------------------------------------------------------------- /16 - grid-auto-flow dense Block Fitting/dense-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | grid-auto-flow dense Block Fitting! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
16
29 |
17
30 |
18
31 |
19
32 |
20
33 |
21
34 |
22
35 |
23
36 |
24
37 |
25
38 |
26
39 |
27
40 |
28
41 |
29
42 |
30
43 |
31
44 |
32
45 |
33
46 |
34
47 |
35
48 |
36
49 |
37
50 |
38
51 |
39
52 |
40
53 |
41
54 |
42
55 |
43
56 |
44
57 |
45
58 |
46
59 |
47
60 |
48
61 |
49
62 |
50
63 |
51
64 |
52
65 |
53
66 |
54
67 |
55
68 |
56
69 |
57
70 |
58
71 |
59
72 |
60
73 |
61
74 |
62
75 |
63
76 |
64
77 |
65
78 |
66
79 |
67
80 |
68
81 |
69
82 |
70
83 |
84 | 85 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /24 - Responisve Website/responsive-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Responsive Website! 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Terry's Taco Joint

18 |

Pretty Good Tacos!

19 |
20 |
21 |

$1.99

22 |

Tacos

23 |
24 |
25 |

$3.99

26 |

Kombucha

27 |
28 | 29 |
30 | 54 | 55 |
56 |
57 | 🌮 58 |

Tacos

59 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

60 |
61 |
62 | 🍺 63 |

Beer

64 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

65 |
66 |
67 | 🍷 68 |

Wine

69 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

70 |
71 |
72 | 🎵 73 |

Music

74 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

75 |
76 |
77 | 78 |
79 | Yummy Taco 80 |
81 |

Featured Taco

82 |

Slim Profile, easy to hold and loaded with cheese.

83 |

This is the one you have been waiting for

84 | 85 |
86 |
87 | 88 | 89 | 102 |
103 | 104 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /16 - grid-auto-flow dense Block Fitting/dense-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | grid-auto-flow dense Block Fitting! 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
6
19 |
7
20 |
8
21 |
9
22 |
10
23 |
11
24 |
12
25 |
13
26 |
14
27 |
15
28 |
16
29 |
17
30 |
18
31 |
19
32 |
20
33 |
21
34 |
22
35 |
23
36 |
24
37 |
25
38 |
26
39 |
27
40 |
28
41 |
29
42 |
30
43 |
31
44 |
32
45 |
33
46 |
34
47 |
35
48 |
36
49 |
37
50 |
38
51 |
39
52 |
40
53 |
41
54 |
42
55 |
43
56 |
44
57 |
45
58 |
46
59 |
47
60 |
48
61 |
49
62 |
50
63 |
51
64 |
52
65 |
53
66 |
54
67 |
55
68 |
56
69 |
57
70 |
58
71 |
59
72 |
60
73 |
61
74 |
62
75 |
63
76 |
64
77 |
65
78 |
66
79 |
67
80 |
68
81 |
69
82 |
70
83 |
84 | 85 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /24 - Responisve Website/responsive-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Responsive Website! 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Terry's Taco Joint

18 |

Pretty Good Tacos!

19 |
20 |
21 |

$1.99

22 |

Tacos

23 |
24 |
25 |

$3.99

26 |

Kombucha

27 |
28 | 29 |
30 | 54 | 55 |
56 |
57 | 🌮 58 |

Tacos

59 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

60 |
61 |
62 | 🍺 63 |

Beer

64 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

65 |
66 |
67 | 🍷 68 |

Wine

69 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

70 |
71 |
72 | 🎵 73 |

Music

74 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.

75 |
76 |
77 | 78 |
79 | Yummy Taco 80 |
81 |

Featured Taco

82 |

Slim Profile, easy to hold and loaded with cheese.

83 |

This is the one you have been waiting for

84 | 85 |
86 |
87 | 88 | 89 | 102 |
103 | 104 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /24 - Responisve Website/responsive-FINISHED.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 15px; 3 | } 4 | 5 | button { 6 | background: #ffc600; 7 | border: 0; 8 | padding: 10px 20px; 9 | } 10 | 11 | img { 12 | max-width: 100%; 13 | } 14 | 15 | /* .wrapper */ 16 | 17 | .wrapper { 18 | display: grid; 19 | grid-gap: 20px; 20 | } 21 | 22 | .top { 23 | display: grid; 24 | grid-gap: 20px; 25 | grid-template-areas: 26 | "hero hero cta1" 27 | "hero hero cta2" 28 | } 29 | 30 | .hero { 31 | grid-area: hero; 32 | min-height: 400px; 33 | background: white url(images/taco.jpg); 34 | background-size: cover; 35 | background-position: bottom right; 36 | padding: 50px; 37 | display: flex; 38 | flex-direction: column; 39 | align-items: start; 40 | justify-content: center; 41 | } 42 | 43 | .hero > * { 44 | background: var(--yellow); 45 | padding: 5px; 46 | } 47 | 48 | .cta { 49 | background: var(--yellow); 50 | display: grid; 51 | align-items: center; 52 | justify-items: center; 53 | align-content: center; 54 | } 55 | 56 | .cta p { 57 | margin: 0; 58 | } 59 | 60 | .cta1 { 61 | grid-area: cta1; 62 | } 63 | 64 | .cta2 { 65 | grid-area: cta2; 66 | } 67 | 68 | .price { 69 | font-size: 60px; 70 | font-weight: 300; 71 | } 72 | 73 | /* Navigation */ 74 | 75 | .menu ul { 76 | display: grid; 77 | grid-gap: 10px; 78 | padding: 0; 79 | list-style: none; 80 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 81 | } 82 | 83 | .menu a { 84 | background: var(--yellow); 85 | display: block; 86 | text-decoration: none; 87 | padding: 10px; 88 | text-align: center; 89 | color: var(--black); 90 | text-transform: uppercase; 91 | font-size: 20px; 92 | } 93 | 94 | [aria-controls="menu-list"] { 95 | display: none; 96 | } 97 | 98 | /* Features! */ 99 | 100 | .features { 101 | display: grid; 102 | grid-gap: 20px; 103 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 104 | } 105 | 106 | .feature { 107 | background: white; 108 | padding: 10px; 109 | border: 1px solid white; 110 | text-align: center; 111 | box-shadow: 0 0 4px rgba(0,0,0,0.1); 112 | } 113 | 114 | .feature .icon { 115 | font-size: 50px; 116 | } 117 | .feature p { 118 | color: rgba(0,0,0,0.5); 119 | } 120 | 121 | /* About Section */ 122 | 123 | .about { 124 | background: white; 125 | padding:50px; 126 | display: grid; 127 | grid-template-columns: 400px 1fr; 128 | align-items: center; 129 | } 130 | 131 | /* Gallery! */ 132 | 133 | .gallery { 134 | display: grid; 135 | grid-gap: 20px; 136 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 137 | } 138 | 139 | .gallery img { 140 | width: 100%; 141 | } 142 | 143 | .gallery h2 { 144 | grid-column: 1 / -1; 145 | display: grid; 146 | grid-template-columns: 1fr auto 1fr; 147 | grid-gap: 20px; 148 | align-items: center; 149 | } 150 | 151 | .gallery h2:before, .gallery h2:after { 152 | display: block; 153 | content: ''; 154 | height: 10px; 155 | background: linear-gradient(to var(--direction, left), var(--yellow), transparent); 156 | } 157 | 158 | .gallery h2:after { 159 | --direction: right; 160 | } 161 | 162 | @media (max-width: 1000px) { 163 | .menu { 164 | order: -1; 165 | perspective: 800px; 166 | } 167 | [aria-controls="menu-list"] { 168 | display: block; 169 | margin-bottom: 10px; 170 | } 171 | 172 | .menu ul { 173 | max-height: 0; 174 | overflow: hidden; 175 | transform: rotateX(90deg); 176 | transition: all 0.5s; 177 | } 178 | 179 | [aria-expanded="true"] ~ ul { 180 | display: grid; 181 | max-height: 500px; 182 | transform: rotateX(0); 183 | } 184 | 185 | [aria-expanded="false"] .close { 186 | display: none; 187 | } 188 | 189 | [aria-expanded="true"] .close { 190 | display: inline-block; 191 | } 192 | 193 | [aria-expanded="true"] .open { 194 | display: none; 195 | } 196 | 197 | } 198 | 199 | @media (max-width: 700px) { 200 | .top { 201 | grid-template-areas: 202 | "hero hero" 203 | "cta1 cta2" 204 | } 205 | /* About */ 206 | .about { 207 | grid-template-columns: 1fr; 208 | } 209 | } 210 | 211 | @media (max-width: 500px) { 212 | .top { 213 | grid-template-areas: 214 | "hero" 215 | "cta1" 216 | "cta2" 217 | } 218 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![](https://res.cloudinary.com/wesbos/image/upload/v1515524452/GRID-social-share_wlfzk3.png) 2 | 3 | # CSS Grid Video Course 4 | 5 | Hey! These are the starter files and finished solutions. Grab the full course over at [CSSGrid.io](https://CSSGrid.io). 6 | 7 | ## Course FAQ 8 | 9 | ### Q: I'm getting "This is meant to be run from within npm script." 10 | 11 | Not sure why this is happening, but try these commands instead: 12 | 13 | **windows:** `npm run start:win32` 14 | 15 | **mac and linux:** `start:darwin:linux` 16 | 17 | Very few people get this, but please contact me if you find out why `npm start` command isn't running. 18 | 19 | ### Q: I'm getting Browsersync Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false) 20 | 21 | This is because some versions of Firefox are "FirefoxDeveloperEdition" and some new downloads are "Firefox Developer Edition". If you had downloaded the browser before the course, just remove the spaces from the package.json command so it says "FirefoxDeveloperEdition" 22 | 23 | ### Q: I can't see the lines / numbers of Firefox' CSS Grid Inspection Tools 24 | 25 | Make sure to turn off both "Use recommended performance settings" & "Use hardware acceleration when available“ within Preferences > Performance 26 | 27 | ## Community CSS Grid Content 28 | 29 | Feel free to submit a PR adding a link to your own recaps, guides or reviews! 30 | 31 | * [Course Review](https://www.bencodezen.io/blog/review-css-grid-with-wes-bos/) by [@bencodezen](https://www.twitter.com/bencodezen) 32 | * [Recap and lessons learned](https://marcokuehbauch.com/blog/learning-css-grid/) by [@mkuehb](https://twitter.com/Mkuehb) 33 | * [cssgrid.io course review](https://krzysztofzuraw.com/blog/2020/css-grid-io-course) by [@krzysztof_zuraw](https://twitter.com/krzysztof_zuraw) 34 | * My [gh-page](https://herminiotorres.github.io/cssgrid) by [@herminiotorres](https://twitter.com/herminiotorres) 35 | 36 | ## A note on Pull Requests 37 | 38 | These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. 39 | 40 | The starter files + solutions will be updated if/when the videos are updated. 41 | 42 | Thanks! 43 | 44 | ## Live editable examples 45 | 46 | I recommend you use the files in the repo, but if you prefer to use JSFiddle instead, here are all the starter files ready to go: 47 | 48 | 02. [Starter Files and Tooling Setup](https://jsfiddle.net/6qvwur9q/) 49 | 03. [CSS Grid Fundamentals](https://jsfiddle.net/qxxpgg4j/) 50 | 04. [CSS Grid Dev Tools](https://jsfiddle.net/b55x8vh2/) 51 | 05. [CSS Grid Implicit vs Explicit Tracks](https://jsfiddle.net/mon8xdgb/) 52 | 06. [CSS grid-auto-flow Explained](https://jsfiddle.net/Loq4uj16/) 53 | 07. [Sizing tracks in CSS Grid](https://jsfiddle.net/q8h3r8yb/) 54 | 08. [CSS Grid repeat function](https://jsfiddle.net/8f8xyx86/) 55 | 09. [Sizing Grid Items](https://jsfiddle.net/wqs6tcuk/) 56 | 10. [Placing Grid Items](https://jsfiddle.net/hs5xhvpp/) 57 | 11. [Spanning and Placing Cardio](https://jsfiddle.net/2z7z6o9k/) 58 | 12. [auto-fit and auto-fill](https://jsfiddle.net/d1pLngzx/) 59 | 13. [Using minmax() for Responsive Grids](https://jsfiddle.net/xthszm2j/) 60 | 14. Grid Template Areas: 61 | - [Area Line Names](https://jsfiddle.net/tkyxomht/) 62 | - [Areas](https://jsfiddle.net/p0sn7L7v/) 63 | 15. [Naming Lines in CSS Grid](https://jsfiddle.net/ygpmn0xh/) 64 | 16. [grid-auto-flow dense Block Fitting](https://jsfiddle.net/sxj83p70/) 65 | 17. [CSS Grid Alignment + Centering](https://jsfiddle.net/eyL9a2gv/) 66 | 18. [Re-ordering Grid Items](https://jsfiddle.net/uscf9mk0/) 67 | 19. [Nesting Grid with Album Layouts](https://jsfiddle.net/yn7jak0y/) 68 | 20. [CSS Grid Image Gallery](https://jsfiddle.net/cbjzped2/) 69 | 21. Flexbox vs CSS Grid: 70 | - [Axis Flipping](https://jsfiddle.net/pt8hym9s/) 71 | - [Controls on Right](https://jsfiddle.net/4o7gavuj/) 72 | - [Flex on Item](https://jsfiddle.net/1u264ftd/) 73 | - [Perfectly Centered](https://jsfiddle.net/sgbrtrjo/) 74 | - [Self Control](https://jsfiddle.net/c6gg8pkn/) 75 | - [Stacked Layout](https://jsfiddle.net/mnfm1sw0/) 76 | - [Unknown Content Size](https://jsfiddle.net/4ze02bkj/) 77 | - [Unknown Number of Items](https://jsfiddle.net/Lg7r3jmy/) 78 | - [Variable Widths on Each Row](https://jsfiddle.net/qymhootd/) 79 | 22. [Recreating Codepen](https://jsfiddle.net/br6n54qt/) 80 | 23. [Bootstrappy Grid with CSS Variables](https://jsfiddle.net/gLLht2hd/) 81 | 24. [Responsive Website](https://jsfiddle.net/bh16ofp8/) 82 | 25. [Full Bleed Blog Layout](https://jsfiddle.net/j8w6v3mh/) 83 | -------------------------------------------------------------------------------- /19 - Nesting Grid with Album Layouts/albums-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Nesting Grid with Album Layouts! 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 |

Album Title

18 |

Artist Name

19 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

20 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis, excepturi!

21 |
22 |
23 |
24 | 25 |
26 |

Album Title

27 |

Artist Name

28 |

short.

29 |
30 |
31 |
32 | 33 |
34 |

Album Title

35 |

Artist Name

36 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

37 |
38 |
39 |
40 | 41 |
42 |

Album Title

43 |

Artist Name

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

45 |
46 |
47 |
48 | 49 |
50 |

Album Title

51 |

Artist Name

52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

53 |
54 |
55 |
56 | 57 |
58 |

Album Title

59 |

Artist Name

60 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

61 |
62 |
63 |
64 | 65 |
66 |

Album Title

67 |

Artist Name

68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

69 |
70 |
71 |
72 | 73 |
74 |

Album Title

75 |

Artist Name

76 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

77 |
78 |
79 |
80 | 81 |
82 |

Album Title

83 |

Artist Name

84 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

85 |
86 |
87 |
88 | 89 |
90 |

Album Title

91 |

Artist Name

92 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

93 |
94 |
95 | 96 |
97 | 98 | 99 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /20 - CSS Grid Image Gallery/image-gallery-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Image Gallery! 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 22 | 23 | 24 | 154 | 155 | 199 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /19 - Nesting Grid with Album Layouts/albums-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Nesting Grid with Album Layouts! 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 |

Album Title

18 |

Artist Name

19 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

20 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis, excepturi!

21 |
22 |
23 |
24 | 25 |
26 |

Album Title

27 |

Artist Name

28 |

short.

29 |
30 |
31 |
32 | 33 |
34 |

Album Title

35 |

Artist Name

36 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

37 |
38 |
39 |
40 | 41 |
42 |

Album Title

43 |

Artist Name

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

45 |
46 |
47 |
48 | 49 |
50 |

Album Title

51 |

Artist Name

52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

53 |
54 |
55 |
56 | 57 |
58 |

Album Title

59 |

Artist Name

60 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

61 |
62 |
63 |
64 | 65 |
66 |

Album Title

67 |

Artist Name

68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

69 |
70 |
71 |
72 | 73 |
74 |

Album Title

75 |

Artist Name

76 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

77 |
78 |
79 |
80 | 81 |
82 |

Album Title

83 |

Artist Name

84 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

85 |
86 |
87 |
88 | 89 |
90 |

Album Title

91 |

Artist Name

92 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.

93 |
94 |
95 | 96 |
97 | 98 | 99 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /25 - Full Bleed Blog Layout/full-bleed-blog-START.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Full Bleed Blog Layout! 8 | 9 | 10 | 11 | 12 | 16 |
17 |

Chapter Three: The Great American Game

18 | 19 |

Dear Diary,

20 | 21 |

Grandfather's creaky as his front porch, loads his shotgun beneath the awning, spittoon restless for rain, carpenter's 22 | chair against the whistling air. Rocking, back and forth, rocking snap shot picture - worth it, just like the movies

23 | 24 |
25 |

This is a song by 26 | Levi The Poet 27 |

28 |
29 | 30 | 31 |

She said that he loved baseball, and James Earl Jones; said that he's got god talking inside of his thoughts while he's 32 | rounding those bases on his way back home

33 | 34 |
35 |

"If you build it, they will come"

36 |
37 | 38 |

If you build it, they will come (and baby listens to what the Lord say). But I've been getting pretty worn, building 39 | for nearly a decade

40 | 41 |
42 | Big Ass Image 43 |
Super Nice Photo
44 |
45 | 46 | 47 |

In a perfect world we shouldn’t have been allowed to lose sight of what it means to love wholly. I’ve got a Polaroid 48 | hanging on my wall that a friend took of me and my angel. I remember the day like it’s something I can touch, but it’s 49 | stuck in the square between the borders of the film, and I can run my fingers over our faces, but I can’t get back 50 | to the places we were

51 | 52 | 53 |
54 |

You’ve got a pain deep in your bones, son.

55 |
56 |

"You’ve got a pain deep in your bones, son. It compels you forward like you’re tied to a slave master’s cruel hand, and 57 | it's the same pain that drives that oppressor’s heart of stone, so you’ve grown to love the man. You keep pouring yourself 58 | out, again and again, into legible lines through a crooked pen." Yeah, it’s painful, but it’s familiar – so habit breeds 59 | comfort, and I don’t know what I’d do without him

60 | 61 |
62 |

You can listen to this song on 63 | YouTube 64 |

65 |
66 | 67 |

So in the early morning, when you’ve fallen asleep in our home, I drift back into the memories that I’ve claimed as my 68 | own, and wonder if tonight will be a night I’ll hang on my wall like I did before we stopped taking photos, out of 69 | the habit of being comfortable with not trying at all

70 | 71 |

In a perfect world, we’ll have albums labeled Seasons, with chapter headings, and we’ll staple them to the cork-board 72 | that hangs at the foot of the bed. There’s longevity in a memory spilt out in pen, and if a picture is worth a thousand 73 | words then I’ve written down every one of them

74 | 75 |

I work hard, scarred, toil through that soil for the youth I see in my friends, but these journals are moments in time, 76 | snapshots of our lives, and in retrospect, age is an overexposed photo that the memories can't mend

77 | 78 |
79 | Correspondence Album Cover 80 |

Buy the album on 81 | BandCamp 82 |

83 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae totam quia vel eveniet porro, rem ducimus quam incidunt, 84 | dicta laborum quod earum tempore natus placeat neque aspernatur pariatur iusto quos.

85 |
86 |

I know my sweet seductress, and her name is Depression. I wrote best beneath that demon’s destructive oppression

87 | 88 | 89 |

In those Polaroids, she drove the ink into the canvas like a slave beneath his master’s cruel hand, and I hated that 90 | whip but always wondered what I’d do without it, so I grew to love the man

91 | 92 |

Oh, I wept for change! I begged for movement and the good Lord, he answered my prayers, but you don’t know how to breathe 93 | easy when you let go of your habits, even if your comforts left you gasping for air

94 | 95 | 96 |
97 | Big Ass Image 98 |
Super Nice Photo
99 |
100 | 101 |

Dear Time

102 | 103 |

Grandfather's as creaky as his front porch, scent like oil in the gun barrel, dip-can kicked over the railing, sandpaper 104 | hands stuck behind thumb tacks on my wall. I’ve got an ache in my chest for every season I miss and it gets worse when 105 | the snow starts to fall. There are butterflies alive in that couple’s eyes a few years since forgotten by all, and 106 | sometimes, if the phone starts to ring, I can still hear their wings when you call

107 | 108 |

But I begged for movement and I got what I asked for, and I can picture the answer like it came yesterday. And in the 109 | land of the gods, I think that things are timeless, but we are still prone to decay

110 | 111 |

You know I still lift up hope of certain smiles in those photos for us when I pray

112 | 113 |
114 |

"Idle hands build nothing that you can call your own"

115 |
116 | 117 |

Time is a cruel lover, and she breaks her house apart at its bones. You know comfort is no good reason for standing still, 118 | and idle hands build nothing that you can call your own.

119 | 120 |
121 |

— Levi The Poet

122 |
123 | 124 |
125 | 126 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /25 - Full Bleed Blog Layout/full-bleed-blog-FINISHED.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Full Bleed Blog Layout! 8 | 9 | 10 | 11 | 15 |
16 |

Chapter Three: The Great American Game

17 | 18 |

Dear Diary,

19 | 20 |

Grandfather's creaky as his front porch, loads his shotgun beneath the awning, spittoon restless for rain, carpenter's 21 | chair against the whistling air. Rocking, back and forth, rocking snap shot picture - worth it, just like the movies

22 | 23 |
24 |

This is a song by 25 | Levi The Poet 26 |

27 |
28 | 29 | 30 |

She said that he loved baseball, and James Earl Jones; said that he's got god talking inside of his thoughts while he's 31 | rounding those bases on his way back home

32 | 33 |
34 |

"If you build it, they will come"

35 |
36 | 37 |

If you build it, they will come (and baby listens to what the Lord say). But I've been getting pretty worn, building 38 | for nearly a decade

39 | 40 |
41 | Big Ass Image 42 |
Super Nice Photo
43 |
44 | 45 | 46 |

In a perfect world we shouldn’t have been allowed to lose sight of what it means to love wholly. I’ve got a Polaroid 47 | hanging on my wall that a friend took of me and my angel. I remember the day like it’s something I can touch, but it’s 48 | stuck in the square between the borders of the film, and I can run my fingers over our faces, but I can’t get back 49 | to the places we were

50 | 51 | 52 |
53 |

You’ve got a pain deep in your bones, son.

54 |
55 |

"You’ve got a pain deep in your bones, son. It compels you forward like you’re tied to a slave master’s cruel hand, and 56 | it's the same pain that drives that oppressor’s heart of stone, so you’ve grown to love the man. You keep pouring yourself 57 | out, again and again, into legible lines through a crooked pen." Yeah, it’s painful, but it’s familiar – so habit breeds 58 | comfort, and I don’t know what I’d do without him

59 | 60 |
61 |

You can listen to this song on 62 | YouTube 63 |

64 |
65 | 66 |

So in the early morning, when you’ve fallen asleep in our home, I drift back into the memories that I’ve claimed as my 67 | own, and wonder if tonight will be a night I’ll hang on my wall like I did before we stopped taking photos, out of 68 | the habit of being comfortable with not trying at all

69 | 70 |

In a perfect world, we’ll have albums labeled Seasons, with chapter headings, and we’ll staple them to the cork-board 71 | that hangs at the foot of the bed. There’s longevity in a memory spilt out in pen, and if a picture is worth a thousand 72 | words then I’ve written down every one of them

73 | 74 |

I work hard, scarred, toil through that soil for the youth I see in my friends, but these journals are moments in time, 75 | snapshots of our lives, and in retrospect, age is an overexposed photo that the memories can't mend

76 | 77 |
78 | Correspondence Album Cover 79 |

Buy the album on 80 | BandCamp 81 |

82 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae totam quia vel eveniet porro, rem ducimus quam incidunt, 83 | dicta laborum quod earum tempore natus placeat neque aspernatur pariatur iusto quos.

84 |
85 |

I know my sweet seductress, and her name is Depression. I wrote best beneath that demon’s destructive oppression

86 | 87 | 88 |

In those Polaroids, she drove the ink into the canvas like a slave beneath his master’s cruel hand, and I hated that 89 | whip but always wondered what I’d do without it, so I grew to love the man

90 | 91 |

Oh, I wept for change! I begged for movement and the good Lord, he answered my prayers, but you don’t know how to breathe 92 | easy when you let go of your habits, even if your comforts left you gasping for air

93 | 94 | 95 |
96 | Big Ass Image 97 |
Super Nice Photo
98 |
99 | 100 |

Dear Time

101 | 102 |

Grandfather's as creaky as his front porch, scent like oil in the gun barrel, dip-can kicked over the railing, sandpaper 103 | hands stuck behind thumb tacks on my wall. I’ve got an ache in my chest for every season I miss and it gets worse when 104 | the snow starts to fall. There are butterflies alive in that couple’s eyes a few years since forgotten by all, and 105 | sometimes, if the phone starts to ring, I can still hear their wings when you call

106 | 107 |

But I begged for movement and I got what I asked for, and I can picture the answer like it came yesterday. And in the 108 | land of the gods, I think that things are timeless, but we are still prone to decay

109 | 110 |

You know I still lift up hope of certain smiles in those photos for us when I pray

111 | 112 |
113 |

"Idle hands build nothing that you can call your own"

114 |
115 | 116 |

Time is a cruel lover, and she breaks her house apart at its bones. You know comfort is no good reason for standing still, 117 | and idle hands build nothing that you can call your own.

118 | 119 |
120 |

— Levi The Poet

121 |
122 | 123 |
124 | 125 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /assets/images/topography.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------