RevisitingSageFrame Templating

Why?

Limitations of Current Templates:• Less designer friendly, Less user friendly.• Only the basic wrappers could be changed, the

default module style had to be overwritten.• No fallback mechanism existed i.e. if a new

template was designed, all css(modules) had to be rewritten, the default is destroyed.

• Support for handheld devices was not thought of.• The new proposed templating style carries with it

a lot of exciting features and promises (we couldn’t say no ) .

What?

The new templates shall address these areas:• Easy customization• Fallback logic exists for templates, css, themes,

modules (i.e. the default for all these remains intact)• Theme-rollers, layout-rollers, page width rollers shall

be included.• Easy to design : the designers can “design” without

having to ponder over the layers of wrappers and their class names. Moreover the ability to control the themes and module style from within the template gives designers the ability to customize their design even more easily.

What Else?

• Awesome support for all kinds of devices due to the switchable layouts.

• Switchable multi-layouts across pages.• Easy layout customization with UI support.• Ability to define the content panes and their html

rendering markup programmatically.• Varying layouts across pages is possible.• Uses the concept of common classes(even more

easier from designers perspective)

The motive?

• To transform the layout of your site to a whole-new mesmeric web portal.

• An encouragement to all template developers who wish to develop templates in SageFrame.

• To demonstrate the aesthetic features the upcoming templates exhibit.

Folder Structure

Terminologies

• Layouts/Presets• Themes• Common classes• Overrides– Template– Themes– Layouts– Module styles

• Dynamic Wrappers(Blocks)

Layout(xml)Style

type

class

HTML Builder

• Header• Navigation• Footer

Block Types

Theme Roller(Themes)

SageFrame Standard Layout(wrappers+ids+classes)

Template.css

Template.css

Fallback Theme

Page Rendered

Layout switch

Width Switcher

Theme Switcher

The Flow

• A default layout exists• A list of positions/content panes exist• A custom layout consists of those panes to be

included and other styling information• A template.css carries the style information• The template.css from theme overrides the

default template style if theme is applied• The html builder renders the appropriate markup

around each block in the runtime

UI for Customizing the Layout

Current SageFrame Wrappers

Template Design (The Flow)

• Define Layout.xml (know the classes and wrappers rendered)

• Write template.css• Customize module.css from within the template

folder