The Heads-Up Grid

粘贴一些代码

如果你还没有定义一个网格, 使用The Gridulator. 然后下载这个 The Heads-Up Grid 文件并粘贴以下代码到你的网页的 <head> 元素:

<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">
    $(document).ready(function() {
        pageUnits = 'px';
        colUnits = 'px';
        pagewidth = 960;
        columns = 6;
        columnwidth = 140;
        gutterwidth = 24;
        pagetopmargin = 35;
        rowheight = 20;
        gridonload = 'off';
        makehugrid();
        setgridonload();
    });
</script>

应用设置

您可能注意到，通过查看默认的网格具有以下属性的文本:

units for page = pixels
units for columns = pixels
page width = 960px
number of columns = 6
column width = 140px
gutter width = 24px
page top margin = 35px
row height = 20px

改变数字来创建您所需的网格.如果你不需要基线网格，设置行高度为 0. 默认计量单位是 pixels.

你现在准备回到真正的工作：精心排列的图片和文字!

Nerd, PLEASE! This would have been GREAT in 2010, but
什么是响应式网页设计?

Using Responsive Grids

响应的网页设计, as described/defined by Ethan Marcotte anyway, is the act of creating various forms of the same basic site design that are optimized for different ranges of browser window widths.

Luckily, the way that I originally constructed the Heads-Up Grid made it relatively easy to adapt to the needs of responsive web design. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements. Even if you are not extremely comfortable with JavaScript, if you are ambitious enough to tackle responsive web design you will most likely have no problem figuring this out.

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.

Responsive Grid Code

<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>

可用属性

Below is a 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';

GitHub Repository

You can now contribute to this project by way of GitHub. I’m still learning about version control, but hopefully this will make it easier to improve and cotnribute to this project!

github.com/simanek/Heads-Up-Grid

更新日志

Nothing is ever finished. The Heads-Up Grid has been improved since its introduction. Below is a description of how it has been changed over time.

2012-07-08 Version 1.7

Sunilw improved key parts of hugrid.js and fixed some important JavaScript console errors [issue #10]
I remutilated Sunilw’s wonderful work to get the gridonload and preserved gridstate working after his fixes. [issue #11]

2012-06-02 Version 1.6

Changes to <meta> element on example files should correct grid redrawing on iOS orientation change. [issue #4]
State of grid – on or off – is preserved on window resize. [issue #5]

2011-09-03 Version 1.5

pageUnits set page width in pixel or percent units
colUnits set column and gutter widths in pixel or percent units
pageleftmargin set grid to be left-aligned rather than centered
pagerightmargin set grid to be right-aligned rather than centered
Responsive Grid functionality makes it possible to define multiple grids that are displayed on condition of the browser window width.

2011-08-27 Version 1.4

Added the gridonload property to set whether the grid is on or off after the page loads.

2011-08-20 Version 1.3

Added an ON/OFF button after seeing The Golden Grid System by Joni Korpi which makes The Heads-Up Grid look like chicken scratches.

2011-08-19 Version 1.2

Added “baseline” horizontal grid rows after it was requested by a user. This horizontal grid is defined by the “rowheight” property. There’s also the new “pagetopmargin” property to adjust where on the page the horizontal grid begins.

2011-08-13 Version 1.1

Originally this tool did not employ JavaScript. It was just some CSS and some HTML elements that the user had to manipulate themselves. This had some drawbacks, mostly the problem with knowing how many columns you needed and remembering to subtract 1 when setting up the HTML. A user on Hacker News pointed out that the markup could be generated very easily with some simple jquery commands. As a result I dug in and started learning the basics of injecting HTML elements into the DOM via jquery. This allowed me to handle the math for the user. With this version the user only had to save the “headsupgrid” folder to their web server and enter the properties of their grid into the header of their HTML document.

2011-08-06 Version 1.0

This page and a downloadable .zip archive were made live.