Wordpress trinity generator

Yeoman generator that scaffolds a directory structure inside your Wordpress theme. This directory structure allows you to overwrite the style.css of your Wordpress theme with the most popular css preprocessors.

Why did you build this?

A lot of Wordpress themes are written in pure css. I was sick and tired of editing these files without a css preprocessor.

Features

Please take a look at my gulpfile and package.json for information about what this package supports.

This package is called wp-trinity because this package lets you use three css preprocessors inside you Wordpress theme.

These css preprocessors are:

• sass
• less
• stylus

For sass you need to install ruby as well!

Installation

If you want to use this package you need to install Yeoman using npm (I assume you have pre-installed node.js). You will also need gulp for this package.

npm install -g gulp
npm install -g yo
npm install -g generator-wp-trinity

And if you want to use yarn:

npm install -g yarn

Then generate your new project inside your Wordpress theme by running:

yo wp-trinity

This command will generate:

.
├wp-trinity
├── app/
│   ├── less/
│   │   ├── mixins.less
│   │   ├── style.less
│   │   └── variables.less
│   ├── scss/
│   │   ├── mixins.scss
│   │   ├── style.scss
│   │   └── variables.scss
│   ├── styl/
│   │   ├── mixins.styl
│   │   ├── style.styl
│   │   └── variables.styl
│   ├── images/
│   │   └── trinity.gif
│   ├── js/
│   │   └── main.js
│   └── index.js
├── .yo-rc.json
├── package.json
├── LICENSE
├── gulpfile.js
├── README.md
└── yarn.lock

Future support

In the future I want this package to support:

• Babel
• Jquery
• Es6
• Browser sync
• Webpack

License

MIT