Skip to content

Bootstrap Pattern

Jump to bottom Edit New page
hertsch edited this page May 23, 2014 · 8 revisions

Bootstrap-Pattern are helpful if you are using the Bootstrap CSS Framework, the pattern spend you an easy access to some standard solutions which fit to the Content Management System and the Bootstrap Framework.

If you are not using Bootstrap you should use the Classic Pattern instead.

A Pattern is a Twig Template you can include or extend within your Template php or twig file, the Bootstrap Pattern complete the Bootstrap Service.

Bootstrap Pattern Templates

###@pattern/bootstrap/browser.check.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/browser.check.twig' %}

Require

  • pattern.min.css
  • /image/warning.gif

This pattern is using the Browser Service to detect browsers which are out of date and to show a small warning in the style of Browser-Update.org. In different to the origin Browser-Update.org script this pattern does not need any JavaScript and can be easy adapted and changed by you.

If the pattern detect an outdated browser it will show a small hint which can be placed at the top of the website and link to the update page of Browser-Update.org, you can change this too.

###@pattern/bootstrap/head.open.graph.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/head.open.graph.twig' %}

This <meta> segment provide you with the Facebook Open Graph Meta Tags:

<meta property="og:title" content="{{ page_title() }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ PAGE_URL }}">
{% set image = page_image() %}
{% if image|length > 0 %}
  <meta property="og:image" content="{{ page_image() }}" />
{% endif %}
<meta property="og:description" content="{{ page_description() }}" />

these tags grant, that the page will be linked correct and use the in og:image specified image.

The function page_image() will grab the first image from a WYSIWYG, NEWS, TOPICS or flexContent article and can also fallback to an default image.

###@pattern/bootstrap/head.simple.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/head.simple.twig' %}

Usage twig, extending the pattern

{% extends '@pattern/bootstrap/head.simple.twig' %}

The head.simple.twig return a complete <head> ... </head> section with all needed <meta> tags, setting page title, description and keywords and loading standard css files (also a /css/screen.css if it exists in your template directory) and jQuery files for the installed add-ons.

This pattern will also load all needed css and js files for the latest Bootstrap Version from the local kitFramework Library.

You can display the pattern using php or include it with twig without any changes.

You can also use the pattern as base and extend it within your template, keeping the original code.

The pattern head.simple.twig enable you to extend the following blocks:

  • meta - block for the <meta> tags
  • css - block for the css files
  • jquery - block for the jQuery files

use the function parent() to keep the original block content and then to add your own content.

Example:

{% extends '@pattern/bootstrap/head.simple.twig' %}
{% block css %}
	{{ parent() }}
	<link href="{{ TEMPLATE_URL }}/css/print.css" rel="stylesheet" />
{% endblock css %}

will keep the pattern intact and load /css/print.css below all other css files.

###@pattern/bootstrap/html.simple.twig

Usage twig, extending the pattern

{% extends '@pattern/bootstrap/html.simple.twig' %}

This pattern contain a <html> skeleton, a complete <head> section (see also head.simple.twig) and a empty block body to enable you to fill in your own body content.

{% extends '@pattern/bootstrap/html.simple.twig' %}
{% block body %}
	<div class="container">
		{{ bootstrap_nav('nav nav-tabs') }}
		<div class="content">
			{{ page_content() }}
		</div>
	<div>
{% endblock %}

will generate a complete template for a simple website with Bootstrap Navigation Tabs at the top.

###@pattern/bootstrap/login.inline.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/login.inline.twig' %}

This pattern will return a ready to use login dialog with all checks and features you normally will need.

This pattern will be created as Bootstrap Inline Form.

Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs.

###@pattern/bootstrap/login.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/login.twig' %}

This pattern will return a ready to use login dialog with all checks and features you normally will need.

This pattern will be created as Bootstrap Basic Form.

Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs.

###@pattern/bootstrap/maintenance.twig

Usage php

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

Usage twig, include the pattern

{% include '@pattern/bootstrap/maintenance.twig' %}

This pattern will show a simple hint that the website is currently offline due service operations.

The robots meta tag is set to noindex,nofollow.

###@pattern/bootstrap/search.div.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/search.div.twig' %}

This pattern will return a complete responsive search dialog in Bootstrap Style as <div> container you can use everywhere within your template.

Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs.

###@pattern/bootstrap/search.form.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/search.form.twig' %}

This pattern will return only the naked search form in Bootstrap Basic Style without any formatting container around, you can use this pattern to create your own search dialog.

###@pattern/bootstrap/social.sharing.buttons.twig

Usage php

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

Usage twig, including the pattern

{% include '@pattern/bootstrap/social.sharing.buttons.twig' with { 'buttons': {
	'email': {
		'to': '[email protected]',
		'subject': 'Any subject'
		'body': 'Any email body content',
		'cc': '[email protected],second@foobar,tld'
	},
	'facebook': {
		'url': PAGE_URL    		
	},
	'tumblr': {
		'url': PAGE_URL,
		'title': PAGE_TITLE
	},
	'linkedin': {
		'url': PAGE_URL,
		'title': PAGE_TITLE,
		'description': PAGE_DESCRIPTION
	},
	'twitter': {
		'url': PAGE_URL,
		'title': PAGE_TITLE
	},
	'reddit': {
		'url': PAGE_URL
    },
    'google': {
    	'url': PAGE_URL
    },
    'pinterest': {
    	'url': PAGE_URL,
    	'media': ''
    },
    'github': {
    	'url': 'https://github.com/owner/repository'
    }
}}' %}

The example above is showing all available buttons with their individual parameters. Add only the buttons you need. There are only two buttons where the parameters must be set:

  • email - you must set the parameter to and subject all other parameters are optional
  • github - you must set the parameter url which is linking to the desired repository

All other buttons are using default parameters, so you can be lazy and set an empty array as parameter, i.e.:

{% include '@pattern/bootstrap/social.sharing.buttons.twig' with { 'buttons': {
	'facebook': {},
	'twitter': {},
	'google': {}
}} %}

will be working fine and showing the buttons for Facebook, Twitter and Google+.

⇐ Pattern Overview | Classic Pattern ⇒

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