Fapulous Framework - A flexible full weight HTML / CSS Framework

Core Reference

CSS Reset

Fapulous includes the HTML5 Reset Stylesheet from Richard Clerk which is based on Eric Meyer's CSS Reset. It's aim is to reduce browser inconsistencies in the interpretation of HTML elements.

The css reset is located at the very beginning of the ff-core.css file.

Typography

Font Sizing

The typography styles come right after the reset styles. Fapulous uses EM as font size units.

The typography classes are based on the famous "How to size text using ems" article on clagnut.com. When sizing fonts you can think of 10px = 1.0em because of this sizing structure:

html             { font-size: 100.01%; } /* equals default size of 16px in most browsers */
body             { font-size: 62.5%; } /* reduces font size of 16px to 10px so that 1em defaults to 10px */
#MightyContainer { font-size: 1.6em; } /* <--- set average font size here / 1.6 X 10 = 16px */

The typography styles contain sizes for paragraphs, headers, lists, epmphasizes etc. Font size and family are set at just one place, the #MightyContainer element. So if you want to set font size and family for your site, use something like this in your stylesheet:

#MightyContainer { font-size: 1.2em; font-family: Arial, sans serif; }

Ordered and unordered lists

Because it is a common practise to use unordered lists for layout, you have to use the css class .content if you want to display normal bulleted lists.

List example: without .content

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Becomes

  • Item 1
  • Item 2
  • Item 3

List example: with .content

<ul class="content">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Becomes

  • Item 1
  • Item 2
  • Item 3

Layout Techniques

Fapulous Framework provides styles for 3 types of layouts: faux-absolute-positioned, float-based, inline-block-based.

Faux Absolute Positioning

This technique is highly recommended for general page layout. FAP is very robust, machine-friendly and flexible. It is tested out intensively by the Fapulous Framework writer on different big sites with user-generated content and plays well with other classic layout techniques. Fapulous Framework includes several pre-defined FAP layouts:

/**                                       
* @section  1 Col, FAP (100% width)
*/

.fap-00-100 { margin-left: -100%; width: 100%; }

/**         
* @section  2 Col, FAP (50:50)
*/          

.fap-50-50  { margin-left: -50.0%; width: 50.0%; }

/**         
* @section  2 Col, FAP (66:33)
*/          

.fap-00-66  { margin-left: -100%;  width: 66.6666%; }
.fap-66-33  { margin-left: -33.3%; width: 33.3333%; }

/**         
* @section  2 Col, FAP (33:66)
*/          

.fap-66-66  { margin-left: -66.6666%;  width: 66.6666%; }

/**         
* @section  3 Cols, FAP (33:33:33)
*/          

.fap-00-33  { margin-left: -100%;  width: 33.3%; }
.fap-33-33  { margin-left: -66.6%; width: 33.3%; }
.fap-66-33  { margin-left: -33.3%; width: 33.4%; }

/**         
* @section  3 Cols, FAP (50:25:25)
*/          

.fap-00-50  { margin-left: -100%;  width: 50.0%; }
.fap-50-25  { margin-left: -50.0%; width: 25.0%; }
.fap-75-25  { margin-left: -25.0%; width: 25.0%; }

/**         
* @section  4 Cols, FAP (25:25:25:25)
*/          

.fap-00-25  { margin-left: -100%;  width: 25%; }
.fap-25-25  { margin-left: -75.0%; width: 25%; }
.fap-50-25  { margin-left: -50.0%; width: 25%; }
.fap-75-25  { margin-left: -25.0%; width: 25%; }

These 2 styles are required to make FAP work:

.fapline   { position: relative; float: left; width: 100%; display: block; }
.fapcol    { position: relative; float: left; left: 100%; }

Example: 2 Col Layout (33:66)

<div class="fapline">
  <div class="fapcol fap-66-66">
    ...
  </div>
  <div class="fapcol fap-00-33">
    ...
  </div>
</div>

Note that you can place the column order in HTML independantly from their visual apperance. In the example above the wider column is placed before the smaller one but it appears at the right of the smaller column when viewed in the browser.

Example: 3 Col Layout (50:25:25)

<div class="fapline">
  <div class="fapcol fap-00-50">
    ...
  </div>
  <div class="fapcol fap-50-25">
    ...
  </div>
  <div class="fapcol fap-75-25">
    ...
  </div>
</div>
Tutorial: Custom 3 Column FAP Layout with Fapulous Framework

Float-based

Fapulous Framework provides styles for 2,3,4 or 5 column layouts based on floats. To clear floats just use a clearfix class on the container element (.cf = clearfix , .scf = soft clearfix )

Example: 2 col layout

<div class="scf">
  <div class="c2-1">First Col</div>
  <div class="c2-2">Second Col</div>
</div>

Example: 3 col layout

<div class="scf">
  <div class="c3-1">First Col</div>
  <div class="c3-2">Second Col</div>
  <div class="c3-3">Third Col</div>
</div>

Example: 4 col layout

<div class="scf">
  <div class="c4-1">First Col</div>
  <div class="c4-2">Second Col</div>
  <div class="c4-3">Third Col</div>
  <div class="c4-4">Forth Col</div>
</div>

Example: 5 col layout

<div class="scf">
  <div class="c5-1">First Col</div>
  <div class="c5-2">Second Col</div>
  <div class="c5-3">Third Col</div>
  <div class="c5-4">Forth Col</div>
  <div class="c5-5">Fifth Col</div>
</div>

Layout based on inline-block

Because FAP is best suited for general page layouts and float based layout may be unperformant in some cases it makes sense to layout elements with display: inline-block;. Take a look at the page layout of monitorThis for example which is completely made this with inline-blocks.

Fapulous Framework provides the css class .iblock to make any element display as an inline-block element.

Example: Pager

<ul class="pager">
  <li class="iblock disabled"><span>prev</span></li>
  <li class="iblock act"><span>1</span></li>
  <li class="iblock"><a href="">2</a></li>
  <li class="iblock"><a href="">3</a></li>
  <li class="iblock"><a href="">4</a></li>
  <li class="iblock"><a href="">5</a></li>
  <li class="iblock disabled"><span>next</span></li>
</ul>

There is another advantage in using display: inline-block; as you can try out in the pager example above. On element groups with unknown width you can apply center alignment just by using the text-align property. E.g. ul.pager { text-align: center; }.

Layout Types

Fapulous Framework supports 3 types of page layouts: fixed, elastic and em-based.

Elastic Page Layout

Fapulous Framework is naturally elastic, therefore you have nothing to do additionally to make it behave fluid. All elements are designed to flow elastically. Just use the standard FAP-techniques as described in Layout Techniques and you are done having an elastic page layout that adapts to the browser window width.

Fixed Page Layout

A fixed page layout is, when you use a fixed size width for the web page. If you want to use fixed page layout you can use an extra div element with the css class .corset as a child element of #MightyContainer (see The Mighty Container to learn more).

<body>
  <div id="MightyContainer">
    <div class="corset">
      <header>...</header>
      <div id="MainContainer">...</div>
      <footer>...</footer>
    </div> <!-- /corset -->
  </div> <!-- /MightyContainer -->
</body>

Now apply the desired (fixed) width to the corset element in your stylesheet. For example:

.corset { width: 980px; }

Note: The corset is centered per default. If you want your web page to be left aligned add a margin: 0; to your corset style.

em-based layout

em-based layouts are pretty much the same as fixed layouts except they grow when resizing browser font-size in older browsers like IE6 or Firefox2. This was a technique used before the browsers got a ZUI. If you want to make an em-based page layout use a .corset element as described above and apply an em-based width to it like:

.corset { width: 61.25em; }

Forms

forms demo

Fapulous Framework has a simple and bullet-proof way for laying out form elements. label elements are enclosed in .label containers and form elements are enclosed in .labeled elements. .label and .labeled are placed inside a .formLine container.

<div class="formLine">
  <div class="label">
    <label for="textfield1">Text1</label>
  </div> <!-- /labeled -->
  <div class="labeled">
    <input type="text" id="textfield1" name="textfield1" size="31" class="fieldText" />
  </div> <!-- /labeled -->
</div> <!-- /formLine -->

Aligning labels

The alignment of labels depend on the class of the form container. Use .horiz to align them horizontally and vert to align them vertically.

<fieldset class="horiz">
  <div class="formLine">
    <div class="label">
      <label for="textfield1">Text1</label>
    </div> <!-- /labeled -->
    <div class="labeled">
      <input type="text" id="textfield1" name="textfield1" size="31" class="fieldText" />
    </div> <!-- /labeled -->
  </div> <!-- /formLine -->
  ...
</fieldset>

<fieldset class="vert">
  <div class="formLine">
    <div class="label">
      <label for="textfield1">Text1</label>
    </div> <!-- /labeled -->
    <div class="labeled">
      <input type="text" id="textfield1" name="textfield1" size="31" class="fieldText" />
    </div> <!-- /labeled -->
  </div> <!-- /formLine -->
  ...
</fieldset>

Styling form errors

When an error occurs on form field validation, put an .error class to the .formLine element. That will draw a red border on the containing form element.

<div class="formLine error">
  <div class="label">
    <label for="textfield1">Text1</label>
  </div> <!-- /labeled -->
  <div class="labeled">
    <input type="text" id="textfield1" name="textfield1" size="31" class="fieldText" />
  </div> <!-- /labeled -->
</div> <!-- /formLine -->

Displaying error messages:

<div class="formLine error">
  <div class="label">
    <label for="textfield1">Text1</label>
  </div> <!-- /labeled -->
  <div class="labeled">
    <input type="text" id="textfield1" name="textfield1" size="31" class="fieldText" />
    <p>An error occurred</p>
  </div> <!-- /labeled -->
</div> <!-- /formLine -->

Styling form elements in IE6

To style form elements in IE6 you have to add extra classes to them.

.fieldRadio for radio buttons
.fieldCheckbox for check boxes
.fieldText for text fields,
.fieldSubmit for submit buttons