You are previewing Mastering PostCSS for Web Design.
O'Reilly logo
Mastering PostCSS for Web Design

Book Description

Explore the power of PostCSS to write highly performing, modular, and modern CSS code for your web pages

About This Book

  • Incorporate cutting-edge styles in your web pages with PostCSS

  • Simplify the process of writing CSS to a great extent using PostCSS shortcuts, fallbacks, and pack plugins

  • This in-depth, step-by-step guide will help you master PostCSS, to create amazing and responsive web designs

  • Who This Book Is For

    This book is ideal for web developers and designers who are comfortable with HTML5 and CSS and now want to master PostCSS for web design. Web designers who have been using SASS or Less and now want to adopt PostCSS would also find this book useful.

    What You Will Learn

  • Add mixin and variable support to PostCSS along with conditional support

  • Explore the different ways of nesting code such as BEM and standard nesting within PostCSS

  • Optimize media queries built with PostCSS to get the best performance

  • Add dynamic styling elements such as images, fonts, grids, and SVG and retina support using existing preprocessors as well as PostCSS

  • Get familiar with using plugins, and extend PostCSS with the API

  • Build a fully working custom preprocessor and test it on different sites such as WordPress

  • Write a custom syntax in PostCSS while still using pre-built syntaxes such as Less, SASS, or Stylus

  • Provide support for future CSS such as CSS4 using current CSS3 classes

  • In Detail

    PostCSS is a tool that has quickly emerged as the future of existing preprocessors such as SASS and Less, mainly because of its power, speed, and ease of use. This comprehensive guide offers in-depth guidance on incorporating cutting-edge styles into your web page and at the same time maintaining the performance and maintainability of your code.

    The book will show how you can take advantage of PostCSS to simplify the entire process of stylesheet authoring. It covers various techniques to add dynamic and modern styling features to your web pages. As the book progresses, you will learn how to make CSS code more maintainable by taking advantage of the modular architecture of PostCSS. By the end of this book, you would have mastered the art of adding modern CSS effects to web pages by authoring high performing, maintainable stylesheets.

    Style and approach

    This comprehensive book provides in-depth guidance on how to build a PostCSS powered responsive site from scratch. Following a step-by-step approach, you will learn how to add modern styles to web pages. It also contains several tips and best practices on how you can optimize your sites by writing high performing code in PostCSS.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Mastering PostCSS for Web Design
      1. Table of Contents
      2. Mastering PostCSS for Web Design
      3. Credits
      4. About the Author
      5. About the Reviewer
        1. eBooks, discount offers, and more
          1. Why subscribe?
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Introducing PostCSS
        1. Discovering the art of processing
        2. Introducing PostCSS
          1. Exploring the benefits of using PostCSS
          2. Considering some of the pitfalls
          3. Clearing up some misconceptions
          4. Preparing for exercises in this book
        3. Setting up a development environment
          1. Installing PostCSS
        4. Creating a simple example using PostCSS
          1. Adding source map support
          2. Creating minified style sheets
          3. Altering to compile automatically
        5. Linting code using plugins
        6. Exploring how PostCSS works
          1. Making the move from SASS
        7. Summary
      9. 2. Creating Variables and Mixins
        1. Introducing variables and mixins
          1. Setting up SASS
        2. Creating a hover effect example
          1. Using Less CSS as an alternative
        3. Transitioning to using PostCSS
        4. Adding variable support to PostCSS
        5. Updating our hover effect demo
          1. Taking it a step further
        6. Setting the order of plugins
        7. Creating mixins with PostCSS
          1. Updating our hover effect demo
          2. Comparing PostCSS to standard processors
        8. Looping content with PostCSS
          1. Iterating through @each statements
          2. Switching to using PostCSS
        9. Summary
      10. 3. Nesting Rules
        1. Introducing nesting
        2. Navigating through pages
          1. Preparing our demo
          2. Converting from existing processors
        3. Transitioning to using PostCSS plugins
          1. Converting our demo to PostCSS
          2. Compiling our code
        4. Exploring the pitfalls of nesting
          1. Taking a better approach
          2. Reconsidering our code
          3. Updating our code
        5. Making the switch to BEM
          1. Creating simple message boxes
          2. Compiling and linting our code
          3. Installing BEM support
        6. Exploring our changes in more detail
          1. Fixing our errors
        7. Summary
      11. 4. Building Media Queries
        1. Revisiting media queries
        2. Exploring custom media queries in PostCSS
          1. Beginning with plain CSS
          2. Altering our demo to use PostCSS
        3. Making images responsive
          1. Making an image responsive with PostCSS
          2. Implementing responsive capabilities to images
          3. Adding support for retina images
          4. Taking the next steps
          5. Exploring other media possibilities
        4. Adding responsive text support
        5. Optimizing media queries
        6. Retrofitting support for older browsers
        7. Moving away from responsive design
        8. Taking things further with CSS4
        9. Summary
      12. 5. Managing Colors, Images, and Fonts
        1. Adding color, fonts, and media to sites
          1. Maintaining asset links
          2. Automating links to assets
        2. Managing fonts with PostCSS
        3. Creating image sprites
          1. Demo – creating a credit card icon bar
        4. Working with SVG in PostCSS
          1. Altering icon images using PostCSS
          2. Exploring the results in more detail
          3. Considering alternative options
        5. Adding support for WebP images
          1. Switching WebP images in and out
          2. Viewing the differences in file sizes
        6. Manipulating colors and color palettes
          1. Displaying and mixing colors using palettes
          2. Dissecting our demo in more detail
        7. Creating color functions with PostCSS
          1. Adjusting colors using functions
          2. Dissecting our demo
          3. Creating colors with PostCSS filters
            1. Exploring our demo in more detail
            2. Comparing with CSS3 filters
          4. Adding Instagram effects to your images
        8. Summary
      13. 6. Creating Grids
        1. Introducing grid design
          1. Automating the compilation process
          2. Adding support for Bourbon Neat
        2. Creating an example with Bourbon Neat
          1. Exploring our demo in more detail
        3. Exploring the grid plugins in PostCSS
        4. Transitioning to using PostCSS-Neat
          1. Refining our task list
          2. Testing our configuration
        5. Creating a site using Neat and PostCSS
          1. Making the change to PostCSS
        6. Adding responsive capabilities
          1. Correcting the design
        7. Summary
      14. 7. Animating Elements
        1. Revisiting basic animations
        2. Moving away from jQuery
          1. Animating content with Transit.js
          2. Animating with plain JavaScript
          3. Switching classes using jQuery
        3. Making use of pre-built libraries
          1. Dissecting the code for our demo
        4. Switching to using SASS
          1. Creating an animated gallery
          2. Adding the finishing touches
        5. Making the switch to PostCSS
        6. Exploring plugin options within PostCSS
        7. Updating code to use PostCSS
          1. Testing our altered code
        8. Creating a demo in PostCSS
          1. Updating the plugin
          2. Building our demo
          3. Dissecting our demo in more detail
        9. Optimizing our animations
        10. Using our own animation plugin
          1. Exploring the plugin in more detail
        11. Summary
      15. 8. Creating PostCSS Plugins
        1. Extending PostCSS with plugins
        2. Dissecting the architecture of a standard plugin
          1. Exploring index.js
          2. Discovering package.json
          3. Exploring test.js
          4. The Vendor module
          5. The List module
          6. Classes available in the API
          7. Nodes available in the API
          8. Methods available in the API
        3. Creating an transition plugin
          1. Creating a test for our plugin
          2. Correcting the errors
          3. Clearing the final error
          4. Performing a test using the plugin
          5. Dissecting our plugin in detail
        4. Building a custom font plugin
          1. Dissecting the functionality of our plugin
          2. Exploring the dangers of publishing this plugin
        5. Simplifying the development process
        6. Guidelines for plugin building
        7. Making the plugin available for use
        8. Summary
      16. 9. Working with Shortcuts, Fallbacks, and Packs
        1. Using shortcut plugins in PostCSS
        2. Exploring plugin packs for PostCSS
          1. Writing styles in shorthand
        3. Adding shortcuts with Rucksack
          1. Introducing our demo
          2. Installing Rucksack as a plugin
          3. Easing into using Rucksack
          4. Animating content using the plugin
            1. Dissecting our demo in more detail
          5. Converting our slider to use Rucksack
          6. Dissecting our code
        4. Linting and optimizing your code
          1. Exploring the use of cssnano
          2. Configuring Stylelint as our linter
        5. Providing fallback support
          1. Detecting support for features
          2. Providing support for oldie
          3. Removing style hacks from code
        6. Summary
      17. 10. Building a Custom Processor
        1. Creating your processor
        2. Exploring our processor
          1. Dissecting the package.json file
          2. Exploring the Gulp task file
        3. Dissecting issues with our processor
          1. Fixing our Gulp task file
          2. Understanding the changes made
        4. Optimizing the output
          1. Altering our source map support
          2. Taking care of prefixes
          3. Adding support for pseudo-selectors
          4. Updating our code
          5. Dealing with images
            1. Exploring the process
        5. Adding reload capabilities
        6. Extending our processor further
        7. Testing the final pre-processor
          1. Digesting the results of our exercise
        8. Getting started with some hints and tips
        9. Introducing the CSStyle library
          1. Exploring the benefits of using CSStyle
          2. Dissecting our demo
        10. Summary
      18. 11. Manipulating Custom Syntaxes
        1. Introducing custom syntaxes
        2. Preparing our environment
        3. Implementing custom syntax plugins
          1. Parsing content and fixing errors
          2. Parsing SCSS content
          3. Exploring what happened
        4. Parsing CSS
          1. Replacing RGBA colors
          2. Exploring how it all works
        5. Formatting the output with the API
          1. Dissecting our example code
          2. Adding source maps
        6. Highlighting our syntax code
          1. Installing themes
          2. Creating a HTML display theme
        7. Summary
      19. 12. Mixing Preprocessors
        1. Taking the first steps
        2. Exploring the conversion process
          1. Choosing our plugins
        3. Introducing the Pleeease library
          1. Installing and configuring the Pleeease library
          2. Compiling code manually
          3. Compiling using a task runner
          4. Building an example using Pleeease
        4. Compiling with other preprocessors
        5. Using the PreCSS library
        6. Converting a WordPress installation
        7. Setting up our environment
        8. Considering the conversion process
        9. Making changes to our code
          1. Splitting our style sheet
          2. Adding support for vendor prefixes
          3. Checking our code for consistency
          4. Minifying our code
          5. Creating variables
          6. Adding support for rem units
          7. Nesting rules in our style sheet
          8. Looping through styles
          9. Considering future possible ideas
        10. Compiling and testing the changes
        11. Summary
      20. 13. Troubleshooting PostCSS Issues
        1. Fixing some common issues
        2. Exploring some common issues
          1. Not compatible with your operating system…
          2. Task '<name of task>' is not in your gulpfile
          3. Cannot find module '<name of plugin>'
          4. ReferenceError: <name of task> is not defined
          5. Please provide array of postcss processors!
          6. Entries failing to appear in the package.json file
          7. Output of compiling results is not as expected
        3. Getting help from others
          1. Logging issues at Stack Overflow
          2. Finding a bug with PostCSS
        4. Summary
      21. 14. Preparing for the Future
        1. Supporting CSS4 styles today
        2. Converting CSS4 styles for use
          1. Validating e-mail addresses
          2. Supporting the new range input
        3. Supporting future syntax with cssnext
          1. Creating a site template with cssnext
          2. Setting up our demo
        4. Creating plugins to provide extra CSS4 support
          1. Adding future color support to CSS
          2. Going back in time
          3. Creating our own plugin
        5. Summary
      22. Index