├── README ├── headsupgrid ├── hugrid.css ├── hugrid.js └── jquery-1.6.2.min.js ├── example.html ├── example_bootstrap.html └── example_responsive.html /README: -------------------------------------------------------------------------------- 1 | The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript. 2 | 3 | Learn more at http://bohemianalps.com/tools/grid/ 4 | -------------------------------------------------------------------------------- /headsupgrid/hugrid.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Heads-Up Grid 3 | * Simple HTML + CSS grid overlay for web design and development. 4 | * 5 | * Files: hugrid.css, hugrid.js, example.html 6 | * 7 | * Example and documentation at: http://bohemianalps.com/tools/grid 8 | * 9 | * Shurane, thanks for your help! https://github.com/shurane 10 | * 11 | * Copyright (c) 2011 Jason Simanek 12 | * 13 | * Version: 1.5 (09/03/2011) 14 | * Requires: jQuery v1.6+ 15 | * 16 | * Licensed under the GPL license: 17 | * http://www.gnu.org/licenses/gpl.html 18 | */ 19 | 20 | /* Default Heads-Up Grid Properties - These will be overwritten by the values entered in the document.ready function. */ 21 | #hugrid { 22 | width:960px; /* width of webpage */ 23 | margin-left:-480px; /* to center the grid, set half of webpage width as negative value */ 24 | } 25 | #hugrid div { 26 | margin-left:140px; /* width of column */ 27 | width:24px; /* width of column gutter */ 28 | } 29 | 30 | /* Default Heads-Up Grid Styles - These styles allow you to change the color and style of the lines that make the Heads-Up Grid */ 31 | #hugrid div div { 32 | border-color:#FF00EB; /* color of grid line */ 33 | border-style:solid; /* style of grid line (dotted, dashed, solid) */ 34 | opacity:0.3; /*opacity of grid line */ 35 | } 36 | #hugrid div:hover { 37 | background-color:#36F3FF; /* color of gutter on :hover */ 38 | } 39 | #hugrid div.mline { 40 | border-color:#AA82FF; /* color of margin line */ 41 | border-style:solid; /* style of margin lines (dotted, dashed, solid) */ 42 | } 43 | #hugridRows { 44 | border-color:#AA82FF; /* color of top margin line */ 45 | border-style:solid; /* style of top margin line */ 46 | } 47 | #hugridRows div.lineB { 48 | border-color:#5DFF35; /* color of row line */ 49 | border-style:solid; /* style of row line */ 50 | opacity:0.3; /*opacity of row line */ 51 | } 52 | #hugridRows div.lineB:hover { 53 | border-color:#5DFF35; /* color of row line on :hover */ 54 | border-style:solid; /* style of row line on :hover */ 55 | opacity:1.0; /*opacity of row line on :hover */ 56 | } 57 | 58 | /* ------------------------------------------------------------------------- */ 59 | /* Fixed Styles (No need to alter the below styles for standard grid needs.) */ 60 | #hugrid { 61 | position:fixed; 62 | z-index:100000; 63 | top:0; 64 | left:50%; 65 | height:0; 66 | margin-top:0; 67 | margin-right:0; 68 | margin-bottom:0; 69 | padding:0; 70 | cursor:crosshair; 71 | } 72 | #hugrid div { 73 | display:block; 74 | float:left; 75 | position:relative; 76 | top:0; 77 | border-width:0; 78 | } 79 | #hugrid div div { 80 | margin:0; 81 | width:0; 82 | } 83 | #hugrid div div.lineL { 84 | float:left; 85 | height:10000px; 86 | border-width:0 0 0 1px; 87 | } 88 | #hugrid div div.lineR { 89 | float:right; 90 | height:10000px; 91 | border-width:0 1px 0 0; 92 | } 93 | #hugrid div.mline { 94 | margin:0 0 0 -1px; 95 | width:0; 96 | height:100000px; 97 | } 98 | #hugrid div.mlineL { 99 | border-width:0 1px 0 0; 100 | } 101 | #hugrid div.mlineR { 102 | float:right; 103 | margin-right:-1px; 104 | border-width:0 0 0 1px; 105 | } 106 | #hugrid div:hover { 107 | opacity:0.5; 108 | } 109 | #hugrid div:hover div.lineL, 110 | #hugrid div:hover div.lineR { 111 | border-style:solid; 112 | opacity:1.0; 113 | } 114 | #hugridRows { 115 | position:absolute; 116 | z-index:90000; 117 | top:-1px; 118 | left:0; 119 | width:100%; 120 | height:0; 121 | margin:0; 122 | padding:0; 123 | border-width:1px 0 0 0; 124 | cursor:crosshair; 125 | } 126 | #hugridRows div { 127 | display:block; 128 | width:100%; 129 | height:1px; 130 | margin:0; 131 | padding:0; 132 | } 133 | #hugridRows div div.lineB { 134 | margin:0; 135 | border-width:0 0 1px 0; 136 | } 137 | #hugridUX { 138 | display:block; 139 | position:fixed; 140 | z-index:200000; 141 | top:0; 142 | right:0; 143 | margin:0; 144 | padding:4px; 145 | font:bold 11px/100% Arial,sans-serif; 146 | color:#AAA; 147 | text-align:center; 148 | } 149 | #hugridUX div#hugridButtonBkgd { 150 | display:block; 151 | position:absolute; 152 | top:0; 153 | right:0; 154 | width:100%; 155 | height:100%; 156 | background-color:#333; 157 | border-radius:0 0 0 16px; 158 | opacity:0.3; 159 | } 160 | #hugridUX button#hugridButton { 161 | cursor:pointer; 162 | position:relative; 163 | width:28px; 164 | margin:0; 165 | padding:8px 2px; 166 | background-color:#5DFF35; 167 | border-radius:40px; 168 | border-width:0; 169 | box-shadow:0 0 2px #666; 170 | outline:0; 171 | font:bold 11px/100% Arial,sans-serif; 172 | } 173 | #hugridUX button#hugridButton::-moz-focus-inner { 174 | border:0; 175 | } 176 | #hugridUX button#hugridButton.buttonisoff { 177 | background:none; 178 | box-shadow:none; 179 | } 180 | #hugridUX button#hugridButton.buttonisoff:hover { 181 | background-color:#999; 182 | } 183 | #hugbuttonON { 184 | color:#333; 185 | } 186 | #hugbuttonOFF { 187 | color:#333; 188 | } 189 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |The Heads-Up Grid is an overlay grid for use during in-browser website development, built with HTML + CSS + JavaScript.
33 | 34 |This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
38 |This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
42 |This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
46 |The Heads-Up Grid is an overlay grid for use during in-browser website development, built with HTML + CSS + JavaScript.
58 | 59 |This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
63 |This is just some silly filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
67 |This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
71 |The Heads-Up Grid is an overlay grid for use during in-browser website development, built with HTML + CSS + JavaScript.
71 | 72 |This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
76 |This is just some silly filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
80 |This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.
84 || t |