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 goin…


This content originally appeared on DEV Community and was authored by James Mikrut

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!


This content originally appeared on DEV Community and was authored by James Mikrut


Print Share Comment Cite Upload Translate Updates
APA

James Mikrut | Sciencx (2021-04-20T14:38:04+00:00) Building a Professionally Designed Website Episode 2 – CSS Framework, Baseline Grid, NextJS Structure. Retrieved from https://www.scien.cx/2021/04/20/building-a-professionally-designed-website-episode-2-css-framework-baseline-grid-nextjs-structure/

MLA
" » Building a Professionally Designed Website Episode 2 – CSS Framework, Baseline Grid, NextJS Structure." James Mikrut | Sciencx - Tuesday April 20, 2021, https://www.scien.cx/2021/04/20/building-a-professionally-designed-website-episode-2-css-framework-baseline-grid-nextjs-structure/
HARVARD
James Mikrut | Sciencx Tuesday April 20, 2021 » Building a Professionally Designed Website Episode 2 – CSS Framework, Baseline Grid, NextJS Structure., viewed ,<https://www.scien.cx/2021/04/20/building-a-professionally-designed-website-episode-2-css-framework-baseline-grid-nextjs-structure/>
VANCOUVER
James Mikrut | Sciencx - » Building a Professionally Designed Website Episode 2 – CSS Framework, Baseline Grid, NextJS Structure. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/20/building-a-professionally-designed-website-episode-2-css-framework-baseline-grid-nextjs-structure/
CHICAGO
" » Building a Professionally Designed Website Episode 2 – CSS Framework, Baseline Grid, NextJS Structure." James Mikrut | Sciencx - Accessed . https://www.scien.cx/2021/04/20/building-a-professionally-designed-website-episode-2-css-framework-baseline-grid-nextjs-structure/
IEEE
" » Building a Professionally Designed Website Episode 2 – CSS Framework, Baseline Grid, NextJS Structure." James Mikrut | Sciencx [Online]. Available: https://www.scien.cx/2021/04/20/building-a-professionally-designed-website-episode-2-css-framework-baseline-grid-nextjs-structure/. [Accessed: ]
rf:citation
» Building a Professionally Designed Website Episode 2 – CSS Framework, Baseline Grid, NextJS Structure | James Mikrut | Sciencx | https://www.scien.cx/2021/04/20/building-a-professionally-designed-website-episode-2-css-framework-baseline-grid-nextjs-structure/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.