Skip to content

rootical/grid-overlay

 
 

Repository files navigation

grid-overlay

Everything lines up.

Usage

Install

npm install grid-overlay --save-dev

CDN

<script src="https://unpkg.com/[email protected]/dist/grid-overlay.min.js"></script>

Vanilla Javascript

new GridOverlay({
    controlParentEl: '.attach-grid-overlay-control-here',
    maxWidth: 1440,
    columns: 12,
    gridGutter: 8,
    adaptive: [
        {
            mediaQuery: '(max-width: 600px)',
            cols: 2,
            gridGutter: 8
        },
        {
            mediaQuery: '(min-width: 1025px)',
            cols: 12,
            gridGutter: 48
        }
    ],
    overlayVisible: true,
    writeInlineStyles: true,

    controlZIndex: 1200,
    controlBackgroundColor: '#474747',
    controlFontColor: '#ffffff',
    controlOpacity: 0.9,

    overlayZIndex: 1100,
    overlayOpacity: 0.4,
    foregroundColor: '#409bd2',
    backgroundColor: '#80bde1'
});

Vue Component

<grid-overlay
    v-bind:adaptive="[
      { mediaQuery: '(max-width: 600px)',  cols: 2, gridGutter: 8, extraLeftRightGutter: 0 },
      { mediaQuery: '(min-width: 1025px)', cols: 12, gridGutter: 8, extraLeftRightGutter: 40 }
    ]"
    v-bind:max-width="1440"
    v-bind:draggable="true"
    v-bind:write-inline-styles="true"
    v-bind:background-color="'#aa55aa'"
    v-bind:foreground-color="'#ff00ff'"
    v-bind:pre-create="gridOverlayPreCreate"
></grid-overlay>

Development

Build

npm run build
npm run lint
npm run scripts
npm run scripts-vue

Build Demo

cd demo
npm run build
cd demo-vue
npm run build

Release

npm run jsdoc
npm run build
npm run scripts
npm run scripts-vue
git tag -a vX.Y.Z
git push origin master
git push origin --tags
npm publish .

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 89.8%
  • HTML 10.2%