Hydro/ui

Vijos UI Framework

Responsive Cutoffs

Vijos use the following cutoffs to determine the size of a device.

Small: [0 - 450px) (mobile)

Medium: [450px, 1000px) (tablet)

Large: [1000px, -) (desktop)

Layout

Grid

See Foundation Grid

Float

See Foundation Float

NOTE: .float-center is not implemented.

Typography

HTML elements such as headings (h1, h2, ...), lists (ol, ul, li, ...) and tables does not have margins and paddings by default in order to easy the styling of semantic structures. However you may want suitable space between those elements when they are used to present content to users (for example, problem content). In this case, you need to enable the typography styling by wrapping them with <div class="typo"></div>:

<div class="typo">
  <h1>Notice</h1>
  <p>The content will be well formatted.</p>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

Text Alignment

<ANY class="text-left"></ANY>
<ANY class="text-center"></ANY>
<ANY class="text-right"></ANY>
<ANY class="text-justify"></ANY>

Prototype Components

Media Object

TODO

Number Box Object

TODO

Balancer Object

TODO

Basic Components

Section

Section is served as an entry to more detailed contents. By default, each section has a white background and drop-shadow.

A section should contain a section-header and one or more section bodies.

<div class="section">
  <div class="section__header">
    <!-- header -->
  </div>
  <div class="section__body">
    <!-- body -->
  </div>
  <div class="section__body">
    <!-- optionally more bodies -->
  </div>
</div>

There will be vertical margins between section bodies.

Side Section

If the section is acted as a sidebar section, it should contain side class so that its default font size becomes smaller:

<div class="section side"></div>

Title

You can use <X class="section__title"></X> to specify the title for a section (X is from h1 to h3). The font size and the color of the section title is different from normal headings.

<div class="section">
  <div class="section__header">
    <h1 class="section__title">Section title</h1>
  </div>
</div>

Table

If the main content of the section is a data table (or additionally with a title and a paginator), it is suggested to apply data-table to the table. Table should be put inside a section-body with no-padding decoration.

3 * 2 table sample:

<div class="section">
  <!-- ... -->
  <div class="section__body no-padding">
    <table class="data-table">
      <colgroup>
        <col class="col--1">
        <col class="col--2">
      </colgroup>
      <thead>
        <tr>
          <th class="col--1"></th>
          <th class="col--2"></th>
        </tr>
      </thead>
      <tbody>
        <tr><td class="col--1">1,1</td><td class="col--2">1,2</td></tr>
        <tr><td class="col--1">2,1</td><td class="col--2">2,2</td></tr>
        <tr><td class="col--1">3,1</td><td class="col--2">3,2</td></tr>
      </tbody>
    </table>
  </div>
</div>

If you want to specify the width of a column, you should add col--xxx to the class name list (as shown above) and specify its width in a CSS rule like:

.col--1 { width: 120px; }

Samples

Section with content:

<div class="section">
  <div class="section__body">
    Section content
  </div>
</div>

Section with title and content:

<div class="section">
  <div class="section__header">
    <h1 class="section__title">Section title</h1>
  </div>
  <div class="section__body">
    Section content
  </div>
</div>

Section with title and table content:

<div class="section">
  <div class="section__header">
    <h1 class="section__title">Section title</h1>
  </div>
  <div class="section__body no-padding">
    <table class="data-table">
      <!-- ... -->
    </table>
  </div>
</div>

Button

<ANY class="button"></ANY>

Additional class names:

rounded: The button would have round corners.

primary: The button would have blue background.

expanded: The button would occupy full width of the parent.

inverse: TODO

Input

<X class="textbox"></X>

X could be input or textarea.

Additional class names:

material: TODO

inverse: TODO

Paginator

TODO

Menu

<ol class="menu">
  <li class="menu__item">
    <a href="#" class="menu__link">Item</a>
  </li>
  <li class="menu__seperator"></li>
</ol>

Optionally, a menu item can be active or highlight (notice that the decorator class name is added to menu__link instead of menu__item):

<li class="menu__item">
  <a href="#" class="menu__link active">Active Item</a>
</li>
<li class="menu__item">
  <a href="#" class="menu__link highlight">Highlight Item</a>
</li>

Menu can be put inside a section. It should be placed inside section__body no-padding or directly inside section:

<div class="section">
  <div>
    <ol class="menu">
    ...
    </ol>
  </div>
</div>

Menu Item from Headings

Menu items can be automatically generated from headings. To enable this feature, you need to specify the region to extract headings and the destination of extracted menu items by setting data-heading-extract-to attribute:

<div class="section" data-heading-extract-to="#my-menu-item">
  <h1 id="h_1" data-heading>Heading 1</h1>
  <h1 id="h_2" data-heading>Heading 2</h1>
</div>

This attribute accepts a CSS selector and all elements that contain data-heading attribute in the element will be extracted. id is essential and it will be appended to the hash part so that the page will navigate when user clicks the newly generate menu item.

The CSS selector should match a menu__item element. Headings will become the sub-menu of that element.

Sticky

Sticky elements are always visible when the user scrolls. To enable sticky, add data-sticky attribute to the element.

Optionally, the value of data-sticky can be medium or large. When data-sticky is medium, the element will be sticky only when window size is larger than mobile cutoff (can be tablet or desktop). When data-sticky is large, it will take effect only when window size is larger than desktop cutoff. See section Responsive Cutoffs for actual sizes.

The sticky element is restricted to the boundary of its closest parent. You can change this behavior by assigning attribute data-sticky-parent to the desired parent. data-sticky-parent can not be used in nested sticky elements.

A sample of sticky sidebar:

<div class="row" data-sticky-parent>
  <div class="medium-9 columns">
    <!-- main content -->
  </div>
  <div class="medium-3 columns">
    <div data-sticky="large">
      <div class="section">Sticky!</div>
    </div>
  </div>
</div>

• Because the columns will be stacked when window size is smaller than large (tablet and mobile) and we don't want sidebars keep sticky in such cases, we have data-sticky="large" so that the element will be sticky ONLY when window size is large.

• The height of the two columns are not equal so the sticky parent should be .row instead.

CommonMark Editor

CommonMark editor can be automatically transformed from a normal textarea. Inputs in the CommonMark editor will be synced to the textarea in real-time. To enable this feature, add data-markdown to the textarea element.

Sample:

<textarea name="content" class="textbox" data-markdown></textarea>

To make it work with newly added textareas, you need to trigger vjContentNew event for the new element. Textarea with data-markdown should be a children of the trigger target.

Emoji

Emoji code can be automatically transformed into emoji images. To enable this feature, add data-emoji-enabled to the element.

Sample:

<div class="typo" data-emoji-enabled></div>

To make it work with newly added contents, you need to trigger vjContentNew event for the new element.

Dropdown

TODO

Navigation

TODO

Star

TODO

Tab

TODO

Hotkey

Local Hotkey

Local hotkeys are triggered when it is assigned to a parent of the active element in which user presses specific key.

To enable local hotkey on an element, add data-hotkey attribute:

<button data-hotkey="f1"></button>

You can specify multiple hotkeys in the attribute.

Global hotkey

Global hotkeys are triggered no matter where user presses specific key.

To enable global hotkey on an element, add data-global-hotkey attribute:

<button data-global-hotkey="f2"></button>

You can specify multiple hotkeys in the attribute.

Hotkey Syntax

hotKeyDef[,hotKeyDef[,hotKeyDef...]]

hotKeyDef: keySequence[:event]

keySequence: key1[+key2[+key3...]]

When keySequence matches, the event will be triggered on the element that holds the attribute. If event is not given in hotKeyDef, it will be click by default. In addition, if event is submit, the event will be triggered on the closest form element, instead of the current element.

Sample:

ctrl+f1: Triggers click on this element when user presses Ctrl+F1 or Command+F1.

ctrl+enter:submit: Triggers submit on the closest form when user presses Ctrl+Enter or Command+Enter.

f1:submit,f2:client: Triggers submit when user presses f1 and triggers click when user presses f2.

Tooltip

<X data-tooltip="your tooltip text"></X>

Optionally, you can specify a location by assigning data-tooltip-pos attribute. Available values are:

• "top left"
• "top middle" (default)
• "top right"
• "bottom left"
• "bottom middle"
• "bottom right"

High-Level Components

Comment List

TODO

Other

JavaScript-Responsive Visibility

Hide if JavaScript is disabled

<ANY class="nojs--hide"></ANY>

Hide if JavaScript is enabled

<ANY class="hasjs--hide"></ANY>