init.js

/*
 Linear by TEMPLATED
 templated.co @templatedco
 Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 */

skel.init({
    prefix: '/css/style',
    resetCSS: true,
    boxModel: 'border',
    grid: {
        gutters: 50
    },
    breakpoints: {
        'mobile': {
            range: '-480',
            lockViewport: true,
            containers: 'fluid',
            grid: {
                collapse: true,
                gutters: 10
            }
        },
        'desktop': {
            range: '481-',
            containers: 1200
        },
        '1000px': {
            range: '481-1200',
            containers: 960
        }
    }
}, {
    panels: {
        panels: {
            leftPanel: {
                breakpoints: 'mobile',
                position: 'left',
                style: 'reveal',
                size: '60%',
                html: '<div data-action="navList" data-args="nav"></div>'
            },
            rightPanel: {
                breakpoints: 'mobile',
                position: 'right',
                style: 'reveal',
                size: '60%',
                html: '<div data-action="copyHTML" data-args="sidebar"></div>'
            }
        },
        overlays: {
            titleBar: {
                breakpoints: 'mobile',
                position: 'top-left',
                height: 44,
                width: '100%',
                html: '<div id="contentNavButtonLeft"><button data-action="togglePanel" data-args="leftPanel"><i class="material-icons" style="color:#8B8B8B">more_horiz</i></button></div>' +
                '<div id="contentNavButtonRight"><button data-action="togglePanel" data-args="rightPanel"><i class="material-icons" style="color:#8B8B8B">menu</i></button></div>' +
                '<span class="title" data-action="copyHTML" data-args="logo"></span>'
            }
        }
    }


});