Though we have not released it to the TER, we do have TVFW version 2 available.
It does work with TYPO3 6.2. We have used it on our customer sites.

Here is the extension manual which has a link to the GIT repo with the code for version 2.
You should use the develop branch.

You can use version 1 skins with version 2, but will need to add one constant to the skin (detailed in manual).


Integrate the Design into TYPO3

Transforming a design from a Photoshop or Fireworks file into TYPO3 takes skills in front-end coding (HTML, CSS and JavaScript), in TYPO3 templating and in TypoScript.

Because of this Framework for TemplaVoila and the QuickSite, at Busy Noggin I currently spent most of the integration time on front-end coding not on the TYPO3 templating and TypoScript. When I do spend time on the latter, it is for programming FCEs for handling special situations unique to the site and not on the main page templates.

Integration steps

  • Visualize the HTML Structure
  • Create a new skin
  • Edit the skin

Visualize the HTML Structure  >>


The tools we use

Use the coding tools you prefer, but for those who are curious, these are the tools I use. I am Mac-based.

  • Photoshop: creation of visual design and slicing images for front-end coding
  • skEdit: for HTML, TypoScript and other coding. TextMate is also great.
  • CSSEdit: a terrific CSS editor.
  • Firefox extensions: Firebug & Web Developer Toolbar. Need I say more? Actually, yes. Safari 4 now has an inspect element function that is very Firebug-like.
  • Xscope: Nice set of tools to assist with front-end coding
  • VMware Fusion: Runs windows on a Mac concurrently with the Mac OS and is used for browser testing