colors grid

lite plugin to store your favourite colors and copy it with one click

documentation

Options Type Default value Description
gridItems Object null Store your colors at this object with the index of element.
inlineStyle Boolean true Enable to style with options, or disable incase of overwriting defaults with external stylesheet.
navState Boolean true Color switcher(hex/rgb/rgba) navigation
stickyNavState Boolean true To stick nav while scrolling
overlayState Boolean true Grid item overlay
copiedMessageState Boolean true Showed when click on overlay
navWidth String 100% Naviagtion container width
navHeight String 50px Naviagtion container height
navTransition String all 0.4s ease Naviagtion container transition
navItemsWidth String 170px Navigation list items width
navItemsHeight String navHeight - 10px Navigation list items height
navItemsBackgroundColor String #ffffff Navigation list items background color
navItemsBoxShadow String 0 0 0 1px #3b4148 Navigation list items box shadow
navItemsTransition String all .4s ease-in-out Navigation list items transition
navItemsActiveBackgroundColor String #3b4148 Navigation active item background color
navItemsActiveColor String #f1f1f1 Navigation active item text color
navItemsActiveBoxShadow String null Navigation active item box shadow
navItemsActiveBorderRadius String null Navigation active item border radius
stickyNavBackgroundColor String null Background color when navigation become sticky
stickyNavBoxShadow String null Box shdaow when navigation become sticky
stickyNavTransition String all 0.4s ease Transition for sliding BackgroundColor/BoxShadow/sliding out
stickyNavHoverBackgroundColor String null Background color when hover on sticky navigation
stickyNavHoverBoxShadow String null Box shadow when hover on sticky navigation
overlayBackgroundColor String rgba(0,0,0,.4) Showed when hover on grid item
overlayTransition String all 0.4s ease Transition of overlay fading
colorBoxBackgroundColor String null Color value box/copied message background color
colorBoxColor String rgba(255,255,255,.8) Color value box/copied message text color
colorBoxBoxShadow String 0 0 4px 3px rgba(255,255,255,.8) Color value box/copied message box-shadow
colorBoxTransition String all 0.4s ease Color value box/copied message transition

setup

  1. include colorsGrid javascript file
    2.   <script src="colorsGrid.min.js"></script>
  2. set html container 
      <div class="container"></div>
  3. style grid items with css useing color-holder class 
    .color-holder {
  width: 200px;
  height: 200px;
  margin: 5px;
}
  4. call colorsGrid with options
    5. colorGrid(document.getElementById('container'), {
  gridItems: {
    0: "#19aad1"                    
  }
})