8000 GitHub - csseditor/sidebar-style-guide: Sidebar style guide (CSS and Sass)
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

csseditor/sidebar-style-guide

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
dist
dist
 
 
sass
sass
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
gulpfile.js
gulpfile.js
 
 
package.json
package.json
 
 

Repository files navigation

sidebar-style-guide

npm version

A style guide (CSS and Sass) providing a convenient base for styling common sidebar/drawer elements like menus, brand, etc.

This package complements the drawer component from material-design-kit.

Installation

Install sidebar-style-guide via npm.

npm install sidebar-style-guide

Usage

// Customize variables
$sidebar-font-size: 16px !default;

@import 'node_modules/sidebar-style-guide/sass/variables';
@import 'node_modules/sidebar-style-guide/sass/style';

Sidebar skins

There are two base skin variants that you get out of the box for making a sidebar with a light background color and dark text color or a sidebar with dark background color and light text color.

CSS Class Description
.sidebar-light Defines the basic style for a sidebar with a light background color and dark text color.
.sidebar-dark Defines the basic style for a sidebar with a dark background color and light text color.

Note that none of the skin classes include a background color, so the following example assumes you are adding the background with the additional .bg-primary and .bg-white custom classes.

<!-- .sidebar-light -->
<div class="sidebar-light bg-white">
  ... 
</div>

<!-- .sidebar-dark -->
<div class="sidebar-dark bg-primary">
  ... 
</div>

Sidebar position

Note that the positioning classes don't actually change your sidebar's position, but they can add styling which depends on the sidebar position. For example, when the sidebar is positioned to the left, you could apply a border to the right of the sidebar, separating the page content from the sidebar with a line.

CSS Class Description
.sidebar-left Applies style on a sidebar positioned to the left
.sidebar-right Applies style on a sidebar positioned to the right 
<div class="sidebar-light bg-white sidebar-left">
  ... 
</div>

Sidebar menu

CSS Class Description
.sidebar-menu The sidebar menu wrapper ul
.sidebar-menu-item The sidebar menu item li
.sidebar-menu-button The sidebar menu button a

To create a basic sidebar menu:

  • add ul wrapper using the .sidebar-menu class
  • add li menu items using the .sidebar-menu-item class
  • add a menu buttons use the .sidebar-menu-button class
  • add the .active class to .sidebar-menu-item elements
<!-- Basic sidebar menu -->
<ul class="sidebar-menu">

  <!-- Active menu item -->
  <li class="sidebar-menu-item active">
    <a href="#" class="sidebar-menu-button">Active menu item</a>
  </li>

  <!-- Regular menu item -->
  <li class="sidebar-menu-item">
    <a href="#" class="sidebar-menu-button">Regular menu item</a>
  </li>

</ul>

You can customize sidebar menus with the following Sass variables.

Spacing

Sass variable Description Default value
$sm-spacing-x Defines the horizontal spacing for sidebar menus $sidebar-spacing-x
$sm-spacing-y Defines the vertical spacing for sidebar menus $sidebar-spacing-y

.sidebar-menu-button

Sass variable Description Default value
$sm-button-font-size Defines the base font size in px for .sidebar-menu-button $sidebar-font-size
$sm-button-font-weight Defines the font weight for .sidebar-menu-button 400
$sm-button-height Defines the height in px for .sidebar-menu-button 42px
$sm-active-button-font-weight Defines the font weight for .sidebar-menu-button when using li.sidebar-menu-item.active $sm-button-font-weight

Sidebar menu icons

Add icons to sidebar menus.

CSS Class Description
.sidebar-menu-icon The sidebar menu icon
.material-icons Required on .sidebar-menu-icon elements when using Material icons

Dependencies

The following example is using Material icons, so make sure to load the icons library into the <head> section of your page before using the example.

<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Usage

To add an icon to the sidebar menu button, add an element using the .sidebar-menu-icon base icon class within the .sidebar-menu-button element. Also, to use the Material icons add the .material-icons class to the .sidebar-menu-icon element.

<!-- Sidebar menu icons -->
<ul class="sidebar-menu">
  <li class="sidebar-menu-item">
    <a class="sidebar-menu-button" href="#">
      <i class="sidebar-menu-icon material-icons">home</i> 
      Menu button text
    </a>
  </li>
</ul>

You can customize sidebar menu icons with the following Sass variables.

Sass variable Description Default value
$sm-icon-font-size Defines the base font size in px for sidebar menu icons 24px
$sm-icon-margin Defines the margin for sidebar menu icons $sm-spacing-x * 0.4

See also

Sidebar menu icons in the context of sidebar submenus.

Sidebar menu utilities

You can modify the style of sidebar menus and sidebar submenus by using CSS helper classes. All the following classes should be applied on .sidebar-menu and .sidebar-submenu elements.

CSS Class Description
.sm-condensed Applies a smaller spacing to sidebar menu buttons
.sm-bordered Applies a border bottom to a .sidebar-menu or .sidebar-submenu
.sm-item-bordered Applies a border bottom to .sidebar-menu or .sidebar-submenu items
.sm-active-button-bg Applies a background color to active sidebar menu items
.sm-icons-right Aligns the sidebar menu icons to the right
.sm-icons-block Wrap the sidebar menu icons into a square block with background color
.sm-indent Increase the horizontal spacing of .sidebar-menu or .sidebar-submenu buttons

You can customize sidebar utilities with the following Sass variables.

.sm-condensed

Sass variable Description Default value
$sm-condensed-button-height Defines the height in px for sidebar menu buttons when using .sm-condensed $sm-button-height - ($sm-button-height/4)
$ssm-condensed-button-height Defines the height in px for sidebar submenu buttons when using .sm-condensed $ssm-button-height - ($ssm-button-height/4)

.sm-bordered

Sass variable Description Default value
$sidebar-dark-border-color Defines the default border color for sidebar elements when using the .sidebar-dark skin rgba(0, 0, 0, .15)
$sidebar-light-border-color Defines the default border color for sidebar elements when using the .sidebar-light skin #e5e5e5

.sm-item-bordered

Sass variable Description Default value
$sm-dark-item-border-color Defines the border color for sidebar menu items when using the .sidebar-dark skin $sidebar-dark-border-color
$ssm-dark-item-border-color Defines the border color for sidebar submenu items when using the .sidebar-dark skin $sm-dark-item-border-color
$sm-light-item-border-color Defines the border color for sidebar menu items when using the .sidebar-light skin $sidebar-light-border-color
$ssm-light-item-border-color Defines the border color for sidebar submenu items when using the .sidebar-light skin $sm-light-item-border-color

.sm-active-button-bg

Sass variable Description Default value
$sm-dark-active-button-bg Defines the background color for active sidebar menu buttons when using the .sidebar-dark skin rgba(255, 255, 255, .12)
$sm-dark-activebuttonbg-button-color Defines the text color for active sidebar menu buttons when using the .sidebar-dark skin #fff
$sm-dark-activebuttonbg-icon-color Defines the icon text color for active sidebar menu buttons when using the .sidebar-dark skin $sm-dark-activebuttonbg-button-color
$sm-light-active-button-bg Defines the background color for active sidebar menu buttons when using the .sidebar-light skin $brand-primary
$sm-light-activebuttonbg-button-color Defines the text color for active sidebar menu buttons when using the .sidebar-light skin #fff
$sm-light-activebuttonbg-icon-color Defines the icon text color for active sidebar menu buttons when using the .sidebar-light skin $sm-light-activebuttonbg-button-color

.sm-active-button-bg and .sm-icons-block

Sass variable Description Default value
$sm-dark-active-iconsblock-activebuttonbg-icon-bg Defines the icon background color for active sidebar menu buttons when using the .sidebar-dark skin $sm-dark-active-iconsblock-icon-bg
$sm-light-active-iconsblock-activebuttonbg-icon-bg Defines the icon background color for active sidebar menu buttons when using the .sidebar-light skin $sm-light-active-iconsblock-icon-bg

Dependencies

The following example is using Material icons, so make sure to load the icons library into the <head> section of your page before using the example.

<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Usage

<!-- Sidebar menu style modifiers -->
<ul class="sidebar-menu sm-active-button-bg sm-bordered sm-icons-right">
    <li class="sidebar-menu-item">
        <a class="sidebar-menu-button" href="#">
            <i class="sidebar-menu-icon material-icons">home</i> 
            Menu button
        </a>
    </li>
    <li class="sidebar-menu-item active">
        <a class="sidebar-menu-button" href="#">
            <i class="sidebar-menu-icon material-icons">menu</i> 
            Another button
        </a>
    </li>
</ul>

Sidebar submenu

CSS Class Description
.sidebar-submenu The sidebar submenu wrapper ul placed after a.sidebar-menu-button elements
.sidebar-menu-item The sidebar submenu item li
.sidebar-menu-button The sidebar submenu button a
.open Makes the sidebar submenu visible when applied to a li.sidebar-menu-item parent

Usage

To create a basic sidebar submenu:

  • add ul wrapper using the .sidebar-submenu class, after a .sidebar-menu-button element
  • add li submenu items using the .sidebar-menu-item class
  • add a submenu buttons using the .sidebar-menu-button class
  • add the .open class to the parent .sidebar-menu-item element to display a submenu
<!-- Sidebar menu -->
<ul class="sidebar-menu">

  <!-- Open menu item -->
  <li class="sidebar-menu-item open">
    <a href="#" class="sidebar-menu-button">Dashboard</a>

    <!-- Submenu -->
    <ul class="sidebar-submenu">
      <li class="sidebar-menu-item active">
        <a href="#" class="sidebar-menu-button">Active menu item</a>
      </li>
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Regular menu item</a>
      </li>
    </ul>
  </li>

  <!-- Menu item -->
  <li class="sidebar-menu-item">
    <a href="#" class="sidebar-menu-button">Reports</a>

    <!-- Submenu -->
    <ul class="sidebar-submenu">
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Another menu item</a>
      </li>
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Regular menu item</a>
      </li>
    </ul>
  </li>

</ul>

You can customize sidebar submenus with the following Sass variables.

.sidebar-menu-button

Sass variable Description Default value
$ssm-button-height Defines the height in px for sidebar submenu buttons $sm-button-height
$ssm-button-font-size Defines the base font size in px for sidebar submenu buttons $sm-button-font-size

.sidebar-menu-icon

Sass variable Description Default value
$ssm-icon-font-size Defines the base font size in px for sidebar submenu icons $sm-icon-font-size

About

Sidebar style guide (CSS and Sass)

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • CSS 96.2%
  • JavaScript 3.8%
0