Styleguide - JS Modules - E-Learning Heroes

Modal Creation

To create a modal, you must apply a data-modal attribute to a trigger element and create a hidden modal container on the page.

The modal container element must be classed with .modal__container.mfp-hide and must also contain the ID to be referenced by the trigger.

Examples

.modal__container.mfp-hide#modal_id
  .modal__header
    %h3.modal__title A title
  .modal__body
    %p Some content here
  .modal__footer
    %p Some footer stuff

Any sort of content may be placed within a modal, but for consistency, you should organize your content into the following sections: .modal__header , .modal__title , .modal__body , and .modal__footer

Launching Modals

Once you've got your modal setup, there are two ways to specify the target on the trigger element.

Data-Modal Attribute Value

You can set the target modal's ID as the data-modal value on the trigger.

Data Trigger

= btn 'span', 'Data Trigger', :'data-modal' => "#modal_demo"

HREF Attribute Value

If the trigger is a link, you can set the target modal's ID as the href value of the trigger.

HREF Trigger

%a.btn--primary{href: "#modal_demo", :'data-modal' => true} HREF Trigger

Note: The data-modal attribute cannot have any value in this case. Since our btn helper isn't set up for valueless attributes, we must fall back to the Haml link format.

Modal Styles

We have two types of modals - the default and the branded.

Default Modal

Default Modal

.modal__container.mfp-hide#modal_demo
  .modal__header
    %h3.modal__title Demo Modal
  .modal__body
    %p.content--secondary Lorem ipsum...
  .modal__footer
    %p.content--tertiary.copy--xsmall Modal Footer

The default modal width is 580px, but we also have slim, wide, and extra wide variations.

Slim Modal
500px Wide
```
.modal__container.mfp-hide.modal--slim
```

Wide Modal
680px Wide
```
.modal__container.mfp-hide.modal--wide
```

XWide Modal
800px Wide

.modal__container.mfp-hide.modal--xwide

By default, modals have no max-height, and therefore can cause the whole page to scroll if content is long. Thus, we also have a scrollable version of the modal.

Scrollable Modal

.modal__container.mfp-hide.modal--scrollable

Branded Modal

Branded Modal

.modal__container.mfp-hide.modal--brand#modal_branded
  .modal__header
    .modal__logo E-Learning Heroes
  %h3.modal__title Branded Modal
  .modal__body
    %p Lorem ipsum...
  .modal__footer
    %p.content--tertiary.copy--xsmall Modal Footer

Branded Modal Wide

.modal__container.mfp-hide.modal--brand--wide#modal_branded--wide
  .modal__header
    .modal__logo E-Learning Heroes
  %h3.modal__title Branded Modal
  .modal__body
    %p Lorem ipsum...
  .modal__footer
    %p.content--tertiary.copy--xsmall Modal Footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam architecto eaque amet iusto facere. Ut, itaque, sed ipsum facere alias praesentium eum distinctio temporibus quibusdam beatae porro sequi saepe. Plac.

Tab Creation

To create a set of tabs, you must apply a data-tab attribute to each trigger element and create a .tab__group container around both the tab navigation and the tab content containers.

Each tab container element must be classed with .tab__content and must also contain the ID to be referenced by the trigger.

Additionally, you will need to apply an .active class to the trigger and tab that should initially display on page load.

For consistency, you should use a .tab__header container with a horizontal, block list for the tab navigation, with a .tab__divider separator below.

Example

.tab__group
  .tab__header
    %nav
      %ul.list--horz.list--blockAll
        %li= link_to "Trigger 1", "#tab1", :'data-tab' => '', class: 'active'
        %li= link_to "Trigger 2", "#tab2", :'data-tab' => ''
    %hr.tab__divider
  .tab__content.active#tab1
    %p Content 1
  .tab__content#tab2
    %p Content 2

Content 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Content 2

Dicta, explicabo, eaque, ea dolor deserunt vero consectetur.

Initializing Tabs

As with modals there are two ways to specify the target on the trigger element.

Data-Modal Attribute Value

You can set the target tab's ID as the data-tab value on the trigger.

%span{:'data-tab' => '#data_tab'} Data Trigger

HREF Attribute Value

If the trigger is a link, you can set the target tab's ID as the href value of the trigger.

= link_to "HREF Trigger", "#href_tab", :'data-tab' => ''

Note: The data-tab attribute cannot have any value in this case.

Toggle Creation

To create toggleable content, you must first apply a data-toggle attribute to the trigger element containing the "name" of the element(s) to toggle.

Next, you will need to apply a data-toggle-content attribute containing the "name" you specified in the trigger attribute to the elements that should toggle.

Example

%div
  Some content.
  = link_to "Toggle Trigger", "#", :'data-toggle' => 'content_name'
  %span.hide{:'data-toggle-content' => 'content_name'} More content.

Some content. Toggle Trigger More content.

One-Time Toggler

You can hide the trigger on click by applying the data-toggle-hide attribute to the trigger element.

Example

%div
  Some content.
  = link_to "Toggle Trigger", "#", :'data-toggle' => 'toggle_once', :'data-toggle-hide' => true
  %span.hide{:'data-toggle-content' => 'toggle_once'} More content.

Some content. Toggle Trigger More content.

Modal Creation

Examples

Launching Modals

Data-Modal Attribute Value

HREF Attribute Value

Modal Styles

Default Modal

Branded Modal

Demo Modal

Branded Modal

Branded Modal Wide

Slim Modal

Wide Modal

Extra Wide Modal

Scrollable Modal

Tab Creation

Example

Initializing Tabs

Data-Modal Attribute Value

HREF Attribute Value

Toggle Creation

Example

One-Time Toggler

Example