Busy Noggin's Framework for TemplaVoila

Skip navigation and go to main content

• Introduction
• The Approach
• Workflow
• Templates
• Download
• Contact & Info

• A Suggested Workflow
• Info Architecture & Wireframing
• Visual Design
• Integrate Design into TYPO3
  • Visualize the HTML Structure
  • Create a New Skin
  • Edit the Skin
• Code Unique Functionality
• Load Content & Launch Site

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

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