.. 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