Fapulous Framework - A flexible full weight HTML / CSS Framework

Introduction

Architecture

Fapulous Framework consists of one core file, several modules, IE hacks files and example templates for HTML files.

css files

  • ff-core.css: This is the core file, which contains css resets, typo, layout and form styles
  • ff-core-min.css: minified version of the core css for faster loading
  • ff-core-ie.css: reqiured IE hacks for the core styles
  • ff-core-ie-min.css: minified version of the IE core css for faster loading
  • ff-boxes.css: styles for boxes
  • ff-buttons.css: styles for css3 and image buttons
  • ff-tables.css: styles for data tables
  • ff-textimagelists.css: styles for text/image lists
  • ff-thumbgal.css: styles for thumbnail galleries

html templates

  • index-html4.html: template for html4 pages
  • index-html5.html: template for html5 pages
  • index-xhtml1.0-strict.html: template for xhtml 1.0 strict pages
  • index-xhtml1.0-trans.html: template for xhtml 1.0 transitional pages
  • index-xhtml1.1-strict.html: template for xhtml 1.1 strict pages

Usage

Embedding stylesheets

To use the Fapulous Framework in your projects, embed the css files somewhere inside the <head> element of your web page like this:

<link href="http://fapulous-framework.appspot.com/css/ff-core-min.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="http://fapulous-framework.appspot.com/css/ff-core-ie-min.css" />
<![endif]-->

You will probably want to use some own css file(s) on your web page. Embed your css files like this:

<link href="http://fapulous-framework.appspot.com/css/ff-core-min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/link/to/your.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="http://fapulous-framework.appspot.com/css/ff-core-ie-min.css" />
  <link rel="stylesheet" type="text/css" href="/link/to/your-ie-hacks.css" />
<![endif]-->

Adding own styles or modifying fapulous constructs

If you want to change styles in the Fapulous Framework add an own stylesheet to your web site like shown above. You can change any style of the framework by using the same property in your own stylesheet. The frameworks style(s) will be overwritten if you place the link to your stylesheet after the link to Fapulous' stylesheet.

The Mighty Container

Fapulous Framework has a special wrapper div as the first child of the <body> element: The MightyContainer

<body>
  <div id="MightyContainer">
    ...
  </div>
</body>

This is because Fapulous ties styles such as font-size or font-family to this element. For example, if you want to set an 12px Arial font, use this in your site's stylesheet:

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

Avoiding Box Model Hacks

To avoid box model hacks do not specify width and padding for the same element. Use an extra div element instead. Fapulous Framework provides two css classes: .macroPadder and .microPadder. In the Fapulous core their values are

.macroPadder  { padding: .5em  1.0000em; }
.microPadder  { padding: .5em; }

But you can overwrite them with your own values, if necessary.

Example

If you want some padding in your main page layout, use extra divs:

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

Using IE Hacks

There are several methods of serving Internet Explorers different styles. Fapulous Framework uses Microsofts conditional comments as described in Paul Irish's blog post Conditional stylesheets vs CSS hacks? Answer: Neither! which seems to be the best method so far.

In Fapulous' html templates you see this markup:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if gt IE 9]>  <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->

This gives you the possibility to serve IEs different styles without using invalid hacks:

.ie6 .property { ... } /* for IE6 */
.ie7 .property { ... } /* for IE7 */
.ie8 .property { ... } /* for IE8 */
.ie9 .property { ... } /* for IE9 */

It is recommended that you put your IE-specific styles into a different stylesheet and embed it in your web page via conditional comments.

Example: This stylesheet is only loaded in IE7 or lesser.

<!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="/link/to/your-ie-hacks.css" />
<![endif]-->