.. You may want to use the usual include line. Uncomment and adjust the path.
.. include:: ../Includes.txt
====================================
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
|img-1| |img-2| EXT: HTML5 Boilerplate – html5boilerplate
.. _EXT-HTML5-Boilerplate:
EXT: HTML5 Boilerplate
======================
Extension Key: html5boilerplate
Language: en
Copyright 2000-2011, HTML5 Boilerplate team
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:
Table of Contents
-----------------
`EXT: HTML5 Boilerplate 1 <#__RefHeading__641_679509226>`_
**`Introduction 3 <#__RefHeading__643_679509226>`_**
`What does it do? 3 <#__RefHeading__645_679509226>`_
**`Configuration 4 <#__RefHeading__647_679509226>`_**
`Technical information 4 <#__RefHeading__649_679509226>`_
`Installation and setup 4 <#__RefHeading__651_679509226>`_
`Upgrading from 0.4.x 4 <#__RefHeading__663_1288211671>`_
`Using html5boilerplate with any jQuery extension 4
<#__RefHeading__1186_676452373>`_
`Modernizr 5 <#__RefHeading__665_1288211671>`_
`PNG fix 5 <#__RefHeading__667_1288211671>`_
**`Typoscript constants 6 <#__RefHeading__653_679509226>`_**
`Configuration constants (config.) 6 <#__RefHeading__695_1877988217>`_
`Includes constants (page.) 7 <#__RefHeading__697_1877988217>`_
**`Typoscript setup 8 <#__RefHeading__655_679509226>`_**
`Configuration setup (config.html5boilerplate.) 8
<#__RefHeading__699_1877988217>`_
**`Known problems 9 <#__RefHeading__659_679509226>`_**
**`To-Do list 10 <#__RefHeading__661_679509226>`_**
**`ChangeLog 11 <#__RefHeading__663_679509226>`_**
.. _Introduction:
Introduction
------------
.. _What-does-it-do:
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:
Configuration
-------------
- Technical information
- Installation and setup of the extension
.. _Technical-information:
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 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:
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:
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:
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:
((generated))
"""""""""""""
.. _Example:
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:
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 =
.. _PNG-fix:
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:
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:
Configuration constants (config.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. ### BEGIN~OF~TABLE ###
.. _baseURL:
baseURL
"""""""
.. container:: table-row
Property
baseURL
Data type
string
Description
From Tsref:
This writes the 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:
index\_enable
"""""""""""""
.. container:: table-row
Property
index\_enable
Data type
boolean
Description
From Tsref:
Enables cached pages to be indexed.
Default
1
.. _index-externals:
index\_externals
""""""""""""""""
.. container:: table-row
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:
language
""""""""
.. container:: table-row
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:
locale\_all
"""""""""""
.. container:: table-row
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
.. ###### END~OF~TABLE ######
[tsref:config/->CONFIG]
.. _generated:
((generated))
"""""""""""""
.. _Example:
Example
~~~~~~~
This is how the constants could look like (from the constants file
included):
::
config{
# The 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:
Includes constants (page.)
^^^^^^^^^^^^^^^^^^^^^^^^^^
.. ### BEGIN~OF~TABLE ###
.. _includeCSS-main:
includeCSS.main
"""""""""""""""
.. container:: table-row
Property
includeCSS.main
Data type
string
Description
Put a reference to your main css file here. See example below
Default
.. _includeJSFooter-main:
includeJSFooter.main
""""""""""""""""""""
.. container:: table-row
Property
includeJSFooter.main
Data type
string
Description
Put a reference to your main javascript file here. See example below
Default
.. ###### END~OF~TABLE ######
[tsref:config/->PAGE]
.. _generated:
((generated))
"""""""""""""
.. _Example:
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:
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:
Configuration setup (config.html5boilerplate.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. ### BEGIN~OF~TABLE ###
.. _htmlTag:
htmlTag
"""""""
.. container:: table-row
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:
metaCharsetTag
""""""""""""""
.. container:: table-row
Property
metaCharsetTag
Data type
wrap
Description
Remove unnecessary code from the meta charset tag. Purely for
aesthetic purposes :)
Default
.. _metaCharsetTag-insertAfter:
metaCharsetTag.insertAfter
""""""""""""""""""""""""""
.. container:: table-row
Property
metaCharsetTag.insertAfter
Data type
string
Description
We want to insert this meta tag as soon as possible in our .
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
.. ###### END~OF~TABLE ######
[tsref:config/->CONFIG.HTML5BOILERPLATE]
.. _generated:
((generated))
"""""""""""""
.. _Example:
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 (
)
# Make sure the meta charset is short and sweet
metaCharsetTag =
metaCharsetTag.insertAfter (
)
}
.. _Known-problems:
Known problems
--------------
- None that we know of
- Report any problems here: http://forge.typo3.org/projects/show
/extension-html5boilerplate
.. _To-Do-list:
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:
ChangeLog
---------
.. ### BEGIN~OF~TABLE ###
.. _0-5-0:
0.5.0
^^^^^
.. container:: table-row
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:
0.4.0
^^^^^
.. container:: table-row
Version
0.4.0
Changes
First public release
.. ###### END~OF~TABLE ######
|img-2| 11
.. ######CUTTER_MARK_IMAGES######
.. |img-1| image:: img-1.png
.. :align: left
.. |img-2| image:: img-2.png
.. :border: 0
.. :height: 21
.. :hspace: 9
.. :id: Grafik2
.. :name: Grafik2
.. :width: 87