Theme Elementary

A starter theme that facilitates a quick head start for developing new block-based themes along with a bunch of developer-friendly features.

• Understand the Folder Structure
• Get Started
• Development

Understand the Folder Structure 📂

 .
├── assets (Holds theme's assets)
│   └── src
│       └── js
│       └── css
├── bin (Holds scripts)
├── functions.php (PHP entry point)
├── inc
│   ├── classes (Holds all classes)
│   │   └── class-elementary-theme.php (Instantiates all of the classes)
│   ├── helpers (PHP Helpers)
│   │   └── custom-functions.php
│   └── traits (PHP Traits)
│       └── trait-singleton.php
├── index.php
├── parts (Block Template Parts)
├── patterns (Block Patterns)
│   ├── *.html
├── style.css
├── templates (Block Templates)
│   ├── *.html
├── tests (Holds JS & PHP tests)
│   ├── bootstrap.php
│   ├── js
│   └── php
└── theme.json

Get Started 🚀

Method 1 (Recommended)

composer create-project rtcamp/elementary [folder_name]

This command is equivalent to cloning the repository and running composer install && npm install

Method 2

Manually clone this repository using

git clone [URL to Git repo]

Having cloned this repository, install node packages and PHP dependencies using

composer install

In both the methods, you will be prompted with a theme setup wizard which will help you with the search-replace. That was all! You're good to go with building your block theme. ✨

Note: Refer to the .nvmrc file to check the supported Node.js version for running this project. If your current Node.js version does not run the project successfully on localhost, please use Node Version Manager on your terminal to configure the right Node.js version.

Development 💻

Production

npm run build:prod

Watch changes

npm start

Linting & Formatting

Lint JS, CSS & PHP.

npm run lint:js
npm run lint:css
npm run lint:php #phpcs

Auto fix fixable linting errors for JS, CSS & PHP.

npm run lint:js:fix
npm run lint:css:fix
npm run lint:php:fix #phpcbf

Testing

Run all tests.

npm run test

Run JS tests.

npm run test:js

Watch JS tests.

npm run test:js:watch

Run PHP tests.

npm run test:php

Does this interest you?