Chisel A WordPress Development Framework

Front-end Templates Structure

Front-end templates project generated by Chisel consists of the following folders and files

On a typical project, you will work in src folder and check your work in dist folder so you don’t have to touch other files.

dist

Production ready files are automatically generated here, this is where you check your work in a browser.

gulp

Gulp tasks configuration. You can customize development workflow here, but usually it’s not necessary.

index

Images and styles for the project index.

node_modules

Node.js modules for various project tasks.

src

This is where you do development. The project source files are organized in the following subfolders:

  • assets – static asset files (images, fonts, etc.) – everything from this folder will be copied to the dist folder
  • scripts – JavaScript files, check out JavaScript documentation
  • styles – Sass files with ITCSS structure, check out ITCSS documentation
  • templates – Twig templates, check out Twig documentation

Configuration files

Chisel uses various configurations files. Usually, it’s not necessary to touch these files, unless stated otherwise.

  • .babelrc – Babel configuration file
  • .editorconfigEditorConfig configuration file to achieve consistent coding style
  • .eslintignoreESLint ignore file
  • .eslintrc.ymlESLint configuration file to achieve consistent JavaScript coding style (you can update it to your preference)
  • .gitattributesGit configuration file to force Unix line ending in text files
  • .gitignore – default Git ignore files and folders
  • .htmlhintrcHTMLHint configuration file
  • .prettierignorePrettier ignore file
  • .prettierrcPrettier config file
  • .stylelintignorestylelint ignore file
  • .stylintrc.ymlstylelint configuration file to achieve consistent CSS coding style (you can update it to your preference)
  • .yo-rc.jsonYeoman generator configuration file
  • gulpfile.js – Gulp configuration file
  • index.html – project index with project pages listed
  • package.json – project metadata and dependencies
  • package-lock.jsonnpm lock file, if you use npm
  • README.md – project readme; you can use it for the project documentation
  • webpack.chisel.config.jswebpack configuration file
  • yarn.lockYarn lock file, if you use Yarn

Craftsmanship and Work Ethics of Old Masters

Xfive - Developers who care

For more than a decade we’ve been helping creatives bring their visions to life in the digital world.

Xfive is a partner for design and web agencies looking to expand their capacity in web application development where care is the foundation of everything we do.

Work with us