Backend UI – Mecha CMS

Table of Content

Button
Text Input
Select Box
Check Box
Radio
Grid
Tab
Accordion
Modal
Cloneable Table Row
Sortable
1. Sortable Table Row
2. Sortable Item
Tooltip
Custom File Input

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.

Class	Usage
`.btn`	The base class. Use this class to make links and other span elements to be look like a push button.
`.btn-default`	Default class name for the default button appearance.
`.btn-action`	This class is intended to represent a button that functions to execute an action (for example, save or update data).
`.btn-accept`	This class is intended to represent a button that functions to accept something.
`.btn-begin`	This class is intended to represent a button that functions to start doing something.
`.btn-construct`	This class is intended to represent a button that functions to create or build something.
`.btn-destruct`	This class is intended to represent a button that functions to destruct, delete or remove something.
`.btn-reject`	This 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

Class	Usage
`.btn-small`	Use this class to make the button size becomes smaller.
`.btn-block`	Use 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

Class	Usage
`.input-small`	Use this class to make the text input size becomes smaller.
`.input-block`	Use this class to expand the text input into 100% width of its parent container.
`.textarea-small`	Use this class to make the text area size becomes smaller.
`.textarea-block`	Use this class to expand the text area into 100% width of its parent container.
`.textarea-expand`	Use this class to expand the text area height so that it can be used to write something with more liberal.
`.code`	Use 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.
`.MTE`	Use this class to activate the MTE plugin without having to make the text area text display turned into monospaced font.
`.MTE-ignore`	Extend 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.

Attribute	Usage
`data-MTE-config`	Use 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

Class	Usage
`.select-small`	Use this class to make the select box size becomes smaller.
`.select-block`	Use 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

Blood Type of A

Blood Type of B

Blood Type of AB

Blood Type of O

Check Box Options

Attribute	Usage
`data-connection`	Use 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/Uncheck All

Check Box Hooks

Hook	Description
`on_checkbox_change`	Will be triggered on every check box change event.
`on_checkbox_check`	Will be triggered on every check box check event.
`on_checkbox_uncheck`	Will 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

Option 1

Option 2

Option 3

Radio Hooks

Hook	Description
`on_radio_change`	Will be triggered on every radio change event.
`on_radio_check`	Will be triggered on every radio check event.
`on_radio_uncheck`	Will 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-2

.span-3

.span-4

.span-2

.span-5

.span-1

.span-6

Grid Options

Class	Usage
`.no-gap`	Extend 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 1 Tab 2 Tab 3 Tab 4

Tab Content 1

Tab Options

Class	Usage
`.toggle`	Extend this class with the `.tab-button` class to make it possible to toggle the current tab content into two states: show and hide.

Attribute	Usage
`href`	Put a hyperlink URL to make the tab works as a link.
`data-confirm-text`	Show a confirmation message before the page redirection occurred.

Tab Hooks

Hook	Description
`before_tab_change`	Will be executed when a tab is clicked, before the state changed.
`on_tab_show`	Will be executed when a tab content appears.
`on_tab_hide`	Will be executed when a tab content disappears.
`on_tab_change`	Will be executed when a tab is clicked, after the state changed.
`on_tab_toggle`	Will 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

Class	Usage
`.toggle`	Extend 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

Hook	Description
`on_accordion_expand`	Will be executed when accordion panel is expanded.
`on_accordion_collapse`	Will be executed when accordion panel is collapsed.
`on_accordion_change`	Will be executed when accordion header is clicked.
`on_accordion_toggle`	Will be executed when accordion header is clicked. Applies to `.toggle`

Simple dialog box with fixed size and position.

<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>

Class	Usage
`.modal-small`	Extend this class with the base `.modal-area` class to create a small modal window.
`.modal-large`	Extend this class with the base `.modal-area` class to create a large modal window.
`.modal-full-screen`	Extend this class with the base `.modal-area` class to create a full screen modal window.
`.modal-close`	Add this class to any element inside the dialog box to make it behaves as a closing trigger.

Attribute	Usage
`data-trigger`	A CSS–like JavaScript selector used to determines what element will be used as a trigger to show the modal.

Hook	Description
`on_modal_show`	Will be triggered when the modal window appears.
`on_modal_hide`	Will 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.1	Table Cell 1.2
Table Cell 2.1	Table Cell 2.2
More / Less

Cloneable Table Row Options

Attribute	Usage
`data-min`	Minimum rows allowed in the current `<tbody>`. Default is `1`.
`data-max`	Maximum rows allowed in the current `<tbody>`. Default is `9999`.

<tr class="row-more-less" data-min="1" data-max="9999">

Cloneable Table Row Hooks

Hook	Description
`on_row_update`	Will be triggered when the table row is increased or decreased.
`on_row_increase`	Will be triggered when the table row is increased.
`on_row_decrease`	Will 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

Hook	Description
`on_row_sort`	Will be triggered when table row is moved.
`on_row_sort_up`	Will be triggered when table row is moved up.
`on_row_sort_down`	Will 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

Hook	Description
`on_item_sort`	Will be triggered when sortable item is moved.
`on_item_sort_up`	Will be triggered when sortable item is moved up.
`on_item_sort_down`	Will 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

Hook	Description
`on_tooltip_show`	Will be triggered when a tooltip appears.
`on_tooltip_hide`	Will be triggered when a tooltip disappears.
`on_tooltip_enter`	Will be triggered when the mouse pointer enters the tooltip body.
`on_tooltip_exit`	Will 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:

Attribute	Usage
`data-icon-ready`	Icon class for the accepting state.
`data-icon-error`	Icon class for the rejecting state.
`data-accepted-extensions`	List 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

Hook	Description
`on_file_change`	Will be triggered on every file change event.
`on_file_accept`	Will be triggered when the inputted file extension is accepted.
`on_file_reject`	Will be triggered when the inputted file extension is rejected.