sidebar-skeleton-compostrap

Simple and fast sidebar skeleton on Bootstrap

Usage no npm install needed!

<script type="module">
  import sidebarSkeletonCompostrap from 'https://cdn.skypack.dev/sidebar-skeleton-compostrap';
</script>

README

logo

Compostrap

Simple and fast components build on Bootstrap

Sidebar skeleton

Simple and fast sidebar skeleton.

License: MIT npm version Build Status CodeFactor

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
#ffffff sidebar-bg-white
#f8f9fa sidebar-bg-light
#212529 sidebar-bg-dark
#007bff sidebar-bg-blue
#6f42c1 sidebar-bg-purple
#e83e8c sidebar-bg-pink
#dc3545 sidebar-bg-red
#fd7e14 sidebar-bg-orange
#28a745 sidebar-bg-green
#20c997 sidebar-bg-teal
#17a2b8 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