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 thedist
folderscripts
– JavaScript files, check out JavaScript documentationstyles
– Sass files with ITCSS structure, check out ITCSS documentationtemplates
– 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.editorconfig
– EditorConfig configuration file to achieve consistent coding style.eslintignore
– ESLint ignore file.eslintrc.yml
– ESLint configuration file to achieve consistent JavaScript coding style (you can update it to your preference).gitattributes
– Git configuration file to force Unix line ending in text files.gitignore
– default Git ignore files and folders.htmlhintrc
– HTMLHint configuration file.prettierignore
– Prettier ignore file.prettierrc
– Prettier config file.stylelintignore
– stylelint ignore file.stylintrc.yml
– stylelint configuration file to achieve consistent CSS coding style (you can update it to your preference).yo-rc.json
– Yeoman generator configuration filegulpfile.js
– Gulp configuration fileindex.html
– project index with project pages listedpackage.json
– project metadata and dependenciespackage-lock.json
– npm lock file, if you use npmREADME.md
– project readme; you can use it for the project documentationwebpack.chisel.config.js
– webpack configuration fileyarn.lock
– Yarn lock file, if you use Yarn
- Previous: WordPress Website Structure
- Next: Development