Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Mastering PostCSS for Web Design
  • Table Of Contents Toc
Mastering PostCSS for Web Design

Mastering PostCSS for Web Design

By : Alex Libby
Buy this Book
close
close
Mastering PostCSS for Web Design

Mastering PostCSS for Web Design

By: Alex Libby
Buy this Book

Overview of this book

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

Optimizing our animations

When working with animations, there may be occasions when we need to use custom effects; one way to achieve this is through the use of @keyframes. Trouble is, some browsers don't support their use within media queries (yes, I'm looking at you, IE10 and IE11!).

How does this affect us, I hear you ask? Well, if you're building any responsive sites, then this is absolutely something we need to bear in mind; media queries form the basic structure for any responsive functionality.

It's an easy fix though—the developer, Andy Walpole, has created a simple PostCSS plugin called mq-keyframes, which is available at https://github.com/TCotton/postcss-mq-keyframes.

Imagine we have code such as this in our style sheet:

@media only screen and (min-width: 375px) {
  .custom-bounce {
    animation: side-bounce 5s;
  }

  @keyframes side-bounce {
    100% {
      opacity: 0;
    }
  }
}

All the plugin does is move the code to the bottom of our style sheets, which makes it easier to read...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Mastering PostCSS for Web Design
End of Section 7
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon