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 Book Cover

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
$35.99
$44.99
RRP $35.99
RRP $44.99
eBook
Print + eBook
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Code Files
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

DEAL OF THE DAY

Sign up here to get exclusive deep discounts on our latest and bestselling eBooks, delivered straight to your inbox every day.

FREE LEARNING FOREVER

Master new IT skills and unlock valuable software & web development knowledge with a FREE eBook every day.

Recommended for You

Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
Streamline your web applications with this hands-on course. From initial structuring to full deployment, you’ll learn everything you need to know about AngularJS DOM based frameworks.
JavaScript Unlocked Book Cover
JavaScript Unlocked
$ 23.99
Improve your code maintainability, performance, and security through practical expert insights and unlock the full potential of JavaScript
Mastering JavaScript Design Patterns Book Cover
Mastering JavaScript Design Patterns
$ 26.99
Discover how to use JavaScript design patterns to create powerful applications with reliable and maintainable code
React.js Essentials Book Cover
React.js Essentials
$ 23.99
A fast-paced guide to designing and building scalable and maintainable web apps with React.js
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
Web pages that respond immediately to different screen sizes and devices is one of today’s essentials. Packed with screenshots and examples, this book will teach you the professional approach using just HTML5 and CSS3.
HTML5 and CSS3 Responsive Web Design Cookbook Book Cover
HTML5 and CSS3 Responsive Web Design Cookbook
$ 26.99
The web is moving inexorably away from the desktop, and this is the cookbook you need to make responsive websites that adapt fluidly to mobile devices. All the innovative techniques at your fingertips in one handy volume.