Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

FSS Themes - Slate

Owned by Anastasia Cheetham
Last updated: Jul 19, 2011Version comment
3 min read

All Theme Examples

Mist

Coal

Slate

High Contrast

High Contrast Inverted

Black on Yellow

Yellow on Black
FSS Documentation

Fluid Skinning System (FSS)
FSS Naming Conventions
FSS Cheat Sheet
Mobile FSS Cheat Sheet

Demos: Columns
Demos: Tabs, Menus, etc.
Demos: Text
Demos: Themes

HTML and CSS Background
CSS Bugs, Gotchas

Still need help?

Join the infusion-users mailing list and ask your questions there.

Theme: Slate

The mark-up and classes used to produce this layout:

<div class="fl-theme-slate">

<div class="fl-container-400 fl-centered fl-fix fl-focus">
    <div class="fl-widget">
        <div class="fl-widget-titlebar">
            <a class="fl-force-left fl-icon fl-icon-more" href="#">More</a>
            <a class="fl-force-right fl-icon fl-icon-close" href="#">Close</a>
            <a class="fl-button-right settings" href="#"><strong class="fl-button-inner">Settings</strong></a>
            <h2>Regular Widget</h2>
        </div>
        <div class="fl-widget-options">
            <ul>
                <li><a href="#_bottom">Option 1</a></li>
                <li><a href="#_bottom">Option 2</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <p>this is where the content goes</p>
        </div>
    </div>

    <p></p>
    <div class="fl-widget fl-grabbable">
        <div class="fl-widget-titlebar">
            <a class="fl-force-left fl-icon fl-icon-more" href="#">More</a>
            <a class="fl-force-right fl-icon fl-icon-close" href="#">Close</a>
            <a class="fl-button-right settings" href="#"><strong class="fl-button-inner">Settings</strong></a>
            <h2>Draggable Widget</h2>
        </div>
        <div class="fl-widget-options">
            <ul>
                <li><a href="#_bottom">Option 1</a></li>
                <li><a href="#_bottom">Option 2</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <p>this is where the content goes</p>
        </div>
    </div>

    <p></p>
    <ul class="fl-tabs fl-tabs-center">
        <li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
        <li><a href="#_bottom">Tab</a></li>
    </ul>
    <div class="fl-tab-content"> 
        Content
    </div>
   
    <p></p>
    <ul class="fl-tabs fl-tabs-enhanced">
        <li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
        <li><a href="#_bottom">Tab</a></li>
    </ul>
    <div class="fl-tab-content"> 
        Content
    </div>                

    <p></p>
    <ul class="fl-listmenu">
        <li><a href="#_bottom">Menu item #1</a></li>
        <li class="fl-activemenu"><a href="#_bottom">Active Menu item</a></li>
        <li><a href="#_bottom">Menu item #3</a></li>
        <li><a href="#_bottom">Menu item #4</a></li>
        <li><a href="#_bottom">Menu item #5</a></li>
    </ul>
    
</div>

</div>