This project uses open-source software to work more efficient. You'll need to install some software to start working with this project. I won't go into all details about how to use this software. This readme should be efficient to get going.
Necessary global software
1: Nodejs: http://nodejs.org/
2: Gulp: http://gulpjs.com/
3: Yarn: https://yarnpkg.com/lang/en/
4: SASS: http://sass-lang.com/install
After installing the above software you need to install some dependencies. These files aren't in the repo to keep it clean. These dependencies are installed in the project directory
5: Add dependencies:
yarn install. This command adds a node_modules directory which you really should gitignore.
6: Add these lines to your global gitignore:
The easiest way to start is to navigate to the project dir and run
The _root dir This is a placeholder dir for files you should put in the wordpress root.
Fonts Use this dir for webfonts.
Images The images-src dir is used for original files.
gulp sprite generates an svg symbol sprite from svg's located in the sprite dir.
SASS All sass files are conveniently located in the sass dir. Use
gulp css to combine them. The structure of the subdirs is based on https://smacss.com/. There's a gulp task
gulp lint which you can use to check your scss against the hidden yml file.
Timber (https://www.upstatement.com/timber/) is an awesome way of making your html cleaner and easier to read. It uses the Twig template engine to write html seperate from the php files. Timber is included in the required plugins list, so you'll see a message asking you to install it.
- Please use BEM for classnames: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
The php side of things
All php functions are split in seperate files (with handy filenames) and are included in /includes.