Sandbox - Componants

Typography

Titles

h1. Components 1

h2. Components 2

h3. Components 3

h4. Components 4

h5. Components 5
h6. Components 6
Text Sizes

Smallest text

Smaller text

Small text

Element

Big text

Bigger text

Biggest text

See the source code : 
<span class="smallest">Smallest text</span>
<span class="smaller">Smaller text</span>
<span class="small">Small text</span>
<span class="normal">Element</span>
<span class="big">Big text</span>
<span class="bigger">Bigger text</span>
<span class="biggest">Biggest text</span>
Styles

Bold text

Italic text

Underline text

Strike text

Item de Liste

Ellipsis element - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptatum incidunt illum consectetur officia id unde accusantium eaque est, ex!

Left aligned element

Center aligned element

Right aligned element

Floating left element

Floating right element

Elementsjustifyon width

ElementElement with index

Pinned element

See the source code : 
<p class="text-strong">Bold text</p>
<p class="text-italic">Italic text</p>
<p class="text-underline">Underline text</p>
<p class="text-strike">Strike text</p>
<p><a href="#">Item de Liste</a></p>
<p class="ellipsis">Ellipsis element - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptatum incidunt illum consectetur officia id unde accusantium eaque est, ex!</p>
<p class="align-left">Left aligned element</p>
<p class="align-center">Center aligned element</p>
<p class="align-right">Right aligned element</p>
<p class="float-left">Floating left element</p>
<p class="float-right">Floating right element</p>
<p class="flex-between"><span>Elements</span><span>justify</span><span>on width</span></p>
<p class="stacked"><span>Element</span><span class="stack-event stack-right stack-sup stack-circle bgc member">Element with index</span></p>
<p class="pinned bgc moderator">Pinned element</p>

Colors

For the demo, color classes are shown with the .pinned class and can match to any html tag .

Borders are colored only if the element has some.

Text color
notice question success warning error administrator moderator member visitor custom-author link-color star logo-color

Transparent background color
notice question success warning error administrator moderator member visitor custom-author link-color star logo-color

Plain background color
notice question success warning error administrator moderator member visitor custom-author link-color star logo-color

See the source code : 
<span class="... notice">lorem ipsum</span>
<span class="... bgc notice">lorem ipsum</span>
<span class="... bgc-full notice">lorem ipsum</span>

Media

Pictures
Pictures
Pictures
Picture with caption
Youtube
Video
Audio
See the source code : 
// Image
<figure style="max-width:300px">
    <img src="path/to/picture.ext" alt="Pictures" />
</figure>
<figure style="max-width:300px">
    <img src="path/to/picture.ext" alt="Pictures" />
    <figcaption>Picture with caption</figcaption>
</figure>


// Lightbox
<a href="path/to/picture.ext" data-lightbox="formatter" data-rel="lightcase:collection" aria-label="Lorem ipsum">
    <img style="max-width: 150px" src="path/to/picture.ext" alt="Lorem ipsum" />
</a>
<a href="path/to/picture.ext" data-lightbox="formatter" data-rel="lightcase:collection" aria-label="Lorem ipsum">
    <img style="max-width: 150px" src="path/to/picture.ext" alt="Sit dolor amet" />
</a>


// Youtube
<div class="media-content" style="width: 800px; height: 450px">
    <iframe class="youtube-player" src="url/to/youtube/embeded/link" allowfullscreen=""> // Resize height="" to the right size
</div>


// Movie
<div class="media-content" style="width: 800px; height: 450px">
    <video class="video-player" controls>
        <source src="path/to/video/file.ext" type="video/mp4" />
    </video>
</div>


// Sound
<audio class="audio-player" controls>
    <source src="path/to/video/audio.ext" />
</audio>

Progress bar

25%
25%
50%
50%
75%
75%
100%
100%
See the source code : 
<div class="progressbar-container" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progressbar-infos">25%</div>
    <div class="progressbar" style="width:25%;"></div>
</div>
Notation
Possible values

Example for a rating of 2.4 on 5
See the source code : 
<div class="notation">
    <span class="stars">
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-100"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-100"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-25"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-0"></span></a>
        <a href="#" onclick="return false;" class="far star fa-star"><span class="star-width star-width-0"></span></a>
    </span>
</div>

Modal

How many vowels are in the word computer?
See the source code : 
<div class="modal-container">
    <span data-modal="" data-target="target-panel">Element</span>
    <div id="target-panel" class="modal modal-animation">
        <div class="close-modal" aria-label="Close"></div>
        <div class="content-panel">
            <div class="align-right"><a href="#" class="error big hide-modal" aria-label="Close"><i class="far fa-circle-xmark" aria-hidden="true"></i></a></div>
            ...
        </div>
    </div>
</div>

Lists

  • Element
  • Element
  • Element
    • Element
    • Element
    • Element
  • Element
  1. Element
  2. Element
  3. Element
    1. Element
    2. Element
    3. Element
  4. Element

Explorer

Explorer

Tree

See the source code : 
<div class="explorer">
    <div class="cats">
            <h2>Explorer</h2>
        <div class="content">
            <ul>
                <li><a id="class_0" href="#"><i class="fa fa-fw fa-folder"></i> Root</a>
                    <ul>
                        <li class="sub"><a id="class_1" href="#"><i class="fa fa-fw fa-folder"></i> Category 1</a><span id="cat_1"></span></li>
                        <li class="sub">
                            <a class="parent" href="javascript:show_cat_contents(2, 0);">
                                <span class="fa fa-fw fa-minus-square" id="img2_2"></span><span class="fa fa-fw fa-folder-open" id ="img_2"></span>
                            </a>
                            <a class="selected" id="class_2" href="#">Category 2</a>
                            <span id="cat_2">
                                <ul>
                                    <li class="sub"><a href="#"><i class="fa fa-fw fa-folder"></i> Category 3</a></li>
                                    <li class="sub"><a href="#"><i class="fa fa-fw fa-folder"></i> Category 4</a></li>
                                </ul>
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="files">
            <h2>Tree</h2>
        <div class="content" id="cat_contents">
            <ul>
                <li><a href="#"><i class="fa fa-fw fa-folder"></i> Category 3</a></li>
                <li><a href="javascript:open_cat(2); show_cat_contents(0, 0);"><i class="fa fa-fw fa-folder"></i> Category 4</a></li>
                <li><a href="#"><i class="fa fa-fw fa-file"></i> File 1</a></li>
                <li><a href="#"><i class="fa fa-fw fa-file"></i> File 2</a></li>
            </ul>
        </div>
    </div>
</div>
Pagination
See the source code : 
<nav class="pagination">
    <ul> // class="light-pagination"
        <li class="pagination-item">
            <a href="#" rel="prev" aria-label="Vers la première page" class="prev-page"><i class="fa fa-angle-left"></i></a>
        </li>
        <li class="pagination-item">
            <a href="#" aria-label="Vers la page 1">1</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="current-page" aria-label="Page courrante">2</a>
        </li>
        <li class="pagination-item">
            <a href="#" aria-label="Vers la page 3">3</a>
        </li>
        <li class="pagination-item">
            <a href="#" rel="next" aria-label="Vers la dernière page" class="next-page"><i class="fa fa-angle-right"></i></a>
        </li>
    </ul>
</nav>

Tables

This is a table
Name Description Author
Test Description Author
Test Description Author
Test Description Author
This is a table with no header
Test Description Author
Test Description Author
Test Description Author
See the source code : 
// Responsive table with header
<table class="table">...</table>


// Responsive table without header
<table class="table-no-header">...</table>

Alert messages

This is a notice message
This is a question:
is the two-lines display working correctly?
This is a success message
This is a warning message
This is a error message
This is a message limited to members
This is a message limited to moderators
This is a message limited to administrators
See the source code : 
<div id="msg-helper-" class="message-helper bgc success">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc notice">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc warning">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc error">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc question">Lorem ipsum<div>
<div id="msg-helper-" class="message-helper bgc member">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc moderator">Lorem ipsum</div>
<div id="msg-helper-" class="message-helper bgc administrator">Lorem ipsum</div>
Tooltip

A tooltip is a description indexed to an element witch is hidden by deault and been revealed on hover the element (The following examples are shown with the .pinned class).
By default in PHPBoost the tooltips are applied to all elements with aria-label attribute.

Lorem ipsum On hover, the description setted in the aria-label is revealed.

Lorem ipsum On hover, alternative text with options is shown instead of aria-label description

Options:
data-tooltip to add alternative text
data-tooltip-pos to force position of the tooltip (top|right|bottom|left)
data-tooltip-class to add custom classes ("display-none" to keep aria-label but hide the tooltip)
See the source code : 
// Tooltip
<span aria-label="Lorem ipsum....">Tooltip</span>
 
// Customized tooltip
<span data-tooltip="Alternatif text with options" data-tooltip-class="bigger bgc-full error" aria-label="Lorem ipsum....">Tooltip</span>