@labelvier/starter-kit-engine

This is the engine that drives the Label Vier starter kit, and a new way to use it. Now it is added as a npm package outside instead of build-into the theme. This makes updating and improving the engine a lot easier.

Requirements

• Node v14 or higher (tested on v14 and v18). Check with $ node --version
• NPM v7 or higher. Check with $ npm --v. Install with $ npm install --global npm@latest
• WordPress
• Custom theme (Label Vier starter kit or another custom theme that meets the theme-requirements)

Update existing Label Vier starter kit

• Delete package-lock.json from the root of the project AND from the root of the theme.
• Delete all node_modules folders.
• Replace the contents of package.json in the root of the theme with this code below. (first check if you have some custom packages installed that you use for this theme and add them in the new code)

{
  "name": "labelvier",
  "version": "4.0.0",
  "description": "Label Vier starter kit",
    "scripts": {
    "dev": "l4",
    "build": "l4 build --prod"
  },
  "author": "Label Vier",
  "license": "ISC",
  "devDependencies": {
    "@labelvier/starter-kit-engine": "^1.0.1",
    "glightbox": "^3.1.0",
    "swiper": "^6.8.4"
  }
}

• Install npm packages from the root of the project with $ npm install
• Run the default command for dev or build and see what happens :)
• If the script works well you will get some errors in the sass compile. Now that the sass engine is based on Dart some things need to change in order to work. Luckily with the errors also come the solutions. Just read carefully and fix them. The most common one is the math part where for example (3 / 100%) is used. This needs to be rewritten to math.div(3, 100%) and at the top of the file you need to add @use "sass:math";
• And if all works well, delete gulpfile.babel.js and .babelrc from the root of the theme. We don't need these anymore.

Use in a theme not based on the Label Vier starter kit

This engine was mainly built in use with the Label Vier starter kit. It can also be used in other themes, but it has a few requirements in the theme setup. For now it works like this:

• Make sure the theme folder structure looks like this: /src/js /src/images /src/scss The engine will compile all these files and move them to the /dist/ folder. All other folders in /scr/ will also be moved (uncompiled) to /dist/
• The SASS the starting point will be /src/scss/main.scss (style.css for WordPress styling) and /src/scss/admincss.scss (admincss.css for admin styling).
• Running the build script will completely remove the /src/ folder so make sure your in-theme paths will point to the /dist/ folder, and not /src/.
• Then we need some extra files and/or code in the right places. You will find some example files in this repository in the WordPress folder.
• Place these files here or add the new required code or scripts: /wp-content/themes/themename/package.json package.json .env .gitignore
• TODO..

Label Vier starter kit

The Label Vier starter kit is a WordPress theme that serves as a boilerplate for custom themes that we build.

Install

$ npm i @labelvier/starter-kit-engine

Troubleshoot

Getting missing package errors while running npm run dev? Try removing package-lock.json and node_modules and re-install.

History

v1.4.1 - 19 jul 2024

• Fix bug where javascript wouldn't get compiled

v1.4.0 - 26 apr 2023

• Allow multiple scss and js inputs / outputs to be generated

v1.2.0 - 11 oct 2022

• Gulp copy to dist folder tweaked

v1.1.1 - 1 apr 2022

• Added build-stop on error
• Fixed build test

v1.1.0 - 1 apr 2022

• Added browserlist support
• Fixed bitbucket pipeline test
• Added ignore in copy to build for acf-json-backup folder
• Updated npm packages

v1.0.0 - 15 dec 2021

• First release