Rules

Html

The pages consist of two parts, thanks to the fileInclude template engine.

  • Default pages that will fall into the folder with the result. Must have .html extension.

  • Page-components that will not get into the folder with the result, but can be embedded in default pages. Must have .htm extension. For convenience, I also recommend defining them with underscores at the beginning of the file, as you can see below. 

  • @@include ('_block.htm', {
  "optionName": "value",
})

I recommend installing the components in the... Components folder. 

📦#src
┣ 📂components
┃ ┣ html _header.htm
┃ ┣ html _footer.htm
┃ ┗ html _yourComponent.htm
┗ html index.html

Stylus

And now a little about the rules that are used to work in the template.

  • Style files are divided into default and components.

  • If you want to create a separate .css file in the result folder, create and connect default LikeMe.styl.

  • If you want to create a style file that will not be added to the folder with the result, but it can be connected to other style files - use the underscore prefix _LikeMe.styl.

Scripts

This pack mainly uses TypeScript.
TypeScript is like JavaScript, but better.
(You can also write in JS)

  • Does not allow most of the errors even at the stage of writing code (like the type mismatch error).

  • Has its own useful features (such as enums and generics).

  • And in VSCode, hints work great for him! You don't have to guess whether an object has a property or not.

  • More about TypeScript

Okay, how to start?

You can look into the folders under the path #src/scripts and #src/scripts/modules.

Note a modules are used here that make it easy to use scripts. Nothing prevents you from writing code as convenient, but still try to try.

There is no special need for you to get into the modules themselves (#src/scripts/modules), you just need to connect them using files in the #src/scripts folder.
The ones that use the "Conn" postfix. In them you will make all the settings, and then connect them to the pages. 

📂scripts
┣ 📂modules
┃ ┃ Here you can create an independent script file
┃ ┗ typescript and javascript module.ts/js
┃ Here you can create a file in which the module 
┃ will be called and configured, and connect it to the html page.
┗ typescript and javascript moduleConn.ts/js

What for?
Believe me, it will be easier for a 10-page site with different cases to have files that connect modules to a page separately than to contain several files in which scripts are connected at random.

By the way, the documentation is here!

Of course it's a bit loud, but you won't stay without comments.
Comments have already been written in ready-made modules using TS Doc, you just need to hover the cursor over some property.

Elephant at sunset
Just hover on a property, and you will see a hint! :3