HTML Structure
We use Jekylland Liquid templating language to process templates. Here is a list of components that are found on most pages:
- _layouts/defaults.htm: It is used for layout structure for all main pages. It contains all base components to construct its skeleton
- _includes/base/head.html: Used as HTML head that contains page titles, meta info, and CSS and JS file includes
- _includes/base/header.html: Page's topbar/header component
- _includes/base/left-sidebar.html: Page's left sidebar navigation component
- _includes/base/right-sidebar.html: Page's right sidebar component
- _includes/base/footer.html: Page's footer component
- _includes/base/script.html: This component contains al JS file includes
Using UI Elements
We have many ready to use UI elements with detailed documentation. You can explore and use these by visiting UI Elements
page in the Left Sidebar. Such as Alert, Card, Modaletc.
Customizing Style
There are 2 basic ways to customize your theme...
-
Compiled CSS: If you want to use Sleek Dashboard "as is", or only need limited customization, feel free to simply include the compiled
sleek.css
orsleek.min.css
file located in thedist/assets/css
directory. -
Customizing SCSS: This is more versatile and sustainable way to customize Sleek Dashboard. The 2 major benefits of this strategy are using variable overrides (
_variables.scss
) to easily customize theme styles, plus you never have to touch Bootstrap source, meaning future updates will be much, much, simpler.