Sandbox - Layout

Layout grid

There are three kind of cells grid (.cell-flex) layout: free cells (.cell-inline), mosaïc grid (.cell-columns-{1 to 4}) and list (.cell-row).

Free cells

Each cell is dependent on its own dimensions. Cells are horizontally aligned and automaticaly go to the next line when they exeed limits.

.cell-inline

140px
240px
340px
440px

You can force width of undefined cells. (for > 1024px screens)

.cell-inline

100%
1/4
1/3
1/2
2/3
3/4
Mosaïc grid

Width of cells are defined by the parent container.

.cell-columns-4

.cell-columns-3

.cell-columns-2

You can resize each cell even if it's define by the parent container. (for > 1024px screens)

.cell-columns-3

2/3
1/3
1/4
3/4
1/2
1/2
List

Whatever the width of cells, they are vertically aligned.

.cell-row

1/3
1/4
See the source code : 
// Free cells
<div class="cell-flex">
    <article class="cell">... </article>
    <article class="cell">... </article>
    <article class="cell">... </article>
</div>
// Mosaïc grid
<div class="cell-flex cell-columns-[NUMBER]"> // 1 to 4
    <article class="cell">... </article>
    <article class="cell">... </article>
    <article class="cell">... </article>
</div>
// List
<div class="cell-flex cell-row">
    <article class="cell">... </article>
    <article class="cell">... </article>
    <article class="cell">... </article>
</div>
// Forced cells
<div class="cell-flex ...">
    <article class="cell cell-[RATIO]">... </article>
    // [RATIO] = 1-4 / 1-3 / 1-2 / 2-3 / 3-4
</div>
Cells
Mosaïc items layout (default)

Layout

Element Element
Layout
Etiam hendrerit, tortor et faucibus dapibus, eros orci porta eros, in facilisis ipsum ipsum at nisl

Layout

Element Element
Layout
Fusce vitae consequat nisl. Fusce vestibulum porta ipsum ac consectetur. Duis finibus mauris eu feugiat congue. Aenean aliquam accumsan ipsum, ac dapibus dui ultricies non. In hac habitasse platea dictumst. Aenean mi nibh, varius vel lacus at, tincidunt luctus eros. In hac habitasse platea dictumst. Vestibulum luctus lorem nisl, et hendrerit lectus dapibus ut. Phasellus sit amet nisl tortor. Aenean pulvinar tellus nulla, sit amet mattis nisl semper eu. Phasellus efficitur nisi a laoreet dignissim. Aliquam erat volutpat.
List items layout

Layout

Element Element
Layout
Etiam hendrerit, tortor et faucibus dapibus, eros orci porta eros, in facilisis ipsum ipsum at nisl

Layout

Element Element
Layout
Etiam hendrerit, tortor et faucibus dapibus, eros orci porta eros, in facilisis ipsum ipsum at nisl
Cell elements
Content information
Element Element
Alerts
Etiam hendrerit, tortor et faucibus dapibus, eros orci porta eros, in facilisis ipsum ipsum at nisl
Form
Content
Layout
Fusce vitae consequat nisl. Fusce vestibulum porta ipsum ac consectetur. Duis finibus mauris eu feugiat congue. Aenean aliquam accumsan ipsum, ac dapibus dui ultricies non. In hac habitasse platea dictumst. Aenean mi nibh, varius vel lacus at, tincidunt luctus eros. In hac habitasse platea dictumst. Vestibulum luctus lorem nisl, et hendrerit lectus dapibus ut. Phasellus sit amet nisl tortor. Aenean pulvinar tellus nulla, sit amet mattis nisl semper eu. Phasellus efficitur nisi a laoreet dignissim. Aliquam erat volutpat.
List
  • Sub title Element
  • Sub title Element
  • Element
  • Element
Table
Sub title Sub title Sub title Sub title
Element Element Element Element
Cell footer
Element
See the source code : 
// header
<div class="cell-header">
    <h1 class="cell-name">...</h1>
    <span>...</span>
</div>
// infos
<div class="cell-infos">
    <div>...</div>
    <div>...</div>
</div>
// alert
<div class="cell-alert">
    <div class="message-helper bgc warning">...</div>
</div>
// form
<div class="cell-form">
    <div class="cell-input"><input type="text" value="..."></div>
</div>
<div class="cell-form">
    <div class="cell-label">
        ...
        <span class="field-description">...</span>
    </div>
    <div class="cell-input"><input type="text" value="..." /></div>
</div>
<div class="cell-form">
    <div class="cell-input">
        <select name="">...</select>
    </div>
</div>
<div class="cell-form">
    <div class="grouped-inputs">
        <label for="input-id" class="grouped-element">
            <span class="grouped-element">...</span>
            <input id="input-id" type="text" class="grouped-element" value="...">
        </label>
        <select name="" class="grouped-element">...</select>
        <a href="" class="grouped-element">...</a>
    </div>
</div>
<div class="cell-textarea">
    <form action="" method="">
        <textarea name="textarea"></textarea>
        <fieldset class="fieldset-submit">
            <button type="submit" class="button submit" name="submit" value="true">Element</button>
            <button type="reset" class="button reset-button" value="true">Element</button>
        </fieldset>
    </form>
</div>
// thumbnail
<div class="cell-thumbnail">
    <img src="path-to-picture" alt="text">
    <a href="" class="cell-thumbnail-caption"><i class="fa fa-eye"></i></a>
</div>
// content
<div class="cell-body">
    <div class="cell-content">...</div>
</div>
// list
<div class="cell-list">
    <ul>
        <li class="li-stretch">
            <span>...</span>
            <span>...</span>
        </li>
        <li>...</li>
    </ul>
</div>
// table
<div class="cell-table">
    <table class="table">...</table>
</div>
// footer
<div class="cell-footer">...</div>
Messages and comments
See the source code : 
<article id="Id" class="message-container (message-small/message-offset) cell-tile cell-modal modal-container" itemscope="itemscope" itemtype="https://schema.org/Comment">
    <header class="message-header-container">
        <img class="message-user-avatar" src="/image/avatar/link" alt="Avatar">
        <div class="message-header-infos">
            <div class="message-user-container">
                <h3 class="message-user-name">
                    <span class="smaller" aria-label="Online/Offline">
                        <i class="fa fa-user" aria-hidden="true"></i>
                    </span>
                    <span class="administrator" itemprop="author">admin</span>
                    <span class="smaller" aria-label="See member datas" data-modal data-target="message-user-datas-ID">
                        <i class="far fa-eye" aria-hidden="true"></i>
                    </span>
                </h3>
                <div class="controls message-user-infos-preview">
                    <a href="#" class="user-group small group-ID offload"></a>
                    <span class="pinned administrator small">Administrator</span>
                </div>
            </div>
            <div class="message-infos">
                <time datetime="05/18/2026 at 21h53" itemprop="datePublished">05/18/2026 at 21h53</time>
                <a href="#ID" class="copy-link-to-clipboard" aria-label="Copy link to clipboard">#ID</a>
            </div>
        </div>
    </header>
    <div id="message-user-datas-ID" class="modal modal-animation">
        <div class="close-modal" aria-label="Close"></div>
        <div class="content-panel cell">
            <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 class="cell-list">
                <ul>
                    <li class="li-stretch">
                        <span>Administrator</span>
                        <img src="/images/group/link" alt="alt name" />
                    </li>
                    <li class="li-stretch">
                        <span>See member profile</span>
                        <a href="#" class="msg-link-pseudo administrator offload">admin</a>
                    </li>
                    <li class="li-stretch">
                        <span>PM</span>
                        <a href="#" class="button submit smaller offload"><i class="fa fa-people-arrows" aria-hidden="true"></i></a>
                    </li>
                    <li class="li-stretch">
                        <span>Email</span>
                        <a href="#" class="button submit smaller offload"><i class="fa iboost fa-iboost-email" aria-hidden="true"></i></a>
                    </li>
                    <li>Groups :</li>
                    <li class="li-stretch">
                        <a href="#">Com</a>
                        <img src="http://data.babsoweb.com/babsodata/phpboost/graph/group-icon/com.png" alt="group picture" />
                    </li>
                    <li>
                        <span>Membre signature</span>
                    </li>
                    <li>
                        <img src="/image/link" alt="alt name" />
                    </li>
                    <li class="li-stretch">
                        <span>Punishment : 0% </span>
                        <span>
                            <a href="#"><i class="fa fa-exclamation-trianglewarning"></i></a>
                            <a href="#"><i class="fa fa-user-lock link-color"></i></a>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="message-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi autem sequi quam ab amet culpa nobis vitae rerum laborum nulla!</p>
    </div>
</article>
See the source code : 
<ul id="[ID]" class="sortable-block">
    <li id="cat-1" class="sortable-element" data-id="1">
        <div class="sortable-selector" aria-label="Move"></div>
        <div class="sortable-title">
            <a href="...">Layout 1</a>
            <em class="h-padding small">Sub title</em>
        </div>
        <div class="sortable-actions">
            <a href="#" aria-label="Move up" id="move-up-1" onclick="return false;" style="display: none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
            <a href="#" aria-label="Move down" id="move-down-1" onclick="return false;"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
            <a href="..." aria-label="Default authorisations">
                <i class="fa fa-fw fa-user-shield" aria-hidden="true"></i>
            </a>
            <a href="..." aria-label="Edit"><i class="far fa-edit" aria-hidden="true"></i></a>
            <a href="..." aria-label="Delete" data-confirmation="{@delete-element}"><i class="far fa-trash-alt" aria-hidden="true"></i></a>
        </div>
        <ul id="subcat-1" class="sortable-block">
            <li id="cat-2" class="sortable-element" data-id="2">
                <div class="sortable-selector" aria-label="Move"></div>
                <div class="sortable-title">
                    <a href="...">Layout 1.1 </a>
                </div>
                <div class="sortable-actions">
                    <a href="#" aria-label="Move up" id="move-up-2" onclick="return false;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
                    <a href="#" aria-label="Move down" id="move-down-2" onclick="return false;"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
                    <a href="..." aria-label="Default authorisations">
                        <i class="fa fa-fw fa-user-shield" aria-hidden="true"></i>
                    </a>
                    <a href="..." aria-label="Edit"><i class="far fa-edit" aria-hidden="true"></i></a>
                    <a href="..." aria-label="Delete" data-confirmation="{@delete-element}"><i class="far fa-trash-alt" aria-hidden="true"></i></a>
                </div>
                <ul id="subcat-2" class="sortable-block"></ul>
            </li>
        </ul>
    </li>
    <li id="cat-3" class="sortable-element" data-id="3">
        <div class="sortable-selector" aria-label="Move"></div>
        <div class="sortable-title">
            <a href="...">Layout 2 </a>
        </div>
        <div class="sortable-actions">
            <a href="#" aria-label="Move up" id="move-up-3" onclick="return false;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
            <a href="#" aria-label="Move down" id="move-down-3" onclick="return false;" style="display: none;"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
            <a href="..." aria-label="Special authorizations">
                <i class="fa fa-fw fa-user-shield warning" aria-hidden="true"></i>
            </a>
            <a href="..." aria-label="Edit"><i class="far fa-edit" aria-hidden="true"></i></a>
            <a href="..." aria-label="Delete" data-confirmation="{@delete-element}"><i class="far fa-trash-alt" aria-hidden="true"></i></a>
        </div>
        <ul id="subcat-3" class="sortable-block"></ul>
    </li>
</ul>