Templating
Frontio is more than just a task runner. It also provides quite a few templating tricks that you can use to speed up your workflow.
HTML Partials
One of the big disadvantages of front-end development is that it never had a simple out-of-the-box way of splitting up HTML files into smaller ones. A disadvantage that back-end languages like PHP don't have.
Frontio uses a modified version of the Handlebars API to allow the use of partials.
Inside the templates-directory, you may create folders and subfolders to your heart's content. The only fixed folders that MUST be present in every Frontio project are layout and partials.
As a general rule of thumb, if you have to reuse the exact same block of HTML more than once throughout your project, make a separate HTML file for it and place it in the partials folder. Layout is generally only used for the header and footer of the project.
Partials can be injected in the following way:
{{> layout/header}}, {{> partials/sidebar}}, {{> partials/en/contact-form}}, ...
Note that paths are relative to the templates root directory, not to the referencing HTML file. Also, only files inside the partials and layout folder or a subfolder thereof, are considered partials and are thus available for injection.
Injecting CSS & JS
CSS and JS files are not manually linked (except for external libraries or CDN's). Instead, they are injected into you HTML at the following places.
Local CSS is injected in the <head> with the following comment:
<!-- inject:css --><!-- endinject -->
Local JS is injected right before the closing </body> tag with the following comment:
<!-- inject:js --><!-- endinject -->
If you look inside your exported files, you will find the corresponding <link> and <script> tags.
Order injected files
By default, Frontio will always load the jQuery dependency first when it can be found in the JS-folder.
Other JS-files are loaded afterwards in alphabetical order.
Hence, the order can be changed by renaming your files or - more efficiently - by placing a "require"-comment at the top of your JS-file.
// require: foo/bar.js
Note that Windows users should use backslashes (\) instead of forward slashes (/) for paths:
// require: foo\bar.js
Multi-line comments are also possible if you have multiple dependencies.
/* require:
foo.js
bar.js
*/
Ignore files in your workflow
If you do not want to compile a certain CSS, JS or HTML file to the export folder, simply prepend an underscore "_" to the file name and restart Frontio. This can be useful if you want to keep your export folder clean, or if you want to remove a certain JS-library, CSS-stylesheet, etc. without deleting or moving it.
Example:
- index.html will be exported.
- _contact.html will not be exported.
- _jquery-3.4.1.min.js will not be compiled.
View-specific CSS & JS
In a perfect world, CSS would not be put into a single main.min.css file. What if you had a website with very different designs for different views? Maybe the website has one page with lots of CSS styles for a big image gallery? Maybe you want to load bootstrap on one specific page?
You could manually add a link in the <head> or <body> tag, but it's 2020. We don't do things manually. Besides, the files would still be picked up by Frontio's inject-function and would then be added to the page twice. We don't want that.
Enter the "view"-prefix. Most simply explained by the following example:
- view-contact.scss will only be loaded in contact.html
- view-index.js will only be loaded in index.html
- view-about.scss will not be loaded in index.html
So, name the file as follows: view-[name].[scss|js].
Conditional statements in HTML
Handlebars "helper" functions give you the ability to make your static HTML-templates a little more dynamic. One of the most useful cases for this is dynamic active-states when you place your website navigation inside a partial.
For this you use {{#equal templateName '###.html'}} and {{/equal}}.
This means that you can easily state something like this:
If page A is active, insert this piece of HTML. If page B is active, add another piece of HTML to my code and don't show the code of page A.
In general, for navigation highlighting, it looks something like this:
<a href="index.html"{{#equal templateName 'index.html'}} class="is-active"{{/equal}}>Home<a>
Note: add spaces where needed to prevent attributes or classes from sticking to each other.