Base by AppDirect

Guidelines

Foundational principles, guidelines and styles

Animations

Fade Effects

Insert a button here.
Insert a Button 
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>
Insert a button here.
Insert a Button 
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog" data-placement="left">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>
Insert a button here.
Insert a Button 
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog" data-placement="bottom">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>
Insert a button here.
Insert a Button 
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog" data-placement="right">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>