Table of Contents for
Mastering PostCSS for Web Design

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Mastering PostCSS for Web Design by Alex Libby Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. Mastering PostCSS for Web Design
  4. Mastering PostCSS for Web Design
  5. Credits
  6. About the Author
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Introducing PostCSS
  16. Introducing PostCSS
  17. Setting up a development environment
  18. Creating a simple example using PostCSS
  19. Linting code using plugins
  20. Exploring how PostCSS works
  21. Summary
  22. 2. Creating Variables and Mixins
  23. Creating a hover effect example
  24. Transitioning to using PostCSS
  25. Adding variable support to PostCSS
  26. Updating our hover effect demo
  27. Setting the order of plugins
  28. Creating mixins with PostCSS
  29. Looping content with PostCSS
  30. Summary
  31. 3. Nesting Rules
  32. Navigating through pages
  33. Transitioning to using PostCSS plugins
  34. Exploring the pitfalls of nesting
  35. Making the switch to BEM
  36. Exploring our changes in more detail
  37. Summary
  38. 4. Building Media Queries
  39. Exploring custom media queries in PostCSS
  40. Making images responsive
  41. Adding responsive text support
  42. Optimizing media queries
  43. Retrofitting support for older browsers
  44. Moving away from responsive design
  45. Taking things further with CSS4
  46. Summary
  47. 5. Managing Colors, Images, and Fonts
  48. Managing fonts with PostCSS
  49. Creating image sprites
  50. Working with SVG in PostCSS
  51. Adding support for WebP images
  52. Manipulating colors and color palettes
  53. Creating color functions with PostCSS
  54. Summary
  55. 6. Creating Grids
  56. Creating an example with Bourbon Neat
  57. Exploring the grid plugins in PostCSS
  58. Transitioning to using PostCSS-Neat
  59. Creating a site using Neat and PostCSS
  60. Adding responsive capabilities
  61. Summary
  62. 7. Animating Elements
  63. Moving away from jQuery
  64. Making use of pre-built libraries
  65. Switching to using SASS
  66. Making the switch to PostCSS
  67. Exploring plugin options within PostCSS
  68. Updating code to use PostCSS
  69. Creating a demo in PostCSS
  70. Optimizing our animations
  71. Using our own animation plugin
  72. Summary
  73. 8. Creating PostCSS Plugins
  74. Dissecting the architecture of a standard plugin
  75. Creating an transition plugin
  76. Building a custom font plugin
  77. Simplifying the development process
  78. Guidelines for plugin building
  79. Making the plugin available for use
  80. Summary
  81. 9. Working with Shortcuts, Fallbacks, and Packs
  82. Exploring plugin packs for PostCSS
  83. Adding shortcuts with Rucksack
  84. Linting and optimizing your code
  85. Providing fallback support
  86. Summary
  87. 10. Building a Custom Processor
  88. Exploring our processor
  89. Dissecting issues with our processor
  90. Optimizing the output
  91. Adding reload capabilities
  92. Extending our processor further
  93. Testing the final pre-processor
  94. Getting started with some hints and tips
  95. Introducing the CSStyle library
  96. Summary
  97. 11. Manipulating Custom Syntaxes
  98. Preparing our environment
  99. Implementing custom syntax plugins
  100. Parsing CSS
  101. Formatting the output with the API
  102. Highlighting our syntax code
  103. Summary
  104. 12. Mixing Preprocessors
  105. Exploring the conversion process
  106. Introducing the Pleeease library
  107. Compiling with other preprocessors
  108. Using the PreCSS library
  109. Converting a WordPress installation
  110. Setting up our environment
  111. Considering the conversion process
  112. Making changes to our code
  113. Compiling and testing the changes
  114. Summary
  115. 13. Troubleshooting PostCSS Issues
  116. Exploring some common issues
  117. Getting help from others
  118. Summary
  119. 14. Preparing for the Future
  120. Converting CSS4 styles for use
  121. Supporting future syntax with cssnext
  122. Creating plugins to provide extra CSS4 support
  123. Summary
  124. Index

Exploring plugin packs for PostCSS

Cast your mind back, if you will, to some advice I gave earlier about plugins—remember how I said that in an ideal world, a plugin should serve a single purpose?

Well, one might be forgiven for thinking that we're ignoring this advice when we talk about plugin packs. In reality, we're not; all of the plugin packs available for PostCSS provide a single interface for multiple single plugins. At present, the list of plugin packs include these examples:

  • Oldie: Available from https://github.com/jonathantneal/oldie, this plugin is an interface for nine separate plugins; it handles support for older versions of IE.
  • Short: Hosted at https://github.com/jonathantneal/postcss-short, this plugin lets us write styles using our own shorthand properties.
  • AtCSS : This plugin is available at https://github.com/morishitter/atcss, this interesting plugin provides a new take on SASS' @extend by allowing us to create rules that inherit from base rules.
  • precss: This plugin, from https://github.com/jonathantneal/precss, allows us to use SASS-like markup in our style sheets. We will explore this in more detail in Chapter 11, Manipulating Custom Syntaxes.
  • Stylelint: This plugin pack should form part of any PostCSS developer's toolkit: it allows us to lint our style sheets automatically. The pack is available from https://github.com/stylelint/stylelint.
  • Cssnano: In a similar vein, cssnano should be part of any developer's toolkit: this pack is perfect for compressing and optimizing code within our style sheets. You can get the plugin from https://github.com/ben-eb/cssnano.
  • Rucksack: Last, but by no means least, Rucksack (as described by the developer), is a "…little bag of CSS superpowers". This pack adds support for functionality such as font src generation, providing fallback support for RGBA values, or the clearfix hack.

These packs provide a real mix of functionality—it is naturally up to us to decide which plugins we want to use. At this point, though, one might be tempted to ask "why use a pack—surely this adds unnecessarily redundant functionality that we're trying to avoid adding?"

It's a good question, the simple answer is that it will depend on your requirements. If all we're interested in is adding vendor prefixes, then checking and compressing our code, then we would most likely use autoprefixer, cssnano, and stylelint. But if we wanted to add property aliases, then autoprefixer can be dropped in favor of using Rucksack with cssnano and stylelint. The key here, though, is to carefully assess what you need, and work out the best combination of plugins to use from the selection available for PostCSS.

Okay, time for a change: let's move on! We will be exploring some of these plugin packs over the next few pages: let's make a start with a simple plugin, in the form of postcss-short.

Writing styles in shorthand

This plugin, available from https://github.com/jonathantneal/postcss-short, is a wrapper for several plugins available for the PostCSS ecosystem; these include Shorthand Border, Shorthand Color, and Shorthand Size. Installing the plugin is a breeze—it uses the same format as most other PostCSS plugins, and can be installed using this command within our project root area, in a Node.js command prompt session:

npm install postcss-short --save-dev

The great thing about this plugin (and other plugin packs) is that it removes the need to call lots of separate plugins. We must bear in mind though that to make this worthwhile, we need to be calling most of the plugins in some form or other. If we're only calling one or two from postcss-short, then we may prefer to call them individually, and not use the postcss-short plugin.

Leaving aside any concerns about using the plugin, let's take a look at some examples of it in action. The best way to experience it is to use the online editor at http://jonathantneal.github.io/postcss-short/. We can use this to experiment before adding the final result to our style sheet prior to compilation:

Writing styles in shorthand

In this example (taken from the plugin site), we've used all of the plugins, with the exception of Shorthand Text and Shorthand Data. In our code, we've used the relevant shorthand as specified for the plugin—PostCSS will compile this into valid CSS styles, as outlined within each plugin.

Which plugins we use will of course depend on our requirements—there is every possibility that you will find yourselves using particular plugins more than others. Staying with the theme of shorthand, though, there is one plugin pack that is likely to feature often in your toolkit—Rucksack. No, I don't suggest this is an opportunity to go on holiday (no pun intended), but more an occasion to use what will be a very useful set of plugins within PostCSS.