Fluid Skinning System demos

Here are some demos showcasing how the Fluid CSS convenience classnames work. The FSS is a completely class based CSS convenience system, and does not focus on typography and grids as heavily as other major CSS frameworks; rather it is designed to help enhance the effectiveness of Fluid components and encourage cleaner markup.

As you read this, page margins, fonts, colors and other basic properties of this page have been modified by the fss reset css file

Advanced Layout

These are the bare bones examples for how to set up the advanced layout class names. For skinned examples please see the FSS Themes demo

Widgets layout

The FSS Widget model is composed of 1 core container and 3 sub containers: titlebar, options, and content

The colors are to exaggerate the effect and do not come with the FSS.

My Widget

this is where the content goes

Tabs layouts

The FSS Tab model is composed of 1 core wrapper (a list), at least 1 list item, and 1 link inside each list item. This example is in a centered container 750px wide.

The colors are to exaggerate the effect and do not come with the FSS.

Content
Content
Content

GUI: Menu layouts

The FSS Menu model is composed of 1 core wrapper (a list), at least 1 list item, and 1 link inside each list item

The colors are to exaggerate the effect and do not come with the FSS.