Getting our design to work properly for smaller devices such as iPhones is easy when working with PostCSS: we can use the postcss-media-minmax plugin available from https://github.com/postcss/postcss-media-minmax.
"How can PostCSS help us though?", I hear you ask. Easy, the point at which most people trip up when working with media queries is in setting the breakpoints, or determining where our designs break at specific sizes. The postcss-media-minmax plugin helps to make the text a little more human; after all, if a design works when the size is greater than or equal to an amount, why not say that in our code?
To see what I mean, let's get stuck into fixing our code. For simplicity, we will focus entirely on resizing our content for an iPhone 6, using 375px by 627px as our breakpoint (as determined by using Google Chrome's Responsive Design view).
We will continue exactly where we left off from the previous demo:
1. We first need to install the postcss-media-minmax plugin—to do this, fire up a Node.js command prompt session, then at the prompt add this command and press Enter:
npm install postcss-media-minmax --save-dev
2. Next, open up a copy of the sample.css file from within the src folder in our project area. We'll add the media query first, adjusted to ensure we catch the right breakpoint:
/* media queries */
@media screen and (width >= 370px) and (width <= 630px) { }
3. Immediately inside the query, go ahead and add this rule. We don't want to resize below 375px as a minimum:
body {
min-width: 375px;
}
4. The header image text needs to be resized to a smaller space, and we can also reduce it in size and move it over to the left a little:
header { width: 50%;
font-size: 2rem;
margin-left: 45%;
}
5. The #alpha content area (or menu) has automatically resized itself, but the main content area (#beta) is too wide; let's resize it down to fit. Our area won't cope with all of the text, so we'll add an overflow attribute, and set it to hide text outside the viewable area:
#beta {
margin-right: 2.35765160%;
width: 55.1748%;
overflow: auto;
}
6. At this point, we need to install the postcss-media-minmax plugin, so fire up a Node,js command prompt and change the working folder to our project area.
7. At the prompt, enter this command, then press Enter:
npm install postcss-media-minmax --save-dev
8. When the plugin is installed, enter gulp at the command prompt, and press Enter.
9. PostCSS will now compile the code, and if all is well, we should see updated style sheet and source map files appear in the dest folder.
10. Go ahead and copy these into the css folder in the Tutorial32 folder, then try previewing the results in a browser.
If all is well, we should see something akin to the following screenshot, when enabling Chrome's Responsive Design view, and switching the Device setting to Apple iPhone 6:
The changes we've made to our code are simple, and limited to supporting iPhones.
This is just the tip of the iceberg, though: there is so much more we can do!
For example, instead of specifying an exact width value as our min-width attribute (or for the width of #beta, for that matter), we could consider using @neat-span-columns to provide this value for us. Of course, we can't limit ourselves to one media query, we need to ensure we have enough media queries to cater for the devices we need to support.
This does not mean that we need to have a 1:1 relationship between a query and a device. Provided we design our queries carefully, we can set existing ones to cover several devices. Ultimately, though, the principle is still the same, but instead of using the standard colon notation, we can use the easier to read >= or <= symbols to define the breakpoint range when working with queries using PostCSS.
Summary
For many developers or designers, using grid-based development forms a key part of their working process. Many will be familiar with the likes of Bootstrap or Bourbon Neat; we can easily replicate the same functionality within PostCSS.
Let's take a moment to review what we've covered throughout this chapter.
We kicked off with a brief introduction to using grid-based development, before swiftly moving on to beginning the transition process to using PostCSS. Our first stop was a look at automating the compilation process so we can make the switch to using Gulp.
Next up, we then took a look at making the switch from using pure SASS to using the SASS-based grid system, Bourbon Neat; we covered how easy it is for Bourbon to build the structure of our grid system with minimal effort.
We then moved on to exploring the plugin options available from within PostCSS, before making the transition to using the postcss-neat plugin. We then explored how easy it is to refine our Gulp task process, by adding in tasks that we introduced from earlier in the book, to help build up a process that more closely represents real-world development. To confirm the process works, we performed a test using an adapted version of the original demo from Bourbon Neat, before moving on to converting our Japanese-themed demo to using PostCSS equivalent plugins.
We then rounded out the chapter with a brief look at refining the responsive capabilities within our design, to ensure it works better on smaller devices.
Phew, it may not seem like much, but we certainly covered a lot over the last few pages! But, as always, we continue apace: in the next chapter, we'll really get animated (sorry, pun intended!), with a look at how PostCSS can help with animating content.