2016
Lynda
Ray Villalobos
2:23
English

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.

Introduction
Welcome
What you should know before watching this course
Using the exercises for this course
1. Getting Started
Looking at our single-page responsive design
HTML markup for the single-page design
Learn to work with a Gulp.js workflow
2. 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
3. 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
4. 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
5. 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


lynda.com/CSS-tutorials/Building-Responsive-Single-Page-Design-PostCSS/417644-2.html

Download File Size:511.31 MB

---