sidebar-skeleton-compostrap
v2.0.8
Published
Simple and fast sidebar skeleton on Bootstrap
Downloads
50
Readme
Sidebar skeleton
Simple and fast sidebar skeleton.
Installation
npm install --save sidebar-skeleton-compostrap
Version 1x built on Bootstrap 4
Version 2x built on Bootstrap 5
Built on
Demo
https://compostrap.github.io/skeleton
Introduction
Simple and fast sidebar skeleton is build on Bootstrap. So you should be aware of how Bootstrap itself is used. The advantage is also knowledge of sass, npm, grunt.
See the html template code
https://raw.githubusercontent.com/compostrap/sidebar-skeleton/master/demo.html
Customize sidebar when navbar is used
When we use navbar, we extend the class called wrapper
| Navbar | Class |
| ------------ | ---------------------- |
| unused | wrapper
|
| Used | wrapper-navbar-used
|
| Used (fixed) | wrapper-navbar-fixed
|
Other class
Optional classes as needed.
| Description | Class |
| ---------------------------- | --------------------------- |
| Right top rounded in sidebar | sidebar-rounded-top-right
|
| Fixed menu in sidebar | sidebar-menu-fixed
|
Overview of sidebar background colors
Colors are the same as bootstrap. Add more colors in colors.scss
| Color | Class |
| --------------------------------------------------------------- | ------------------- |
| | sidebar-bg-white
|
| | sidebar-bg-light
|
| | sidebar-bg-dark
|
| | sidebar-bg-blue
|
| | sidebar-bg-purple
|
| | sidebar-bg-pink
|
| | sidebar-bg-red
|
| | sidebar-bg-orange
|
| | sidebar-bg-green
|
| | sidebar-bg-teal
|
| | sidebar-bg-cyan
|
jQuery toggle
If you would like to have your own toggle button visible at all resolutions, we need to change the class in sidebar.js
| Description | Class |
| ------------------------ | ------------------------ |
| Visible in small devices | sidebar-toggle
|
| Visible all resolutions | sidebar-toggle-visible
|