| Section |
|---|
| Column |
|---|
| Include Page |
|---|
| FSS Links Panel |
|---|
| FSS Links Panel |
|---|
|
|
| Column |
|---|
OverviewThe Fluid Skinning System is a modular CSS framework: a group of CSS files with a specially designed structure and class-specific format. The modular format allows you to add, remove, and mix classes to get the desired effect. With FSS and User Interface Options, you can: - control the appearance of your website using pre-existing modular CSS classes,
- support user-customization of the appearance of a website or Infusion components,
- deliver a look-and-feel for Infusion components
- and much more.
Features| Wiki Markup |
|---|
{style}| Style |
|---|
ul {margin-top: 0px;}
{style} |
The FSS offers: - Wrappers and containers for quickly laying out your page, including fixed- and flexible-width columns
- Convenience classnames to quickly and easily create GUI elements such as tabs, menues, etc.
- Convenience classnames for basic font handling, such asfont family, size, and formatting
- Theming
- Accessibility support, including
- easy page linearization
- tested for useabiltity effectiveness, specifically colorblindness
- works with Assistive Technologies, specifically with off-screen AT readable content
Why Use FSS?In addition to making it easy to lay out your websites, FSS is designed to work with the Infusion (Floe) UI Options (2008-2009) component to allow users to personalize the display of content to their own individual needs. This empowers users with visual or mobility impairments, for example, to alter the colour schemes or layout, enabling them to access content that otherwise might be completely inaccessible to them. |
|
...
Overriding an entire class doesn't mean that you have to change all of the properties specified. To override fl-para, you can copy and paste the code into your imported or embedded style sheet and modify it however you like. Here's an example:
| Section |
|---|
| Column |
|---|
| Code Block |
|---|
| borderStyle | solid |
|---|
| title | Original Style |
|---|
| borderStyle | solid |
|---|
|
.fl-para {
font-family: "Times New Roman";
font-size: 1.2em;
text-align: left;
}
.fl-footer {
font-family: "Arial";
font-size:
0.9em;
}
|
|
| Column |
|---|
| Code Block |
|---|
| borderStyle | solid |
|---|
| title | Override | borderStyle | solid |
|---|
|
.fl-para {
font-family: "Arial";
font-size: 1.4em;
}
|
This "re-styles" fl-para by overriding the font-family and font-size. Whatever is left out (text-align in this example) is inherited from the original fl-para; so the text remains aligned to the left. |
|
...
In some cases, you may only wish to override an FSS style for one element that the class is applied to. This can be accomplished by using a selector that is specific to only that element, for example by adding a class name, or using other specifics.
| Section |
|---|
| Column |
|---|
| Code Block |
|---|
| borderStyle | solid |
|---|
| title | HTML |
|---|
| borderStyle | solid |
|---|
|
<div class="fl-col-flex3">
<div class="fl-col">...</div>
<div class="fl-col">...</div>
<div class="fl-col">...</div>
</div>
|
|
| Column |
|---|
| Code Block |
|---|
| borderStyle | solid |
|---|
| title | Override | borderStyle | solid |
|---|
|
.fl-col-flex3 .fl-col:first {
margin-left: "10px";
margin-right: "10px";
}
|
In this example, the custom stylesheet overrides the default margins for only the first column of the three-column layout. |
|
...