Project Name | Project Alias | Project Desc |
---|---|---|
Project Template 2020 |
project-template |
This is our (as of 2020) project setup for a website with a separate frontend repository. |
[%Project Desc]
The src
folder is structured like this:
src
├── js
├── less
├ - - - - - - - -
├── kit
├ - - - - - - - -
├── assets
├── previewmedia
├ - - - - - - - -
├── components
├── panels
└── layouts
These are regular source files that compile into the
build/assets
folder as .js
& .css
files, side by side.
The main Less file is less/app.less
- it imports all the others and gets compiled
to app.css
using AutoPrefixer.
The main JavaScript file is the js/modules/app.js
file - you'll find two
wrapper files in the js/ directory: app.module.js
and app.nomodule.js
. They
both get processed and compiled into the build/assets/
folder.
The module.js file only gets bundled while the nomodule.js file is transpiled
with Babel first and then bundled.
Both files are referenced from the HTML - but in this way:
<script type="module" src="/assets/app.module.js"></script>
<script nomodule defer src="/assets/app.nomodule.js"></script>
These are mutually exclusive since browsers that support the newer JavaScript
modules syntax will load the first one and ignore the second (due to the
nomodule
attribute) while browsers that don't understand modules won't load
the first one because of the type="module"
attribute, but gladly load the
second.
The files in here are Kit files which compile to regular HTML files in
the build
folder, maintaining their file structure, e.g.:
Source file | Build file |
---|---|
src/kit/index.kit | build/index.html |
src/kit/about/index.kit | build/about/index.html |
src/kit/projects/free.kit | build/projects/free.html |
These hold images, icons & maybe webfonts for use in the site; they should get
copied to the build folder (in build/assets
and build/previewmedia
respectively).
Files in assets
are for icons, images & fonts, while previewmedia
is meant
for images that would ideally come from a CMS or similar.
The components
folder should contain individual components of the site, like
buttons, cards etc.
Larger elements that wraps a couple (or a list) of elements gets to go into the
panels
folder.
Full page layouts go into the layouts
folder.
CodeKit should pick up all settings from the config.codekit3
file when you drag the [%Project Alias].Frontend folder onto the CodeKit window.
If you're on Windows or Linux, you could have a look at the Prepros app for compiling the assets. (It's been a while since I've tried it so I'm not sure if it's on par with what we get with CodeKit.)