Tutorial - FSS 1.0 Migration

This page is a work in progress, and any information here should be considered, for now, to be incomplete. This warning will be removed when complete.

This page will walk you through the process of upgrading your existing 0.8 FSS implementation to the new 1.0 version. This tutorial assumes that

you are already familiar with HTML, Javascript and CSS
you are familiar with what FSS is and does
you have an existing implementation that makes use of the FSS and worked with the 0.8 Infusion release.
you are using the default classes

Location Changes

With the directory restructuring comes the need to update your paths to our files.

If you use...	The new path is...
fluid-components/css/	framework/fss/css/
fluid-components/css/FSS_images	framework/fss/images/

On this Page

Unable to render {include} The included page could not be found.

File Name Changes

FSS css file naming convention has changed. "." was replaced by "-" and "fluid" was replaced by "fss"
NOTE: Certain CSS files have been relocated, removed, and restructured. Larger changes can be found below. For specific class names, please see what has been #Migrated out of FSS.

Category	Old	New
FSS	fluid-components/css/fluid.layout.css	framework/fss/css/fss-layout.css
FSS	fluid-components/css/fluid.reset.css	framework/fss/css/fss-reset.css
FSS	fluid-components/css/fluid.text.css	framework/fss/css/fss-text.css
FSS	fluid-components/css/fluid.states.css	Refactored into Reorderer, Inline Edit
FSS	fluid-components/css/fluid.theme.hc.css	framework/fss/css/fss-theme-hc.css
FSS	fluid-components/css/fluid.theme.mist.css	framework/fss/css/fss-theme-mist.css
FSS	fluid-components/css/fluid.theme.debug.css	framework/fss/css/fss-theme-debug.css
FSS	fluid-components/css/fluid.theme.rust.css	framework/fss/css/fss-theme-rust.css
Pager	fluid-components/css/fluid.components.pager.css	components/pager/css/Pager.css
UI Options	fluid-components/css/fluid.components.ui-options.css	components/uiOptions/css/UIOptions.css
UI Options	fluid-components/css/fluid.components.ui-options.preview.css	components/uiOptions/css/UIOptionsPreview.css
Uploader	fluid-components/css/fluid.components.uploader.css	components/uploader/css/Uploader.css
FSS Demo	fluid-components/css/FSSDemo.css	standalone-demos/quick-start-examples/fss/css

Class Changes

For consistency, all classes used as DOM selectors have been given an "flc-" prefix, and ones used for visual styling have an "fl-" prefix. For more information on our naming conventions, please see FSS Naming Conventions#Naming Conventions

Migrated out of FSS

This section documents class names that have been taken from the FSS core (found in the framework/fss/css/ folder) and moved into a new CSS file or removed entirely.

Class	Original Location	New Location
.inlineEdit-tooltip	fluid.states.css	see Inline Edit
.inlineEdit-invitation	fluid.states.css	see Inline Edit
.orderable-default	fluid.states.css	see Reorderer
.orderable-selected	fluid.states.css	see Reorderer
.orderable-hover	fluid.states.css	see Reorderer
.orderable-dragging	fluid.states.css	see Reorderer
.orderable-avatar	fluid.states.css	see Reorderer
.dropWarning	fluid.states.css	see Reorderer
.fluid-vertical-order .orderable-drop-marker	fluid.states.css	see Reorderer
.fluid-horizontal-order .orderable-drop-marker	fluid.states.css	see Reorderer