O'Reilly logo



Start Free Trial

No credit card required

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
  • This in-depth, step-by-step guide will help you master PostCSS, to create amazing and responsive web designs

Who This Book Is For


What You Will Learn

  • Add mixin and variable support to PostCSS along with conditional support
  • Optimize media queries built with PostCSS to get the best performance

In Detail



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.

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
    6. www.PacktPub.com
      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