Mecha CMS

Mecha CMS blog and documentation.

Backend UI

Updated: Sunday, 07 August 2016

Backend user interface of Mecha CMS.

Mecha provides some built-in elements that you can use to enhance the user interface and interaction of your plugin page. These elements will be available only when you are logged in. Although you can still load them manually so that these elements can be available publicly (like what I’ve done on this page), but this is not recommended since you have the ability to make similar things as a plugin that is not as complicated as these.

Button

I recommend you to use the button class names in accordance with the button function. These classes, by default, will not affect the overall appearance. Appearance will be changed only when you give CSS declarations to the button classes.

ClassUsage
.btnThe base class. Use this class to make links and other span elements to be look like a push button.
.btn-defaultDefault class name for the default button appearance.
.btn-actionThis class is intended to represent a button that functions to execute an action (for example, save or update data).
.btn-acceptThis class is intended to represent a button that functions to accept something.
.btn-beginThis class is intended to represent a button that functions to start doing something.
.btn-constructThis class is intended to represent a button that functions to create or build something.
.btn-destructThis class is intended to represent a button that functions to destruct, delete or remove something.
.btn-rejectThis class is intended to represent a button that functions to reject something.

Button Markup

<button class="btn btn-default">Default Button</button>
<button class="btn btn-action">Action Button</button>
<a class="btn" href="#">Link Button</a>
<button class="btn"><i class="fa fa-check-circle"></i> With Icon</button>

Button Helper

// `Jot::button($kind, $text, $name, $type, $attr, $indent)`
echo Jot::button('action', 'Test Button');
echo Jot::button('action:plus-circle', 'Test Button');
// `Jot::btn($kind, $text, $href, $attr, $indent)`
echo Jot::btn('action', 'Test Button', '/');
echo Jot::btn('action:plus-circle', 'Test Button', '/');

Button Demo

Button Options

ClassUsage
.btn-smallUse this class to make the button size becomes smaller.
.btn-blockUse this class to expand the button into 100% width of its parent container.

Text Input

This also includes for the input of type url, email, number, date, tel, … (inline text input elements) and text areas.

Text Input Markup

<input type="text">
<textarea></textarea>

Text Input Helper

// `Form::text($name, $value, $placeholder, $attr, $indent)`
echo Form::text('title', "");
// `Form::textarea($name, $content, $placeholder, $attr, $indent)`
echo Form::textarea('content', "");

Text Input Demo

Text Input Options

ClassUsage
.input-smallUse this class to make the text input size becomes smaller.
.input-blockUse this class to expand the text input into 100% width of its parent container.
.textarea-smallUse this class to make the text area size becomes smaller.
.textarea-blockUse this class to expand the text area into 100% width of its parent container.
.textarea-expandUse this class to expand the text area height so that it can be used to write something with more liberal.
.codeUse this class to represent that the text input is intended to be used as a source code input, not just a regular text/sentence input. For the text area elements, adding this class will also automatically activate the MTE plugin to the text area so that you can do, for example, smart code indentation.
.MTEUse this class to activate the MTE plugin without having to make the text area text display turned into monospaced font.
.MTE-ignoreExtend this class with the .code class to make the text area text display turned into monospaced font without having to activate the MTE plugin on it.
AttributeUsage
data-MTE-configUse this attribute to override the default MTE plugin configuration data. The attribute value must be written in a valid JSON format.
<textarea class="textarea-block textarea-expand code" data-MTE-config='{"toolbar":true,"shortcut":true}'></textarea>

Select Box

Just a regular drop–down select box.

Select Box Markup

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Select Box Helper

// `Form::select($name, $option, $select, $attr, $indent)`
echo Form::select('skin', array(
    'red' => 'Red',
    'green' => 'Green',
    'blue' => 'Blue',
    'yellow' => 'Yellow'
), 'green');

Select Box Demo

Select Box Options

ClassUsage
.select-smallUse this class to make the select box size becomes smaller.
.select-blockUse this class to expand the select box into 100% width of its parent container.

Check Box

Mecha will automatically changes the default check box appearance into a custom check box appearance.

Check Box Markup

Although Mecha will automatically changes the default check box appearance into a custom check box appearance, I would still recommend you to set up the HTML markup of each check box item like this:

<div>
  <label>
    <input type="checkbox"> <span>Label Text</span>
  </label>
</div>

Check Box Helper

// `Form::checkbox($name, $value, $check, $text, $attr, $indent)`
echo Form::checkbox('agree', 1, true, 'I agree to the term of service.');

Check Box Demo

Check Box Options

AttributeUsage
data-connectionUse this attribute to make a “Ceck/Uncheck All” interaction on the check box. The value of data-connection attribute must be the same with the check boxes name attribute you want to connect.
<input type="checkbox" data-connection="blood[]">

Check Box Hooks

HookDescription
on_checkbox_changeWill be triggered on every check box change event.
on_checkbox_checkWill be triggered on every check box check event.
on_checkbox_uncheckWill be triggered on every check box uncheck event.

Radio

Mecha will also automatically changes the default radio appearance into a custom radio appearance.

Radio Markup

<div>
  <label>
    <input type="radio"> <span>Label Text</span>
  </label>
</div>

Radio Helper

// `Form::radio($name, $option, $select, $attr, $indent)`
echo Form::radio('dir', array(
    'ltr' => 'Left to Right',
    'rtl' => 'Right to Left'
), 'ltr');

Radio Demo

Radio Hooks

HookDescription
on_radio_changeWill be triggered on every radio change event.
on_radio_checkWill be triggered on every radio check event.
on_radio_uncheckWill be triggered on every radio uncheck event.

Grid

The default grid system consists of six columns–based division. This is just a basic grid system implementation. There aren’t any specific standards for the break–points. You decide them:

Grid Markup

<div class="grid-group">
  <div class="grid span-1"> … </div>
  <div class="grid span-1"> … </div>
  <div class="grid span-1"> … </div>
  <div class="grid span-1"> … </div>
  <div class="grid span-1"> … </div>
  <div class="grid span-1"> … </div>
</div>

<div class="grid-group">
  <div class="grid span-2"> … </div>
  <div class="grid span-2"> … </div>
  <div class="grid span-2"> … </div>
</div>

<div class="grid-group">
  <div class="grid span-3"> … </div>
  <div class="grid span-3"> … </div>
</div>

<div class="grid-group">
  <div class="grid span-4"> … </div>
  <div class="grid span-2"> … </div>
</div>

<div class="grid-group">
  <div class="grid span-5"> … </div>
  <div class="grid span-1"> … </div>
</div>

<div class="grid-group">
  <div class="grid span-6"> … </div>
</div>

Grid Demo

.span-1
.span-1
.span-1
.span-1
.span-1
.span-1
.span-2
.span-2
.span-2
.span-3
.span-3
.span-4
.span-2
.span-5
.span-1
.span-6

Grid Options

ClassUsage
.no-gapExtend this class with the base .grid-group class to remove the gaps between grids.
<div class="grid-group no-gap"> … </div>

Tab

Tab allows you to put some parts of the page into a single region. Only one section that will be visible, while the others can be visible only if you click on the tab button of the related hidden section.

Tab Markup

<div class="tab-area">
  <div class="tab-button-area">
    <a class="tab-button active" href="#tab-content-1">Tab 1</a>
    <a class="tab-button" href="#tab-content-2">Tab 2</a>
    <a class="tab-button" href="#tab-content-3">Tab 3</a>
  </div>
  <div class="tab-content-area">
    <div class="tab-content" id="tab-content-1"> … </div>
    <div class="tab-content hidden" id="tab-content-2"> … </div>
    <div class="tab-content hidden" id="tab-content-3"> … </div>
  </div>
</div>

Tab icons: Always remember with the fa-fw part.

<a class="tab-button" href="#tab-content-1"><i class="fa fa-fw fa-check"></i> Tab 1</a>

Tab Helper

<a class="tab-button" href="#"><?php echo Jot::icon('check', 'fw'); ?> Tab 1</a>

Note: ID on the tab section and the corresponding URL hash on the tab button are not required as long as you arrange the tabs and its sections in the same order:

<div class="tab-area">
  <div class="tab-button-area">
    <a class="tab-button active" href="#">Tab 1</a>
    <a class="tab-button" href="#">Tab 2</a>
    <a class="tab-button" href="#">Tab 3</a>
  </div>
  <div class="tab-content-area">
    <div class="tab-content"> … </div>
    <div class="tab-content hidden"> … </div>
    <div class="tab-content hidden"> … </div>
  </div>
</div>

Tab Demo

Tab Content 1

Tab Options

ClassUsage
.toggleExtend this class with the .tab-button class to make it possible to toggle the current tab content into two states: show and hide.
AttributeUsage
hrefPut a hyperlink URL to make the tab works as a link.
data-confirm-textShow a confirmation message before the page redirection occurred.

Tab Hooks

HookDescription
before_tab_changeWill be executed when a tab is clicked, before the state changed.
on_tab_showWill be executed when a tab content appears.
on_tab_hideWill be executed when a tab content disappears.
on_tab_changeWill be executed when a tab is clicked, after the state changed.
on_tab_toggleWill be executed when a tab is clicked, after the state changed. Applies to .toggle.

Accordion

Not much different from the tab, the difference is only on the sections that arranged vertically.

Accordion Markup

<div class="accordion-area">
  <h3 class="accordion-header active">Accordion Header 1</h3>
  <div class="accordion-content"> … </div>
  <h3 class="accordion-header">Accordion Header 2</h3>
  <div class="accordion-content hidden"> … </div>
  <h3 class="accordion-header">Accordion Header 3</h3>
  <div class="accordion-content hidden"> … </div>
</div>

Accordion Demo

Accordion Header 1

Accordion Content 1

Accordion Header 2

Accordion Header 3

Accordion Header 4

Accordion Options

ClassUsage
.toggleExtend this class with the .accordion-header class to make it possible to toggle the current accordion panel into two states: expand and collapse.

Accordion Hooks

HookDescription
on_accordion_expandWill be executed when accordion panel is expanded.
on_accordion_collapseWill be executed when accordion panel is collapsed.
on_accordion_changeWill be executed when accordion header is clicked.
on_accordion_toggleWill be executed when accordion header is clicked. Applies to .toggle

Modal

Simple dialog box with fixed size and position.

Modal Markup

<div class="modal-area" data-trigger="#my-button">
  <h3 class="modal-header">Modal Title</h3>
  <div class="modal-body">
    <div class="modal-content"> … </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-action">OK</button>
    <button class="btn btn-reject modal-close">Cancel</button>
  </div>
</div>
<button id="my-button">Show Modal</button>

Modal Demo

Modal Options

ClassUsage
.modal-smallExtend this class with the base .modal-area class to create a small modal window.
.modal-largeExtend this class with the base .modal-area class to create a large modal window.
.modal-full-screenExtend this class with the base .modal-area class to create a full screen modal window.
.modal-closeAdd this class to any element inside the dialog box to make it behaves as a closing trigger.
AttributeUsage
data-triggerA CSS–like JavaScript selector used to determines what element will be used as a trigger to show the modal.

Modal Hooks

HookDescription
on_modal_showWill be triggered when the modal window appears.
on_modal_hideWill be triggered when the modal window disappears.

Cloneable Table Row

Increase and decrease table row by a click trigger.

Cloneable Table Row Markup

<table class="table-bordered table-full-width">
  <tbody>
    <tr>
      <td>Table Cell 1.1</td>
      <td>Table Cell 1.2</td>
    </tr>
    <tr>
      <td>Table Cell 2.1</td>
      <td>Table Cell 2.2</td>
    </tr>
    <tr class="row-more-less">
      <td colspan="2">
        <a href="#row:more">More</a> / <a href="#row:less">Less</a>
      </td>
    </tr>
  </tbody>
</table>

Cloneable Table Row Demo

Table Cell 1.1Table Cell 1.2
Table Cell 2.1Table Cell 2.2
More / Less

Cloneable Table Row Options

AttributeUsage
data-minMinimum rows allowed in the current <tbody>. Default is 1.
data-maxMaximum rows allowed in the current <tbody>. Default is 9999.
<tr class="row-more-less" data-min="1" data-max="9999">

Cloneable Table Row Hooks

HookDescription
on_row_updateWill be triggered when the table row is increased or decreased.
on_row_increaseWill be triggered when the table row is increased.
on_row_decreaseWill be triggered when the table row is decreased.

Sortable

Sortable table rows and items.

Sortable Table Row

Sortable Table Row Markup
<table class="table-bordered table-full-width table-sortable">
  <tbody>
    <tr draggable="true">
      <td class="handle"></td>
      <td>Table Cell 1.1</td>
    </tr>
    <tr draggable="true">
      <td class="handle"></td>
      <td>Table Cell 2.1</td>
    </tr>
  </tbody>
</table>
Sortable Table Row Demo
Table Cell 1.1
Table Cell 2.1
Sortable Table Row Hooks
HookDescription
on_row_sortWill be triggered when table row is moved.
on_row_sort_upWill be triggered when table row is moved up.
on_row_sort_downWill be triggered when table row is moved down.

Sortable Item

Sortable Item Markup
<div class="sortable-area">
  <div class="sortable" draggable="true">
    <p>Sortable Item 1</p>
    <span class="handle"></span>
  </div>
  <div class="sortable" draggable="true">
    <p>Sortable Item 2</p>
    <span class="handle"></span>
  </div>
</div>
Sortable Item Demo

Sortable Item 1

Sortable Item 2

Sortable Item Hooks
HookDescription
on_item_sortWill be triggered when sortable item is moved.
on_item_sort_upWill be triggered when sortable item is moved up.
on_item_sort_downWill be triggered when sortable item is moved down.

Tooltip

Showing informations on hover in a custom tooltip.

Tooltip Markup

<a class="help" title="Example tooltip!">Hover Me!</a>
<a class="has-tooltip" title="Example tooltip!">Hover Me!</a>
<a data-tooltip="Example tooltip!">Hover Me!</a>

Tooltip Demo

    

Tooltip Hooks

HookDescription
on_tooltip_showWill be triggered when a tooltip appears.
on_tooltip_hideWill be triggered when a tooltip disappears.
on_tooltip_enterWill be triggered when the mouse pointer enters the tooltip body.
on_tooltip_exitWill be triggered when the mouse pointer leaves the tooltip body.

Custom File Input

Custom File Input Markup

<form class="form-upload">
  <label class="input-outer btn btn-default">
    <span><i class="fa fa-folder-open"></i> Select a file&hellip;</span>
    <input type="file">
  </label> <button class="btn btn-action" type="submit"><i class="fa fa-cloud-upload"></i> Upload</button>
</form>

Custom File Input Helper

// `Jot::uploader($action, $accept, $fields)`
echo Jot::uploader('/upload', 'gif,jpeg,jpg,png');

Custom File Input Demo

Custom File Input Options

Extend these custom attributes to the <input type="file"> element:

AttributeUsage
data-icon-readyIcon class for the accepting state.
data-icon-errorIcon class for the rejecting state.
data-accepted-extensionsList of lower–cased comma–separated allowed file extensions.

Note: The JavaScript file extensions validator that uses data-accepted-extensions attribute is just a helper for user interface interaction. You have to do the actual file validation in the server side.

<input type="file" data-icon-ready="fa fa-check" data-icon-error="fa fa-times" data-accepted-extensions="bmp,gif,jpg,jpeg,png">

Custom File Input Hooks

HookDescription
on_file_changeWill be triggered on every file change event.
on_file_acceptWill be triggered when the inputted file extension is accepted.
on_file_rejectWill be triggered when the inputted file extension is rejected.
Donation and Email Subscription