9e5d3dea89 | 4 years ago | |
---|---|---|
.. | ||
build | 5 years ago | |
common | 5 years ago | |
components | 4 years ago | |
constant | 4 years ago | |
misc | 5 years ago | |
pages | 4 years ago | |
static | 4 years ago | |
utils | 5 years ago | |
.eslintrc.js | 5 years ago | |
Entry.js | 5 years ago | |
README.md | 5 years ago | |
breakpoints.json | 5 years ago | |
jsconfig.json | 5 years ago | |
package.json | 5 years ago | |
postcss.config.js | 5 years ago | |
yarn.lock | 5 years ago |
README.md
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 havedata-sticky="large"
so that the element will be sticky ONLY when window size islarge
. -
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 withdata-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>