Child pages
  • FSS - Colors and Themes

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.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Overview

This walkthrough details how to use the Helpers functionality of the Fluid Skinning System (FSS). Here, "helpers" refers to the convenience classnames and ready-made GUI setups such as Tabs, Widgets, Menus, etc.

This walkthrough is meant as an accompaniment to the FSS: Helpers Functional Demo, and not as an introduction to CSS or how it works. That information is out of the scope of this document and can be found at the W3C.
For an in-depth article on how the FSS uses CSS and makes it modular, please see the Fluid Skinning System (FSS) introduction.

Getting Started

In order to use the FSS helper classnames, you will need to include the following files in the <head> of your document:

fluid.layout.css
fluid.theme.hc.css
fluid.theme.mist.css
fluid.theme.rust.css

It is optional, though recommended, that you use a CSS "reset" file. A CSS reset file is usually a large group of basic rules to normalize the CSS differences inherent to all browsers.

It is highly recommended that glance over the following walkthroughs, as they explain certain concepts in detail:

  1. FSS Tutorials and Walkthroughs - Layout to give you an overview of how layout in the FSS works.
  2. FSS Tutorials and Walkthroughs - Themes to help give these helpers a unified appearance (a.k.a. themes) or customize their look.

All FSS classnames use the fl- prefix. In our demos, if you see other classnames without this prefix they are either: complimentary CSS; overriding CSS; or specific extensions of the FSS CSS. This means if you don't like the way a certain classnames behaves you could easily override it or extend it.

On This Page

What is a Helper?

When you read the FSS Tutorials and Walkthroughs - Layout article, you might notice thats it's mostly a lot of "convenience" classnames which do several things at once to make laying out a page easier. These conveniences are taken further to create FSS Helpers. Instead of laying out intangible concepts like invisible wrappers and grid containers, you would use FSS Helpers to make GUI things like toolbars, widgets, menus and tabs.

To use FSS Helpers, you need to loosely follow the markup model we have provided, and then apply the appropriate helper classname.

Please note: this document assumes you have already read FSS Tutorials and Walkthroughs - Layout article.

Utility Helpers

Icons

<a href="#_bottom" class="fl-icon myCustomToolIcon" title="Tool Description">Tool</a>

fl-icon is a small icon helper, which is useful in when you want to make nicely accessible icons. Often when you want to make icons you would use either: an empty anchor with a background image; or an anchor with an image as the content. For people who have low-vision, these icons are not helpful since they cannot always adjust the size of icon properly. These icons also don't allow for effective search engine indexing since there is little useful content associated with the icon (just the title and href) - see "Use descriptive anchor text" in the Official Google Blog.

What the fl-icon does is set up your icons at a certain size (16 x 16 pixels), and allow you to place text in your anchors without it showing or compromising the visual aesthetic. Its does this by making the links block level elements with a large negative text indent to "pull" the text outside of their clipping region.

When used in conjunction with the FSS hich contrast themes, the icon image is effective replaced with the icon text, allowing for ideal icon useability.

Widget Helper

Basic Widget

In the first example on the FSS: Helpers Functional Demo page, we have a basic Widget. Widgets in the FSS have been generally modelled after the MyCamTools UX enhancement model which has 3 main components: a titlebar, options, and content (in that order).

The markup looks like:

<div class="fl-container-400">
    <div class="fl-widget">
        <div class="fl-widget-titlebar">
            <h2>My 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>
</div>

Here is an exploded view of what's going on:

<div class="fl-container-400">

This is the basic example container, which is 400 pixels wide.

<div class="fl-widget">

This is classname is required on the widget container.

<div class="fl-widget-titlebar">

fl-widget-titlebar identifies the container for the titlebar. This section is not required, but it is a good place to put a title (obviously) and title-level functionality (more on that a little later). An H2 is the default tag used to identify the title itself- but this can be modified to be any element.

<div class="fl-widget-options">
   <ul>
      <li><a href="#_bottom">Option 1</a></li>
      ...

fl-widget-options identifies the options for the widget, which is outlined as an unordered list of things. This section is not required.

<div class="fl-widget-content">

fl-widget-content identifies the content for the widget, which can be anything - even another widget. If you need to pull in external web pages, an iframe would work well here.

Advanced Themed Widget


In this example, we can see a fully formed widget. There are plenty of options bound to the widget in multiple places. This example also touches upon other helpers, such as the fl-icon helper class for accessible, searchable icons and the fl-listmenu for quick navigation menus.

<div class="fl-container-300 fl-theme-mist">
    <div class="fl-widget">
        <div class="fl-widget-titlebar">
            <a class="fl-force-left fl-icon more" href="#_bottom">More</a>
            <a class="fl-force-right fl-icon close" href="#_bottom">Close</a>
            <a class="fl-force-right fl-icon settings" href="#_bottom">Settings</a>
            <h2>Tools</h2>
        </div>                    
        <div class="fl-widget-options">
            <ul>
                <li><a href="#_bottom">Add Tools</a></li>
                <li><a class="fl-icon viewOptions" href="#_bottom">Toggle View</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <ul class="fl-listmenu">
                <li><a href="#_bottom">Home          <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Profile       <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Memebership   <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Schedule      <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Resources     <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Worksite Setup<span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Preferences   <span class="fl-icon delete">[remove]</span></a></li>
                <li><a href="#_bottom">Account       <span class="fl-icon delete">[remove]</span></a></li>
            </ul>
        </div>
    </div>
</div>

Here is an exploded view of what's going on:

<div class="fl-container-300 fl-theme-mist">

This is a smaller container and it has a theme applied. For more information on theming, please see FSS Tutorials and Walkthroughs - Themes.

<div class="fl-widget">

This is classname is required on the widget container, same as the previous example.

<div class="fl-widget-titlebar">
     <a class="fl-force-left fl-icon more" href="#_bottom">More</a>
     <a class="fl-force-right fl-icon close" href="#_bottom">Close</a>
     <a class="fl-force-right fl-icon settings" href="#_bottom">Settings</a>
     <h2>Tools</h2>

fl-widget-titlebar identifies the container for the titlebar. Now, we can see some useful functionality embedded into the titlebar such as more options, close widget, and widget settings all surrounding the h2 title itself.

fl-icon is a small icon helper, which is useful in when you want to make highly accessible and readable icons. Please see #Icons for more information.

        <div class="fl-widget-options">
            <ul>
                <li><a href="#_bottom">Add Tools</a></li>
                <li><a class="fl-icon viewOptions" href="#_bottom">Toggle View</a></li>
      ...

fl-widget-options is the container for the widget options, which is a list. In this example each list item is a text link, and one has an fl-icon classname, which is modified to a larger size (32 x 16 pixels) by viewOptions

<div class="fl-widget-content">

fl-widget-content is the content container for the widget, which in this case is another helper system:

     <ul class="fl-listmenu">
         <li><a href="#_bottom">Home <span class="fl-icon delete">[remove]</span></a></li>
         ...

fl-listmenu is another helper classname. It is a basic navigation menu. Please see #Menu Helper for more information. This list menu contains links, as well as nessted icons inside the menu links.

Tabs Helper

Basic Tabs

Tabs are a very common GUI paradigm, but they can be tricky to implement across all Grade-A browsers. Fortunately, FSS ships a simple Tabs Helper to help solve this problem. The Tabs helper has only one requirement, which is the tabs must be in a list.

The markup looks like:

        <div class="fl-container-750 fl-centered">
            <ul class="fl-tabs fl-tabs-center">
                <li class="fl-activeTab"><a href="#_bottom">Active Tab</a></li>
                <li><a href="#_bottom">Tab #2</a></li>
                <li><a href="#_bottom">Tab #3</a></li>
            </ul>
            <div class="fl-tab-content"> 
                Content
            </div>
        </div>

Here is an exploded view of what's going on:

<div class="fl-container-750 fl-centered">

This is the usual container, 750 pixles wide and centered on the page

<ul class="fl-tabs fl-tabs-center">

fl-tabs is the required classname to start, placed on the required list container. The second class fl-tabs-center is optional, and is only for tab alignment. The available options for alignment are fl-tabs-left for left alignment (default), fl-tabs-right for right alignment, fl-tabs-center for centered alignment.

<li class="fl-activeTab"><a href="#_bottom">Active Tab</a></li>

fl-activeTabs is used to hilight the currently active tab, and is optional.

<div class="fl-tab-content"> 

fl-tab-content is an optional peice of the tabs helper system, and is simply styled to nicely "snap" to the tabs themselves. It is intended to work in conjunciton with the fl-activeTab class to complete the look of activated tab content block.

Menu Helper

Basic Menu

The Menu helper is a simple vertical menu. It requires a list with an anchor inside each list item. You can place children inside or siblings alongside the anchors.

The basic markup may look like:

<div class="fl-container-200 fl-centered">
    <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>

Here is an exploded view of what's going on:

<div class="fl-container-200 fl-centered">

This is the usual container, 200 pixles wide and centered on the page

    <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>

Here, the fl-listmenu classname goes on the list container. Inside the container are list items, and then anchors.
Just like for fl-activeTab, fl-activemenu is an optional classname that identifies a list item to stand out and look "active".

  • No labels