By Packt Publishing
This is the code repository for Mastering PostCSS for Web Design, published by Packt Publishing. It contains all the required files to run the code.
All you need to work through most of the examples in this book is a simple text or code editor, a copy of NodeJS (for your platform), Internet access, and a browser. I recommend installing Sublime Text 3; it works well with Node and Gulp, which we will use throughout the book. Some of the examples make use of additional plugins; most (if not all) can be installed directly from within NodeJS. Details are included within the appropriate chapter along with links to view the plugin source code and documentation
The following chapters do not have any requirements: 6, 8, 9, 10, 13, 14. Any requirements for these chapters are already listed in the table.
Assumptions:
- Internet access – many plugins will need to be downloaded via NodeJS
- Internet browsers with DOM Inspectors included – preferably Firefox (with Firebug – http://www.getfirebug.com) and / or Chrome (DOM Inspector already built in).
- Hardware column removed – no specific hardware requirements for any of the software used, over and above the OS version used.
- Under OS: if Any listed, then software can be used on Windows, Mac or Linux platforms.
- Any not listed are either downloaded via the Internet during the exercise, or available from the code download; they do not have to be installed prior to that exercise being started. This includes the PostCSS plugins referenced throughout the book.
- Fonts used have been through Font Squirrel’s webfont generator – this creates the appropriate styles which have been used in various demos throughout the book.
- Media / images referenced in the book have been provided in the code download that accompanies this book, or can be obtained from the links given in the text.
##Installation of applications and plugins: Node: Double click the installer, then click Next, tick “I accept the terms in the License Agreement”, Next, next, Install, Finish (when appropriate option is displayed). Gulp: see https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md for installation instructions. All other Gulp-based or PostCSS-based plugins will follow similar instructions, which are also outlined in each chapter where they are used. Webserver – WAMP: http://www.slideshare.net/triniwiz/wamp-20949805 details how to install it; use default options set throughout – no need to change any parameters shown. MAMP: I believe https://www.mamp.info/en/documentation/MAMP-3-User-Guide.pdf should be sufficient (not a Mac expert!) Sublime Text: double click installer, then press Next, Next, Install and Finish (when appropriate button shown).
##Software specifications:
Chapter number | Software required (with version) | Free/Proprietary | If proprietary, can code testing be performed using a trial version | If proprietary, then cost of the software | Download links to the software | OS required |
---|---|---|---|---|---|---|
All | Sublime Text 3 | Proprietary | Yes – no time limit; other editors can be used, but | USD 70 | http://www.sublimetext.com/3 | Any |
11 | Syntax Highlighing for PostCSS (for Sublime Text) | Free | N/A | N/A | Installed via Package Control – details given in text | Any |
All | WAMPServer | Free | N/A | N/A | http://www.wampserver.com/en | Windows |
All | NodeJS | Free | N/A | N/A | https://nodejs.org/en/ | Any |
All | Gulp | Free | N/A | N/A | http://www.gulpjs.com | Any |
5 | Evil Icon icons | Free | N/A | N/A | https://github.com/outpunk/gulp-evil-icons, although specific icons already in code download | Any |
5 | WebP Image support | Free | N/A | N/A | https://developers.google.com/speed/webp/, but specific parts already in code download | Windows, but other OS support available |
All | Source Sans Pro font | Free | N/A | N/A | http://www.fontsquirrel.com/fonts/sourcesanspro | Any |
All | Roboto Font | Free | N/A | N/A | http://www.fontsquirrel.com/fonts/roboto | Any |
2 | Social Media icons | Free | N/A | N/A | http://wegraphics.net/downloads/free-stained-and-faded-social-media-icons/ | Any |
11 | Git | Free | N/A | N/A | https://git-scm.com/ | Any |
7 | Transit library | Free | N/A | N/A | http://ricostacruz.com/jquery.transit/ | Any |
7 | Velocity library | Free | N/A | N/A | http://julian.com/research/velocity/ | Any |
7 | Animate.css by Dan Eden | Free | N/A | N/A | https://daneden.github.io/animate.css/ | Any |
7 | Animate.scss by Geoff Graham | Free | N/A | N/A | https://github.com/geoffgraham/animate.scss | Any |
7 | Magic animations | Free | N/A | N/A | http://www.minimamente.com/example/magic_animations/ | Any |
12 | WordPress – standalone installation; includes TwentySixteen theme | Free | N/A | N/A | http://www.wordpress.org | Any |
12 | A suitable web server for local use | Free | N/A | N/A | Various – Apache (http://www.apachefriends.org) – cross-platform; WAMPServer (http://www.wampserver.de/en) – Win Linux users will likely have one available within their distro | Any – see left |