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 CMS, 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 heard of Payload yet, you should give it a shot. Its 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!