The DHTMLX library provides a set of CSS classes that you can add to HTML elements to style them in your web project outside DHTMLX widgets.
The principle of these CSS classes' naming is based on the BEM methodology.
Therefore, a class name includes three parts:
Block names and element names are separated by a double underscore: block__element.
Block and elements' names are separated from modifier names by a double hyphen: block--modifier, block__element--modifier.
The 'dhx' prefix is used at the beginning of all class names in the DHTMLX library
| dhx_form-group | Use this class to apply the same formatting to different HTML elements at once. It includes modifiers for manipulating the appearance and state of a layout. |
| dhx_form-group--no-message-holder | Removes the bottom margin where a text for a premessage could be placed |
| dhx_form-group--disabled | A form-group has a disabled state. It can't be activated (selected, clicked on, typed into) or accept focus. |
| dhx_form-group--hidden | Hides a form group visually |
| dhx_form-group--required | Adds the required mark to a label inside a form group |
| dhx_form-group--state_error | Marks the content of input/label red. Indicates error |
| dhx_form-group--state_success | Marks the content of input/label green. Indicates success |
| dhx_form-group--label_sr | Hides a label inside a form group visually |
| dhx_form-group--inline | Puts a label and an input in one line |
| dhx_form-group--textarea | Add this class to the form group, which contains a <textarea> element, to style it |
Here's what markup looks like using a form-group example:
<!-- Form-group block -->
<div class="dhx_form-group ">
<!-- Label block -->
<label for="input" class="dhx_label ">I am label</label>
<!-- 'wrapper' element in the 'input' block-->
<div class="dhx_input__wrapper">
<!-- 'container' element in the 'input' block-->
<div class="dhx_input__container">
<!-- Style the input-->
<input id="input"
placeholder="I am input"
class="dhx_input"
autocomplete="off"
>
</div>
</div>
</div>
| dhx_button | Add this class to a <button> element to reset/normalize default browser styles. |
| dhx_button__icon | Container for an icon |
| dhx_button__text | Container for button text/value |
| dhx_button__loading | Use this class to create a container for the loading mode |
| dhx_button__loading-icon | Use this class together with the "dhx_button__loading" class to create an icon container for the loading mode |
| dhx_button--circle | Use this class either to add rounded corners to a button with value or to create a circular button that contains only an icon |
| dhx_button--width_full | Add this class to adjust the width of a button to the width of its container |
| dhx_button--disabled | Use this class to change the button view to disabled. Instead of this class you can add the *disabled* attribute. |
| dhx_button--loading | Apply the *loading* modifier to switch the button to the loading state. Both the "dhx_button__loading" and "dhx_button__loading-icon" elements must be applied. |
| dhx_button--size_small | Use this class to add a small button |
| dhx_button--size_medium | Use this class to add a medium button |
| dhx_button--view_flat | Use this class to create a flat button |
| dhx_button--view_link | Use this class to create a link button |
| dhx_button--color_primary | Blue button (#0288d1). Use this modifier together with the 'view' modifier |
| dhx_button--color_secondary | Gray button (#4d4d4d). Use this modifier together with the 'view' modifier |
| dhx_button--color_danger | Red button (#ff5252). Use this modifier together with the 'view' modifier |
| dhx_button--color_success | Green button (#0ab169). Use this class together with the 'view' modifier |
Here is an example how you can specify a markup for a button:
<!-- Create a link button with red color-->
<button type="button"
class="dhx_button dhx_button--color_danger dhx_button--view_link">
<!-- The button has the "plus" icon-->
<span class="dhx_button__icon dxi dxi-plus"></span>
<!-- The "Send text" button-->
<span class="dhx_button__text">Send</span>
</button>
| dhx_label | Add this class to a <label> element inside a form group to style it |
You can style a < label > element, as in:
<label for="element-id" class="dhx_label">Email</label>
| dhx_checkbox | Add this class to the "dhx_form-group" class inside a <label> element to create a label for a checkbox. |
| dhx_checkbox__input | Add this class to the <input type='checkbox'> element to hide a native browser checkbox but save its behavior |
| dhx_checkbox__visual-input | Add this class to a <span> element to display a checkbox with its native browser behavior visually |
You can change the appearance of a native browser checkbox by using a markup given below:
<!-- Create a label for a checkbox
and put it and an input in one line inside the form-group-->
<label class="dhx_form-group dhx_checkbox dhx_form-group--inline"
style="margin-left: calc(116px);">
<!-- Hide a native browser checkbox but save its behavior-->
<input type="checkbox" class="dhx_checkbox__input">
<!-- Display the checkbox with its native browser behavior visually-->
<span class="dhx_checkbox__visual-input"></span>
<!-- Style the checkbox label-->
<span class="dhx_label ">I am checkbox</span>
</label>
| dhx_radiobutton | Add this class to the "dhx_form-group" class inside a <label> element to create a label for a radiobutton. |
| dhx_radiobutton__input | Add this class to the <input type='radiobutton'> element to hide a native browser radiobutton but save its behavior |
| dhx_radiobutton__visual-input | Add this class to a <span> element to display a radiobutton with its native browser behavior visually |
You can apply a markup to style a radiobutton, like this:
<!-- Create a label for a radiobutton
and put it and an input in one line inside the form-group-->
<label class="dhx_form-group dhx_radiobutton dhx_form-group--inline"
style="margin-left: calc(116px);">
<!-- Hide a native browser radiobutton but save its behavior-->
<input type="radiobutton" class="dhx_radiobutton__input">
<!-- Display the radiobutton with its native browser behavior visually-->
<span class="dhx_radiobutton__visual-input"></span>
<!-- Style the radiobutton label-->
<span class="dhx_label ">I am radiobutton</span>
</label>
| dhx_input | Add this class to an <input type='text'> element to style it |
| dhx_input__wrapper | Wrapper for an input container and caption |
| dhx_input__container | Container for an input with icon |
| dhx_input__icon | Container for an input icon |
| dhx_input__caption | Container for an input caption |
| dhx_input--icon-padding | Apply this class to create a special padding inside an input where an icon will be placed |
| dhx_input--textarea | Apply this class to style a <textarea> element |
| dhx_input--textinput | Removes all borders from an <input> element |
An example of the input markup is given below:
<!-- Create a form-group and put an input and its label in one line-->
<div class="dhx_form-group dhx_form-group--inline">
<!-- Create the label for the input and style it-->
<label for="input" class="dhx_label"
style="min-width: 100px; max-width: 100px;">I am label</label>
<!-- Create a wrapper for the input container inside form-group -->
<div class="dhx_input__wrapper">
<!-- Create the container for the input with icon-->
<div class="dhx_input__container">
<!-- Put the "dxi-magnify" icon into the container-->
<div class="dhx_input__icon dxi dxi-magnify"></div>
<!-- Create the input with the padding for the icon-->
<input id="input" placeholder="I am input" name=""
class="dhx_input dhx_input--icon-padding" autocomplete="off">
</div>
<!--Create "Message text" caption -->
<span class="dhx_input__caption">Message text</span>
</div>
</div>
The markup of select looks like this:
<!-- Create a form-group and put an input and its label in one line-->
<div class="dhx_form-group dhx_form-group--inline">
<!-- Create the label for the select and style it-->
<label for="select_id" class="dhx_label"
style="min-width: 100px; max-width: 100px;">select</label>
<!-- Create the wrapper for the input container inside form-group -->
<div class="dhx_input__wrapper">
<!-- Create the container for the input with icon-->
<div class="dhx_input__container">
<!-- Put the "dxi-menu-down" icon into the container-->
<span class="dhx_input__icon dxi dxi-menu-down"></span>
<select id="select_id" >
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!--Create "Choose the number 5" caption -->
<span class="dhx_input__caption">Choose the number 5</span>
</div>
</div>
The DHTMLX library also provides you with a set of CSS classes that you can apply to change look and feel of DHTMLX widgets.
| dhx_widget--bg_white | Sets white background to a widget |
| dhx_widget--bg_gray | Sets gray background to a widget |
| dhx_widget--bordered | Sets borders on all sides of a widget |
| dhx_widget--border_top | Sets a border on the top side of a widget |
| dhx_widget--border_bottom | Sets a border on the bottom side of a widget |
| dhx_widget--border_left | Sets a border on the left side of a widget |
| dhx_widget--border_right | Sets a border on the right side of a widget |
| dhx_widget--border-shadow | Adds a shadow border to a widget |
| dhx_widget--no-border_top | Removes the top border of a widget |
| dhx_widget--no-border_bottom | Removes the bottom border of a widget |
| dhx_widget--no-border_right | Removes the right border of a widget |
| dhx_widget--no-border_left | Removes the left border of a widget |
Here is an example of Ribbon customization:
var ribbon = new dhx.Ribbon({
css:"dhx_widget--bg_white"
});
| dhx_layout-cell--bg_white | Sets white background to a layout-cell |
| dhx_layout-cell--bg_gray | Sets gray background to a layout-cell |
| dhx_layout-cell--bordered | Sets borders on all sides of a layout-cell |
| dhx_layout-cell--border_top | Sets a border on the top side of a layout-cell |
| dhx_layout-cell--border_bottom | Sets a border on the bottom side of a layout-cell |
| dhx_layout-cell--border_left | Sets a border on the left side of a layout-cell |
| dhx_layout-cell--border_right | Sets a border on the right side of a layout-cell |
| dhx_layout-cell--border-shadow | Adds a shadow border to a layout-cell |
| dhx_layout-cell--no-border_top | Removes the top border of a layout-cell |
| dhx_layout-cell--no-border_bottom | Removes the bottom border of a layout-cell |
| dhx_layout-cell--no-border_right | Removes the right border of a layout-cell |
| dhx_layout-cell--no-border_left | Removes the left border of a layout-cell |
An example of customization of a Layout cell is given below:
var layout = new dhx.Layout("layout", {
css: "dhx_layout-cell--bordered",
rows: [{
id: "toolbar",
html: "Header",
css: "dhx_layout-cell--border_bottom layout-header",
gravity: false,
height: "60px"
}]
});