Using Pages

Pages Overview

Be sure to review the Layouts documentation to see folder structure before making a page.

Pages live within your source folder under pages/, and should be dashed-lowercase.html files, which are used to create the final url of the page.

Declaring meta ,title, style, or script tags in this page will pull in that data into the layout into the relevant location (see Layouts documentation).

Title Discovery

If no title tag is discovered within a Page, Coal will use the page's filename and uppercase the first letter. This means a Page template named about.html begets a title About.

Minification

The discovered style and script tags will be minified (but not uglified).

SCSS

Within the style tag, you can utilize SCSS features such as nesting. These will be compiled into normalized CSS for local dev and build files.

        <layout>
            <style>
                button {
                    background-color: greenyellow;
        
                    &:hover {
                        background-color: lime;
                    }
        
                    &:active {
                        background-color: forestgreen;
                    }
                }
            </style>
            <h1>Welcome to the About Page</h1>
        </layout>
        
    

Sample Page

Here is a sample page file, pages/about.html:

        <layout>
            <title>About Page Title Override</title>
            <meta property="og:description" content="About Page OG description" />
            <h1>Welcome to the about page</h1>
            <p>This is the about page</p>
            <button id="cta">
                Learn More
            </button>
            <div id="target"></div>
            <style>
                p {
                    color: red;
                }
            </style>
            <script type="text/javascript">
                const target = document.getElementById('target');
                document.getElementById('cta').addEventListener('click', () => {
                    const div = document.createElement('div');
                    div.innerHTML = 'You clicked on the button!';
                    target.appendChild(div);
                });
            </script>
        </layout>
    

See examples for more.

Index Page

An index page is required for the root of your website. Add a file within pages called pages/index.html.

404 Page

If using a system like Firebase Hosting, the creation of a custom 404 page is ideal. To do so in Coal, just add a file within pages called pages/404.html. This file will also be utilized in local development.

Tips and Tricks

Coal expects valid HTML5 syntax, meaning tags must either be self closing <img /> or closed properly <em>Hello World!</em>.