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 '' is not in your gulpfile

Cannot find module ''

ReferenceError: 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

Mastering PostCSS for Web Design

Mastering PostCSS for Web Design

Copyright © 2016 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: June 2016

Production reference: 1240616

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78588-589-1

www.packtpub.com

Credits

Author

Alex Libby

Reviewer

Michael Ebbage

Commissioning Editor

Wilson D'souza

Acquisition Editor

Larissa Pinto

Content Development Editor

Riddhi Tuljapurkar

Technical Editors

Chinmay Puranik

Jayesh Sonawane

Copy Editor

Safis Editing

Project Coordinator

Sanchita Mandal

Proofreader

Safis Editing

Indexer

Monica Ajmera Mehta

Production Coordinator

Manu Joseph

Cover Work

Manu Joseph

About the Author

Alex Libby's background is in IT support—he has been involved in supporting end users for almost 20 years in a variety of different environments; a recent change in role now sees Alex working as an MVT test developer for a global distributor based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been the open source movement, and in particular, experimenting with CSS/CSS3, jQuery, and HTML5. To date, Alex has written 10 books on subjects such as jQuery, HTML5 video, SASS, and CSS for Packt and has reviewed several more—Mastering PostCSS Web Design is Alex's eleventh book for Packt.

I would like to thank my family and friends for their support throughout the process and the reviewers for their valued comments; this book wouldn't be what it is without them! I would also particularly like to thank Andrey Sitnik for his work in producing PostCSS and being really helpful and patient in answering questions about some of its more complex parts. My grateful thanks also to Ernie Salazar from NPM, who helped with issues with publishing the plugins created for this book, and David Clark for his assistance with getting me back on track with the postcss-bem-linter plugin, also used in the book. Thank you all—I couldn't have finished the book without your help!

About the Reviewer

Michael Ebbage is a software architect who specializes in e-commerce and Java technology-based web applications. He created his first web page almost two decades ago—since then, he's gone on to develop hundreds of websites for some of the UK's biggest companies (many featuring on the FTSE 100 and 250), as the tools and techniques used to do so have continually changed and evolved.

He has a background in software development and holds a BSc (Hons) in computing and information systems. He is also one of the top contributors to Stack Overflow, where you'll regularly find him answering questions on a wide range of web-related languages and technologies.

I'd like to thank the author, Alex, for the opportunity to be involved with this book. It's been a great learning experience, and I now have a renewed admiration for the amount of knowledge and effort that goes into it. I would also like to thank my beloved wife and son for their patience and support during the time I spent working on reviewing it.

www.PacktPub.com

eBooks, discount offers, and more

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Preface

As a developer, I'll bet you have a perfect workflow—you either write styles using plain vanilla CSS or use one of the current processors, such as SASS or Less, to create them. You'll add vendor prefixes using the likes of Autoprefixer—either manually or using a tool, such as Grunt or Gulp.

Sounds familiar? Why would you want to disturb something if it works for you, right?

Trouble is, a friend or colleague has started talking about a new processor by the name of PostCSS—they've piqued your interest sufficiently to want to find out more about what it is and how it works.

Well, welcome to the fast-growing ecosystem that is PostCSS! By itself, the tool doesn't do anything, but when paired with the right plugins (and there are hundreds available for use), it has the potential to become a really powerful processor for you. Gone are the days when we have to depend on a monolithic library such as SASS or less. Instead, we can pick and choose exactly which plugins to use based on our project requirements. PostCSS is an immensely quick processor to use; the question is, are you ready for the ride?

Here's hoping the answer is yes; if so, let's make a start.

What this book covers

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.