BEM naming
BEM is a highly useful, powerful, and simple naming convention that makes front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict. You will not be surprised to hear that BEM is an abbreviation of the key elements of the methodology — Block, Element and Modifier.
Block
Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.
Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: .block.
<div class="block"></div>
Element
Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: .block__elem.
<div class="block">
<div class="block__elem"></div>
</div>
Modifier
Flags on blocks or elements. Use them to change appearance, behaviour or state.
Modifier names may consist of Latin letters, digits, dashes. CSS class is formed as block’s or element’s name plus one underscore: .block_mod or .block__elem_mod.
<div class="block block_primary">
<div class="block__elem block__elem_active"></div>
<div class="block__elem"></div>
<div class="block__elem"></div>
</div>
Grid
Flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, and predefined classes.
Container
A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid. The default width of the container is 1110px with a 24px padding.
<div class="dmiux_grid-cont">...</div>
Use dmiux_grid-cont_fw class for a full width container, spanning the entire width of the viewport.
<div class="dmiux_grid-cont dmiux_grid-cont_fw">...</div>
Rows and columns
Grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.
<div class="dmiux_grid-row">
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
</div>
Variable width content
Use dmiux_grid-col_auto class to size columns based on the natural width of their content.
auto
<div class="dmiux_grid-row">
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">...</div>
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
</div>
Responsive classes
Grid includes five tiers of predefined classes for building complex responsive layouts. Customise the size of your columns on extra small (<576px), small (<768px), medium (<1024px), large (<1280px), or extra large devices however you see fit.
3 / lg-4 / md-5 / sm-6 / xs-12
3 / lg-4 / md-5 / sm-6 / xs-12
3 / lg-4 / md-5 / sm-6 / xs-12
3 / lg-4 / md-5 / sm-6 / xs-12
<div class="dmiux_grid-row">
<div class="dmiux_grid-col dmiux_grid-col_3 dmiux_grid-col_lg-4 dmiux_grid-col_md-5 dmiux_grid-col_sm-6 dmiux_grid-col_xs-12"><div class="main-cont__coldemo">3 / lg-4 / md-5 / sm-6 / xs-12</div></div>
<div class="dmiux_grid-col dmiux_grid-col_3 dmiux_grid-col_lg-4 dmiux_grid-col_md-5 dmiux_grid-col_sm-6 dmiux_grid-col_xs-12"><div class="main-cont__coldemo">3 / lg-4 / md-5 / sm-6 / xs-12</div></div>
<div class="dmiux_grid-col dmiux_grid-col_3 dmiux_grid-col_lg-4 dmiux_grid-col_md-5 dmiux_grid-col_sm-6 dmiux_grid-col_xs-12"><div class="main-cont__coldemo">3 / lg-4 / md-5 / sm-6 / xs-12</div></div>
<div class="dmiux_grid-col dmiux_grid-col_3 dmiux_grid-col_lg-4 dmiux_grid-col_md-5 dmiux_grid-col_sm-6 dmiux_grid-col_xs-12"><div class="main-cont__coldemo">3 / lg-4 / md-5 / sm-6 / xs-12</div></div>
</div>
Vertical alignment
There are 3 different vertical alignment options: top, center and bottom.
<div class="dmiux_grid-row">
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
</div>
<div class="dmiux_grid-row dmiux_grid-row_aic">
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
</div>
<div class="dmiux_grid-row dmiux_grid-row_aib">
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
</div>
Horizontal alignment
There are 5 different horizontal alignment options: start, center, end, space-around and space-beetween.
<div class="dmiux_grid-row">
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
</div>
<div class="dmiux_grid-row dmiux_grid-row_jcc">
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
</div>
<div class="dmiux_grid-row dmiux_grid-row_jce">
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
</div>
<div class="dmiux_grid-row dmiux_grid-row_jca">
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
</div>
<div class="dmiux_grid-row dmiux_grid-row_jcb">
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
<div class="dmiux_grid-col dmiux_grid-col_3">...</div>
</div>
Disabled gutters
The gutters between columns in our predefined grid classes can be removed with. This removes the negative margins from rows and the horizontal padding from all immediate children columns.
<div class="dmiux_grid-row dmiux_grid-row_nog">
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
<div class="dmiux_grid-col">...</div>
</div>
Display
Quickly and responsively toggle the display value of elements and more with display utilities.
There are 4 predefined classes to change display property:
dmiux_blocked- apliesdisplay:blockproperty;dmiux_inlined- apliesdisplay:inlineproperty;dmiux_iblocked- apliesdisplay:inline-blockproperty;dmiux_removed- apliesdisplay:noneproperty and hides the element;
<div class="dmiux_blocked"></div>
<div class="dmiux_inlined"></div>
<div class="dmiux_iblocked"></div>
<div class="dmiux_removed"></div>
Responsive classes
Display property could be changed for extra small (<576px), small (<768px), medium (<1024px) or large (<1280px) devices.
<div class="dmiux_removed_xs">hidden on extra small devices</div>
<div class="dmiux_inlined dmiux_blocked_md">inline, becomes block on medium devices</div>
<div class="dmiux_iblocked_md">becomes inline block on medium devices</div>
<div class="dmiux_removed dmiux_blocked_sm">hidden, becomes block on small devices</div>
Skeleton
Body
<body id="dmiux_body" class="dmiux_body">...</body>
On window load event dmiux_body_loaded class will be added to the body tag. This adds a smooth page fade-in effect instead of regular appearing.
<body id="dmiux_body" class="dmiux_body dmiux_body_loaded">...</body>
This effect could be removed by removing the dmiux_body class.
<body id="dmiux_body">...</body>
Layout
Default layout consists of dmiux_page container (needed to prevent horizontal scrolling on some resolutions) and dmiux_header, dmiux_headline, content, dmiux_mobile-nav, popups (optional).
<div class="dmiux_page">
<header class="dmiux_header">...</header>
<div class="dmiux_headline">...</div>
...
<div class="dmiux_mobile-nav">...</div>
<div id="dmiux_overlay" class="dmiux_overlay">...</div>
<div id="dmiux_popup_1" class="dmiux_popup">...</div>
<div id="dmiux_popup_2" class="dmiux_popup">...</div>
<div id="dmiux_popup_3" class="dmiux_popup">...</div>
</div>
Header
There are 4 different combinations of elements that can be used inside the header.
<header class="dmiux_header">
<div class="dmiux_grid-row dmiux_grid-row_nog dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<a href="index.html" class="dmiux_logo">...</a>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_app-nav">...</nav>
</div>
<div class="dmiux_grid-col"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_user-nav">...</nav>
</div>
</div>
<button type="button" id="dmiux_burger" class="dmiux_burger">Menu<i></i></button>
</header>
<header class="dmiux_header">
<div class="dmiux_grid-row dmiux_grid-row_nog dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<a href="index.html" class="dmiux_logo">...</a>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_app-nav">...</nav>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_main-nav">...</nav>
</div>
<div class="dmiux_grid-col"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_user-nav">...</nav>
</div>
</div>
<button type="button" id="dmiux_burger" class="dmiux_burger">Menu<i></i></button>
</header>
W12Z - Transactions through Apr 24, 2019
<header class="dmiux_header">
<div class="dmiux_grid-row dmiux_grid-row_nog dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<a href="index.html" class="dmiux_logo">...</a>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_app-nav">...</nav>
</div>
<div class="dmiux_grid-col">
<div class="dmiux_header__hr dmiux_removed dmiux_blocked_lg"></div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_subtitle dmiux_subtitle_alt">...</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_lg"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_user-nav">...</nav>
</div>
</div>
<button type="button" id="dmiux_burger" class="dmiux_burger">Menu<i></i></button>
</header>
W12Z - Transactions through Apr 24, 2019
<header class="dmiux_header">
<div class="dmiux_grid-row dmiux_grid-row_nog dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<a href="index.html" class="dmiux_logo">...</a>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_app-nav">...</nav>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_main-nav">...</nav>
</div>
<div class="dmiux_grid-col">
<div class="dmiux_header__hr dmiux_removed dmiux_blocked_lg"></div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_subtitle dmiux_subtitle_alt">...</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_lg"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<nav class="dmiux_user-nav">...</nav>
</div>
</div>
<button type="button" id="dmiux_burger" class="dmiux_burger">Menu<i></i></button>
</header>
Headline
Headline placed below the header and can contain back button, title, subtitle, actions panel and editor info.
<div class="dmiux_headline">
<div class="dmiux_grid-row dmiux_grid-row_nog dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<a href="#" class="dmiux_back"><i></i></a>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<h1 class="dmiux_title">...</h1>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_sm-12">
<div class="dmiux_subtitle">...</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_md-12">
<div class="dmiux_mt100"></div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_actions">...</div>
</div>
</div>
</div>
<div class="dmiux_headline">
<div class="dmiux_grid-row dmiux_grid-row_nog dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<a href="#" class="dmiux_back"><i></i></a>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<h1 class="dmiux_title dmiux_title_with-editors">...</h1>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_sm-12">
<div class="dmiux_subtitle">...</div>
</div>
<div class="dmiux_grid-col"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_editors">...</div>
</div>
</div>
</div>
Loader
There are 5 different sizes of the loaders that can be used for different cases.
<div class="dmiux_loader dmiux_loader_xsmall"></div>
<br>
<div class="dmiux_loader dmiux_loader_small"></div>
<br>
<div class="dmiux_loader"></div>
<br>
<div class="dmiux_loader dmiux_loader_large"></div>
<br>
<div class="dmiux_loader dmiux_loader_xlarge"></div>
Blocks
Block is a flexible and extensible content container. It includes options for headers and footers, and a wide variety of content.
Default block
Default block has visual stying and default margins/paddings.
Content
<div class="dmiux_block">Content</div>
Textual inputs
Text field
A standard text input
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
Disabled state
Textual input has a disabled state witch removes hover and focus states from input.
<div class="dmiux_input">
<input disabled type="text" class="dmiux_input__input">
</div>
Placeholder
Usage of the placeholder attribute.
<div class="dmiux_input">
<input type="text" placeholder="Placeholder" class="dmiux_input__input">
</div>
With label
Usage of the label element.
<div class="dmiux_grid-row">
<div class="dmiux_grid-col dmiux_grid-col_2">
<label class="dmiux_label">Input label</label>
</div>
<div class="dmiux_grid-col">
<div class="dmiux_input">
<input type="text" placeholder="Placeholder" class="dmiux_input__input">
</div>
</div>
</div>
Datepicker
Customised Air Datepicker plugin using for the date selection.
<div class="dmiux_input">
<input type="text" class="dmiux_input__input dmiux_input__input_date">
</div>
Icon and prefix
Recommended size for the text input SVG icons is 12x12px. But there is a possibility to use different size, icons will be centered.
$
<div class="dmiux_input">
<div class="dmiux_input__prefix">$</div>
<input type="text" class="dmiux_input__input">
<div class="dmiux_input__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12"><path fill="currentColor" d="M11 2h-1V0H8v2H4V0H2v2H1c-.552285 0-1 .4477153-1 1v8c0 .5522847.447715 1 1 1h10c.552285 0 1-.4477153 1-1V3c0-.5522847-.447715-1-1-1zm-1 8H2V5h8v5z"></path></svg></div>
</div>
Different sizes
There are 10 predefined classes for different fixed-width sizes.
<div class="dmiux_input dmiux_input_size1">
<input type="text" maxlength="1" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size2">
<input type="text" maxlength="2" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size3">
<input type="text" maxlength="3" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size4">
<input type="text" maxlength="4" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size5">
<input type="text" maxlength="5" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size6">
<input type="text" maxlength="6" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size7">
<input type="text" maxlength="7" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size8">
<input type="text" maxlength="8" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size9">
<input type="text" maxlength="9" class="dmiux_input__input">
</div>
<div class="dmiux_input dmiux_input_size10">
<input type="text" maxlength="10" class="dmiux_input__input">
</div>
Select field
A standard select element
<div class="dmiux_select">
<select class="dmiux_select__select">
<option value=""></option>
<option value="">Consectetur adipisicing</option>
<option value="">Dolore magna aliqua</option>
</select>
<div class="dmiux_select__arrow"></div>
</div>
Placeholder
First option (with the selected and disabled attributes) will be used as a placeholder.
<div class="dmiux_select">
<select class="dmiux_select__select dmiux_select__select_pholder">
<option selected disabled value="">Select an option</option>
<option value="">Consectetur adipisicing</option>
<option value="">Dolore magna aliqua</option>
</select>
<div class="dmiux_select__arrow"></div>
</div>
Text-based select
Select can be used as a text-based selector.
Add a Selected Element
<div class="dmiux_select">
<select class="dmiux_select__select dmiux_select__select_pholder">
<option selected disabled value="">Select an option</option>
<option value="">Consectetur adipisicing</option>
<option value="">Dolore magna aliqua</option>
</select>
<div class="dmiux_select__arrow"></div>
</div>
Multi-select
Multi-select allows to selectcreated with text input and set of checkboxes.
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_multiselect">
<input readonly type="text" placeholder="Select multiple options" class="dmiux_multiselect__input">
<div class="dmiux_multiselect__arrow"></div>
<div class="dmiux_multiselect__dropdown">
<div class="dmiux_multiselect__overflow">
<div class="dmiux_multiselect__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_multiselect__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_multiselect__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
</div>
</div>
</div>
Radios and Checkboxes
Radios are for selecting one option in a list, while checkboxes are for selecting one or several options from many.
Default radios
By default radio has a display:block property and will fill 100% width of the container.
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_radio">
<input type="radio" name="defaultRadio" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_radio dmiux_mt100">
<input type="radio" name="defaultRadio" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_radio dmiux_mt100">
<input type="radio" name="defaultRadio" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Occaecat cupidatat</div>
</div>
Default checkboxes
By default checkbox has a display:block property and will fill 100% width of the container.
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_checkbox dmiux_mt100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox dmiux_mt100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
Inline styles
There are 2 ways to use inline radios/checkboxes. Add a dmiux_radio_inline or dmiux_checkbox_inline class or use a grid layout.
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_grid-row">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_radio dmiux_mb100">
<input type="radio" name="inlineRadio" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Consectetur adipisicing</div>
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_radio dmiux_mb100">
<input type="radio" name="inlineRadio" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Dolore magna aliqua</div>
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_radio dmiux_mb100">
<input type="radio" name="inlineRadio" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Occaecat cupidatat</div>
</div>
</div>
</div>
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_grid-row">
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
</div>
</div>
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_radio dmiux_radio_inline dmiux_mb100 dmiux_mr100">
<input type="radio" name="inlineRadio2" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_radio dmiux_radio_inline dmiux_mb100 dmiux_mr100">
<input type="radio" name="inlineRadio2" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_radio dmiux_radio_inline dmiux_mb100 dmiux_mr100">
<input type="radio" name="inlineRadio2" class="dmiux_radio__input">
<div class="dmiux_radio__check"></div>
<div class="dmiux_radio__label">Occaecat cupidatat</div>
</div>
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_checkbox dmiux_checkbox_inline dmiux_mb100 dmiux_mr100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_checkbox dmiux_checkbox_inline dmiux_mb100 dmiux_mr100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox dmiux_checkbox_inline dmiux_mb100 dmiux_mr100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
Select all checkbox
To use a "select all" checkbox there must be a wrapper with the dmiux_checkbox-area class and dmiux_checkbox_all class must be added to the first checkbox.
Select All
Dolore magna aliqua
Occaecat cupidatat
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_checkbox-area">
<div class="dmiux_checkbox dmiux_checkbox_all dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label"><span class="dmiux_fw600">Select All</span></div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox dmiux_mb100">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
</div>
Checkboxes group
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
Consectetur adipisicing
Dolore magna aliqua
Occaecat cupidatat
<div class="dmiux_checkbox-group">
<div class="dmiux_checkbox-group__overflow">
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Consectetur adipisicing</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Dolore magna aliqua</div>
</div>
<div class="dmiux_checkbox-group__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Occaecat cupidatat</div>
</div>
</div>
<button type="button" class="dmiux_checkbox-group__toggle"></button>
</div>
Tables
A table displays a collections of data grouped into rows.
Default table
| Name | Description | Value | |
|---|---|---|---|
|
|
A1471 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | $355.49 |
|
|
Y3820 | Excepteur sint occaecat cupidatat non proident mollit anim id est laborum. | $36.90 |
|
|
G8602 | Sunt in culpa qui officia deserunt mollit anim id est laborum. | $377.13 |
<div class="dmiux_data-table">
<div class="dmiux_data-table__cont">
<table class="dmiux_data-table__table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dmiux_data-table__actions">
<button type="button" data-tooltip="Edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M5 0c.6 0 1 .4 1 1s-.4 1-1 1H2v12h12v-3c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm6.3.3c.4-.4 1-.4 1.4 0l3 3c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3H5c-.6 0-1-.4-1-1V8c0-.3.1-.5.3-.7zm.7 2.1l-6 6V10h1.6l6-6L12 2.4z"></path></svg></button>
</div>
</td>
<td class="dmiux_fw600">A1471</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
<td>$355.49</td>
</tr>
<tr>
<td>
<div class="dmiux_data-table__actions">
<button type="button" data-tooltip="Edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M5 0c.6 0 1 .4 1 1s-.4 1-1 1H2v12h12v-3c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm6.3.3c.4-.4 1-.4 1.4 0l3 3c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3H5c-.6 0-1-.4-1-1V8c0-.3.1-.5.3-.7zm.7 2.1l-6 6V10h1.6l6-6L12 2.4z"></path></svg></button>
</div>
</td>
<td class="dmiux_fw600">Y3820</td>
<td>Excepteur sint occaecat cupidatat non proident mollit anim id est laborum.</td>
<td>$36.90</td>
</tr>
<tr>
<td>
<div class="dmiux_data-table__actions">
<button type="button" data-tooltip="Edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M5 0c.6 0 1 .4 1 1s-.4 1-1 1H2v12h12v-3c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm6.3.3c.4-.4 1-.4 1.4 0l3 3c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3H5c-.6 0-1-.4-1-1V8c0-.3.1-.5.3-.7zm.7 2.1l-6 6V10h1.6l6-6L12 2.4z"></path></svg></button>
</div>
</td>
<td class="dmiux_fw600">G8602</td>
<td>Sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td>$377.13</td>
</tr>
</tbody>
</table>
</div>
</div>
Advanced table
Customised DataTables plugin is using for the advanced tables.
|
|
Name | Description | Value |
|---|---|---|---|
|
|
A1471 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | $355.49 |
|
|
Y3820 | Excepteur sint occaecat cupidatat non proident mollit anim id est laborum. | $36.90 |
|
|
G8602 | Sunt in culpa qui officia deserunt mollit anim id est laborum. | $377.13 |
Name
Description
Value
<div class="dmiux_data-table">
<div class="dmiux_data-table__cont">
<table id="dmiux_data-table" class="dmiux_data-table__table">
<thead>
<tr>
<th>
<div class="dmiux_data-table__actions">
<button type="button" class="dmiux_data-table__cog"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFF" d="M13.3 5.2l1.1-2.1L13 1.7l-2.1 1.1c-.3-.2-.7-.3-1.1-.4L9 0H7l-.8 2.3c-.3.1-.7.2-1 .4L3.1 1.6 1.6 3.1l1.1 2.1c-.2.3-.3.7-.4 1L0 7v2l2.3.8c.1.4.3.7.4 1.1L1.6 13 3 14.4l2.1-1.1c.3.2.7.3 1.1.4L7 16h2l.8-2.3c.4-.1.7-.3 1.1-.4l2.1 1.1 1.4-1.4-1.1-2.1c.2-.3.3-.7.4-1.1L16 9V7l-2.3-.8c-.1-.3-.2-.7-.4-1zM8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg></button>
</div>
</th>
<th>Name</th>
<th>Description</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dmiux_data-table__actions">
<button type="button" data-tooltip="Edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M5 0c.6 0 1 .4 1 1s-.4 1-1 1H2v12h12v-3c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm6.3.3c.4-.4 1-.4 1.4 0l3 3c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3H5c-.6 0-1-.4-1-1V8c0-.3.1-.5.3-.7zm.7 2.1l-6 6V10h1.6l6-6L12 2.4z"></path></svg></button>
</div>
</td>
<td class="dmiux_fw600">A1471</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
<td>$355.49</td>
</tr>
<tr>
<td>
<div class="dmiux_data-table__actions">
<button type="button" data-tooltip="Edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M5 0c.6 0 1 .4 1 1s-.4 1-1 1H2v12h12v-3c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm6.3.3c.4-.4 1-.4 1.4 0l3 3c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3H5c-.6 0-1-.4-1-1V8c0-.3.1-.5.3-.7zm.7 2.1l-6 6V10h1.6l6-6L12 2.4z"></path></svg></button>
</div>
</td>
<td class="dmiux_fw600">Y3820</td>
<td>Excepteur sint occaecat cupidatat non proident mollit anim id est laborum.</td>
<td>$36.90</td>
</tr>
<tr>
<td>
<div class="dmiux_data-table__actions">
<button type="button" data-tooltip="Edit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M5 0c.6 0 1 .4 1 1s-.4 1-1 1H2v12h12v-3c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm6.3.3c.4-.4 1-.4 1.4 0l3 3c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3H5c-.6 0-1-.4-1-1V8c0-.3.1-.5.3-.7zm.7 2.1l-6 6V10h1.6l6-6L12 2.4z"></path></svg></button>
</div>
</td>
<td class="dmiux_fw600">G8602</td>
<td>Sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td>$377.13</td>
</tr>
</tbody>
</table>
<button type="button" class="dmiux_data-table__arrow dmiux_data-table__arrow_left"><i></i></button>
<button type="button" class="dmiux_data-table__arrow dmiux_data-table__arrow_right"><i></i></button>
<div id="dmiux_data-table__settings" class="dmiux_data-table__settings">
<div class="dmiux_checkbox">
<input type="checkbox" value="1" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Name</div>
</div>
<div class="dmiux_checkbox">
<input type="checkbox" value="2" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Description</div>
</div>
<div class="dmiux_checkbox">
<input type="checkbox" value="3" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Value</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var dtTbl = $('#dmiux_data-table').DataTable();
$('#dmiux_data-table__settings input').on('change', function() {
dtTbl.column($(this).val()).visible($(this).prop('checked'));
});
});
</script>
Legacy table
Customised DataTables plugin is using for the advanced tables.
|
|
Name | Description | Value |
|---|---|---|---|
|
|
A1471 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | $355.49 |
|
|
Y3820 | Excepteur sint occaecat cupidatat non proident mollit anim id est laborum. | $36.90 |
|
|
G8602 | Sunt in culpa qui officia deserunt mollit anim id est laborum. | $377.13 |
Name
Description
Value
<div class="dmiux_data-table">
<div class="dmiux_data-table__cont">
<table id="dmiux_data-table" class="dmiux_data-table__table">
<thead>
<tr>
<th>
<div class="dmiux_data-table__actions">
<button type="button" class="dmiux_data-table__cog"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFF" d="M13.3 5.2l1.1-2.1L13 1.7l-2.1 1.1c-.3-.2-.7-.3-1.1-.4L9 0H7l-.8 2.3c-.3.1-.7.2-1 .4L3.1 1.6 1.6 3.1l1.1 2.1c-.2.3-.3.7-.4 1L0 7v2l2.3.8c.1.4.3.7.4 1.1L1.6 13 3 14.4l2.1-1.1c.3.2.7.3 1.1.4L7 16h2l.8-2.3c.4-.1.7-.3 1.1-.4l2.1 1.1 1.4-1.4-1.1-2.1c.2-.3.3-.7.4-1.1L16 9V7l-2.3-.8c-.1-.3-.2-.7-.4-1zM8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg></button>
</div>
</th>
<th>Name</th>
<th>Description</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dmiux_data-table__actions">
<div class="dmiux_actionswrap--edit" data-toggle="tooltip" title="Edit"></div>
<div class="dmiux_actionswrap--cancel" data-toggle="tooltip" title="Cancel"></div>
<div class="dmiux_actionswrap--save" data-toggle="tooltip" title="Save"></div>
<div class="dmiux_actionswrap--bin" data-toggle="tooltip" title="Delete"></div>
</div>
</td>
<td class="dmiux_fw600">A1471</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
<td>$355.49</td>
</tr>
<tr>
<td>
<div class="dmiux_data-table__actions">
<div class="dmiux_actionswrap--edit" data-toggle="tooltip" title="Edit"></div>
<div class="dmiux_actionswrap--cancel" data-toggle="tooltip" title="Cancel"></div>
<div class="dmiux_actionswrap--save" data-toggle="tooltip" title="Save"></div>
<div class="dmiux_actionswrap--bin" data-toggle="tooltip" title="Delete"></div>
</div>
</td>
<td class="dmiux_fw600">Y3820</td>
<td>Excepteur sint occaecat cupidatat non proident mollit anim id est laborum.</td>
<td>$36.90</td>
</tr>
<tr>
<td>
<div class="dmiux_data-table__actions">
<div class="dmiux_actionswrap--edit" data-toggle="tooltip" title="Edit"></div>
<div class="dmiux_actionswrap--cancel" data-toggle="tooltip" title="Cancel"></div>
<div class="dmiux_actionswrap--save" data-toggle="tooltip" title="Save"></div>
<div class="dmiux_actionswrap--bin" data-toggle="tooltip" title="Delete"></div>
</div>
</td>
<td class="dmiux_fw600">G8602</td>
<td>Sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td>$377.13</td>
</tr>
</tbody>
</table>
<button type="button" class="dmiux_data-table__arrow dmiux_data-table__arrow_left"><i></i></button>
<button type="button" class="dmiux_data-table__arrow dmiux_data-table__arrow_right"><i></i></button>
<div id="dmiux_data-table__settings" class="dmiux_data-table__settings">
<div class="dmiux_checkbox">
<input type="checkbox" value="1" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Name</div>
</div>
<div class="dmiux_checkbox">
<input type="checkbox" value="2" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Description</div>
</div>
<div class="dmiux_checkbox">
<input type="checkbox" value="3" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Value</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var dtTbl = $('#dmiux_data-table-legacy').DataTable();
$('#dmiux_data-table-legacy__settings input').on('change', function() {
dtTbl.column($(this).val()).visible($(this).prop('checked'));
});
});
</script>
Popups
A popup displays content that temporarily blocks interactions with the main view of a site.
Default popup
Default popup window contains title, content and footer sections.
<div class="grid-row">
<div class="grid-col grid-col_auto">
<button type="button" data-popup-open="#dmiux_popup" class="dmiux_button">Open popup</button>
</div>
</div>
<div id="dmiux_popup" class="dmiux_popup">
<div class="dmiux_popup__window">
<div class="dmiux_popup__head">
<div class="dmiux_popup__title">Popup Title</div>
<button type="button" class="dmiux_popup__close"></button>
</div>
<div class="dmiux_popup__cont">
<label class="dmiux_popup__label">Label</label>
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
<label class="dmiux_popup__label">Another Label</label>
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
</div>
<div class="dmiux_popup__foot">
<div class="dmiux_grid-row">
<div class="dmiux_grid-col"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<button type="button" class="dmiux_button dmiux_button_lg">Submit</button>
</div>
</div>
</div>
</div>
</div>
Large popup
<div class="grid-row">
<div class="grid-col grid-col_auto">
<button type="button" data-popup-open="#dmiux_popup_lg" class="dmiux_button">Open popup</button>
</div>
</div>
<div id="dmiux_popup_lg" class="dmiux_popup">
<div class="dmiux_popup__window dmiux_popup__window_lg">
<div class="dmiux_popup__head">
<div class="dmiux_popup__title">Popup Title</div>
<button type="button" class="dmiux_popup__close"></button>
</div>
<div class="dmiux_popup__cont">
<label class="dmiux_popup__label">Label</label>
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
<label class="dmiux_popup__label">Another Label</label>
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
</div>
<div class="dmiux_popup__foot">
<div class="dmiux_grid-row">
<div class="dmiux_grid-col"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<button type="button" class="dmiux_button dmiux_button_lg">Submit</button>
</div>
</div>
</div>
</div>
</div>
Cards
Cards uses slick plugin to transform into the carousel on small devices.
Heading
| Label | Value |
| Label | Value |
Heading
| Label | Value |
| Label | Value |
| Label | Value |
Heading
| Label | Value |
| Label | Value |
| Label | Value |
Heading
| Label | Value |
| Label | Value |
| Label | Value |
Heading
| Label | Value |
| Label | Value |
| Label | Value |
<div class="dmiux_cards">
<div id="dmiux_cards__row" class="dmiux_cards__row dmiux_grid-row">
<div class="dmiux_cards__col dmiux_grid-col">
<div class="dmiux_cards__item">
<div class="dmiux_cards__heading">Heading</div>
<table class="dmiux_cards__table">
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<div class="dmiux_cards__col dmiux_grid-col">
<div class="dmiux_cards__item">
<div class="dmiux_cards__heading">Heading</div>
<table class="dmiux_cards__table">
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<div class="dmiux_cards__col dmiux_grid-col">
<div class="dmiux_cards__item">
<div class="dmiux_cards__heading">Heading</div>
<table class="dmiux_cards__table">
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<div class="dmiux_cards__col dmiux_grid-col">
<div class="dmiux_cards__item">
<div class="dmiux_cards__heading">Heading</div>
<table class="dmiux_cards__table">
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<div class="dmiux_cards__col dmiux_grid-col">
<div class="dmiux_cards__item">
<div class="dmiux_cards__heading">Heading</div>
<table class="dmiux_cards__table">
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
<tr>
<td>Label</td>
<td class="dmiux_color_invalid">Value</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var crdsRwSttngs = {
arrows: false,
dots: true,
infinite: false,
dotsClass: 'dmiux_cards__dots',
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: true,
mobileFirst: true,
responsive: [
{
breakpoint: 1365,
settings: 'unslick'
},
{
breakpoint: 1279,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 1023,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
}
var crdsRw = $('#dmiux_cards__row').slick(crdsRwSttngs);
$(window).on('resize', function() {
if( $(window).width() < 1366 && !crdsRw.hasClass('slick-initialized')) {
$('#dmiux_cards__row').slick(crdsRwSttngs);
}
});
});
</script>
Tabs
Default tabs
Tabs can be used as a stand-alone component or as a part of the popup or block.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
<div class="dmiux_htabs dmiux_noscrollbar">
<button type="button" data-tab-open="#dmiux_htab-1" class="dmiux_htabs__item dmiux_active">Tab item 1</button>
<button type="button" data-tab-open="#dmiux_htab-2" class="dmiux_htabs__item">Tab item 2</button>
<button type="button" data-tab-open="#dmiux_htab-3" class="dmiux_htabs__item">Tab item 3</button>
</div>
<div>
<div id="dmiux_htab-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="dmiux_htab-2" class="dmiux_removed">
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>
<div id="dmiux_htab-3" class="dmiux_removed">
<p>Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>
</div>
Tabs with counters
Each tab item can contain a counter.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
<div class="dmiux_htabs dmiux_noscrollbar">
<button type="button" data-tab-open="#dmiux_htab-1" class="dmiux_htabs__item dmiux_active">Tab item 1</button>
<button type="button" data-tab-open="#dmiux_htab-2" class="dmiux_htabs__item">Tab item 2</button>
<button type="button" data-tab-open="#dmiux_htab-3" class="dmiux_htabs__item">Tab item 3</button>
</div>
<div>
<div id="dmiux_htab-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="dmiux_htab-2" class="dmiux_removed">
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>
<div id="dmiux_htab-3" class="dmiux_removed">
<p>Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>
</div>
Vertical tabs
Vertical layout has a settings dropdown to show/hide different menu items. On resolutions below 1024px menu transforms to horizontal layout with "overflow:auto" property.
Menu
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
<div class="dmiux_block">
<div class="dmiux_grid-row">
<div class="dmiux_grid-col dmiux_grid-col_3">
<div class="dmiux_vtabs">
<div class="dmiux_vtabs__head">
<div class="dmiux_vtabs__title">Menu</div>
<button type="button" class="dmiux_vtabs__cog"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFF" d="M13.3 5.2l1.1-2.1L13 1.7l-2.1 1.1c-.3-.2-.7-.3-1.1-.4L9 0H7l-.8 2.3c-.3.1-.7.2-1 .4L3.1 1.6 1.6 3.1l1.1 2.1c-.2.3-.3.7-.4 1L0 7v2l2.3.8c.1.4.3.7.4 1.1L1.6 13 3 14.4l2.1-1.1c.3.2.7.3 1.1.4L7 16h2l.8-2.3c.4-.1.7-.3 1.1-.4l2.1 1.1 1.4-1.4-1.1-2.1c.2-.3.3-.7.4-1.1L16 9V7l-2.3-.8c-.1-.3-.2-.7-.4-1zM8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path></svg></button>
</div>
<div class="dmiux_vtabs__cont dmiux_noscrollbar">
<button type="button" data-tab-open="#dmiux_tab-1" class="dmiux_vtabs__item dmiux_active">Tab item 1</button>
<button type="button" data-tab-open="#dmiux_tab-2" class="dmiux_vtabs__item">Tab item 2</button>
<button type="button" data-tab-open="#dmiux_tab-3" class="dmiux_vtabs__item">Tab item 3</button>
</div>
<div class="dmiux_vtabs__settings dmiux_scrollbar">
<div class="dmiux_checkbox">
<input type="checkbox" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Tab item 1</div>
</div>
<div class="dmiux_checkbox">
<input type="checkbox" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Tab item 2</div>
</div>
<div class="dmiux_checkbox">
<input type="checkbox" checked class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Tab item 3</div>
</div>
</div>
</div>
</div>
<div class="dmiux_grid-col">
<div id="dmiux_tab-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="dmiux_tab-2" class="dmiux_removed">
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>
<div id="dmiux_tab-3" class="dmiux_removed">
<p>Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
</div>
</div>
</div>
</div>
Milestones
Tabs can be used to display milestones.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
Tooltips
Tooltips rely on the 3rd party library Tooltipster, can be applied to any element on the page and have 4 different position options.
<div data-tooltip-pos="top" data-tooltip-content="<div>Top position</div>" class="dmiux_input dmiux_input_size10">
<input type="text" maxlength="10" class="dmiux_input__input">
</div>
<div data-tooltip-pos="right" data-tooltip-content="<div>Right position</div>" class="dmiux_input dmiux_input_size10">
<input type="text" maxlength="10" class="dmiux_input__input">
</div>
<div data-tooltip-pos="bottom" data-tooltip-content="<div>Bottom position</div>" class="dmiux_input dmiux_input_size10">
<input type="text" maxlength="10" class="dmiux_input__input">
</div>
<div data-tooltip-pos="left" data-tooltip-content="<div>Left position</div>" class="dmiux_input dmiux_input_size10">
<input type="text" maxlength="10" class="dmiux_input__input">
</div>
Drag and Drop
Drag & drop rely on the jQuery UI library.
Editable form
Forms can have manageable fields that can be reordered or removed.
<div class="dmiux_block dmiux_account">
<form action="#" id="dmiux_account__form" class="dmiux_account__form dmiux_account__form_editable">
<div class="dmiux_grid-row dmiux_grid-row_nog">
<div id="dmiux_account__col_left" class="dmiux_account__col dmiux_grid-col dmiux_grid-col_6 dmiux_grid-col_lg-12">
<div class="dmiux_account__item">
<div class="dmiux_grid-row dmiux_grid-row_sm dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs-12">
<label for="first-name" class="dmiux_account__label">First Name</label>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_input dmiux_input_size5">
<input type="text" placeholder="Prefix" class="dmiux_input__input">
</div>
</div>
<div class="dmiux_grid-col">
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
</div>
</div>
<div class="dmiux_account__button dmiux_account__button_move"></div>
<button type="button" tabindex="-1" class="dmiux_account__button dmiux_account__button_remove"></button>
</div>
<div class="dmiux_account__item">
<div class="dmiux_grid-row dmiux_grid-row_sm dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs-12">
<label for="last-name" class="dmiux_account__label">Last Name</label>
</div>
<div class="dmiux_grid-col">
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_input dmiux_input_size5">
<input type="text" placeholder="Suffix" class="dmiux_input__input">
</div>
</div>
</div>
<div class="dmiux_account__button dmiux_account__button_move"></div>
<button type="button" tabindex="-1" class="dmiux_account__button dmiux_account__button_remove"></button>
</div>
</div>
<div id="dmiux_account__col_right" class="dmiux_account__col dmiux_grid-col dmiux_grid-col_6 dmiux_grid-col_lg-12">
<div id="dmiux_account__item_company-name" class="dmiux_account__item">
<div class="dmiux_grid-row dmiux_grid-row_sm dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs-12">
<label for="company-name" class="dmiux_account__label">Company</label>
</div>
<div class="dmiux_grid-col">
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
</div>
</div>
<div class="dmiux_account__button dmiux_account__button_move"></div>
<button type="button" tabindex="-1" class="dmiux_account__button dmiux_account__button_remove"></button>
</div>
<div id="dmiux_account__item_city" class="dmiux_account__item">
<div class="dmiux_grid-row dmiux_grid-row_sm dmiux_grid-row_aic">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs-12">
<label for="city" class="dmiux_account__label">City</label>
</div>
<div class="dmiux_grid-col">
<div class="dmiux_input">
<input type="text" class="dmiux_input__input">
</div>
</div>
</div>
<div class="dmiux_account__button dmiux_account__button_move"></div>
<button type="button" tabindex="-1" class="dmiux_account__button dmiux_account__button_remove"></button>
</div>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function() {
$('#dmiux_account__col_left, #dmiux_account__col_right').sortable({
connectWith: '.dmiux_account__col',
handle: '.dmiux_account__button_move',
placeholder: "dmiux_account__item_placeholder"
});
$('.dmiux_account__button_remove').on('click', function() {
var itm = $(this).closest('.dmiux_account__item');
itm.addClass('dmiux_removed');
$('#dmiux_account__edit-fields input[data-target="#'+itm.attr('id')+'"]').prop('checked', false);
});
});
</script>
Query Summary
Query Summary block manages by 2 functions that adding and removing criteria. These functions are called when user changes any query parameter (input, select, checkbox, flag).
Add criteria function
The addQuerySummaryItem(id, tbNm, lbl, dtTp, excld) function accepts 5 arguments:
- id - unique identifier of the query parameter
- tbNm - name of the active tab
- lbl - label/name of the query parameter
- dtTp - data type (input, select, checkbox or flag)
- excld - set to
trueif parameter must be exluded
function addQuerySummaryItem(id, tbNm, lbl, dtTp, excld) {
var itm = $('.dmiux_query-summary__item[data-id="'+id+'"]');
if ($('.dmiux_query-summary__item[data-id="'+id+'"]').length) {
removeQuerySummaryItem(id);
}
if (excld) {
$('#dmiux_query-summary__group_'+tbNm+'-exclude').addClass('dmiux_query-summary__group_visible').append('<div data-id="'+id+'" data-type="'+dtTp+'" class="dmiux_query-summary__item"><button type="button" class="dmiux_query-summary__clear"></button><div class="dmiux_query-summary__caption">'+lbl+'</div></div>');
}
else {
$('#dmiux_query-summary__group_'+tbNm+'-include').addClass('dmiux_query-summary__group_visible').append('<div data-id="'+id+'" data-type="'+dtTp+'" class="dmiux_query-summary__item"><button type="button" class="dmiux_query-summary__clear"></button><div class="dmiux_query-summary__caption">'+lbl+'</div></div>');
}
increaseTabCounter(tbNm);
}
Remove criteria function
The removeQuerySummaryItem(id) function accepts only one argument:
- id - unique identifier of the query parameter
function removeQuerySummaryItem(id) {
var itm = $('.dmiux_query-summary__item[data-id="'+id+'"]');
if (!$('.dmiux_query-summary__item[data-id="'+id+'"]').length) {
return false;
}
decreaseTabCounter(itm.closest('.dmiux_query-summary__group').data('tab-name'));
if(!itm.siblings('.dmiux_query-summary__item').length) {
itm.parent().removeClass('dmiux_query-summary__group_visible');
}
itm.remove();
}
Labels and values
Each input, select and checkbox has a data-query-summary-label attribute and after the element was changed the label combines with the value and populates the query summary item.
to
to
Exclude
Include APOs/FPOs
Exclude
<div id="dmiux_query-form__row_date-range" class="dmiux_query-form__row">
<div class="dmiux_grid-row dmiux_grid-row_aic dmiux_grid-row_nog">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_sm-12">
<label for="" class="dmiux_query-form__label">Date Range</label>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs">
<div class="dmiux_query-form__input dmiux_query-form__input_sm dmiux_input">
<input type="text" data-query-summary-label="Transactions from " class="dmiux_input__input dmiux_input__input_date">
<div class="dmiux_input__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12"><path fill="currentColor" d="M11 2h-1V0H8v2H4V0H2v2H1c-.552285 0-1 .4477153-1 1v8c0 .5522847.447715 1 1 1h10c.552285 0 1-.4477153 1-1V3c0-.5522847-.447715-1-1-1zm-1 8H2V5h8v5z"></path></svg></div>
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_query-form__to">to</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs">
<div class="dmiux_query-form__input dmiux_query-form__input_sm dmiux_input">
<input type="text" data-query-summary-label=" to " class="dmiux_input__input dmiux_input__input_date">
<div class="dmiux_input__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12"><path fill="currentColor" d="M11 2h-1V0H8v2H4V0H2v2H1c-.552285 0-1 .4477153-1 1v8c0 .5522847.447715 1 1 1h10c.552285 0 1-.4477153 1-1V3c0-.5522847-.447715-1-1-1zm-1 8H2V5h8v5z"></path></svg></div>
</div>
</div>
</div>
</div>
<div id="dmiux_query-form__row_batch-description" class="dmiux_query-form__row">
<div class="dmiux_grid-row dmiux_grid-row_aic dmiux_grid-row_nog">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_sm-12">
<label for="" class="dmiux_query-form__label">Batch Description</label>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs">
<div class="dmiux_query-form__input dmiux_input">
<input type="text" data-query-summary-label="Batch descriptions that begin with " class="dmiux_input__input">
</div>
</div>
</div>
</div>
<div id="dmiux_query-form__row_latest-date-month-range" class="dmiux_query-form__row">
<div class="dmiux_grid-row dmiux_grid-row_aic dmiux_grid-row_nog">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_sm-12">
<label for="" class="dmiux_query-form__label">Latest Date Month Range</label>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs">
<div class="dmiux_query-form__input dmiux_query-form__input_sm dmiux_select">
<select data-query-summary-label="Latest Date Month Range " class="dmiux_select__select">
<option value=""></option>
<option value="01 - Jan">01 - Jan</option>
<option value="02 - Feb">02 - Feb</option>
<option value="03 - Mar">03 - Mar</option>
<option value="04 - Apr">04 - Apr</option>
<option value="05 - May">05 - May</option>
<option value="06 - Jun">06 - Jun</option>
<option value="07 - Jul">07 - Jul</option>
<option value="08 - Aug">08 - Aug</option>
<option value="09 - Sep">09 - Sep</option>
<option value="10 - Oct">10 - Oct</option>
<option value="11 - Nov">11 - Nov</option>
<option value="12 - Dec">12 - Dec</option>
</select>
<div class="dmiux_select__arrow"></div>
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_query-form__to">to</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_xs">
<div class="dmiux_query-form__input dmiux_query-form__input_sm dmiux_select">
<select data-query-summary-label=" to " class="dmiux_select__select">
<option value=""></option>
<option value="01 - Jan">01 - Jan</option>
<option value="02 - Feb">02 - Feb</option>
<option value="03 - Mar">03 - Mar</option>
<option value="04 - Apr">04 - Apr</option>
<option value="05 - May">05 - May</option>
<option value="06 - Jun">06 - Jun</option>
<option value="07 - Jul">07 - Jul</option>
<option value="08 - Aug">08 - Aug</option>
<option value="09 - Sep">09 - Sep</option>
<option value="10 - Oct">10 - Oct</option>
<option value="11 - Nov">11 - Nov</option>
<option value="12 - Dec">12 - Dec</option>
</select>
<div class="dmiux_select__arrow"></div>
</div>
</div>
<div class="dmiux_grid-col dmiux_grid-col_xs-12"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_query-form__exclude dmiux_query-form__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__label">Exclude</div>
<div class="dmiux_checkbox__check"></div>
</div>
</div>
</div>
</div>
<div class="dmiux_query-form__row">
<div class="dmiux_grid-row dmiux_grid-row_nog">
<div class="dmiux_grid-col dmiux_grid-col_auto dmiux_grid-col_sm-12">
<label for="" class="dmiux_query-form__label">APOs/FPOs</label>
</div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_query-form__checkbox dmiux_checkbox">
<input type="checkbox" data-query-summary-label="Include APOs/FPOs" id="dmiux_checkbox__input_include-apos-fpos" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__check"></div>
<div class="dmiux_checkbox__label">Include APOs/FPOs</div>
</div>
</div>
<div class="dmiux_grid-col"></div>
<div class="dmiux_grid-col dmiux_grid-col_auto">
<div class="dmiux_query-form__exclude dmiux_query-form__checkbox dmiux_checkbox">
<input type="checkbox" class="dmiux_checkbox__input">
<div class="dmiux_checkbox__label">Exclude</div>
<div class="dmiux_checkbox__check"></div>
</div>
</div>
</div>
</div>