www.allitebooks.com Mastering PostCSS for Web Design Explore the power of PostCSS to write highly performing, modular, and modern CSS code for your web pages Alex Libby BIRMINGHAM - MUMBAI www.allitebooks.com 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 www.allitebooks.com Credits Author Project Coordinator Alex Libby Sanchita Mandal Reviewer Proofreader Michael Ebbage Safis Editing Commissioning Editor Indexer Wilson D'souza Monica Ajmera Mehta Acquisition Editor Production Coordinator Larissa Pinto Manu Joseph Content Development Editor Cover Work Riddhi Tuljapurkar Manu Joseph Technical Editors Chinmay Puranik Jayesh Sonawane Copy Editor Safis Editing www.allitebooks.com 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! www.allitebooks.com 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.allitebooks.com 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 [email protected] 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. TM 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 www.allitebooks.com Table of Contents Preface ix Chapter 1: Introducing PostCSS 1 Discovering the art of processing 2 Introducing PostCSS 2 Exploring the benefits of using PostCSS 3 Considering some of the pitfalls 4 Clearing up some misconceptions 5 Preparing for exercises in this book 5 Setting up a development environment 6 Installing PostCSS 9 Creating a simple example using PostCSS 11 Adding source map support 12 Creating minified style sheets 14 Altering to compile automatically 16 Linting code using plugins 18 Exploring how PostCSS works 21 Making the move from SASS 22 Summary 23 Chapter 2: Creating Variables and Mixins 25 Introducing variables and mixins 25 Setting up SASS 26 Creating a hover effect example 28 Using Less CSS as an alternative 31 Transitioning to using PostCSS 31 Adding variable support to PostCSS 31 Updating our hover effect demo 32 Taking it a step further 35 Setting the order of plugins 37 [ i ] www.allitebooks.com Table of Contents Creating mixins with PostCSS 38 Updating our hover effect demo 39 Comparing PostCSS to standard processors 41 Looping content with PostCSS 44 Iterating through @each statements 45 Switching to using PostCSS 48 Summary 50 Chapter 3: Nesting Rules 51 Introducing nesting 51 Navigating through pages 53 Preparing our demo 54 Converting from existing processors 54 Transitioning to using PostCSS plugins 55 Converting our demo to PostCSS 57 Compiling our code 58 Exploring the pitfalls of nesting 59 Taking a better approach 62 Reconsidering our code 66 Updating our code 66 Making the switch to BEM 68 Creating simple message boxes 70 Compiling and linting our code 72 Installing BEM support 72 Exploring our changes in more detail 76 Fixing our errors 77 Summary 79 Chapter 4: Building Media Queries 81 Revisiting media queries 81 Exploring custom media queries in PostCSS 82 Beginning with plain CSS 84 Altering our demo to use PostCSS 85 Making images responsive 87 Making an image responsive with PostCSS 88 Implementing responsive capabilities to images 88 Adding support for retina images 91 Taking the next steps 92 Exploring other media possibilities 95 Adding responsive text support 96 Optimizing media queries 99 Retrofitting support for older browsers 100 [ ii ] www.allitebooks.com Table of Contents Moving away from responsive design 101 Taking things further with CSS4 102 Summary 103 Chapter 5: Managing Colors, Images, and Fonts 105 Adding color, fonts, and media to sites 106 Maintaining asset links 106 Automating links to assets 106 Managing fonts with PostCSS 109 Creating image sprites 111 Demo – creating a credit card icon bar 112 Working with SVG in PostCSS 115 Altering icon images using PostCSS 115 Exploring the results in more detail 116 Considering alternative options 118 Adding support for WebP images 119 Switching WebP images in and out 119 Viewing the differences in file sizes 120 Manipulating colors and color palettes 123 Displaying and mixing colors using palettes 124 Dissecting our demo in more detail 126 Creating color functions with PostCSS 127 Adjusting colors using functions 128 Dissecting our demo 129 Creating colors with PostCSS filters 130 Exploring our demo in more detail 132 Comparing with CSS3 filters 133 Adding Instagram effects to your images 134 Summary 136 Chapter 6: Creating Grids 139 Introducing grid design 139 Automating the compilation process 142 Adding support for Bourbon Neat 144 Creating an example with Bourbon Neat 145 Exploring our demo in more detail 147 Exploring the grid plugins in PostCSS 149 Transitioning to using PostCSS-Neat 150 Refining our task list 152 Testing our configuration 153 Creating a site using Neat and PostCSS 155 Making the change to PostCSS 157 [ iii ] www.allitebooks.com Table of Contents Adding responsive capabilities 159 Correcting the design 160 Summary 163 Chapter 7: Animating Elements 165 Revisiting basic animations 165 Moving away from jQuery 167 Animating content with Transit.js 168 Animating with plain JavaScript 170 Switching classes using jQuery 172 Making use of pre-built libraries 173 Dissecting the code for our demo 175 Switching to using SASS 176 Creating an animated gallery 178 Adding the finishing touches 181 Making the switch to PostCSS 184 Exploring plugin options within PostCSS 184 Updating code to use PostCSS 185 Testing our altered code 187 Creating a demo in PostCSS 188 Updating the plugin 189 Building our demo 190 Dissecting our demo in