DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Readable name of your extension¶

Created:	2010-02-18T17:33:18
Changed:	2011-06-11T19:42:20
Classification:	extensionkey
Description:	The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Keywords:	keywords comma-separated
Author:	Author Name
Email:	your@email.com
Info 4:
Language:	en

EXT: HTML5 Boilerplate – html5boilerplate

EXT: HTML5 Boilerplate¶

Extension Key: html5boilerplate

Language: en

http://forge.typo3.org/projects/show/extension-html5boilerplate

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

a GNU/GPL CMS/Framework available from www.typo3.org

The TYPO3 HTML5 Boilerplate team consists of:

Einar Gislason < einarsvan@gmail.com > and

Andy Grunwald < andreas.grunwald@wmdb.de >

Original HTML5 boilerplate can be found here: http://html5boilerplate.com/

All credit for HTML5 boilerplate goes to Paul Irish, Divya Manian, Shichuan and all the other contributors mentioned at http://html5boilerplate.com/

Table of Contents¶

EXT: HTML5 Boilerplate 1

`Introduction 3 <#__RefHeading__643_679509226>`_

What does it do? 3

`Configuration 4 <#__RefHeading__647_679509226>`_

Technical information 4

Installation and setup 4

Upgrading from 0.4.x 4

Using html5boilerplate with any jQuery extension 4

Modernizr 5

PNG fix 5

`Typoscript constants 6 <#__RefHeading__653_679509226>`_

Configuration constants (config.) 6

Includes constants (page.) 7

`Typoscript setup 8 <#__RefHeading__655_679509226>`_

Configuration setup (config.html5boilerplate.) 8

`Known problems 9 <#__RefHeading__659_679509226>`_

`To-Do list 10 <#__RefHeading__661_679509226>`_

`ChangeLog 11 <#__RefHeading__663_679509226>`_

Introduction¶

What does it do?¶

This extension incorporates HTML5 Boilerplate into TYPO3 and then some. It gives you a great starting point for your TYPO3 site. Also included are most of the files you will find in the standard html5 boilerplate.
Get involved at http://forge.typo3.org/projects/show/extension- html5boilerplate
For more info on the original HTML5 Boilerplate project go to http://html5boilerplate.com/ . They have some great great documentation there.

Configuration¶

Technical information
Installation and setup of the extension

Technical information¶

Please note that the hook for post processing has been rewritten from ground up by Andy Grunwald. Documentation coming as soon as possible!

This extension consists of a single hook and then some typoscript setup. The hook is render-postProcess in the t3lib_pagerenderer.php file. What are are doing with the hook is basically optimizing TYPO3's output. In the current version we only change the <html> tag and the meta charset tag.

The typoscript used is set up to come as close to HTML5 Boilerplate's index.html file as possible. Every piece of typoscript is commented but for even more information on what it does please take a look at Tsref here: http://bit.ly/9uXhOz

Installationand setup¶

Download and install the extension like you would every other TYPO3 extension. Not sure how to do that? Read this http://www.pluspunkthosting.de/166.html or Google “Installing TYPO3 extensions” :)

To set the extension up after installing:

Go to your main typoscript template (usually in the root of your site) and open it for editing

Select the includes tab

In the “Include static (from extensions)” find the two HTML5 Boilerplate templates and select them. I recommend placing the files at the top of your list.

Create you own config template or use the one from step 1

In this template fill out the typoscript constants mentioned below.

You should now be good to go. Please remember that as we are using standard typoscript in this extension it is highly likely that some of your existing typoscript (if this is not a fresh installation of TYPO3) will overwrite the HTML5 Boilerplate setup.

Upgrading from 0.4.x¶

The extension does no longer include Templavoila! as standard. For including Templavoila! see static/example_config/templavoila.txt file.

Using html5boilerplate with any jQuery extension¶

There are a number of different extensions that help you include jQuery in TYPO3. If you already are using one of those extensions you should remove the reference to jQuery from html5boilerplate's typoscript setup.

Some of these extensions are:

jQuery (http://typo3.org/extensions/repository/view/jquery/current/)
t3jquery (http://typo3.org/extensions/repository/view/t3jquery/current/)
nano_jquery (http://typo3.org/extensions/repository/view/nano_jquery/current/)
cl_jquery (http://typo3.org/extensions/repository/view/cl_jquery/current/)

((generated))¶

Example¶

Add this to a typoscript template on your site to remove the jQuery include from HTML5 Boilerplate

page.includeJSFooterlibs.jquery >

This setup has been tested with t3jquery on a TYPO3 4.5.2 site without a problem. The t3query extension had a problem placing the jquery library in the header and always put it in the footer, but that is not a issue for this extension.

Modernizr¶

HTML5boilerplate usually ships with v. 1.7 of Modernizr. As there has now been released a new version of Modernizr we include that one instead.

Please go to http://www.modernizr.com/ to custom build your own Modernizr script. Your script can be inserted like this:

page.headerData.200.value = <script src="fileadmin/js/libs/MyModernizrScript.js"></script>

PNG fix¶

I case you have som semi-transparent PNG images on your site, HTML5boilerplate includes DD Belated PNG fix in the footer (IE6 and less only).

I case you want to remove the PNG fix script, empty the footerData.10 object like so:

page.footerData.10>

Typoscript constants¶

You should fill out all these constants in your local typoscript files
The constants go into the constants field in the template and not the setup field. However the naming convention of the constants makes it pretty easy to use the constants in the setup field as well, should you want to do that.

Configuration constants (config.)¶

baseURL¶

Property

baseURL

Data type

string

Description

From Tsref:

This writes the <base> tag in the header of the document. Set this to the value that is expected to be the URL, and append a “/” to the end of the string.

Example:

config.baseURL = http://typo3.org/sub_dir/

Default

http://yoursite.com/

index_enable¶

Property

index_enable

Data type

boolean

Description

From Tsref:

Enables cached pages to be indexed.

Default

1

index_externals¶

Property

index_externals

Data type

boolean

Description

From Tsref:

If set, external media linked to on the pages is indexed as well.

Default

1

language¶

Property

language

Data type

string

Description

From Tsref:

Language key. See stdWrap.lang for more information. Select between: English (default) = [empty] Danish = dk

German = de Norwegian = no Italian = it etc...

Value must correspond with the key used for backend system language if there is one. See inside config_default.php or look at the translation page on TYPO3.org for the official 2-byte key for a given language. Notice that selecting the official key is important if you want labels in the correct language from "locallang" files.

If the language you need is not yet a system language in TYPO3 you can use an artificial string of your choice and provide values for it via the TypoScript template where the property “_LOCAL_LANG” for most plugins will provide a way to override/add values for labels. The keys to use must be looked up in the locallang-file used by the plugin of course.

Default

en

locale_all¶

Property

locale_all

Data type

string

Description

From Tsref:

PHP: setlocale("LC_ALL", [value]); value-examples: deutsch, de_DE, danish, portuguese, spanish, french, norwegian, italian. See www.php.net for other value. Also on linux, look at /usr/share/locale/

TSFE->localeCharset is intelligently set to the assumed charset of the locale strings. This is used in stdWrap.strftime to convert locale strings to the renderCharset of the frontend.

Example:

This will render dates in danish made with stdWrap/strftime: locale_all = danish locale_all = da_DK

Default

en_US.UTF-8

[tsref:config/->CONFIG]

((generated))¶

Example¶

This is how the constants could look like (from the constants file included):

config{

    # The <base> tag in the header of the document which is used by RealURL
    baseURL = http://yoursite.com/

    # Search. This should be disabled if you are not using Indexed search!
    index_enable = 1
    index_externals = 1

    # Language and locallization
    language = en
    locale_all = en_US.UTF-8

    # Headercomment - inserted before the TYPO3 comment in header
    headerComment = INSERT ADDITIONAL HEADER COMMENT HERE!

}

Includes constants (page.)¶

includeCSS.main¶

Property

includeCSS.main

Data type

string

Description

Put a reference to your main css file here. See example below

Default

includeJSFooter.main¶

Property

includeJSFooter.main

Data type

string

Description

Put a reference to your main javascript file here. See example below

Default

[tsref:config/->PAGE]

((generated))¶

Example¶

This is how the constants could look like:

# Your main.css file
page.includeCSS.main = fileadmin/css/main.css

# Your main js file
page.includeJSFooter.main = fileadmin/js/main.js

Typoscript setup¶

You can overwrite these setup properties in your local typoscript template files
I am only documenting the setup properties that are special for HTML5 Boilerplate. Every piece of setup property is commented in the code and/or Tsref.
Please note that as of version 0.5.0 html5boilerplate will not include setup for Templavoila! in the config setup file. An example on how to set Templavoila can be found in the source files under static/example_config/templavoila.txt

Configuration setup (config.html5boilerplate.)¶

htmlTag¶

Property

htmlTag

Data type

string

Description

To replicate the html tag from HTML5 Boilerplate we are replacing the standard TYPO3 html tag with a html tag wrapped in some IE conditional comments.

Read more about why we do this here: http://bit.ly/hQftto

Default

Too long to put in here. See the example below

metaCharsetTag¶

Property

metaCharsetTag

Data type

wrap

Description

Remove unnecessary code from the meta charset tag. Purely for aesthetic purposes :)

Default

metaCharsetTag.insertAfter¶

Property

metaCharsetTag.insertAfter

Data type

string

Description

We want to insert this meta tag as soon as possible in our <head>. This is why we sort of force it in immediately after the charset.

Please note that this causes the document to fail in the html5 validator. More on that issue here: http://bit.ly/hQftto . There are workarounds around the validation issue, if that is important for your project.

Default

See the example below

[tsref:config/->CONFIG.HTML5BOILERPLATE]

((generated))¶

Example¶

This is how the html5boilerplate setup properties look like:

config.html5boilerplate{
        # This replaces the html tag with some conditional comments for IE and a no-js class
        htmlTag (
        <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
        <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
        <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
        <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
        <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
        )

        # Make sure the meta charset is short and sweet
        metaCharsetTag = <meta charset="|">
        metaCharsetTag.insertAfter (
                <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        )
}

Known problems¶

None that we know of
Report any problems here: http://forge.typo3.org/projects/show /extension-html5boilerplate

To-Do list¶

There are some additional features we would like to implement. See http://forge.typo3.org/projects/show/extension-html5boilerplate for more details.
For release 0.6 we would like to include HTML5 Boilerplate mobile.

ChangeLog¶

0.5.0¶

Version

0.5.0

Changes

Lots of tweaks and imrovements.

The whole class was rewritten by Andy Grunwald.

There are some imrovements to the typoscript setup files.

Templavoila is not included automatically any more.

Modernizr is upgraded to 2.0.4

There are some chapters added to the manual.

And last but not least this project now has a “team” behind it – the TYPO3 HTML5 Boilerplate team

0.4.0¶

Version

0.4.0

Changes

First public release

11