1.5.5 Release December 2nd 2015

Filter Nav

Filter by:
Option 1
Option 2
Option 3
<menu role="navigation">
  <dl class="filter_nav">
    <dt>Filter by:</dt>
    <dd class="active"><a href="#uxnav">Option 1</a></dd>
    <dd><a href="#uxnav">Option 2</a></dd>
    <dd><a href="#uxnav">Option 3</a></dd>

Button Group

<menu role="navigation">
  <ul class="button_grp">
    <li><a class="button" href="#uxnav"><span class="icon-arrow-left hmr"></span>Prev</a></li>
    <li><a class="button" href="#uxnav">Next<span class="icon-arrow-right hml"></span></a></li>


There are two flavours and three sizes of modal boxes included with the mergini framework application modals and inline modals, application modals activate an empty container and the foot of the mergini application and take over the whole screen with a blur effect, inline modals are ones you build inside your application and call as neccessary and do not include the blur and focus functions.

Inline Modals

Inline modals are pretty easy to implement simply add the a.mphibio.us listener class modal_opener and assign the element an amp-target attribute the id of the modal you want to launch.

Closing a modal is just as simple;assign the button, link, or icon the listener modal_kill and the proper amp-target attribute and it's gone.

<button class="modal_opener" amp-target="launcher_modal">Sample Modal Opener</button>

<div id="launcher_modal" class="overlay">
  <div id="launcher_content" class="modal small">
    <!--// We recomend using this closing button on all modals the javascript is already handled simply add the
    class modal_kill and assign the amp-target attribute to the id of your overlay container id it is included in the 
default configuration of the modal launcher //-->
      <span class="icon-close-icon right modal_kill" amp-target="launcher_modal"></span>
      <h3>Modal Header </h3>
      <fieldset class="form-actions">
        <button id="eventDetailActionBtn" type="button" class="">Action</button>
        <button type="reset" class="modal_kill cancel" amp-target="launcher_modal">Cancel</button>
Sample Modal Opener
If using an anchor as the modal trigger include an href element (see below) for better mobile compatibility, or stick to buttons for greater usability.
<a href="#" class="modal_opener" amp-target="launcher_modal">Sample Modal Opener</a>

Modal Sizing

Modals are designed to be fluid the default width of the modal is 90% of the screen width up to a maximum width of 940px, a minimum width of 660px and the height grows according to the content within them.

Adding the class(es) small or medium to the modal either in your source code or dynamically will change the width of the modal to a width of 200px or 30% of the screen for small and 400px or 60% of the screen width.


A.mphibio.us has some default messaging dialogue boxes available for user feedback assign anyone of the following classes to a container and have consitant feedback elements. Or add and remove these classes to a feedback container as part of your user error handling techniques. They can contain any kind of html.

Sample Error message
<div class="error">Sample Error message</div>
Sample Attention message with icon
<div class="attn"><span class="icon-mergini_logo r"></span>Sample Attention message with icon</div>


Sample Attention message with icon

<div id="feedback" class="dialog">
  <span class="icon-close a r mr cancel" amp-target="feedback"></span>
  <p>Sample Attention message with icon</p>