PHPackages moxie-lean/lean-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. moxie-lean/lean-theme ActiveWordpress-theme moxie-lean/lean-theme ===================== Barebones modular WordPress theme v1.0(6y ago)391017[20 issues](https://github.com/moxie-lean/lean-theme/issues)[22 PRs](https://github.com/moxie-lean/lean-theme/pulls)PHP Since Jun 27Pushed 3y ago15 watchersCompare [ Source](https://github.com/moxie-lean/lean-theme)[ Packagist](https://packagist.org/packages/moxie-lean/lean-theme)[ RSS](/packages/moxie-lean-lean-theme/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)Dependencies (11)Versions (64)Used By (0) The LEAN Theme ============== [](#the-lean-theme) A no-frills WordPress starter theme - Gutenberg Ready! ------------------------------------------------------ [](#a-no-frills-wordpress-starter-theme---gutenberg-ready) [![maintained](https://camo.githubusercontent.com/36f1e45079c8a4187cee4a840f9bd220810bef279ce99b87bdb14ff4d4a68569/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696e65642d7965732d627269676874677265656e2e737667)](https://camo.githubusercontent.com/36f1e45079c8a4187cee4a840f9bd220810bef279ce99b87bdb14ff4d4a68569/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696e65642d7965732d627269676874677265656e2e737667) [![wordpress](https://camo.githubusercontent.com/9277d2dddc334b07c7126f8cd47a9d8f1da9272b33bd62fe3c5abf22ef931cb4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f776f726470726573732d253345253344342e382d677265656e2e737667)](https://camo.githubusercontent.com/9277d2dddc334b07c7126f8cd47a9d8f1da9272b33bd62fe3c5abf22ef931cb4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f776f726470726573732d253345253344342e382d677265656e2e737667) [![php](https://camo.githubusercontent.com/54b410cc1f2af8057409a1ef5cd085e3eace1d5fb8e021d21bb619912b062c28/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344372e312d677265656e2e737667)](https://camo.githubusercontent.com/54b410cc1f2af8057409a1ef5cd085e3eace1d5fb8e021d21bb619912b062c28/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344372e312d677265656e2e737667) [![GitHub contributors](https://camo.githubusercontent.com/e99e7698fb8d45af59cfc345a5054a7fa5f800652807541feb163c660274ed23/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f636f6e7472696275746f72732f77656172656e6f6c74652f6c65616e2d7468656d652e737667)](https://github.com/wearenolte/lean-theme/graphs/contributors) The Lean Theme is a starter theme for WordPress made by Developers for Developers. It focuses on fast development following best development practices. Some key features: - Gutenberg ready - Easy configuration with Parcel for building development and live environments - ES6 Javascript - TailwindCSS - SASS preprocessor - MVC coding architecture - Reusable frontend components (following the Atomic Design methodology) - Helper functions to create Custom Post Types, Categories and Endpoints easily - ACF integration - PHP, JS and SASS linters - Composer and NPM for managing dependencies Contents -------- [](#contents) - [The LEAN Theme](#the-lean-theme) - [A no-frills WordPress starter theme - Gutenberg Ready!](#a-no-frills-wordpress-starter-theme---gutenberg-ready) - [Contents](#contents) - [Pre-requisites](#pre-requisites) - [Installation](#installation) - [Development and Production Building commands](#development-and-production-building-commands) - [Production build command](#production-build-command) - [Development command](#development-command) - [Best Practices](#best-practices) - [Linter command](#linter-command) - [Codacy](#codacy) - [Frontend Components](#frontend-components) - [Atoms](#atoms) - [Molecules](#molecules) - [Organisms](#organisms) - [Templates](#templates) - [Loading Atomic Elements](#loading-atomic-elements) - [Gutenberg Configuration](#gutenberg-configuration) - [Custom Font Sizes](#custom-font-sizes) - [Custom Colors](#custom-colors) - [Custom Blocks](#custom-blocks) - [Extending the editor](#extending-the-editor) - [Helper functions](#helper-functions) - [Assets](#assets) - [Images](#images) - [Web Fonts](#web-fonts) - [Icons](#icons) - [CSS](#CSS) - [Styleguide](#Styleguide) - [JavaScript](#javascript) - [Adding new JS function / behavior](#adding-new-js-function--behavior) - [Adding an external package from NPM](#adding-an-external-package-from-npm) - [Models and Controllers](#models-and-controllers) - [Creating a Custom Post Type](#creating-a-custom-post-type) - [Creating an Endpoint](#creating-an-endpoint) - [Theme Hooks](#theme-hooks) - [Actions](#actions) - [Filters](#filters) - [Contributing](#contributing) - [Credits](#credits) - [Changelog](#changelog) - [License](#license) Pre-requisites -------------- [](#pre-requisites) You need the following in order to work with this theme: - PHP 7.1 or higher - [Composer](https://getcomposer.org/doc/00-intro.md#globally) - [Node.js](https://nodejs.org/en/download/) - [Yarn](https://yarnpkg.com) - [Advanced Custom Fields](https://www.advancedcustomfields.com) WP Plugin v5.8.1 or higher Composer should be installed globally. Installation ------------ [](#installation) Download or clone the theme Go to the theme path and enter ``` composer install ``` Development and Production Building commands -------------------------------------------- [](#development-and-production-building-commands) The theme uses composer as dependency manager for PHP libraries, NPM for the JavaScript libraries and Webpack to build the SASS and JS files. ### Production build command [](#production-build-command) ``` composer build ``` This command will install the NPM dependencies and will run the Webpack production configurations which will get the JS and CSS files optimized for a production server. ### Development command [](#development-command) ``` cd frontend yarn start ``` This command will run the Webpack development configuration which will start a watcher that compiles the SASS and JS files as soon as you save them. It will also enable source maps for easy debugging. Best Practices -------------- [](#best-practices) The Lean Theme encourages you to use best practices by using linters for PHP, JS and CSS. This helps maintain a consistent scode style, leaving it becomes clean and at less risk of bugs or security risks. It will help you to detect errors on your code and give you tips on how to solve them. ### Linter command [](#linter-command) The PHP linter uses the [WordPress Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/) specified on the WordPress handbook. The following command should be run manually before committing change, and also added to your continuous integration build configuration. The JS linter uses the [ESLint](https://eslint.org/) and the SCSS linter uses [SCSS Lint](https://github.com/sds/scss-lint). ``` composer lint ``` ### Codacy [](#codacy) [Codacy](https://www.codacy.com/) is a tool that automates code reviews & code analytics. If you use this tool you can move the `.codacy.yml` file to the root of the project. This will tell Codacy to review only the relevant files of your app. It will also tell Codacy to grab the PHP, JS and SCSS linter configuration files so that it uses this rules. Frontend Components ------------------- [](#frontend-components) The Lean Theme follows the [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/#atoms) methodology for developing a modular frontend. Below the `frontend/components` directories there are 4 directories called Atoms, Molecules, Organisms and Templates to which you can add all the Atomic Elements. ### Atoms [](#atoms) Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. Your stylesheet of each atom must be added inside of `_style.scss` of the `atoms` directory. ### Molecules [](#molecules) Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. A molecule might be an input that includes a form label and the input error display. They are generally not too useful by themselves, but combine them together as a form and now we have something! Your stylesheet of each molecule must be added inside of `_style.scss` of the `molecules` directory. ### Organisms [](#organisms) Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. For example, a hero is an organism. Your stylesheet of each organism must be added inside of `_style.scss` of the `organism` directory. ### Templates [](#templates) Templates consist mostly of groups of organisms stitched together. A template with content in it is a `page`. Your stylesheet of each template must be added inside of `_style.scss` of the `template` directory. ### Loading Atomic Elements [](#loading-atomic-elements) The Lean Theme uses the [Loader Module](https://github.com/wearenolte/loader) to render atomic elements: ``` Load::element_type( ‘element_folder/element_php_file’, element_arguments[] ); ``` To use it first add its namespace at the beginning of the file: ```