Building a Responsive Single-Page Design with PostCSS
Год выпуска: 01/2016
Производитель: Lynda
Сайт производителя: lynda.com/CSS-tutorials/Building-Responsive-Single-Page-Design-PostCSS/417644-2.html
Автор: Ray Villalobos
Продолжительность: 2:23
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: 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
Файлы примеров: отсутствуют
Формат видео: MP4
Видео: AVC, 1280x720, 16:9, 15fps, 260kbps
Аудио: AAC, 48kHz, 128kbps, stereo
См. также:
Building a Responsive Single-Page Design with Sass