Alt Text for Image

4. Template

In a Template the layout of multiple Partials are defined which can be loaded in a Structural.

The first thing to set straight when talking about Templates in the context of MPS is that they are not completely defined templates like any CMS template based system. (e.g. WordPress or Magento).

Templates within MPS are a collection of Partials that are loaded into Structural elements of a page like a header, the main section or a footer. A template is basically a sum of included Partials with no HTML (if we want to keep it modular) included.

When any HTML is needed make sure to migrate it ASAP to the lower levels like Partials or Blocks – this is how we keep the flexibility and consistency we would like to have! It’s preferable that on this level the data is being pulled (or passed) into a Partial as Templates are related to a particular Publication (or page to make things less abstract).

So bottomline – Templates are related to Publications (pages and pages types) and can be re-used in certain cases when the data (or variables) are called in the same way.

For designers this part (and also the Structural part) can most likely be skipped – as when the Pieces are created they will be ready to be used in a Page design.

A developer should really think (and that’s a time / efficiency issue, related to already created Partials) how much Templates should be made. Are the variables needed for the included Partials always the same – or does it need extra custom code, and if so – does it keep the code understandable for others? If no – just create that extra few Templates.

Code Example

<?php

   // TEMPLATE: top-nav
   // Version: 1.0.0

?>

<div class="<?php echo $template; ?> uk-navbar-container bg-white" uk-sticky="bottom: #offset; media: (min-width: 960px)" uk-navbar>
   <div class="<?php echo $template; ?>-wrapper uk-container">

        <?php mps_partial($template, "core", "navigation", "top-nav","div","uk-navbar-nav uk-nav-default uk-visible@m", ""); ?>

        <div id="offcanvas-reveal" uk-offcanvas="mode: reveal; overlay: true">
            <div class="uk-offcanvas-bar">
                <button class="uk-offcanvas-close" type="button" uk-close></button>
                <?php mps_partial($template, "core", "navigation", "top-nav","div","uk-nav uk-nav-default", ""); ?>
            </div>
        </div>

   </div>
</div>

Tags: n.a. (Template files contain no HTML code but only Partial calls).

Note: This is where content or data is being linked to Blocks and Elements.

Social Share Buttons and Icons powered by Ultimatelysocial