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

Alex Libby

1 customer reviews
Explore the power of PostCSS to write highly performing, modular, and modern CSS code for your web pages
Mapt Subscription
FREE
$29.99/m after trial
eBook
$25.20
RRP $35.99
Save 29%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$25.20
$44.99
$29.99p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
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

Recommended for You

Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
JavaScript Unlocked Book Cover
JavaScript Unlocked
$ 23.99
$ 16.80
Mastering JavaScript Design Patterns Book Cover
Mastering JavaScript Design Patterns
$ 26.99
$ 18.90
React.js Essentials Book Cover
React.js Essentials
$ 23.99
$ 16.80
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
HTML5 and CSS3 Responsive Web Design Cookbook Book Cover
HTML5 and CSS3 Responsive Web Design Cookbook
$ 26.99
$ 5.40