Payload
Blog Post
Building a Professionally Designed Website Episode 2 - CSS Framework, Baseline Grid, NextJS Structure
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

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!