ToBe | HTML

HTML/PHP Component API

HTML structure
Page
By Bertrand Tognoli
2021-12-09 
<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/../scripts/tobe.inc.php'; ?>

<body>
  <?php ToBe::navbar(); ?>

  <div id='content'>
    <?php ToBe::footer(); ?>
  </div>
</body>
Title

Top title

ToBe

Top title

<body>
  <div id='content'>
    <div class='title gray'><div><span>
      <p class='tmain'><span>ToBe</span></p>
      <p class='tsub'>Top title</p>
    </span></div></div>


Headline (Side title)



  • ToBe side title
    • Title description
    • Major features
  • Other title
    • OTher features
 
<div class='headline gray'>
  <span class='hd'><img src='bt.svg'/></span>
  <span class='desc'><ul class='bold'>
    <li>ToBe side title
      <ul><li>Title description</li>
      <li>Major features</li></ul></li>
    <li>Other title
      <ul><li>OTher features</li></ul></li>
  </ul></span>
</div>
Headers
Section title
Section One
Paragraph 
<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/../scripts/tobe.inc.php';

ToBe::h1('Section title', 'bt.svg', 'Section One', 'gray');
ToBe::h2('Paragraph', 'gray');
?>
Colors
Gray
Blue (Default)
Yellow
Green
Red 
<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/../scripts/tobe.inc.php'; ?>

<div class='title yellow'> ... </div>
<div class='headline green'> ... </div>
<?php
ToBe::h1('Section title', 'bt.svg', 'Section One', 'red');
ToBe::h2('Paragraph', 'gray');
?>
Tables
styles

Simple table (class='simple')

RankMedalDescription
1GoldWas the first
2SilverAlmost won
99ChocolateFinished last

Altern table (class='alt gray')

RankMedalDescription
1GoldWas the first
2SilverAlmost won
99ChocolateFinished last

Hidden table (class='hidden')

<style>
  table td:nth-child(1) { text-align: right; width: 80px; }
  table td:nth-child(2) { text-align:center; }
</style>

<table class='simple'><tbody>
  <tr>
    <th class='number'>Rank</th>
    <th class='center'>Medal</th>
    <th>Description</th>
  </tr>

  <tr>
    <td class='number'>1</td>
    <td class='center'>Gold</td>
    <td>Was the <b>first</b></td>
  </tr>

  <!-- ... -->

</tbody></table>
BOM
Images
Icon 
<style>
  table.simple { margin: 0; padding: 0; width: 100%; }
  table.simple td.pict { width:120px; }
  table.simple td.pict > img { width:100px; height:100px; }
</style>

<table class='simple hidden'><tbody><tr>
  <td class='pict'><a href='bt.svg'>
    <img src='bt.svg' title='Logo'></a></td>
  <td>Description text</td>
</tr></tbody></table>
Gallery

Cat.jpg

Venise.jpg

 
<style>
  .gallery > a { width: 210px; height: 160px; }
  .gallery > a > img { width: 200px; height: 125px; max-width: 200px; }
</style>

<div class='gallery'>
  <a href='Cat.jpg'>
    <img src='Cat-th.jpg'/>
    <p>Cat.jpg</p>
  </a>
</div>
Card Deck
Tab 1 Tab 2

Card 1

Card 2

<div class='cardDeck gray'>
  <div class='tabs'>
    <a class='tab selected' href='?s=t1'>Tab 1</a>
    <a class='tab'          href='?s=t2'>Tab 2</a>
    <span class='fill'></span>
  </div>
  <div class='cards'>
    <div class='card' title='Card 1'><a href='c1'>
      <div><img src='bt.svg'/></div>
      <p>Card 1</p>
    </a></div>
  </div>
</div>
Flipcards

ToBe | Logo

Tognoli Bertrand

Flipcard animation
example

 
<div class='flipboard'>
  <a class='flipcard gray' href='#'>
    <span><img src='bt.svg' class='shift'/></span>
    <div>
      <p class='title'>ToBe | <span>Logo</span></p>
      <p class='descr'><b>Flipcard animation
        <br/>Description</b></p>
  </div></a>
</div>
Others
Modal

Modal test: About ...

Authentication

Not logged, please log in

By Bertrand Tognoli
2021-12-09