Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 2
This is Part 2 of a series that will show you how to build a high-end website, start to finish, from a design agency's point of view using Payload CMS and a statically rendered NextJS.
This episode is going to focus on getting our initial CSS structure up and running. We're not using Bootstrap here, or any type of "reset" - instead, we're going to write a little bundle of extremely minimal, yet powerful CSS of our own.
Design by TRBL: https://trbl.design
Payload CMS: https://payloadcms.com
Code for this episode: https://github.com/payloadcms/custom-...
Payload + NextJS Boilerplate Used: https://github.com/payloadcms/nextjs-...
Topics:
0:00 - Intro
2:01 - React JSS + NextJS setup
4:27 - Writing our first global styles
10:27 - The baseline grid - in CSS rems
17:10 - Reusable values (breakpoints, colors)
19:37 - Typography
22:48 - CSS media queries
27:24 - Installing dependencies (CSS grid, Modal, Window Info)
35:15 - First component - GridContainer
42:47 - Testing our grid, discussing NextJS page folder
47:48 - Stubbing out the Template, Header and Footer components
55:22 - Outro