This is not a 1.0 release. Things are moving at a fast pace, please note you might have some refactoring to do using this code.

Flashbar

Flashbars are used to inform a user of something after an action. The javascript component allows you to hide the flashbar when an element is clicked, such as a close button.

Data Attributes

Events

Event Description
show.ft.flashbar The flashbar is going to show
shown.ft.flashbar The flashbar is shown
hide.ft.flashbar The flashbar is going to hide
hidden.ft.flashbar The flashbar is hidden
$(document).on('show.ft.flashbar', '.flashbar', function(event) {
  // do some work
});

Extensions

Class Description
flashbar--default This is a basic flashbar
flashbar--primary This is a flashbar for primary information
flashbar--success This is a flashbar for success information
flashbar--info This is a flashbar for sidenote information
flashbar--warning This is a flashbar for warning information
flashbar--danger This is a flashbar for destructive information
Default
Primary
Success
Info
Warning
Danger
<div class="flashbar flashbar--default" data-ft-flashbar>
  <button class="flashbar__hide" data-ft-flashbar-hide>&times;</button>
  <div class="fluid-container">
    Default
  </div>
</div>
<div class="flashbar flashbar--primary" data-ft-flashbar>
  <button class="flashbar__hide" data-ft-flashbar-hide>&times;</button>
  <div class="fluid-container">
    Primary
  </div>
</div>
<div class="flashbar flashbar--success" data-ft-flashbar>
  <button class="flashbar__hide" data-ft-flashbar-hide>&times;</button>
  <div class="fluid-container">
    Success
  </div>
</div>
<div class="flashbar flashbar--info" data-ft-flashbar>
  <button class="flashbar__hide" data-ft-flashbar-hide>&times;</button>
  <div class="fluid-container">
    Info
  </div>
</div>
<div class="flashbar flashbar--warning" data-ft-flashbar>
  <button class="flashbar__hide" data-ft-flashbar-hide>&times;</button>
  <div class="fluid-container">
    Warning
  </div>
</div>
<div class="flashbar flashbar--danger" data-ft-flashbar>
  <button class="flashbar__hide" data-ft-flashbar-hide>&times;</button>
  <div class="fluid-container">
    Danger
  </div>
</div>

Modal

Modals are used to block the user from doing any other actions except inside of a focused area of content. The javascript component allows you to show the modal by clicking an element, hide the modal by clicking another element, or outside the modal.

If you would like a modal to have a specific width, it's suggested that you set a max-width on an extension class. (Example below)

.modal--767 {
  max-width: 76.7rem;
}
// usage <div class="modal modal--767">...</div>

Data Attributes

Events

event description
show.ft.modal The modal is going to show
shown.ft.modal The modal is shown
hide.ft.modal The modal is going to hide
hidden.ft.modal The modal is hidden
$(document).on('hide.ft.modal', '.modal', function(event) {
  // do some work
});

Position

Default (middle)

<button class="button button--default" data-ft-modal-show="example-modal">Show Modal</button>
<div class="modal animated" id="example-modal" data-ft-modal data-ft-show-class="fadeInDown" data-ft-hide-class="fadeOutUp">
  <div class="modal__content" data-ft-modal-content>
    <button class="modal__hide" data-ft-modal-hide="example-modal">&times;</button>
    <div class="box box--default xs-p1">
      <h1 class="xs-mb1">Hello World</h1>
      <p>
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Commodi pariatur culpa earum!
        Qui autem totam cum porro minus iusto,
        sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
        repellendus hic!
      </p>
    </div>
  </div>
</div>

Top

<button class="button button--default" data-ft-modal-show="example-modal-top">Show Modal</button>
<div class="modal modal--top animated" id="example-modal-top" data-ft-modal data-ft-show-class="fadeInDown" data-ft-hide-class="fadeOutUp">
  <div class="modal__content">
    <button class="modal__hide" data-ft-modal-hide="example-modal-top">&times;</button>
    <div class="box box--default xs-p1">
      <h1 class="xs-mb1">Hello World</h1>
      <p>
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Commodi pariatur culpa earum!
        Qui autem totam cum porro minus iusto,
        sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
        repellendus hic!
      </p>
    </div>
  </div>
</div>

Bottom

<button class="button button--default" data-ft-modal-show="example-modal-bottom">Show Modal</button>
<div class="modal modal--bottom animated" id="example-modal-bottom" data-ft-modal data-ft-show-class="fadeInUp" data-ft-hide-class="fadeOutDown">
  <div class="modal__content">
    <button class="modal__hide" data-ft-modal-hide="example-modal-bottom">&times;</button>
    <div class="box box--default xs-p1">
      <h1 class="xs-mb1">Hello World</h1>
      <p>
        Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Commodi pariatur culpa earum!
        Qui autem totam cum porro minus iusto,
        sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
        repellendus hic!
      </p>
    </div>
  </div>
</div>

Navigationbar

The navigationbar object is used for the main navigation of your site or app. The javascript component allows you to show and hide the collapsed mobile navigationbar.

Data Attributes

Events

Event Description
show.ft.navigationbar The navigationbar is going to show
shown.ft.navigationbar The navigationbar is shown
hide.ft.navigationbar The navigationbar is going to hide
hidden.ft.navigationbar The navigationbar is hidden
$(document).on('show.ft.navigationbar', '.navigationbar', function(event) {
  // do some work
});
<nav class="navigationbar navigationbar--default" data-ft-navigationbar>
  <div class="fluid-container clearfix">
    <div class="navigationbar__header clearfix">
      <a class="navigationbar__logo" href="#" target="_self">Fortitude</a>
      <button class="button xs-inline-block sm-none xs-float-right" data-ft-navigationbar-toggle>
        <i class="fa fa-bars"></i>
      </button>
      <button class="button xs-float-right sm-float-none">
        <i class="fa fa-eye-slash"></i>
      </button>
    </div>
    <nav class="navigationbar__nav navigationbar__nav--is-hidden" data-ft-navigationbar-nav>
      <ul class="navigationbar__list">
        <li class="navigationbar__item">
          <a href="javascript:void(0);" class="navigationbar__link">Objects</a>
        </li>
        <li class="navigationbar__item">
          <a href="javascript:void(0);" class="navigationbar__link">Structure</a>
        </li>
        <li class="navigationbar__item">
          <a href="javascript:void(0);" class="navigationbar__link">Utilities</a>
        </li>
        <li class="navigationbar__item">
          <a href="javascript:void(0);" class="navigationbar__link">Javascript</a>
        </li>
        <li class="navigationbar__item xs-prl1 sm-prl0">
          <a href="javascript:void(0);" class="button button--full button--primary">Architecture</a>
        </li>
      </ul>
    </nav>
  </div>
</nav>

Popover

The popover component is used to hide content or navigation behind a clickable element. You can specify different content to be shown when the popover is shown or hidden via the .popover--is-shown__label and .popover__label elements. You can specify the content of the popover via the .popover__content element. This functionality does not require javascript.

Put the .popover--is-shown__label element before the .popover__label element. This allows you to specify different html for when the popover is shown and when it is hidden. This functionality does not require javascript.

Use a <span> for buttons inside the .popover__label element. The <label> element is used to trigger the checkbox to show or hide the popover without javascript.

The javascript component covers combining popovers into groups, and allowing only one popover per group to be shown at once. For example, if you have multiple drop-down lists in a navigationbar.

Data Attributes

Events

Event Description
show.ft.popover The popover is going to show
shown.ft.popover The popover is shown
hide.ft.popover The popover is going to hide
hidden.ft.popover The popover is hidden
$(document).on('show.ft.popover', '.popover', function(event) {
  // do some work
});
<nav class="popover" data-ft-popover="example" data-show-class="fadeIn" data-hide-class="fadeOut">
  <input type="checkbox" class="popover__toggle" id="menu-one-toggle" data-ft-popover-toggle />
  <label for="menu-one-toggle" class="popover--is-shown__label">
    <span class="button button--default">One <i class="fa fa-caret-up"></i></span>
  </label>
  <label for="menu-one-toggle" class="popover__label">
    <span class="button button--default">One <i class="fa fa-caret-down"></i></span>
  </label>
  <div class="popover__content box box--default animated" data-ft-popover-content>
    <ul class="bare-list">
      <li><a href="javascript: void(0);" class="xs-block xs-p1">1-1</a></li>
      <li><a href="javascript: void(0);" class="xs-block xs-p1">1-2</a></li>
      <li><a href="javascript: void(0);" class="xs-block xs-p1">1-3</a></li>
      <li><a href="javascript: void(0);" class="xs-block xs-p1">1-4</a></li>
    </ul>
  </div>
</nav>

<nav class="popover" data-ft-popover="example">
  <input type="checkbox" class="popover__toggle" id="menu-two-toggle" data-ft-popover-toggle />
  <label for="menu-two-toggle" class="popover--is-shown__label">
    <span class="button button--default">Two <i class="fa fa-caret-up"></i></span>
  </label>
  <label for="menu-two-toggle" class="popover__label">
    <span class="button button--default">Two <i class="fa fa-caret-down"></i></span>
  </label>
  <div class="popover__content box box--styleguide" data-ft-popover-content>
    <ul class="bare-list">
      <li><a href="javascript: void(0);" class="xs-block xs-p1">2-1</a></li>
      <li><a href="javascript: void(0);" class="xs-block xs-p1">2-2</a></li>
      <li><a href="javascript: void(0);" class="xs-block xs-p1">2-3</a></li>
      <li><a href="javascript: void(0);" class="xs-block xs-p1">2-4</a></li>
    </ul>
  </div>
</nav>

Html screen lock

Used to make the contents of a webpage unscrollable. This is ideal when presenting content in a modal or similar UX patterns.

$('#lock-screen').on('click', function(){
  $.screenLock(); // locks the screen
  // $.screenLock(true) also works
});

$('#unlock-screen').on('click', function(){
  $.screenLock(false); // unlocks the screen
});

Select Input

Select inputs don't have placeholders by default. The select input javascript component allows you to set a placeholder element for a select dropdown, and apply an extra class when the placeholder is chosen.

Data Attributes

Fortitude comes with a built-in .placeholder class you can use here.

Events

event description
change.ft.select-input The select-input is firing a change event.
$(document).on('change.ft.select-input', '.select-input', function(event) {
  // do some work
});
<div class="field xs-mb1">
  <label class="xs-block">
    Select Input
  </label>
  <select class="select-input" data-ft-select-input>
    <option value="" class="placeholder">Select One</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div>

Shade

The shade component is used to dim the entire website, which can help the user focus on a specific element such as navigation or a modal. The javascript allows you to show and hide the shade by clicking on elements, and hides the shade when it is clicked on.

Data Attributes

Events

event description
show.ft.shade The shade is going to show
shown.ft.shade The shade is shown
hide.ft.shade The shade is going to hide
hidden.ft.shade The shade is hidden
$(document).on('show.ft.shade', '.shade', function(event) {
  // do some work
});
<button class="button button--default" data-ft-shade-show>Show Shade</button>

Tabs

The tabs and tabs-navigation components are used to navigate between different sections of content in a tabbed interface.

Data Attributes

By default, the tabs-navigation javascript will show and hide tabs based on their order in the html. To link a .tabs-navigation__link element to a tab somewhere else, set the data-ft-tabs-navigation-link attribute to the id of the linked tab.

Events

event description
show.ft.tab This tab navigation link is being changed to the active state
shown.ft.tab This tab navigation link is in the active state
hide.ft.tab This tab navigation link is being changed to the inactive state
hidden.ft.tab This tab navigation link is in the inactive state
show.ft.tabtarget This tab content is being shown
shown.ft.tabtarget This tab content is shown
hide.ft.tabtarget This tab content is being hidden
hidden.ft.tabtarget This tab content is hidden
$(document).on('show.ft.tab', '.tabs', function(event, tabIndex) {
  // do some work
});
<nav class="tabs tabs--default" data-ft-tabs>
  <ul class="tabs-navigation tabs-navigation--fixed tabs-navigation--default xs-mb1">
    <li class="tabs-navigation__item tabs-navigation__item--is-active">
      <a href="javascript: void(0);" class="tabs-navigation__link" data-ft-tabs-navigation-link>Tab 1</a>
    </li>
    <li class="tabs-navigation__item">
      <a href="javascript: void(0);" class="tabs-navigation__link" data-ft-tabs-navigation-link>Tab 2</a>
    </li>
    <li class="tabs-navigation__item">
      <a href="javascript: void(0);" class="tabs-navigation__link" data-ft-tabs-navigation-link>Tab 3</a>
    </li>
  </ul>
  <div class="tabs__content tabs__content--is-shown xs-text-center" data-ft-tabs-content>
    <div class="box box--default xs-p1 xs-text-center">
      Content for tab 1
    </div>
  </div>
  <div class="tabs__content xs-text-center" data-ft-tabs-content>
    <div class="box box--info xs-p1 xs-text-center">
      Content for tab 2
    </div>
  </div>
  <div class="tabs__content xs-text-center" data-ft-tabs-content>
    <div class="box box--inverse xs-p1 xs-text-center">
      Content for tab 3
    </div>
  </div>
</nav>