I'll also show you how to create Sass-like imports, create variables, and some of the differences between working with Sass and PostCSS with the PreCSS plug-in. Then, I'll show you how to work with Flexbox to create different types of layouts, including responsive designs that adjust to the widths of different devices. I'll also show you how to work with Color Functions, and how to use calculations to make creating columns faster. Finally, I'll show you different ways of animating content and how PostCSS can help you do it quicker, and with less errors.
Now there's a lot to learn, but that's why you're here so let's get started with building a responsive single-page site with PostCSS.
- Structuring the HTML markup for a single-page design
- Using PreCSS Sass-like imports in PostCSS
- Creating Sass-like variables with PreCSS
- Building styles
- Creating a layout for the header and navigation with Flexbox
- Creating and styling sections
- Animating page elements with PostCSS