Block Development HTML Structure

Pagestead block template files are build mostly using regular HTML, and as a block author you’re free to use whatever markup you like, as long as it is valid HTML5 markup. Below you’ll see an example of the basic structure of one of the bundled block templates:

<!DOCTYPE html><!DOCTYPE html><html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Header</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../bundles/Yummy_contact.css" rel="stylesheet">
    </head>
    <body>
        <div id="page" class="page">
            <div class="block contact background-cover center-center padding-top-100 padding-bottom-100" id="contact1">
                ...
            </div>
        </div>
        <script type="text/javascript" src="../bundles/Yummy_contact.bundle.js"></script>
    </body>
</html>

All external assets in your block template files should be loaded using relative paths, using absolute paths will cause your blocks to be unusable by Pagestead!

Within the body tag, the first element we’ll see is a tag with its id attribute set to “#page”. This is the element containing your block, and you will want to make sure the value of the id attribute matches with the CSS3 selector set in the “module.exports.pageContainer” object in the /asssets/js/modules/config.js file:

module.exports.pageContainer = "#page";

Everything that follows beyond the wrapping with id = ‘#page’ is pretty much unrestricted, i.e. you can use whatever markup you want or whatever markup is dictated by your choice of CSS/HTML framework. Pagestead’s page builder does require certain markup and/or data-attributes for the blocks to make full use of the builder’s features and functionality.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.