HTML Structure

We use Jekyll and 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, Modal etc.

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 or sleek.min.css file located in the dist/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.