Design file examples
This reference contains example static HTML and design parse file examples to help you understand these basic parts of a Matrix site design.
Example static HTML file
This appendix shows an example static HTML file that is ready to be uploaded into Matrix. Placeholders (that is, HTML comments and dummy content) are used within the design to indicate where the Matrix design tags need to be placed.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Declared Vars To Go Here -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Metadata -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="mysource_files/favicon.ico">
<!-- Page Name and Site Name -->
<title>Page Name - Squiz Matrix HTML Example</title>
<!-- CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="mysource_files/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header clearfix" style="background-color: #ffffff">
<!-- Main Menu -->
<nav>
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Site Name -->
<h1 class="h3 text-muted">Site Name</h1>
<!-- Breadcrumbs -->
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Level 1</a></li>
<li class="active">Level 2</li>
</ol>
</header>
<div class="page-heading">
<!-- Page Heading -->
<h1>Page Heading</h1>
</div>
<div class="row">
<div class="col-sm-3">
<!-- Sub Navigation -->
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Level 2</a></li>
<li class="active"><a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
</ul>
</div>
<div class="col-sm-6">
<div class="page-contents">
<!-- Design Body -->
<h2>Sub Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Sub Heading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Sub Heading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<div class="col-sm-3">
<!-- Login Section -->
<h2>Login</h2>
<!-- Search Section -->
<h2>Search</h2>
<!-- Nested Right Column Content -->
</div>
</div>
<footer class="footer">
<p class="pull-right">
<!-- Last Updated Design Area-->
Last Updated: Wednesday, January 6, 2016
</p>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
</body>
</html>Example parse file
This example parse file shows that the placeholder content has now been replaced with the correct design areas.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Declared Vars To Go Here -->
<MySource_AREA id_name="colours" design_area="declared_vars" print="no">
<MySource_DECLARE name="colour" value="fbf6e8" type="colour" description="Custom background colour for the header."/>
</MySource_AREA>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Metadata -->
<MySource_AREA id_name="metadata" design_area="metadata" />
<link rel="icon" href="mysource_files/favicon.ico">
<!-- Page Name and Site Name -->
<title><MySource_PRINT id_name="__global__" var="asset_name" /> - <MySource_PRINT id_name="__global__" var="site_name" /></title>
<!-- CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="mysource_files/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header clearfix" style="background-color: <MySource_PRINT id_name="colours" var="colour" />">
<!-- Main Menu -->
<MySource_AREA id_name="Main_navigation" design_area="menu_normal">
<MySource_SET name="level" value="top"/>
<MySource_SET name="show_subs" value="always"/>
<MySource_set name="settings.class.normal" value="normal"/>
<MySource_set name="settings.class.current" value="active"/>
<MySource_set name="settings.class.hierarchy" value="active hierarchy"/>
<nav>
<ul class="nav nav-pills pull-right">
<MySource_ASSET>
<li class="<MySource_print var="settings.class"/>"><MySource_PRINT var="asset_name_linked"/></li>
</MySource_ASSET>
</ul>
</nav>
</MySource_AREA>
<!-- Site Name -->
<h1 class="h3 text-muted"><MySource_PRINT id_name="__global__" var="site_name" /></h1>
<!-- Breadcrumbs -->
<MySource_AREA id_name="Breadcrumb" design_area="asset_lineage">
<MySource_SET name="prefix_with_divider" value="false"/>
<MySource_SET name="suffix_with_divider" value="true"/>
<MySource_SET name="prefix_with_home_link" value="true"/>
<MySource_SET name="suffix_with_current_link" value="false"/>
<MySource_SET name="show_hidden_links" value="false"/>
<ol class="breadcrumb">
<MySource_ASSET>
<li><a href="<MySource_PRINT var="asset_link"/>"><MySource_PRINT var="asset_short_name" /></a></li>
</MySource_ASSET>
<MySource_DIVIDER></MySource_DIVIDER>
<li class="active"><MySource_PRINT id_name="__global__" var="asset_short_name" /></li>
</ol>
</MySource_AREA>
</header>
<div class="page-heading">
<!-- Page Heading -->
<h1><MySource_PRINT id_name="__global__" var="asset_name" /></h1>
</div>
<div class="row">
<div class="col-sm-3">
<!-- Sub Navigation -->
<MySource_AREA id_name="Section_menu" design_area="menu_normal">
<MySource_SET name="level" value="sub"/>
<MySource_SET name="show_subs" value="always"/>
<MySource_set name="settings.class.normal" value="normal"/>
<MySource_set name="settings.class.current" value="active"/>
<MySource_set name="settings.class.hierarchy" value="active hierarchy"/>
<ul class="nav nav-pills nav-stacked">
<MySource_ASSET>
<li class="<MySource_print var="settings.class"/>"><MySource_PRINT var="asset_short_name_linked"/>
<MySource_SUB design_area="menu_normal">
<MySource_set name="settings.class.normal" value="normal"/>
<MySource_set name="settings.class.current" value="active"/>
<MySource_set name="settings.class.hierarchy" value="active hierarchy"/>
<ul>
<MySource_ASSET>
<li class="<MySource_print var="settings.class"/>"><MySource_PRINT var="asset_short_name_linked"/></li>
</MySource_ASSET>
</ul>
</MySource_SUB>
</li>
</MySource_ASSET>
</ul>
</MySource_AREA>
</div>
<div class="col-sm-6">
<div class="page-contents">
<!-- Design Body -->
<MySource_AREA id_name="page_body" design_area="body" />
</div>
</div>
<div class="col-sm-3">
<!-- Login Section -->
<h2>Login</h2>
<MySource_AREA id_name="login_form" design_area="login_form">
<MySource_PRINT var="system_messages" /><br />
<MySource_LOGIN_SECTION>
<MySource_PRINT var="form_open" />
Not currently logged in
<p>Username:
<MySource_PRINT var="username_box" size="10" class="sq-data" />
</p>
<p>Password:
<MySource_PRINT var="password_box" size="10" class="sq-data" />
</p><br/>
<MySource_PRINT var="submit_button" value="Login" class="sq-data" style="float: right;" />
<MySource_PRINT var="form_close" />
</MySource_LOGIN_SECTION>
<MySource_LOGOUT_SECTION>
<MySource_PRINT var="form_open" />
Currently logged in as:
<MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" />
<br />
<MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
<MySource_PRINT var="form_close" />
</MySource_LOGOUT_SECTION>
</MySource_AREA>
<!-- Search Section -->
<h2>Search</h2>
<MySource_AREA id_name="search_box" design_area="searchbox">
<MySource_SET name="search_page_assetid" value="1234" />
<MySource_SET name="field_name" value="name" />
<MySource_PRINT var="form_start" />
<MySource_PRINT var="box" /> <MySource_PRINT var="submit" />
<MySource_PRINT var="form_end" />
</MySource_AREA>
<!-- Nested Right Column Content -->
<MySource_AREA id_name="whats_new" design_area="nest_content">
<MySource_SET name="type_codes" value="page" />
</MySource_AREA>
</div>
</div>
<footer class="footer">
<p class="pull-right">
<!-- Last Updated Design Area-->
Last Updated:
<MySource_AREA id_name="page_modified" design_area="datetime">
<MySource_SET name="format" value="l, F j, Y" />
<MySource_SET name="datetime" value="updated" />
</MySource_AREA>
</p>
<p>© %globals_date_Y% Company, Inc.</p>
</footer>
</div> <!-- /container -->
</body>
</html>