Building a Professionally Designed Website Episode 2 - CSS Framework, Baseline Grid, NextJS Structure
This is Episode 2 in a series that takes you through how to build a high-end website from a design agency's perspective using Payload, TypeScript, and statically rendered NextJS.
If you missed the first episode, I'd highly recommend going back and watching that one before jumping in here. In that first episode, we covered a lot of ground, including the setup of the entire Payload CMS needed to drive the content of the website.
In that first episode, we defined all Collections and Globals necessary as well as went in-depth with layout-building Block definitions.
Now, in Episode 2, we're ready to start work on the frontend. In this episode, we dive into how to build a lightweight but powerful CSS framework that we'll rely on through the entire site. We'll define breakpoints, media queries, typography, colors, a global reset, and finally - a really awesome way to build a baseline grid using rems.
Table of Contents
- 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
Give Payload a shot
If you're a JS / TS developer and haven't given Payload a shot yet yet, you should take a peek at our Free license right now. Payload's developer experience is second to none and it just feels right to build sites and apps with it.
Feedback welcome
As always, let us know what you think about the video - and about Payload!