Developing a typo3 template strategy
•Download as KEY, PDF•
1 like•1,426 views
Presented at T3CON12-Quebec
Recommended
Recommended
More Related Content
Similar to Developing a typo3 template strategy
Similar to Developing a typo3 template strategy (20)
Recently uploaded
Recently uploaded (20)
Developing a typo3 template strategy
- 1. Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business
- 2. ‣Concepts ‣Strategy ‣Tactics/Techniques BUSY NOGGIN DIGITAL
- 3. A Solid ‣ Speeds up development Template ‣ Provides a base for efficient future development Strategy ‣ Makes it easier to involve multiple developers BUSY NOGGIN DIGITAL
- 4. Last Man Wins BUSY NOGGIN DIGITAL
- 5. CSS .my-class { background-color: blue; } BUSY NOGGIN DIGITAL
- 6. CSS .my-class { background-color: blue; } .my-class { background-color: red; } BUSY NOGGIN DIGITAL
- 7. CSS .my-class { background-color: blue; } .my-class { background-color: red; } #my-page-id .my-class { background-color: green; } BUSY NOGGIN DIGITAL
- 8. TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } BUSY NOGGIN DIGITAL
- 9. TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } myObject.case = lower BUSY NOGGIN DIGITAL
- 10. TSconfig TCEFORM { pages { layout.disabled = 1 subtitle.disabled = 1 newUntil.disabled = 1 url_scheme.disabled = 1 alias.disabled = 1 } } BUSY NOGGIN DIGITAL
- 11. TSconfig TCEFORM { pages { layout.disabled = 1 subtitle.disabled = 1 newUntil.disabled = 1 url_scheme.disabled = 1 alias.disabled = 1 } } TCEFORM.pages.subtitle.disabled = 0 BUSY NOGGIN DIGITAL
- 12. Concept ‣Base Configuration (shared among all installations) ‣Site Configuration (overrides base for specific site needs) ‣Page Configuration (overrides base & site for specific page needs) BUSY NOGGIN DIGITAL
- 13. Tip ‣ As much as possible keep your configuration in files not the database ‣ It will be easier to edit ‣ You can keep it in version control ‣ Multiple developers can work on the same code locally ‣ It is easier to move it from installation to installation. BUSY NOGGIN DIGITAL
- 14. Strategy BUSY NOGGIN DIGITAL
- 15. Strategy BUSY NOGGIN DIGITAL
- 16. Strategy BUSY NOGGIN DIGITAL
- 17. A TYPO3 template strategy does not start with TYPO3 It all begins with front-end code BUSY NOGGIN DIGITAL
- 18. HTML ‣ Categorizing Content Header Footer Main content Feature Additional content Generated content BUSY NOGGIN DIGITAL
- 19. HTML F1 F2 F3 Series Series Series BUSY NOGGIN DIGITAL
- 46. HTML ‣ Visualize in blocks according to function ‣ Recognize patterns ‣ Code pages and common snippets to fit the patterns ‣ Standardize your markup conventions BUSY NOGGIN DIGITAL
- 47. CSS ‣ Use the CSS cascade and inheritance and “last man standing” ‣ Use common selectors but within the context of a parent selector. Class names like .title, description, .more-link, etc. But define as “.news .title” and “.power-mail .title” ‣ Look into the use of CSS frameworks but not at the expense of understanding CSS. ‣ Think about using Less or SASS. BUSY NOGGIN DIGITAL
- 48. TYPO3 ‣ Understand the TYPO3 template approaches and differences between them. ‣ Pure TypoScript ‣ Auto Parser (Modern Template Building) ‣ TemplaVoila ‣ Fluid BUSY NOGGIN DIGITAL
- 49. TYPO3 ‣ Your template strategy must include how you will handle: ‣ Page templates ‣ Special content elements ‣ Extension templates BUSY NOGGIN DIGITAL
- 50. TYPO3 ‣ Choose a TYPO3 template approach that fits you. Combine them when it makes sense. BUSY NOGGIN DIGITAL
- 51. Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business
Editor's Notes
- Who is this for? Those who build multiple TYPO3 sites every year.\n\nI will be here the rest of the conference. Feel free to visit with me about the concepts I will present.\n\n\n
- At most conferences everyone wants to see techniques, but using techniques without a strategy will result in chaotic code and a hard-to-maintain site.\n\nThis is about strategy and concepts not techniques\n\nGood strategy transcends techniques\n\n
- Demonstrate quicksites\n\ncolumn adjustments\nskin changes\n\n
- This is a very important concept that you will use in many contexts within a template strategy\n\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- We use this in:\nCSS\nTypoScript\nPage TSconfig\nUser TSconfig\nServer / Environment config (localconf)\n\n
- \n
- \n
- \n
- \n
- Develop a front-end strategy first\n\nIt is portable to other systems including Phoenix\n\n
- The common structure of web pages\n\nThe six categories of content (explain each)\n\nHeader, footer and main content are on every page\n\nVisualizing HTML structure.\n\nThere are really only a handful of \npage structures on the web. Learn \nto recognize them.\n\n
- \n
- You see, 90% of all web pages have very similar structure.\n
- You see, 90% of all web pages have very similar structure.\n
- You see, 90% of all web pages have very similar structure.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- SASS\nTwitter Bootstrap, 960gs, Blueprint or roll your own\nStandarize your markup\n\nLook for patterns and common structures\n\nExample of columns and modules\n\ncommon classes using parent selectors to target\n.more-link\ndescription\n.title\n.item\n\nStandardization helps when you work in a multi-developer environment\n\nThe power of SASS. Again for developers building multiple sites per year.\n\nSASS\nBase Variables\nSite Variables\nBase CSS\nSite CSS\n\nInterleafing Bootstrap\n\n
- If you use TV look into static datastructures\n\nI now use a combination of TV and pure TS\n
- In extensions your approach will be dictated by the extension (marker-based or Fluid)\n
- Understand why you use you use the approach over the other approaches.\n
- Demo the QuickSite\n\n