Page Comparison

.wiki-content h4 {
 background:transparent;
}
.wiki-content h3 {
  padding:5px;
}
.api {
  border:1px solid #ccc;
  border-collapse:collapse;
  clear:both;
  width:100%;
 }

.api th,
.wiki-content .api tr th{
  border:1px solid #ccc;
  background:#f4f4f4;
  padding:5px;
  text-align:center;
  table-layout:fixed;
 }

.api td,
.wiki-content .api tr td {
  border:1px solid #ccc;
  padding:5px;
  vertical-align:top;
 }

.api tr td:nth-child(1),
.api tr td:nth-child(4) {
  font-family:monospace;
 }

.api tr td:nth-child(1) {  width:150px; }
.api tr td:nth-child(2) {  width:400px; }
.api tr td:nth-child(3) {  width:150px; }
{style}

Tabs

These classes can be used to style a list into a tab layout. The markup for the tabs must be a list, and the list items must have anchors. The anchors act as the tabs.

Menu

These classes can be used to style a list into a vertical navigation menu. The markup for the tabs must be a list, and the list items must have anchors.unmigrated-inline-wiki-markup

Grid

These classes can be used to create a grid layour for list items and images. The default grid item height is 150px. The markup must be a list. List items could include <img> and/or captions.

Icons

This class can be used to style small icons.
unmigrated-inline-wiki-markup

Buttons

These classes can be used to style graphics to appear as buttons.

{html}
<hr style="clear:both;" />
{html}

{table-plus:class=api}
|| Class Name ||  Description || Notes ||Variants ||
| fl-col-flex\* |  Identifies the container for equal width columns (eg. flex2 = 2 columns). Columns have flexible widths & gutters, and depend on the parents width | |flex2, flex3, flex4, flex5 \\
e.g. fl-col-flex3|
| fl-col | identifies a column container within an *{{fl-col-flex\*}}* system | | |
{table-plus}

{table-plus:class=api}
|| Class Name ||  Description || Notes ||Variants ||
| fl-col-mixed-\* |  Identifies the container for the mixed width columns. Allows for combinations of *{{fl-col-flex}}* and *{{fl-col-fixed}}* for complex layouts and includes gutters and padding | The fixed width columns will have the width specified by this class (see Variants). You can have as many fixed-width columns as you like, but they will all be the same width. |100, 150, 200, 250, 300\\
e.g. fl-col-mixed-250 |
| fl-col-fixed | In a mixed column setup, identifies the fixed column(s).  | requires *{{fl-force-left}}* on at least one of the fixed-width columns, and *{{fl-force-left}}* or *{{fl-force-right}}* on others, for alignment; must be placed before *{{fl-col-flex* columns}} | |
| fl-col-flex | In a mixed column setup, identifies the flexible column.  used when the fixed-width column is forced left. Note that you can only have *one* flexible-width column in this setup. | must be placed after any *{{fl-col-fixed}}* columns | |
| {color:purple}New in v1.4:{color}\\
fl-col-flex-left | In a mixed column setup, identifies a flexible column that is left-aligned. used when the fixed-width column is forced right. Note that you can only have *one* flexible-width column in this setup. | must be placed after any *{{fl-col-fixed}}* columns | |{table-plus}

{table-plus:class=api}

|| Class Name ||  Description || Notes ||
| fl-list-menu | Identifies the container of the vertical navigation menu (i.e. the {{<ul>}} element). |  |
| {color:purple}New in v1.4{color}:\\
fl-activemenu | Identifies the currently active menu item; Will most often be adjusted programmatically, in response to user actions. | Must be added to the active {{<li>}} and not the {{<a>}} |
{table-plus}

{table-plus:class=api}

|| Class Name ||  Description || Notes ||
| fl-icon | Forces an element to have default dimensions of 16x16 pixels and hidden descriptive text. | To add the icon itself, assign it via {{background-image}} parameters |
{table-plus}

{table-plus:class=api}

|| Class Name ||  Description || Notes ||
| fl-button-left\\
fl-button-right\\
fl-button-inner |  Used with the FSS themes to apply background images to elements to create the appearance of a button. | Graphics can be found in the theme files, and can be overridden if desired. |
{table-plus}

Widget Template

These classes can be used to style small collections of elements that function together as a single widget in a typical layout.

{table-plus:class=api}

|| Class Name || Description || Notes || 
| fl-widget | Setup for widget template. Widgets are subdivided into 3 sections: title bar, options, and contents | |
| fl-widget-titlebar | Title bar for widget, applies special styling to *{{fl-icon}}* and other class names | This does little on its own, it's mostly for styling sub elements |
| fl-widget-content | Content container | This does little on its own, it's mostly for styling sub elements |
| fl-widget-options | Container within *{{fl-widget-titlebar}}* for displaying widget options | Can hold list of anchors (like *{{fl-tabs}}*), or just anchors. |
{table-plus}

Forms

These classes can be used to lay out form controls and their labels. To use the form layout class names, the markup pattern looks like this (example uses centered alignment):

  <ul class="fl-controls-centered">
      <li>
          <labelElement class="fl-label">Label Text</labelElement>
          <inputControl>
      </li>
  </ul>

Progressive Enhancement

These classes can be used to show or hide elements based on whether or not JavaScript is present.
Wiki Markup{table-plus:class=api} || Class Name || Description || Notes || | fl-progEnhance-basic | Identifies something that is meant to be the fallback if JavaScript doesn't run | Content is visible by default | | fl-progEnhance-enhanced | Identifies something that is meant to be the enhanced version if JavaScript is running | Content is hidden by default. JavaScript should display this content, and hide the fallback content. This should only be applied to block-level elements. | | {color:purple}Deprecated as of v1.4:{color}\\ fl-offScreen-hidden | Used to place readable content for screen readers offscreen | See [#Hiding Content] below for new alternatives. | {table-plus}

Hiding Content

These classes can be used to show or hide elements. Wiki Markup{table-plus:class=api} || Class Name || Description || |{color:purple}New in v1.4{color}\\ fl-hidden | Hide for both screenreaders and browsers | |{color:purple}New in v1.4{color}\\ fl-hidden-invisible | Hide for both screenreaders and browsers but maintain layout | |{color:purple}New in v1.4{color}\\ fl-hidden-accessible | Hide for browsers but available for screenreaders | |{color:purple}New in v1.4{color}\\ fl-hidden-accessible | Hide for browsers but available for screenreaders | |{color:purple}New in v1.4{color}\\ fl-hidden-replace | Hide text for image replacement | {table-plus}

Miscellaneous Layout Modifiers

{table-plus:class=api}

|| Class Name || Description || Notes || Variants ||
| fl-force-\* |  Forces an element flush to the left or right of its parent | |left, right\\
e.g. fl-force-right |
| fl-centered | Horizontally centers an element (not text) within its parent. | forces element to be displayed as a block, *requires a width* | |
| fl-fix | Forces an element to encapsulate its children | useful when you want a parent to match the height of its children and all the children are floating left or right | |
| {color:purple}New in v1.4:{color}\\
fl-clearfix | An alternative to {{fl-fix}}: prevents scrollbars when padding is used on elements with 100% width. | | |
| fl-push | Forces an element on its own line | useful when you don't want elements to float next to each other, like a footer after a group of columns | |
| fl-layout-linear | Vertically stacks all the fss-layout class names contained within it | If an element is stubborn and doesn't linearize as expected, add *{{fl-linearEnabled}}* to it | |
| fl-linearEnabled | See *{{fl-layout-linear}}* notes | | |
{table-plus}

Themes new in v1.1

These themes define various colour schemes that will be applied to all elements inside the identified container.

Files: fss-themes-coal.css, fss-themes-slate.css, fss-themes-mist.css, fss-themes-hc.css, fss-themes-hci.css, fss-themes-yellowBlack.css, fss-themes-blackYellow.css

{table-plus:class=api}

|| Class Name ||  Description || Notes ||Variants ||
| fl-theme-\* | Apply a color scheme to an element and all its children. Looks for FSS Layout class names in particular | Can be applied on any element, but not safely nested yet | mist, hc, hci, coal, slate\\
{color:purple}New in v1.4:{color}\\
yellowBlack, blackYellow\\
e.g. fl-theme-hci\\
{color:purple}Note{color} that the "rust" theme is deprecated. |
| fl-textfield | Used with *{{fl-theme-\*}}* to identify text {{input}} fields. | IE6 does not recognize the selectors used for text fields (e.g. {{fl-theme-\* input\[type=text\]}}), so you must attach this class to any text {{input}} fields. | |
| fl-textarea | Used with *{{fl-theme-\*}}* to identify {{textarea}} fields. | IE6 does not recognize the selectors used for {{textarea}} fields, so you must attach this class to any {{textarea}} fields.| |
{table-plus}

Text

File: fss-text.css : Text manipulation
Wiki Markup{table-plus:class=api} || Class Name || Description || Notes ||Variants || | fl-font-size-\* | Font height and line height. | The values represent the percentage of 1em for the font size (line height adjusted accordingly). For example, "70" will result in font size of 0.7em, "120" will result in font size of 1.2em. |70, 80, 90, 100, 110, 120, 130, 140, 150\\ e.g. fl-font-size-110 | | fl-font-spacing-\* | Used to specify the spacing between text characters (eg. 0 = default spacing; 1 = 0.1em more than default). | |0, 1, 2, 3, 4, 5, 6\\ e.g. fl-font-spacing-2 | | fl-font-serif | Used to apply a generic Serif font family to the element's text. | Attempts many common fonts, loads the first one installed on the user's system | | | fl-font-sans | Used to apply a generic Sans-Serif font family to the element's text. | Attempts many common fonts, loads the first one installed on the user's system | | | fl-font-monospace | Used to apply a generic Monospace font family to the element's text. | Attempts many common fonts, loads the first one installed on the user's system | | | fl-font-arial | Used to apply Arial font to the element's text. | | | | fl-font-verdana | Used to apply Verdana font to the element's text. | | | | fl-font-times | Used to apply Times or Times-like (Georgia, Times New Roman) font to the element's text. | | | | fl-font-courier | Used to apply Courier or Courier-like (Courier New, monospace) font to the element's text. | | | |{color:purple}New in v1.4:{color}\\ fl-font-comic-sans | Used to apply Comic Sans MS (Comic Sans MS, sans-serif) font to the element's text. | | | | fl-text-align-\* | Aligns text (eg. left = aligns text to the left; justify = justifies text to fit the element's width). | |left, right, center, justify\\ e.g. fl-text-align-justify | | fl-font-\* | Used to apply colours to the element's text (eg. aqua = aqua-coloured text). | |aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow\\ e.g. fl-font-maroon | {table-plus}

Deprecated class names