Major Enhancements Coming to this Framework

Soon TemplaVoila 1.4.2 will be released which will allow us to edit the code on this framework to work without adjustment to TemplaVoila itself. It will also allow the framework to be packaged as an extension. This will make it easier bring the framework into existing sites and allow the framework to be updated via the extension manager. Our plan is to for the next version of the QuickSite and the framework extension to be released during March.

Any skins you might produce with the current version will still work with the next version.

 

Putting TemplaVoila to Work

TemplaVoila is the most powerful of the TYPO3 templating methods. With this templating extension an experienced developer can produce sites with very flexible layout options for the content editor. Also, any site layout that can be produced in HTML can be integrated into TYPO3 using Templavoila.

However, sometimes developers struggle getting their heads around TemplaVoila or else use it awkwardly. Few use it efficiently or to its potential.

Although the tutorial Futuristic Template Building gives an introduction of how to use the features of TemplaVoila (TV), I have not found a comprehensive resource for describing how to most effectively use this extension in a day to day production environment.

After working with TV for some time, I have been able to develop an approach and set of favorite practices for TemplaVoila that works well for me. This site is an attempt to share those practices and the QuickSite package I use to build my sites. I use the term favorite practices over best practices as I do not have any pretension of this approach being the definitive word on TYPO3 templates. However, for me this approach has made templating one of the easiest things I do in my development work.

Overview Video

Here is an early edition of a video presenting an overview of this framework and the Busy Noggin QuickSite. It is a little over 6 minutes long.

HD version

Non-HD version (for lower bandwidth)


* indicates required field

Sign Up for Framework News

You can subscribe to news about the this framework in the form to the right. This will give you periodic news about the framework including updates to the QuickSite, bug fixes, tips, etc. I promise not to flood you inbox with junk and you can unsubscribe at any time.

What do these four pages have in common?

They all run off the same TemplaVoila page template.

click each to enlarge

What You Need to Know

To use the techniques presented in this site, at a minimum you need to:

  • have a solid understanding of HTML and CSS.
  • have the ability to look at a visual layout and determine the HTML structure needed to produce it for the web (i.e. where you need div's, what needs to be floated, etc.)
  • be able to write HTML with a text editor. If you use a visual editor that keeps you from dealing with the source then you will not be able to use this framework.
  • have some ability in coding TypoScript (or know someone who does)

Ideally, you will:

  • have worked through the TemplaVoila tutorial entitled Futuristic Template Building.
  • have experience in building sites with TemplaVoila (the more the better)
  • have strong experience in coding TypoScript, HTML, CSS and JavaScript

My guess is that developers who use TemplaVoila to build a lot of sites will find it easier than most to understand this framework since they are already familiar with TypoScript, front-end code and TemplaVoila.

How This Site is Organized

This site is organized so as to be read sequentially.  Work you way through each section starting in the upper left of the menu. There is a download section which provides the Busy Noggin QuickSite package which runs this framework and which I use as a starter for all my sites.

Framework Provided by Busy Noggin, Inc.

This framework is provided free of charge by Busy Noggin, Inc., a web development company, and was authored by Ron Hall of Busy Noggin. You can find out more about our company at www.busynoggin.com.

 

Flexible & Comprehensive 

  • Modular approach to building pages
  • HTML structures that accommodate all kinds of visual styling
  • Cuts down drastically the amount of TemplaVoila mapping needed from site to site
  • Preserves all the power of TemplaVoila for handling special situations
 
 

Core & Skin Files 

  • Provides core templates that can be used from installation to installation without remapping.
  • Skins are developed that carry all the structure and visual changes needed to modify the output of the core templates to the site's unique requirements
  • Even custom CSS classes for the RTE can be supplied through the skins.
  • Those with good front end coding skills but limited TypoScript or TemplaVoila skills can still template sites with this approach.
  • Leverages the unique benefits of CSS and TypoScript
 
 

Modularity with Utility FCEs 

  • Ad hoc layouts using columns and modules in combination with common page templates
  • Options for modifying the visual presentation of columns and modules
  • Columns and modules are self-adjusting and fit within the space available
  • Columns can be nested inside modules and other columns
  • Additional utility FCEs for handling common layout and content needs
 
 

Backend Layout 

  • Extensive use of the TemplaVoila beLayout tag to simplify what the editor sees
  • Trims down the visual noise on the backend
  • JavaScript-driven tabs