Upload
marshalp
View
1.856
Download
1
Tags:
Embed Size (px)
DESCRIPTION
For all the developers who wish to develop templates in SageFrame and a guide to all the novices as well.
Citation preview
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