Skip to content

tt bootstrap one

Jump to bottom Edit New page
hertsch edited this page Apr 27, 2014 · 10 revisions

The tt_bootstrap_one template show you how to create a simple template in Responsive Webdesign with the Bootstrap CSS Framework and the TemplateTools.

This template is using:

and looks at Large Devices (Desktop) like:

and looks at Small Devices (Phone) like:

showing only a small stripe for the header without the logo and the navigation below the content.

The template tt_bootstrap_one needs only 41 lines of code in your index.php:

<!DOCTYPE html>
<html lang="en">
  <?php
    require_once WB_PATH.'/kit2/extension/phpmanufaktur/phpManufaktur/TemplateTools/initialize.php';  
    $template['twig']->display('@pattern/bootstrap/head.simple.twig');
  ?>
  <body>
    <div class="container">    
      <div class="logo-container row">
        <div class="logo col-sm-3 hidden-xs">
          <a href="<?php echo CMS_URL; ?>" title="<?php echo CMS_TITLE; ?>">
            <img src="<?php echo MANUFAKTUR_URL; ?>/TemplateTools/extension.jpg" class="img-responsive" alt="TemplateTools" />
          </a>
        </div>
        <div class="template-name col-sm-9 col-xs-12">
          <div class="template-name-header">
            <?php echo TEMPLATE_NAME; ?>
          </div>
          <div class="template-name-path">
            <?php echo TEMPLATE_PATH; ?>
          </div>
        </div>
      </div>      
      <div class="content row">
        <div class="main col-sm-9 col-sm-push-3">
          <?php $template['twig']->display('@pattern/bootstrap/search.div.twig'); ?>
          <?php $template['bootstrap']->breadcrumb(); ?>
	      <?php $template['cms']->page_content(); ?>
        </div>        
        <div class="navigation col-sm-3 col-sm-pull-9">
          <?php $template['cms']->show_menu2(); ?>
        </div>       
      </div>      
      <div class="footer row">
        <div class="col-sm-9 col-sm-offset-3">
          <?php echo PAGE_FOOTER; ?>
        </div>
      </div>
    </div>
  </body>
</html>

The first step is to enable the TemplateTools for the usage in your index.php template file:

<?php
  require_once WB_PATH.'/kit2/extension/phpmanufaktur/phpManufaktur/TemplateTools/initialize.php';  
?>

the require statement is always the same, so you can copy and paste it into your own template.

After this you have full access to all Constants, Services and Pattern of the TemplateTools.

$template['twig']->display('@pattern/bootstrap/head.simple.twig');

We are using the Twig Service display() command to include and show the the Bootstrap Pattern head.simple.twig. This pattern will load the latest Bootstrap and jQuery versions from the kitFramework Library (you have installed the Library together with the kitFramework).

The head.simple.twig will also set all important information like the page title, description, keywords and will try to load a template.css file from your template directory (the file should be placed in the root directory of the template or in the /css subdirectory).

In a nutshell: the head.simple.twig will proceed many stupid but also important steps for you which will be needed in for each template.

<div class="container">

will open the Bootstrap content container.

The logo container make use of the Bootstrap Gridsystem and uses Constants provided by the TemplateTools, like CMS_TITLE or TEMPLATE_NAME and TEMPLATE_PATH:

<div class="logo-container row">
  <div class="logo col-sm-3 hidden-xs">
    <a href="<?php echo CMS_URL; ?>" title="<?php echo CMS_TITLE; ?>">
      <img src="<?php echo MANUFAKTUR_URL; ?>/TemplateTools/extension.jpg" class="img-responsive" alt="TemplateTools" />
    </a>
  </div>
  <div class="template-name col-sm-9 col-xs-12">
    <div class="template-name-header">
      <?php echo TEMPLATE_NAME; ?>
    </div>
    <div class="template-name-path">
      <?php echo TEMPLATE_PATH; ?>
    </div>
  </div>
</div>

To the image tag there is assigned the class img-responsive to make the image responsive and auto scaling to the size of the logo container at different view ports.

<?php $template['twig']->display('@pattern/bootstrap/search.div.twig'); ?>

Show a search box for the CMS search function at the right side of the template body and is using the Bootstrap Pattern search.div.twig.

<?php $template['bootstrap']->breadcrumb(); ?>

Is using the Bootstrap Service breadcrumb() to show a Bootstrap Breadcrumb Navigation.

<?php $template['cms']->page_content(); ?>

Use the standard CMS Service page_content() to show the content of the actual page.

<div class="navigation col-sm-3 col-sm-pull-9">
  <?php $template['cms']->show_menu2(); ?>
</div>

Is using the standard CMS Service show_menu2() to a navigation through the website. Depending on the size of the viewports the Navigation container will be shown at the left, beneath the content, or below the content (at small devices).

<div class="footer row">
  <div class="col-sm-9 col-sm-offset-3">
    <?php echo PAGE_FOOTER; ?>
  </div>
</div>

The footer container will show a PAGE_FOOTER, if you have defined one in the settings of the Content Management System.

⇐ Examples | tt_bootstrap_two ⇒

Contribution to the Wiki

  • If you spot a typo or want to contribute an article, a how-to or a tip, feel free to edit the Wiki directly
  • If you you have any questions, please visit the phpManufaktur Support Forum

TemplateTools This Documentation is part of the kitFramework Project

© 2014 by phpManufaktur, kitFramework and TemplateTools are published under MIT license.

TemplateTools

Services

Pattern

kitCommands

Examples

Cookbook

Links

Clone this wiki locally