article:
JS Plugin: PhotoSwipe
article:
JS Plugin: jMapping

Responsive Plugin: The Heads-Up Grid

Advertisement


The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.

Respunsive Plugin: The Heads-Up Grid



To create a responsive grid use the following code as a template. This template is fairly self-explanatory if you are familiar with CSS Media Queries. These JavaScript conditional properties should directly match the properties you are using for your media queries. Then simply define the properties of multiple grids in the same way you would define a single grid above.

The result should be a system that checks the browser window width on pageload as well as any time that the browser window is resized and render the appropriate grid.



Usage

<link href="headsupgrid/hugrid.css" type="text/css" rel="stylesheet" />
<script src="headsupgrid/jquery-1.6.2.min.js"></script>
<script src="headsupgrid/hugrid.js"></script>
<script type="text/javascript">
    definegrid = function() {
        var browserWidth = $(window).width(); 
        if (browserWidth >= 1001) 
        {
            pageUnits = 'px';
            colUnits = 'px';
            pagewidth = 960;
            columns = 6;
            columnwidth = 140;
            gutterwidth = 24;
            pagetopmargin = 35;
            rowheight = 20;
            gridonload = 'off';
            makehugrid();
        } 
        if (browserWidth <= 1000) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 94;
            columns = 2;
            columnwidth = 48;
            gutterwidth = 4;
            pagetopmargin = 35;
            rowheight = 20;
            gridonload = 'off';
            makehugrid();
        }
        if (browserWidth <= 768) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 96;
            columns = 2;
            columnwidth = 49;
            gutterwidth = 2;
            pagetopmargin = 35;
            rowheight = 20;
            gridonload = 'off';
            makehugrid();
        }
    }
    $(document).ready(function() {
        definegrid();
        setgridonload();
    });
    $(window).resize(function() {
        definegrid();
        setgridonresize();
    });
</script>


Respunsive Plugin: The Heads-Up Grid



Complete list of properties available in the Heads-Up Grid system.


property name values
pageUnits px, %
colUnits px, %
gridonload on, off
pagewidth [number in pageUnits]
columns [number of columns]
columnwidth [number in colUnits]
gutterwidth [number in colUnits]
pagetopmargin [number in pixels]
rowheight [number in pixels]
pageleftmargin [number in pageUnits]
pagerightmargin [number in pageUnits]


default value in bold
non-numerical property values must be defined within quotes: gridonload = 'off';





gridulator
source
github
download

Advertisement
Tags: grid, responsive, css, layout, design, html, develop, jquery, plugin

Leave a Comment

No Comment

© Creative3x Ltd.