Chapter 1, Introducing PostCSS, kicks off our journey with an introduction to the world of PostCSS, exploring its features and how we can use this ecosystem to transform basic code into valid CSS styles that we can use within our projects. You will discover the benefits of using this ecosystem and how its architecture and modular approach allows us to put together a processor that is tailored specifically for our needs.

Chapter 2, Creating Variables and Mixins, takes a look at some of the basic concepts that are familiar to users of existing processor technologies, such as variables and mixins. You will learn how to transition them to PostCSS and discover how the benefits of using these techniques can transition through to using PostCSS.

Chapter 3, Nesting Rules, explores how existing processors, such as SASS or less, take advantage of concepts such as nesting to reduce the amount of code we need to write and how we can replicate the same functionality within our PostCSS processor.

Chapter 4, Building Media Queries, walks us through the basics of adding responsive support to websites using PostCSS and media queries. You'll learn how to retrofit support for older websites and browsers, and explore how we can take things further with the advent of CSS4 media queries and provide support today within PostCSS.

Chapter 5, Managing Colors, Images, and Fonts, examines the plugins available for handling and manipulating images, colors, and fonts within PostCSS. We will work through a number of examples to illustrate how both images and colors can be manipulated within PostCSS, such as creating image sprites or altering colors using palettes within the system.

Chapter 6, Creating Grids, takes us on a journey through constructing the skeleton of a website using grids—we will explore the basic concept behind using grids and discover some of the plugin options available for creating them within PostCSS. We will work through some examples using the Bourbon Neat grid system, before replicating the examples with PostCSS-equivalent plugins and adding responsive capabilities to the resulting code.

Chapter 7, Animating Elements, begins with a quick recap of using JavaScript to animate content, before switching to using CSS for animation, and how you can transition through to using PostCSS. We will explore using some of the more well-known libraries, such as Animate.css, before creating a quick demo using PostCSS and learning how to optimize our animations using PostCSS.

Chapter 8, Creating PostCSS Plugins, teaches us how plugins can be used to extend PostCSS, and takes us through a journey of exploring the typical architecture of such a plugin. You will then take a look at some example plugins before working through creating your own plugins using the boilerplate code available and before testing and making the plugins available for download by users from the Internet.

Chapter 9, Working with Shortcuts, Fallbacks, and Packs, starts by examining some of the shortcut plugins and packs available before exploring how we can supplement them with creating our own shortcut plugins. You will also discover how you can lint and optimize your code using one of the plugin packs available for PostCSS and learn how to provide fall-backs to PostCSS code to help maintain support for older browsers.

Chapter 10, Building a Custom Processor, pulls together some of the techniques we've covered thus far in the book to produce a custom processor that we can use as a basis for transforming code in our projects. You will explore how to optimize the output before adding source map and vendor prefix support and then testing it on a website. You will then round off the chapter with a look at extending the processor to use the CSStyle framework to allow you to write code that works for both SASS or PostCSS.

Chapter 11, Manipulating Custom Syntaxes, introduces us to writing custom syntaxes using the API and explores some of the options available for parsing code written using syntaxes such as SASS or less. We work though some examples of parsing code using PostCSS before converting the output into something that can be displayed on screen or saved to a file. We will also add in support for highlighting our code using the midas library.

Chapter 12, Mixing Preprocessors, shows us how we can begin to mix processors as an aid to make the transition to using PostCSS. We will take a look at the Pleeease library before installing it and using some of its features. We will then set up a compilation process before using it to make changes to a standard WordPress theme.

Chapter 13, Troubleshooting PostCSS Issues, takes a look at some of the more common issues we might experience when using PostCSS, such as the "taskname not in our gulpfile" error. We will also take a look at what to do next if all else fails. We will cover the methods for getting help with an issue or logging details of a bug within either the core PostCSS system or one of its plugins.

Chapter 14, Preparing for the Future, covers some of the possible options for supporting future style standards from what people know as CSS4. You will also explore some of the risks involved and how you can replicate support using existing plugins available today or extend them to increase support for new CSS4 selectors.

All you need to work through most of the examples in this book is a simple text or code editor, a copy of NodeJS (for your platform), Internet access, and a browser. I recommend installing Sublime Text 3; it works well with Node and Gulp, which we will use throughout the book.

Some of the examples make use of additional plugins; most (if not all) can be installed directly from within NodeJS. Details are included within the appropriate chapter along with links to view the plugin source code and documentation.

The book is for frontend developers who are familiar with HTML5 and CSS3, but want to master PostCSS as part of simplifying their development workflow or remove the dependency on existing processors, such as SASS or Stylus. To get the most out of this book, you should have a good knowledge of HTML, CSS3, and JavaScript, and ideally, have some experience of using preprocessors such as SASS, Less, or Stylus.

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We'll start by installing the relevant plugins required for this demo: we'll need the postcss-nested, autocomplete, and postcss-scss plugins."

A block of code is set as follows:

gulp.task('rename', ['styles'], function () {
  return gulp.src('dest/example.css')
    .pipe(postcss([ cssnano ]))
    .pipe(rename('example.min.css'))
    .pipe(gulp.dest("dest/"));
});

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var cssnano = require('cssnano')

Any command-line input or output is written as follows:

npm install -–save-dev cssnano
npm install -–save-dev gulp-rename

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "When we view the page and select the Images tab, after a short delay we should see six new images."

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.