Fapulous Framework - A flexible full weight HTML / CSS Framework

Modules Reference

Boxes
Buttons
Data Tables
Text/Image Lists
Thumbnail Gallery

Boxes

Embed Stylesheet

To use Fapulous Framework's boxes, embed following stylesheet in your web page:

<link href="http://fapulous-framework.appspot.com/css/ff-core-min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="http://fapulous-framework.appspot.com/css/ff-boxes.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]-->

boxes demo

HTML

CSS3 Box:

<div class="fapulousBoxM">
  ...
</div>

Old school box with images (without header):

<div class="fapulousBox">
  <div class="top">
    <div>
      <h2>Box header</h2>
    </div>
  </div>
  <div class="contentC">
    <div class="content">
      ...
    </div> <!-- /content -->
  </div>
  <!-- /contentC -->
  <div class="bottom">
    <div> </div>
  </div>
</div> <!-- /fapulousBox -->

Old school box with images (with header):

<div class="fapulousBox">
  <div class="toph">
    <div>
      <h2>Box header</h2>
    </div>
  </div>
  <div class="contentC">
    <div class="content">
      ...
    </div> <!-- /content -->
  </div>
  <!-- /contentC -->
  <div class="bottom">
    <div> </div>
  </div>
</div> <!-- /fapulousBox -->

Why I chose this technique for boxes

There are different ways to markup boxes with images. There is even a way to make boxes with one single image file. I have experienced a project this year, which required 12(!) different types of graphical boxes. Some of them only differed in the top or bottom part of the rounded box. So this markup provided the most flexibility and reusability of existing code and classes.

These kind of boxes with images are only needed for IE6-IE8. If your project does not require the same look in those browsers, the css3 technique is always preferred due to lesser markup.

Buttons

Embed Stylesheet

To use Fapulous Framework's boxes, embed following stylesheet in your web page:

  <link href="http://fapulous-framework.appspot.com/css/ff-core-min.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="http://fapulous-framework.appspot.com/css/ff-buttons.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]-->

buttons demo

HTML

CSS3-only button

<a class="mbtn" href="link">
  Button Text
</a>

Sliding doors button

<a class="obtn" href="link">
  <span class="b">Button Text</span>
</a>

CSS3 button with fall back for IE6 - IE8

<a class="btn" href="link">
  <span class="b">Button Text</span>
</a>

Data tables

Embed Stylesheet

To use Fapulous Framework's data tables, embed following stylesheet in your web page:

  <link href="http://fapulous-framework.appspot.com/css/ff-core-min.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="http://fapulous-framework.appspot.com/css/ff-tables.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]-->

data tables demo

HTML

No color scheme

<table class="dataTable" summary="The summary describes the content of this table.">
  <caption>table.dataTable</caption>
  <thead> 
    <tr>
      <th id="HeaderOfCol1" class="col1">Title 1</th>
      <th id="HeaderOfCol2" class="col2">Title 2</th>
      <th id="HeaderOfCol3" class="col3">Title 3</th>
      <th id="HeaderOfCol4" class="col4">Title 4</th>
    </tr>
  </thead> 
  <tbody>
    <tr>
      <td class="col1">data</td>
      <td class="col2">data</td>
      <td class="col3">data</td>
      <td class="col4">data</td>
    </tr>
    <tr class="odd">
      <td class="col1">data</td>
      <td class="col2">data</td>
      <td class="col3">data</td>
      <td class="col4">data</td>
    </tr>
    <tr>
      <td class="col1">data</td>
      <td class="col2">data</td>
      <td class="col3">data</td>
      <td class="col4">data</td>
    </tr>
    <tr class="odd">
      <td class="col1">data</td>
      <td class="col2">data</td>
      <td class="col3">data</td>
      <td class="col4">data</td>
    </tr>
    <tr>
      <td class="col1">data</td>
      <td class="col2">data</td>
      <td class="col3">data</td>
      <td class="col4">data</td>
    </tr>
    <tr class="odd">
      <td class="col1">data</td>
      <td class="col2">data</td>
      <td class="col3">data</td>
      <td class="col4">data</td>
    </tr>
    <tr>
      <td class="col1">data</td>
      <td class="col2">data</td>
      <td class="col3">data</td>
      <td class="col4">data</td>
    </tr>
  </tbody>
</table>

Grey color scheme

<table class="dataTable greyScheme" summary="...">
  ...
</table>

Red color scheme

<table class="dataTable redScheme" summary="...">
  ...
</table>

Yellow color scheme

<table class="dataTable yellowScheme" summary="...">
  ...
</table>

Text/Image Lists

Embed Stylesheet

To use Fapulous Framework's text/image lists, embed following stylesheet in your web page:

  <link href="http://fapulous-framework.appspot.com/css/ff-core-min.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="http://fapulous-framework.appspot.com/css/ff-textimagelists.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]-->

text/image list demo

HTML

Using the css class .textImageList will show the image at the right side. The markup used in the demo above is:

<ul class="textImageList">
  <li class="til200px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div>
    <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList -->
  <li class="til100px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div> <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList -->
  <li class="til64px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div> <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList -->
  <li class="til16px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div> <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList --> 
</ul>

Using the css class .textImageListR will show the image at the right side. The markup used in the demo above is:

<ul class="textImageListR">
  <li class="til200px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div>
    <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList -->
  <li class="til100px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div> <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList -->
  <li class="til64px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div> <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList -->
  <li class="til16px">
    <div class="imageC">
      <a href="">
        <img src="th_93114-jaguar.jpg" alt="Jaguar kitten" />
      </a>
    </div> <!-- /imageC -->
    <div class="textC">
      <p>...</p>
    </div> <!-- /textC -->
  </li> <!-- /textImageList --> 
</ul>

Thumbnails

Embed Stylesheet

To use Fapulous Framework's text/image lists, embed following stylesheet in your web page:

  <link href="http://fapulous-framework.appspot.com/css/ff-core-min.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="http://fapulous-framework.appspot.com/css/ff-thumbgal.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]-->

thumbnail gallery demo

HTML

<ul class="thumbs">
  <li>
    <div>
      <h3>
        <a href="...">Midnight in Karelia</a>
      </h3>
      <div class="image">
        <img src="th_84436-Midnight_in_Karelia.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Kugelbake in Cuxhaven</a>
      </h3>
      <div class="image">
        <img src="th_101916-Kugelbake_1680x1050.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Plitvice III</a>
      </h3>
      <div class="image">
        <img src="th_28974-Plitvice_lake_hpim0366.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">116th Sunset</a>
      </h3>
      <div class="image">
        <img src="th_79958-sunset-1280x1024.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Cityscape</a>
      </h3>
      <div class="image">
        <img src="th_cityscape.png" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Jaguar Kitten</a>
      </h3>
      <div class="image">
        <img src="th_93114-jaguar.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Imminent Storm</a>
      </h3>
      <div class="image">
        <img src="th_28465-orage_imminent_1600.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Just a short break</a>
      </h3>
      <div class="image">
        <img src="th_82865-Just_a_short_break_B.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Cosmos</a>
      </h3>
      <div class="image">
        <img src="th_cosmos1600x1200.png" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Small Lake</a>
      </h3>
      <div class="image">
        <img src="th_106264-small-lake.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Dwarf Gourami</a>
      </h3>
      <div class="image">
        <img src="th_94433-1600x1200.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
  <li>
    <div>
      <h3>
        <a href="...">Hyper Earth</a>
      </h3>
      <div class="image">
        <img src="th_HyperEarth1600x1200.jpg" alt="" />
      </div> <!-- image -->
    </div>
  </li>
</ul>

New Tutorial:
Custom 3 Column FAP Layout Width Fapulous

Fapulous css core files

ff-core.css (25 KB)
ff-core-min.css (5.4KB)
ff-core-ie.css (4KB)
ff-core-ie-min.css (>1KB)
All Modules minified:
ff-mods-min.css (9.1KB)

Fapulous css module files

Fapulous html templates

Browser Support

Mozilla Firefox 2 + 3
Internet Explorer 6 + 7 + 8
Opera 10
Safari 4 + 5
Google Chrome 6 + 7