ThreePointTwo

Theming Typography Dividers Components Grid Media Animations Colors

Rapidly build modern websites

Utility-first inline attributes for the World Wide Web.

Get Started

GitHub

Installation

No setup required: comes pre-installed in all modern browsers. Compatible with all web frameworks.

Theming

Configure global themes and link states on the <body> tag.

Attribute	Description
bgcolor, text	Sets the global background and default text color.
link, vlink, alink	Controls link states globally without CSS: link (unvisited) \| vlink (visited) \| alink (active)

<body
   bgcolor="white"
   text="black"
   link="teal"
   vlink="gray"
   alink="red">

Typography Utilities

Structure your document with semantic headings and control text size, face, and color directly in your markup.

Result	Code
Heading 1 Heading 3 Heading 6	<h1>Heading 1</h1> <h3>Heading 3</h3> <h6>Heading 6</h6>
Display Heading	<font size="+2">Display Heading</font>
Danger text	<font color="red">Danger text</font>
Info text	<font color="teal">Info text</font>
Monospaced font	<font face="monospace">Monospaced font</font> <code>Code</code> <pre>Preformatted text</pre>
Serif font	<font face="serif">Serif font</font>
Sans-serif font	<font face="sans-serif">Sans-serif font</font>
Fonts with fallback	<font face="Avenir, Arial, sans-serif">Fonts with fallback</font>
Bold, Italic, Underline	<b>Bold</b>, <i>Italic</i>, <u>Underline</u>
Left-aligned text Center-aligned text Right-aligned text	<p align="left">Left-aligned text</p> <p align="center">Center-aligned text</p> <p align="right">Right-aligned text</p>

Dividers

Style horizontal rules using size, width, align, and noshade.

Default 3D Groove:

Solid, 5px thick, 50% width, centered:

Solid, 1px thick, 25% width, right-aligned:

<hr>
<hr
   size="5"
   width="50%"
   noshade
   color="teal">
<hr
   size="1"
   width="25%"
   align="right"
   noshade
   color="black">

Components

Pre-built flat UI elements using nested tables.

Buttons

Primary

Secondary

Danger

<table
   border="0"
   cellpadding="1"
   cellspacing="0"
   bgcolor="teal">
  <tr><td>
    <table
       border="0"
       cellpadding="8"
       cellspacing="0"
       bgcolor="teal">
      <tr><td>
        <a href="#">
        <font
           color="white"
           face="Arial">
          <b>Primary</b>
        </font></a>
      </td></tr>
    </table>
  </td></tr>
</table>

Badges

Messages

Status

OFFLINE

<table
   border="0"
   cellpadding="3"
   cellspacing="0"
   bgcolor="teal">
  <tr><td>
    <font
       color="white"
       size="2"
       face="Arial">
      <b>42</b>
    </font>
  </td></tr>
</table>

Progress Bars

<table
   width="100%"
   border="0"
   cellpadding="1"
   cellspacing="0"
   bgcolor="silver">
  <tr><td>
    <table
       width="100%"
       border="0"
       cellpadding="0"
       cellspacing="0"
       bgcolor="white">
      <tr>
        <td
           width="75%"
           bgcolor="teal"
           height="10">
        </td>
        <td width="25%"></td>
      </tr>
    </table>
  </td></tr>
</table>

Tabs

Active

Link

Tab content goes here.

<table
     border="0"
     cellpadding="0"
     cellspacing="0"
     width="100%">
    <tr>
        <td width="15%">
            <table
                 border="0"
                 cellpadding="1"
                 cellspacing="0"
                 bgcolor="silver"
                 width="100%">
                <tr><td>
                    <table
                         border="0"
                         cellpadding="8"
                         cellspacing="0"
                         bgcolor="white"
                         width="100%">
                        <tr><td align="center">
                            <font color="black" face="Arial">
                                <b>Active</b>
                            </font>
                        </td></tr>
                    </table>
                </td></tr>
            </table>
        </td>
        <td width="15%">
            <table
                 border="0"
                 cellpadding="1"
                 cellspacing="0"
                 bgcolor="silver"
                 width="100%">
                <tr><td>
                    <table
                         border="0"
                         cellpadding="8"
                         cellspacing="0"
                         bgcolor="silver"
                         width="100%">
                        <tr><td align="center">
                            <a href="#">
                                <font color="teal" face="Arial">Link</font>
                            </a>
                        </td></tr>
                    </table>
                </td></tr>
            </table>
        </td>
        <td width="70%" border="0">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <table
                 border="0"
                 cellpadding="15"
                 cellspacing="0"
                 bgcolor="white"
                 width="100%">
                <tr><td>
                    <font face="Arial">Tab content goes here.</font>
                </td></tr>
            </table>
        </td>
    </tr>
</table>

Alerts

Info: New updates are available for your system.

Success: Your settings have been saved.

Warning: Your session is about to expire.

Danger: A critical error has occurred.

<!-- Success Alert -->
<table
   width="100%"
   border="0"
   cellpadding="1"
   cellspacing="0"
   bgcolor="green">
  <tr><td>
    <table
       width="100%"
       border="0"
       cellpadding="10"
       cellspacing="0"
       bgcolor="lime">
      <tr><td>
        <font color="black">
          <b>Success:</b> Saved.
        </font>
      </td></tr>
    </table>
  </td></tr>
</table>

<!-- Danger Alert -->
<table
   width="100%"
   border="0"
   cellpadding="1"
   cellspacing="0"
   bgcolor="maroon">
  <tr><td>
    <table
       width="100%"
       border="0"
       cellpadding="10"
       cellspacing="0"
       bgcolor="red">
      <tr><td>
        <font color="white">
          <b>Danger:</b> Error.
        </font>
      </td></tr>
    </table>
  </td></tr>
</table>

Cards

Card Header

Card body content sits here, cleanly separated by flat borders.

<table
   width="50%"
   border="0"
   cellpadding="1"
   cellspacing="0"
   bgcolor="silver">
  <tr><td>
    <table
       width="100%"
       border="0"
       cellpadding="0"
       cellspacing="0"
       bgcolor="white">
      <tr>
        <td bgcolor="silver">
          <font face="Arial">
            <b>Header</b>
          </font>
        </td>
      </tr>
      <tr>
        <td>
          <font face="Arial">
            Body content
          </font>
        </td>
      </tr>
    </table>
  </td></tr>
</table>

Grid System

Use width percentages and colspan to create layouts.

col-4	col-4	col-4
col-8		col-4

<table
   width="100%"
   border="0"
   cellpadding="10"
   cellspacing="1"
   bgcolor="silver">
  <tr>
    <td
       width="33%"
       bgcolor="white">
      ...
    </td>
    <td
       width="33%"
       bgcolor="white">
      ...
    </td>
    <td
       width="34%"
       bgcolor="white">
      ...
    </td>
  </tr>
  <tr>
    <td
       colspan="2"
       width="66%"
       bgcolor="white">
      ...
    </td>
    <td
       width="34%"
       bgcolor="white">
      ...
    </td>
  </tr>
</table>

Media & Alignment

Float images using align="left" and control spacing with hspace and vspace directly on the image tag.

This text wraps around the image perfectly. By utilizing the align="left" attribute directly on the image tag, alongside hspace="15" and vspace="5", we achieve a clean, float-like layout without needing complex CSS or wrapping tables. The text flows naturally around the placeholder cat.

<img
   src="https://placecats.com/100/100"
   width="100"
   height="100"
   border="0"
   align="left"
   hspace="15"
   vspace="5">
<p align="justify">
  This text wraps around
  the image perfectly...
</p>
<br clear="all">

Animations

Bring your UI to life with hardware-accelerated text movement. (Note: this is not part of the HTML 3.2 standard, but supported by browsers anyway.)

Standard Scroll:
Processing request... Please wait...

Bouncing Alert:
CRITICAL SYSTEM ERROR

<!-- Standard Scroll -->
<marquee bgcolor="black">
  <font color="teal">
    Processing request...
  </font>
</marquee>

<!-- Bouncing Alert -->
<marquee
   behavior="alternate"
   scrollamount="15"
   bgcolor="red">
  <font color="white">
    CRITICAL SYSTEM ERROR
  </font>
</marquee>

Color Palette

Nicely named accessible colors that work on every display and don't require remembering cryptic numbers.

black	gray	silver	white
maroon	red	purple	fuchsia
green	lime	olive	yellow
navy	blue	teal	aqua

<!-- Background color -->
<td bgcolor="teal">...</td>

<!-- Text color -->
<font color="fuchsia">...</font>