Creating a demo in PostCSS

As an afterthought to the previous exercise, I posed the question, "How many times have you seen forms that display labels above, or to the right of, fields?" If I were to collect a dime for each answer, I suspect I would be off on some exotic island, rich, and without a care in the world—I've lost count of the number of times I've seen such forms, let alone anyone else who uses the Internet!

There is no excuse for plain, boring forms. To prove this, we're going to create a simple demo using the postcss-transform-shortcut plugin by Jonathan Neal, available from https://github.com/jonathantneal/postcss-transform-shortcut. It's a straightforward plugin that allows us to specify single properties, which the plugin combines into a single line of code within our style sheet. Let's quickly install it:

First, go ahead and fire up a Node.js command prompt session, then change the working folder to our project area.
At the prompt, enter this command, then press Enter:
```
npm install postcss-transform-shortcut --save-dev
```
Node will now install the plugin—it will return back to a flashing prompt when this is complete.

There is no need to configure it, although there is a small task we have to complete before we can use it.

Updating the plugin

While researching for this book, I came across an issue in the current release (1.0.0), whereby style sheets weren't compiling properly if they had multiple rules within; there are occasions when plugins may or may not work for your environment, and this is one of them!

Thankfully, this is an easy fix—if we take a look within the postcss-transform-shortcut folder within the node_modules folder in our project area, we should see this:

Simply copy the contents of the file at https://raw.githubusercontent.com/pc035860/postcss-transform-shortcut/07af8a78d1fb5e7fdeebc8c7f56c0c9ecdd83efb/index.js and paste straight over the top of index.js; this should resolve the issue.

Note

This has been logged as an issue in the developer's GitHub site, at https://github.com/jonathantneal/postcss-transform-shortcut/issues/4, if you would like to see more details about the issue.

Building our demo

Now that we have our updated plugin in place, we can get on with building our demo! The next exercise will take the form of a simple credit card form—I don't suggest you use it in a production environment, as it is purely designed to show the animation effects only, and does not have any security attached to the form!

That aside, here's a screenshot of what we're going to produce, using PostCSS:

It's a simple demo, based on a codepen created by Michael Arestad, which you can view at http://codepen.io/MichaelArestad/pen/ohLIa—I've simplified and reworked the demo to illustrate how we can use PostCSS to compile the code into valid CSS styles.

Okay, let's make a start with setting up our demo:

We'll start by extracting a copy of the T40 – Creating a demo in PostCSS folder from the code download that accompanies this book; save it to our project area.
From within the folder, move the package.json and gulpfile.js files up a level to the root of our project area.
In the css – completed versions folder, copy style – pre-compile version.css to the src folder, and rename as style.css.
Next, fire up a Node.js command prompt session, then change the working folder to our project area.
At the prompt, enter gulp, then press Enter—PostCSS will go away and compile our code; if all is well, we should see our compiled style sheet files and source maps appear in the dest folder.
Copy the contents of the dest folder to the css folder within the original T40 – Creating a demo in PostCSS folder.
Go ahead and preview the results—if all is well, we should see something akin to the screenshot shown at the start of our exercise.

It's a simple demo, but it shows off how we can use animations perfectly—it adds a subtle effect to the label, and doesn't spoil the overall use of our form. The use of the plugin does raise a couple of useful points, so let's take a moment to explore what we've just created in more detail.

Dissecting our demo in more detail

The key to a successful plugin in PostCSS is one that follows the 1:1 principle—one plugin for one task. The postcss-transform-shortcut plugin is no exception: it takes the various elements that make up a transition rule, and puts them together in the right order. To see what we mean, take a look at these lines from within our style sheet before it is compiled:

Where's our transform: statement? Well, when using this plugin, it's not needed—instead, we can simply specify the various attributes, thus:

.transform {
  transform: skewX(25deg);
  rotate: 180deg;
  scale: 2 2;
  translate: 10px 10px;
}

The plugin is set to recognize these four attributes and compile them into one single rule, as shown in this code excerpt:

.transform {
  transform: skewX(25deg) rotate3d(180deg,0,1) scale3d(2,2,1) translate3d(10px,10px,0px);
}

Any gaps in the attributes will be automatically filled in with default values from within the plugin. We can even use this plugin as the basis for an equivalent for transitions—we will do this toward the end of the next chapter.

Previous Chapter

Updating code to use PostCSS

Next Chapter

Optimizing our animations

Table of Contents for Mastering PostCSS for Web Design

Creating a demo in PostCSS

Updating the plugin

Note

Building our demo

Dissecting our demo in more detail

Table of Contents for
Mastering PostCSS for Web Design