Navigating through pages

I've always had a desire to do something a little different; doing the same thing as everyone else becomes so passé! With this in mind, when researching for this book, I came across an intriguing demo by Nikolay Talanov, where pages are flipped over from one to the next, using either CSS3 animation if supported, or falling back to standard jQuery.

Note

You can see the original pen demo at http://codepen.io/suez/pen/LCHlA.

This has provided a perfect base for this chapter. For the purpose of the demos, I've stripped back the vendor prefixes (as these will be covered by Autoprefixer), tweaked the design of the first page, and switched to just using nesting throughout. The jQuery fall-back code has also been removed, as most modern browsers will support the animations with little difficulty.

Preparing our demo

For our demo, we will have four pages—the navigation will flip between each page, using standard CSS3 animation:

The design may be a little unique, but to help illustrate how it could be used, I've added a simple wireframe sketch to the front page, which could easily be expanded to the remaining pages and developed into something more substantial.

To see it in action, extract a copy of the Tutorial5 folder from the code download that accompanies this book, then run index.html in a browser, and click on the dots or arrow icons to the right—you will see it flip up or down, depending on which direction you click.

Converting from existing processors

At present, our demo is using plain CSS, and nothing is wrong with this, but I suspect some of you will likely be using an existing processor, such as SASS or less CSS. The real benefit of using PostCSS is its ability to mimic existing tools, without the dependencies.

With this in mind, there are copies of the demo, available in the code download, which use Less CSS and SASS. If you prefer using SASS, then go ahead and extract Tutorial6A from the code download folder; for Less, use Tutorial6B. The code can easily be compiled using the gulpfile.js file from Tutorial1A in Chapter 2, Creating Variables and Mixins (for SASS), or Tutorial 1B (for Less CSS, in the same chapter folder).

Note

You will need to install the plugins listed—most of these will already be present from previous demos, but gulp-sass and gulp-less will need to be installed using NPM, in the same manner.

Both will produce identical results to the vanilla CSS version, once compiled, and the contents of the dest folder have been copied to the css sub-folder in the tutorial folder. With the base demo in place, we are now ready to make the conversion—let's make a start by installing the postcss-nesting plugin.