Layouts & Theme
Classes related to layouts
This section covers the documentation about the classes which builds the layout or could be used to customize the layout as per your need.
The following classes could be applied to <body> tag to achieve the desired layout for your project:
/* Layout Related Classes
-------------------------------- */
/* Below is a unique class for default layout. For other layouts,
you can replace default (after --) with the name of those layouts.
for example .dt-layout--crm */
.dt-layout--default
/* Sidebar Related Classes (Only for layouts with sidebar)
-------------------------------- */
/* To fix the sidebar */
.dt-sidebar--fixed
/* To make the sidebar folded */
.dt-sidebar--folded
/* To expend the sidebar
(Drift uses this on on-hover event when the sidebar is in folded mode) */
.dt-sidebar--expended
/* Header Related Classes (Only for default layouts)
-------------------------------- */
/* To fix the header */
.dt-header--fixed
/* Framing Related Classes
--------------------------------- */
/* To make the framing fluid */
.dt-layout--full-width
/* To make the framing covered from all four sides */
.dt-layout--framed
/* To make the framing in boxed style (or fixed width) */
.dt-layout--boxed
/* Theme Related Classes (only for default layout)
---------------------------------- */
/* To apply the semi-dark theme */
.theme-semidark
/* To apply the light theme */
.theme-light
/* To apply the dark theme */
.theme-dark
The following classes are related to the layouts with drawer and will be applied to sidebar:
/* to convert the sidebar into drawer */
.dt-drawer
/* To switch the drawer position either right or left */
.position-right
.position-left
Last modified 3yr ago