Building a Responsive Single-Page Design with PostCSS

2h 30mIntermediate2016-01-22

Authors

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Course details

Learn how to create responsive single-page websites with PostCSS, the CSS post-processor engine that extends the power of CSS through JavaScript. These step-by-step instructions take existing HTML markup and add style, animation, and responsive navigation. This combination allows for dynamic one-page sites—a popular design that's now even faster and easier to create with PostCSS. Along the way, Ray Villalobos introduces some handy plugins, tips for integrating PostCSS into a Gulp-based workflow, and techniques for making layouts more responsive with Flexbox.

Learning objectives
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

Skills covered

HTMLCSSWeb StandardsWeb DesignFront-End Web DevelopmentProjectWeb DevelopmentOpen Source

Concepts

Introduction

Welcome
What you should know before watching this course
Using the exercises for this course

Getting Started

Looking at our single-page responsive design
HTML markup for the single-page design
Learn to work with a Gulp.js workflow

Creating Base Styles

Use PreCSS Sass-like imports in PostCSS
Create Sass-like variables with PreCSS
Build the most important CSS styles
How mixins are different with PreCSS than with Sass

Styling Modules

Use Flexbox to create a layout for our header or navigation
Make a navigation responsive
Use color functions to help create a footer
Create shared section styles

Creating Sections

Create fullscreen backgrounds and controlling layouts
Use calc() function for simple calculations in CSS
When to create custom variables for your colors with PostCSS
Create the sections styles

Animating with PostCSS

Use regular CSS animations to create an slide-in effect
Use transformations to zoom in elements
Make keyframe-based animations using the Animate.css library

Goodbye

Next steps