For those who have never used a terminal: When copying and pasting from here to your terminal, do NOT include
$ (dollar sign followed by a space).
$ is used to indicate the beginning of a new command. Enter commands one at a time and press return after each one.
If you're working locally, you'll need something like MAMP to work with the PHP and MySQL required by WordPress. If you're working remotely, you'll have to deal with the pitfalls of SSH (lagging and broken pipes), unless you use something like Mosh (which I highly recommend).
Setting Up Your Environment
First, you'll need to install git. Then, you will need
npm). Head here for the most complete instructions I've found. Once you have
npm, you can install the Grunt Command Line Interface or Gulp, and
$ npm install -g grunt-cli $ npm install -g gulp-cli $ npm install -g node-sass
Installing WordPress and Scratch
Navigate to the root directory of your site. Copy and paste this into your terminal:
$ wget http://wordpress.org/latest.tar.gz && tar xfz latest.tar.gz && mv wordpress/* ./ && rmdir ./wordpress/ && rm -f latest.tar.gz
or, if you have WP-CLI:
$ wp core download $ wp core config # you'll need some arguments here $ wp core install # and here
Now you can do this:
$ cd wp-content/themes/ $ git clone https://github.com/zackphilipps/scratch-theme.git
At this point you should install dependencies:
$ cd scratch-theme/ $ npm install
scratch-theme/ ├── assets/ │ ├── core/ │ ├── css/ │ ├── fonts/ │ ├── grunt/ │ ├── gulp/ │ ├── img/ │ ├── js/ │ └── scss/ ├── docs/ ├── includes/ ├── parts/ │ └── layouts/ ├── root/ └── acf-json/
assets/ directory contains all SCSS, CSS, JS, images, and fonts as well as the
gulpfile and their respective
package.json files. There are also helpful READMEs in most directories.
docs/ directory contains the markdown files you are reading right now.
includes/ has additional PHP that's loaded into
parts/ are partial templates like
root/ contains files that should be moved to the root of your site if you desire to use the configuration that comes with HTML5 Boilerplate.
Next up: Check out these screencasts to see Scratch in action, but bear in mind that they may be out of date. Who has time to make gifs?!