Mastering PostCSS for Web Design

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

Mastering PostCSS for Web Design

This ebook is included in a Mapt subscription
Alex Libby

1 customer reviews
Explore the power of PostCSS to write highly performing, modular, and modern CSS code for your web pages
$10.00
$44.99
RRP $35.99
RRP $44.99
eBook
Print + eBook
Access every Packt eBook & Video for just $100
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Find Out More
 
Preview in Mapt

Book Details

ISBN 139781785885891
Paperback414 pages

Book Description

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.

Table of Contents

Chapter 1: Introducing PostCSS
Discovering the art of processing
Introducing PostCSS
Setting up a development environment
Creating a simple example using PostCSS
Linting code using plugins
Exploring how PostCSS works
Summary
Chapter 2: Creating Variables and Mixins
Introducing variables and mixins
Creating a hover effect example
Transitioning to using PostCSS
Adding variable support to PostCSS
Updating our hover effect demo
Setting the order of plugins
Creating mixins with PostCSS
Looping content with PostCSS
Summary
Chapter 3: Nesting Rules
Introducing nesting
Navigating through pages
Transitioning to using PostCSS plugins
Exploring the pitfalls of nesting
Making the switch to BEM
Exploring our changes in more detail
Summary
Chapter 4: Building Media Queries
Revisiting media queries
Exploring custom media queries in PostCSS
Making images responsive
Adding responsive text support
Optimizing media queries
Retrofitting support for older browsers
Moving away from responsive design
Taking things further with CSS4
Summary
Chapter 5: Managing Colors, Images, and Fonts
Adding color, fonts, and media to sites
Managing fonts with PostCSS
Creating image sprites
Working with SVG in PostCSS
Adding support for WebP images
Manipulating colors and color palettes
Creating color functions with PostCSS
Summary
Chapter 6: Creating Grids
Introducing grid design
Creating an example with Bourbon Neat
Exploring the grid plugins in PostCSS
Transitioning to using PostCSS-Neat
Creating a site using Neat and PostCSS
Adding responsive capabilities
Summary
Chapter 7: Animating Elements
Revisiting basic animations
Moving away from jQuery
Making use of pre-built libraries
Switching to using SASS
Making the switch to PostCSS
Exploring plugin options within PostCSS
Updating code to use PostCSS
Creating a demo in PostCSS
Optimizing our animations
Using our own animation plugin
Summary
Chapter 8: Creating PostCSS Plugins
Extending PostCSS with plugins
Dissecting the architecture of a standard plugin
Creating an transition plugin
Building a custom font plugin
Simplifying the development process
Guidelines for plugin building
Making the plugin available for use
Summary
Chapter 9: Working with Shortcuts, Fallbacks, and Packs
Using shortcut plugins in PostCSS
Exploring plugin packs for PostCSS
Adding shortcuts with Rucksack
Linting and optimizing your code
Providing fallback support
Summary
Chapter 10: Building a Custom Processor
Creating your processor
Exploring our processor
Dissecting issues with our processor
Optimizing the output
Adding reload capabilities
Extending our processor further
Testing the final pre-processor
Getting started with some hints and tips
Introducing the CSStyle library
Summary
Chapter 11: Manipulating Custom Syntaxes
Introducing custom syntaxes
Preparing our environment
Implementing custom syntax plugins
Parsing CSS
Formatting the output with the API
Highlighting our syntax code
Summary
Chapter 12: Mixing Preprocessors
Taking the first steps
Exploring the conversion process
Introducing the Pleeease library
Compiling with other preprocessors
Using the PreCSS library
Converting a WordPress installation
Setting up our environment
Considering the conversion process
Making changes to our code
Compiling and testing the changes
Summary
Chapter 13: Troubleshooting PostCSS Issues
Fixing some common issues
Exploring some common issues
Getting help from others
Summary
Chapter 14: Preparing for the Future
Supporting CSS4 styles today
Converting CSS4 styles for use
Supporting future syntax with cssnext
Creating plugins to provide extra CSS4 support
Summary

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

Authors

Table of Contents

Chapter 1: Introducing PostCSS
Discovering the art of processing
Introducing PostCSS
Setting up a development environment
Creating a simple example using PostCSS
Linting code using plugins
Exploring how PostCSS works
Summary
Chapter 2: Creating Variables and Mixins
Introducing variables and mixins
Creating a hover effect example
Transitioning to using PostCSS
Adding variable support to PostCSS
Updating our hover effect demo
Setting the order of plugins
Creating mixins with PostCSS
Looping content with PostCSS
Summary
Chapter 3: Nesting Rules
Introducing nesting
Navigating through pages
Transitioning to using PostCSS plugins
Exploring the pitfalls of nesting
Making the switch to BEM
Exploring our changes in more detail
Summary
Chapter 4: Building Media Queries
Revisiting media queries
Exploring custom media queries in PostCSS
Making images responsive
Adding responsive text support
Optimizing media queries
Retrofitting support for older browsers
Moving away from responsive design
Taking things further with CSS4
Summary
Chapter 5: Managing Colors, Images, and Fonts
Adding color, fonts, and media to sites
Managing fonts with PostCSS
Creating image sprites
Working with SVG in PostCSS
Adding support for WebP images
Manipulating colors and color palettes
Creating color functions with PostCSS
Summary
Chapter 6: Creating Grids
Introducing grid design
Creating an example with Bourbon Neat
Exploring the grid plugins in PostCSS
Transitioning to using PostCSS-Neat
Creating a site using Neat and PostCSS
Adding responsive capabilities
Summary
Chapter 7: Animating Elements
Revisiting basic animations
Moving away from jQuery
Making use of pre-built libraries
Switching to using SASS
Making the switch to PostCSS
Exploring plugin options within PostCSS
Updating code to use PostCSS
Creating a demo in PostCSS
Optimizing our animations
Using our own animation plugin
Summary
Chapter 8: Creating PostCSS Plugins
Extending PostCSS with plugins
Dissecting the architecture of a standard plugin
Creating an transition plugin
Building a custom font plugin
Simplifying the development process
Guidelines for plugin building
Making the plugin available for use
Summary
Chapter 9: Working with Shortcuts, Fallbacks, and Packs
Using shortcut plugins in PostCSS
Exploring plugin packs for PostCSS
Adding shortcuts with Rucksack
Linting and optimizing your code
Providing fallback support
Summary
Chapter 10: Building a Custom Processor
Creating your processor
Exploring our processor
Dissecting issues with our processor
Optimizing the output
Adding reload capabilities
Extending our processor further
Testing the final pre-processor
Getting started with some hints and tips
Introducing the CSStyle library
Summary
Chapter 11: Manipulating Custom Syntaxes
Introducing custom syntaxes
Preparing our environment
Implementing custom syntax plugins
Parsing CSS
Formatting the output with the API
Highlighting our syntax code
Summary
Chapter 12: Mixing Preprocessors
Taking the first steps
Exploring the conversion process
Introducing the Pleeease library
Compiling with other preprocessors
Using the PreCSS library
Converting a WordPress installation
Setting up our environment
Considering the conversion process
Making changes to our code
Compiling and testing the changes
Summary
Chapter 13: Troubleshooting PostCSS Issues
Fixing some common issues
Exploring some common issues
Getting help from others
Summary
Chapter 14: Preparing for the Future
Supporting CSS4 styles today
Converting CSS4 styles for use
Supporting future syntax with cssnext
Creating plugins to provide extra CSS4 support
Summary

Book Details

ISBN 139781785885891
Paperback414 pages
Read More
From 1 reviews

Read More Reviews