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. However, the information contained in this book is sold without warranty, either express or implied. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. 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. The Template:
![]() ![]() Postcss Code Using PluginsOn demand and accessible via a web browserTable 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 23Chapter 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 pluginsCreating mixins with PostCSS 38 Updating our hover effect demo 39 Comparing PostCSS to standard processors 41 Looping content with PostCSS 44 Iterating through statements 45 Switching to using PostCSS 48 Summary 50Introducing 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 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 101 Taking things further with CSS4 102 Summary 103Chapter 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 filters105 106 106 106 109 111 112 115 115 116 118 119 119 120 123 124 126 127 128 129 130Adding Instagram effects to your images 134 Summary 136Introducing 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 139 139 142 144 145 147 149 150 152 153 155 157Adding responsive capabilities 159 Correcting the design 160 Summary 163Revisiting 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 more detail 191 Optimizing our animations 192 Using our own animation plugin 193 Exploring the plugin in more detail 195 Summary 196 Extending PostCSS with plugins Dissecting the architecture of a standard plugin Exploring index.js Discovering package.json Exploring test. Copy and paste, print, and bookmark content Fully searchable across every book published by Packt |