Mastering PostCSS for Web Design电子书

Mastering PostCSS for Web Design

Table of Contents

Mastering PostCSS for Web Design

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Introducing PostCSS

Discovering the art of processing

Introducing PostCSS

Exploring the benefits of using PostCSS

Considering some of the pitfalls

Clearing up some misconceptions

Preparing for exercises in this book

Setting up a development environment

Installing PostCSS

Creating a simple example using PostCSS

Adding source map support

Creating minified style sheets

Altering to compile automatically

Linting code using plugins

Exploring how PostCSS works

Making the move from SASS

Summary

2. Creating Variables and Mixins

Introducing variables and mixins

Setting up SASS

Creating a hover effect example

Using Less CSS as an alternative

Transitioning to using PostCSS

Adding variable support to PostCSS

Updating our hover effect demo

Taking it a step further

Setting the order of plugins

Creating mixins with PostCSS

Updating our hover effect demo

Comparing PostCSS to standard processors

Looping content with PostCSS

Iterating through @each statements

Switching to using PostCSS

Summary

3. Nesting Rules

Introducing nesting

Navigating through pages

Preparing our demo

Converting from existing processors

Transitioning to using PostCSS plugins

Converting our demo to PostCSS

Compiling our code

Exploring the pitfalls of nesting

Taking a better approach

Reconsidering our code

Updating our code

Making the switch to BEM

Creating simple message boxes

Compiling and linting our code

Installing BEM support

Exploring our changes in more detail

Fixing our errors

Summary

4. Building Media Queries

Revisiting media queries

Exploring custom media queries in PostCSS

Beginning with plain CSS

Altering our demo to use PostCSS

Making images responsive

Making an image responsive with PostCSS

Implementing responsive capabilities to images

Adding support for retina images

Taking the next steps

Exploring other media possibilities

Adding responsive text support

Optimizing media queries

Retrofitting support for older browsers

Moving away from responsive design

Taking things further with CSS4

Summary

5. Managing Colors, Images, and Fonts

Adding color, fonts, and media to sites

Maintaining asset links

Automating links to assets

Managing fonts with PostCSS

Creating image sprites

Demo – creating a credit card icon bar

Working with SVG in PostCSS

Altering icon images using PostCSS

Exploring the results in more detail

Considering alternative options

Adding support for WebP images

Switching WebP images in and out

Viewing the differences in file sizes

Manipulating colors and color palettes

Displaying and mixing colors using palettes

Dissecting our demo in more detail

Creating color functions with PostCSS

Adjusting colors using functions

Dissecting our demo

Creating colors with PostCSS filters

Exploring our demo in more detail

Comparing with CSS3 filters

Adding Instagram effects to your images

Summary

6. Creating Grids

Introducing grid design

Automating the compilation process

Adding support for Bourbon Neat

Creating an example with Bourbon Neat

Exploring our demo in more detail

Exploring the grid plugins in PostCSS

Transitioning to using PostCSS-Neat

Refining our task list

Testing our configuration

Creating a site using Neat and PostCSS

Making the change to PostCSS

Adding responsive capabilities

Correcting the design

Summary

7. Animating Elements

Revisiting basic animations

Moving away from jQuery

Animating content with Transit.js

Animating with plain JavaScript

Switching classes using jQuery

Making use of pre-built libraries

Dissecting the code for our demo

Switching to using SASS

Creating an animated gallery

Adding the finishing touches

Making the switch to PostCSS

Exploring plugin options within PostCSS

Updating code to use PostCSS

Testing our altered code

Creating a demo in PostCSS

Updating the plugin

Building our demo

Dissecting our demo in more detail

Optimizing our animations

Using our own animation plugin

Exploring the plugin in more detail

Summary

8. Creating PostCSS Plugins

Extending PostCSS with plugins

Dissecting the architecture of a standard plugin

Exploring index.js

Discovering package.json

Exploring test.js

The Vendor module

The List module

Classes available in the API

Nodes available in the API

Methods available in the API

Creating an transition plugin

Creating a test for our plugin

Correcting the errors

Clearing the final error

Performing a test using the plugin

Dissecting our plugin in detail

Building a custom font plugin

Dissecting the functionality of our plugin

Exploring the dangers of publishing this plugin

Simplifying the development process

Guidelines for plugin building

Making the plugin available for use

Summary

9. Working with Shortcuts, Fallbacks, and Packs

Using shortcut plugins in PostCSS

Exploring plugin packs for PostCSS

Writing styles in shorthand

Adding shortcuts with Rucksack

Introducing our demo

Installing Rucksack as a plugin

Easing into using Rucksack

Animating content using the plugin

Dissecting our demo in more detail

Converting our slider to use Rucksack

Dissecting our code

Linting and optimizing your code

Exploring the use of cssnano

Configuring Stylelint as our linter

Providing fallback support

Detecting support for features

Providing support for oldie

Removing style hacks from code

Summary

10. Building a Custom Processor

Creating your processor

Exploring our processor

Dissecting the package.json file

Exploring the Gulp task file

Dissecting issues with our processor

Fixing our Gulp task file

Understanding the changes made

Optimizing the output

Altering our source map support

Taking care of prefixes

Adding support for pseudo-selectors

Updating our code

Dealing with images

Exploring the process

Adding reload capabilities

Extending our processor further

Testing the final pre-processor

Digesting the results of our exercise

Getting started with some hints and tips

Introducing the CSStyle library

Exploring the benefits of using CSStyle

Dissecting our demo

Summary

11. Manipulating Custom Syntaxes

Introducing custom syntaxes

Preparing our environment

Implementing custom syntax plugins

Parsing content and fixing errors

Parsing SCSS content

Exploring what happened

Parsing CSS

Replacing RGBA colors

Exploring how it all works

Formatting the output with the API

Dissecting our example code

Adding source maps

Highlighting our syntax code

Installing themes

Creating a HTML display theme

Summary

12. Mixing Preprocessors

Taking the first steps

Exploring the conversion process

Choosing our plugins

Introducing the Pleeease library

Installing and configuring the Pleeease library

Compiling code manually

Compiling using a task runner

Building an example using Pleeease

Compiling with other preprocessors

Using the PreCSS library

Converting a WordPress installation

Setting up our environment

Considering the conversion process

Making changes to our code

Splitting our style sheet

Adding support for vendor prefixes

Checking our code for consistency

Minifying our code

Creating variables

Adding support for rem units

Nesting rules in our style sheet

Looping through styles

Considering future possible ideas

Compiling and testing the changes

Summary

13. Troubleshooting PostCSS Issues

Fixing some common issues

Exploring some common issues

Not compatible with your operating system…

Task '<name of task>' is not in your gulpfile

Cannot find module '<name of plugin>'

ReferenceError: <name of task> is not defined

Please provide array of postcss processors!

Entries failing to appear in the package.json file

Output of compiling results is not as expected

Getting help from others

Logging issues at Stack Overflow

Finding a bug with PostCSS

Summary

14. Preparing for the Future

Supporting CSS4 styles today

Converting CSS4 styles for use

Validating e-mail addresses

Supporting the new range input

Supporting future syntax with cssnext

Creating a site template with cssnext

Setting up our demo

Creating plugins to provide extra CSS4 support

Adding future color support to CSS

Going back in time

Creating our own plugin

Summary

Index