DEV Community

Cover image for Building a Professionally Designed Website Episode 2 - CSS Framework, Baseline Grid, NextJS Structure
James Mikrut for Payload CMS

Posted on • Originally published at payloadcms.com

5 3

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

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!

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay