Mosne Front-end Framework starter theme for WordPress

What is Mosne FF

MOSNE FrontEnd Framework (FF) is a Front-end WordPress theme friendly boilerplate to help you to build your own WordPress theme with modern tools and a better productivity.

Based on Be API FrontEnd Framewok

• Be API FrontEnd Framewok

Requirements

Node and Yarn

You need a minimum of Node 16. Volta and Yarn pnp.

• Volta

Installation

cd wp-content/themes/

git clone git@github.com:mosne/mosne_ff.git your_theme_name

Next, go to your theme folder.

rm .git

Then install node dependencies with Yarn.

volta install node@16

volta install yarn

yarn set version berry

yarn && yarn build

Configuration

Webpack

You can edit Webpack configuration with config/entries.js file and settings by editing webpack.settings.js. For live editing edit the proxy url in the file config/browsersync.config.jsand the server path to the dist folder.

  proxy: `https://projectname.monse.it/`

How to use Mosne FF

After installing dependencies, you can run some commands which are explained below.

Live Server with Browser Sync

and run a first time the following command to generate required distributions files to run the server properly.

yarn build

Then, you can luch Browser Sync proxy by running :

yarn start

Batch autofix assets

Try to auto fix JS using eslint :

yarn fixjs

Try to auto fix SCSS using stylelint :

yarn fixcss

Try to auto fix PHP using phpcbf :

yarn fixphp

Coding standads

Read our wiki page to correctly configure your enviroment

• setup Eslint
• setup Stylelint
• setup Phpcs and Phpcbf