├── .nojekyll ├── MIT-LICENSE.txt ├── Makefile ├── NOTES.md ├── README.md ├── css ├── jquery-mobile-960.css ├── jquery-mobile-960.min.css ├── jquery-mobile-fluid960.css └── jquery-mobile-fluid960.min.css ├── demoFixed.html ├── demoFluid.html ├── experimentFixed.html ├── experimentFluid.html ├── index.html ├── jquery-mobile-960.komodoproject ├── js ├── jquery-mobile │ ├── jquery.mobile-1.0a3.css │ └── jquery.mobile-1.0a3.js └── jquery │ └── jquery-1.5.js ├── lib └── build.js └── testOfficialGrid.html /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/jquery-mobile-960/97dfb829983dced5991ec16d3ab31c5b56858bf4/.nojekyll -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011 Jerome Etienne, http://jetienne.com 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # mini Makefile to automatize tasks 2 | 3 | help: 4 | @echo "$$ make build" 5 | @echo "\tBuild the css files" 6 | @echo "$$ make deploy" 7 | @echo "\tDeploy the application on google AppEngine" 8 | @echo "$$ make help" 9 | @echo "\tDisplay inline help" 10 | 11 | build: 12 | node lib/build.js 13 | 14 | minify: 15 | yuicompressor --type css css/jquery-mobile-fluid960.css > css/jquery-mobile-fluid960.min.css 16 | yuicompressor --type css css/jquery-mobile-960.css > css/jquery-mobile-960.min.css 17 | 18 | deploy : minify deployGhPage 19 | 20 | deployGhPage: 21 | rm -rf /tmp/jquery-mobile-960GhPages 22 | (cd /tmp && git clone git@github.com:jeromeetienne/jquery-mobile-960.git jquery-mobile-960GhPages) 23 | (cd /tmp/jquery-mobile-960GhPages && git checkout gh-pages) 24 | cp -a * .nojekyll /tmp/jquery-mobile-960GhPages 25 | (cd /tmp/jquery-mobile-960GhPages && git add . && git commit -a -m "Another deployement" && git push origin gh-pages) 26 | #rm -rf /tmp/jquery-mobile-960GhPages 27 | -------------------------------------------------------------------------------- /NOTES.md: -------------------------------------------------------------------------------- 1 | * question to answer: 2 | * why 3 | * when 4 | * what 5 | * how 6 | * who 7 | 8 | ### Why 9 | 10 | because i wanted to use jquery mobile on large screens. 11 | i love jquery mobile way to stick to html. you build the 12 | html and jquery mobile make it look good on the screen. 13 | This is a key advantage for me, a coder without design skill. 14 | 15 | i am even considering using it for normal webapps. 16 | 17 | ### How 18 | 19 | * how to use it 20 | * how to include it 21 | * put the doc of 960 22 | * put the doc of jquery mobile grid 23 | * how to get it 24 | 25 | 26 | ### When 27 | 28 | yesterday... well irrelevant -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jquery-mobile-960 is a port of 960 grid to jquery mobile, to more flexible on tablets. 2 | 3 | ### Resources 4 | 5 | * official 960 https://github.com/nathansmith/960-Grid-System/blob/master/code/css/uncompressed/960.css 6 | * fluid 960 http://www.designinfluences.com/fluid960gs/css/grid.css 7 | * jquery mobile grid https://github.com/jquery/jquery-mobile/blob/master/themes/default/jquery.mobile.grids.css 8 | * blueprint http://www.blueprintcss.org/blueprint/src/grid.css -------------------------------------------------------------------------------- /css/jquery-mobile-960.css: -------------------------------------------------------------------------------- 1 | .container_12 .alpha { clear-left: 0; } 2 | 3 | .grid_1, 4 | .grid_2, 5 | .grid_3, 6 | .grid_4, 7 | .grid_5, 8 | .grid_6, 9 | .grid_7, 10 | .grid_8, 11 | .grid_9, 12 | .grid_10, 13 | .grid_11, 14 | .grid_12 15 | { margin: 0; padding: 0; border: 0; float: left; } 16 | 17 | .ui-mobile [data-role='page'], .ui-mobile [data-role='dialog'], .ui-page { 18 | left: 50%; 19 | margin-left: -480px; 20 | width: 960px; 21 | } 22 | .container_12 { 23 | width: 960px; 24 | } 25 | 26 | .container_12 .grid_1 { 27 | width: 77.5px; 28 | } 29 | .container_12 .grid_2 { 30 | width: 155px; 31 | } 32 | .container_12 .grid_3 { 33 | width: 232.5px; 34 | } 35 | .container_12 .grid_4 { 36 | width: 310px; 37 | } 38 | .container_12 .grid_5 { 39 | width: 387.5px; 40 | } 41 | .container_12 .grid_6 { 42 | width: 465px; 43 | } 44 | .container_12 .grid_7 { 45 | width: 542.5px; 46 | } 47 | .container_12 .grid_8 { 48 | width: 620px; 49 | } 50 | .container_12 .grid_9 { 51 | width: 697.5px; 52 | } 53 | .container_12 .grid_10 { 54 | width: 775px; 55 | } 56 | .container_12 .grid_11 { 57 | width: 852.5px; 58 | } 59 | .container_12 .grid_12 { 60 | width: 930px; 61 | } 62 | 63 | .container_12 .prefix_1 { 64 | padding-left: 77.5px; 65 | } 66 | .container_12 .prefix_2 { 67 | padding-left: 155px; 68 | } 69 | .container_12 .prefix_3 { 70 | padding-left: 232.5px; 71 | } 72 | .container_12 .prefix_4 { 73 | padding-left: 310px; 74 | } 75 | .container_12 .prefix_5 { 76 | padding-left: 387.5px; 77 | } 78 | .container_12 .prefix_6 { 79 | padding-left: 465px; 80 | } 81 | .container_12 .prefix_7 { 82 | padding-left: 542.5px; 83 | } 84 | .container_12 .prefix_8 { 85 | padding-left: 620px; 86 | } 87 | .container_12 .prefix_9 { 88 | padding-left: 697.5px; 89 | } 90 | .container_12 .prefix_10 { 91 | padding-left: 775px; 92 | } 93 | .container_12 .prefix_11 { 94 | padding-left: 852.5px; 95 | } 96 | .container_12 .prefix_12 { 97 | padding-left: 930px; 98 | } 99 | 100 | .container_12 .suffix_1 { 101 | padding-right: 77.5px; 102 | } 103 | .container_12 .suffix_2 { 104 | padding-right: 155px; 105 | } 106 | .container_12 .suffix_3 { 107 | padding-right: 232.5px; 108 | } 109 | .container_12 .suffix_4 { 110 | padding-right: 310px; 111 | } 112 | .container_12 .suffix_5 { 113 | padding-right: 387.5px; 114 | } 115 | .container_12 .suffix_6 { 116 | padding-right: 465px; 117 | } 118 | .container_12 .suffix_7 { 119 | padding-right: 542.5px; 120 | } 121 | .container_12 .suffix_8 { 122 | padding-right: 620px; 123 | } 124 | .container_12 .suffix_9 { 125 | padding-right: 697.5px; 126 | } 127 | .container_12 .suffix_10 { 128 | padding-right: 775px; 129 | } 130 | .container_12 .suffix_11 { 131 | padding-right: 852.5px; 132 | } 133 | .container_12 .suffix_12 { 134 | padding-right: 930px; 135 | } 136 | 137 | .container_16 .alpha { clear-left: 0; } 138 | 139 | .grid_1, 140 | .grid_2, 141 | .grid_3, 142 | .grid_4, 143 | .grid_5, 144 | .grid_6, 145 | .grid_7, 146 | .grid_8, 147 | .grid_9, 148 | .grid_10, 149 | .grid_11, 150 | .grid_12, 151 | .grid_13, 152 | .grid_14, 153 | .grid_15, 154 | .grid_16 155 | { margin: 0; padding: 0; border: 0; float: left; } 156 | 157 | .ui-mobile [data-role='page'], .ui-mobile [data-role='dialog'], .ui-page { 158 | left: 50%; 159 | margin-left: -480px; 160 | width: 960px; 161 | } 162 | .container_16 { 163 | width: 960px; 164 | } 165 | 166 | .container_16 .grid_1 { 167 | width: 58.125px; 168 | } 169 | .container_16 .grid_2 { 170 | width: 116.25px; 171 | } 172 | .container_16 .grid_3 { 173 | width: 174.375px; 174 | } 175 | .container_16 .grid_4 { 176 | width: 232.5px; 177 | } 178 | .container_16 .grid_5 { 179 | width: 290.625px; 180 | } 181 | .container_16 .grid_6 { 182 | width: 348.75px; 183 | } 184 | .container_16 .grid_7 { 185 | width: 406.875px; 186 | } 187 | .container_16 .grid_8 { 188 | width: 465px; 189 | } 190 | .container_16 .grid_9 { 191 | width: 523.125px; 192 | } 193 | .container_16 .grid_10 { 194 | width: 581.25px; 195 | } 196 | .container_16 .grid_11 { 197 | width: 639.375px; 198 | } 199 | .container_16 .grid_12 { 200 | width: 697.5px; 201 | } 202 | .container_16 .grid_13 { 203 | width: 755.625px; 204 | } 205 | .container_16 .grid_14 { 206 | width: 813.75px; 207 | } 208 | .container_16 .grid_15 { 209 | width: 871.875px; 210 | } 211 | .container_16 .grid_16 { 212 | width: 930px; 213 | } 214 | 215 | .container_16 .prefix_1 { 216 | padding-left: 58.125px; 217 | } 218 | .container_16 .prefix_2 { 219 | padding-left: 116.25px; 220 | } 221 | .container_16 .prefix_3 { 222 | padding-left: 174.375px; 223 | } 224 | .container_16 .prefix_4 { 225 | padding-left: 232.5px; 226 | } 227 | .container_16 .prefix_5 { 228 | padding-left: 290.625px; 229 | } 230 | .container_16 .prefix_6 { 231 | padding-left: 348.75px; 232 | } 233 | .container_16 .prefix_7 { 234 | padding-left: 406.875px; 235 | } 236 | .container_16 .prefix_8 { 237 | padding-left: 465px; 238 | } 239 | .container_16 .prefix_9 { 240 | padding-left: 523.125px; 241 | } 242 | .container_16 .prefix_10 { 243 | padding-left: 581.25px; 244 | } 245 | .container_16 .prefix_11 { 246 | padding-left: 639.375px; 247 | } 248 | .container_16 .prefix_12 { 249 | padding-left: 697.5px; 250 | } 251 | .container_16 .prefix_13 { 252 | padding-left: 755.625px; 253 | } 254 | .container_16 .prefix_14 { 255 | padding-left: 813.75px; 256 | } 257 | .container_16 .prefix_15 { 258 | padding-left: 871.875px; 259 | } 260 | .container_16 .prefix_16 { 261 | padding-left: 930px; 262 | } 263 | 264 | .container_16 .suffix_1 { 265 | padding-right: 58.125px; 266 | } 267 | .container_16 .suffix_2 { 268 | padding-right: 116.25px; 269 | } 270 | .container_16 .suffix_3 { 271 | padding-right: 174.375px; 272 | } 273 | .container_16 .suffix_4 { 274 | padding-right: 232.5px; 275 | } 276 | .container_16 .suffix_5 { 277 | padding-right: 290.625px; 278 | } 279 | .container_16 .suffix_6 { 280 | padding-right: 348.75px; 281 | } 282 | .container_16 .suffix_7 { 283 | padding-right: 406.875px; 284 | } 285 | .container_16 .suffix_8 { 286 | padding-right: 465px; 287 | } 288 | .container_16 .suffix_9 { 289 | padding-right: 523.125px; 290 | } 291 | .container_16 .suffix_10 { 292 | padding-right: 581.25px; 293 | } 294 | .container_16 .suffix_11 { 295 | padding-right: 639.375px; 296 | } 297 | .container_16 .suffix_12 { 298 | padding-right: 697.5px; 299 | } 300 | .container_16 .suffix_13 { 301 | padding-right: 755.625px; 302 | } 303 | .container_16 .suffix_14 { 304 | padding-right: 813.75px; 305 | } 306 | .container_16 .suffix_15 { 307 | padding-right: 871.875px; 308 | } 309 | .container_16 .suffix_16 { 310 | padding-right: 930px; 311 | } 312 | 313 | -------------------------------------------------------------------------------- /css/jquery-mobile-960.min.css: -------------------------------------------------------------------------------- 1 | .container_12 .alpha{clear-left:0;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{margin:0;padding:0;border:0;float:left;}.ui-mobile [data-role='page'],.ui-mobile [data-role='dialog'],.ui-page{left:50%;margin-left:-480px;width:960px;}.container_12{width:960px;}.container_12 .grid_1{width:77.5px;}.container_12 .grid_2{width:155px;}.container_12 .grid_3{width:232.5px;}.container_12 .grid_4{width:310px;}.container_12 .grid_5{width:387.5px;}.container_12 .grid_6{width:465px;}.container_12 .grid_7{width:542.5px;}.container_12 .grid_8{width:620px;}.container_12 .grid_9{width:697.5px;}.container_12 .grid_10{width:775px;}.container_12 .grid_11{width:852.5px;}.container_12 .grid_12{width:930px;}.container_12 .prefix_1{padding-left:77.5px;}.container_12 .prefix_2{padding-left:155px;}.container_12 .prefix_3{padding-left:232.5px;}.container_12 .prefix_4{padding-left:310px;}.container_12 .prefix_5{padding-left:387.5px;}.container_12 .prefix_6{padding-left:465px;}.container_12 .prefix_7{padding-left:542.5px;}.container_12 .prefix_8{padding-left:620px;}.container_12 .prefix_9{padding-left:697.5px;}.container_12 .prefix_10{padding-left:775px;}.container_12 .prefix_11{padding-left:852.5px;}.container_12 .prefix_12{padding-left:930px;}.container_12 .suffix_1{padding-right:77.5px;}.container_12 .suffix_2{padding-right:155px;}.container_12 .suffix_3{padding-right:232.5px;}.container_12 .suffix_4{padding-right:310px;}.container_12 .suffix_5{padding-right:387.5px;}.container_12 .suffix_6{padding-right:465px;}.container_12 .suffix_7{padding-right:542.5px;}.container_12 .suffix_8{padding-right:620px;}.container_12 .suffix_9{padding-right:697.5px;}.container_12 .suffix_10{padding-right:775px;}.container_12 .suffix_11{padding-right:852.5px;}.container_12 .suffix_12{padding-right:930px;}.container_16 .alpha{clear-left:0;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{margin:0;padding:0;border:0;float:left;}.ui-mobile [data-role='page'],.ui-mobile [data-role='dialog'],.ui-page{left:50%;margin-left:-480px;width:960px;}.container_16{width:960px;}.container_16 .grid_1{width:58.125px;}.container_16 .grid_2{width:116.25px;}.container_16 .grid_3{width:174.375px;}.container_16 .grid_4{width:232.5px;}.container_16 .grid_5{width:290.625px;}.container_16 .grid_6{width:348.75px;}.container_16 .grid_7{width:406.875px;}.container_16 .grid_8{width:465px;}.container_16 .grid_9{width:523.125px;}.container_16 .grid_10{width:581.25px;}.container_16 .grid_11{width:639.375px;}.container_16 .grid_12{width:697.5px;}.container_16 .grid_13{width:755.625px;}.container_16 .grid_14{width:813.75px;}.container_16 .grid_15{width:871.875px;}.container_16 .grid_16{width:930px;}.container_16 .prefix_1{padding-left:58.125px;}.container_16 .prefix_2{padding-left:116.25px;}.container_16 .prefix_3{padding-left:174.375px;}.container_16 .prefix_4{padding-left:232.5px;}.container_16 .prefix_5{padding-left:290.625px;}.container_16 .prefix_6{padding-left:348.75px;}.container_16 .prefix_7{padding-left:406.875px;}.container_16 .prefix_8{padding-left:465px;}.container_16 .prefix_9{padding-left:523.125px;}.container_16 .prefix_10{padding-left:581.25px;}.container_16 .prefix_11{padding-left:639.375px;}.container_16 .prefix_12{padding-left:697.5px;}.container_16 .prefix_13{padding-left:755.625px;}.container_16 .prefix_14{padding-left:813.75px;}.container_16 .prefix_15{padding-left:871.875px;}.container_16 .prefix_16{padding-left:930px;}.container_16 .suffix_1{padding-right:58.125px;}.container_16 .suffix_2{padding-right:116.25px;}.container_16 .suffix_3{padding-right:174.375px;}.container_16 .suffix_4{padding-right:232.5px;}.container_16 .suffix_5{padding-right:290.625px;}.container_16 .suffix_6{padding-right:348.75px;}.container_16 .suffix_7{padding-right:406.875px;}.container_16 .suffix_8{padding-right:465px;}.container_16 .suffix_9{padding-right:523.125px;}.container_16 .suffix_10{padding-right:581.25px;}.container_16 .suffix_11{padding-right:639.375px;}.container_16 .suffix_12{padding-right:697.5px;}.container_16 .suffix_13{padding-right:755.625px;}.container_16 .suffix_14{padding-right:813.75px;}.container_16 .suffix_15{padding-right:871.875px;}.container_16 .suffix_16{padding-right:930px;} -------------------------------------------------------------------------------- /css/jquery-mobile-fluid960.css: -------------------------------------------------------------------------------- 1 | .container_12 .alpha { clear-left: 0; } 2 | 3 | .grid_1, 4 | .grid_2, 5 | .grid_3, 6 | .grid_4, 7 | .grid_5, 8 | .grid_6, 9 | .grid_7, 10 | .grid_8, 11 | .grid_9, 12 | .grid_10, 13 | .grid_11, 14 | .grid_12 15 | { margin: 0; padding: 0; border: 0; float: left; } 16 | 17 | .container_12 { overflow: hidden; } 18 | 19 | .container_12 .grid_1 { 20 | width: 8.333333333333334%; 21 | } 22 | .container_12 .grid_2 { 23 | width: 16.666666666666668%; 24 | } 25 | .container_12 .grid_3 { 26 | width: 25%; 27 | } 28 | .container_12 .grid_4 { 29 | width: 33.333333333333336%; 30 | } 31 | .container_12 .grid_5 { 32 | width: 41.66666666666667%; 33 | } 34 | .container_12 .grid_6 { 35 | width: 50%; 36 | } 37 | .container_12 .grid_7 { 38 | width: 58.333333333333336%; 39 | } 40 | .container_12 .grid_8 { 41 | width: 66.66666666666667%; 42 | } 43 | .container_12 .grid_9 { 44 | width: 75%; 45 | } 46 | .container_12 .grid_10 { 47 | width: 83.33333333333334%; 48 | } 49 | .container_12 .grid_11 { 50 | width: 91.66666666666667%; 51 | } 52 | .container_12 .grid_12 { 53 | width: 100%; 54 | } 55 | 56 | .container_12 .prefix_1 { 57 | padding-left: 8.333333333333334%; 58 | } 59 | .container_12 .prefix_2 { 60 | padding-left: 16.666666666666668%; 61 | } 62 | .container_12 .prefix_3 { 63 | padding-left: 25%; 64 | } 65 | .container_12 .prefix_4 { 66 | padding-left: 33.333333333333336%; 67 | } 68 | .container_12 .prefix_5 { 69 | padding-left: 41.66666666666667%; 70 | } 71 | .container_12 .prefix_6 { 72 | padding-left: 50%; 73 | } 74 | .container_12 .prefix_7 { 75 | padding-left: 58.333333333333336%; 76 | } 77 | .container_12 .prefix_8 { 78 | padding-left: 66.66666666666667%; 79 | } 80 | .container_12 .prefix_9 { 81 | padding-left: 75%; 82 | } 83 | .container_12 .prefix_10 { 84 | padding-left: 83.33333333333334%; 85 | } 86 | .container_12 .prefix_11 { 87 | padding-left: 91.66666666666667%; 88 | } 89 | .container_12 .prefix_12 { 90 | padding-left: 100%; 91 | } 92 | 93 | .container_12 .suffix_1 { 94 | padding-right: 8.333333333333334%; 95 | } 96 | .container_12 .suffix_2 { 97 | padding-right: 16.666666666666668%; 98 | } 99 | .container_12 .suffix_3 { 100 | padding-right: 25%; 101 | } 102 | .container_12 .suffix_4 { 103 | padding-right: 33.333333333333336%; 104 | } 105 | .container_12 .suffix_5 { 106 | padding-right: 41.66666666666667%; 107 | } 108 | .container_12 .suffix_6 { 109 | padding-right: 50%; 110 | } 111 | .container_12 .suffix_7 { 112 | padding-right: 58.333333333333336%; 113 | } 114 | .container_12 .suffix_8 { 115 | padding-right: 66.66666666666667%; 116 | } 117 | .container_12 .suffix_9 { 118 | padding-right: 75%; 119 | } 120 | .container_12 .suffix_10 { 121 | padding-right: 83.33333333333334%; 122 | } 123 | .container_12 .suffix_11 { 124 | padding-right: 91.66666666666667%; 125 | } 126 | .container_12 .suffix_12 { 127 | padding-right: 100%; 128 | } 129 | 130 | .container_16 .alpha { clear-left: 0; } 131 | 132 | .grid_1, 133 | .grid_2, 134 | .grid_3, 135 | .grid_4, 136 | .grid_5, 137 | .grid_6, 138 | .grid_7, 139 | .grid_8, 140 | .grid_9, 141 | .grid_10, 142 | .grid_11, 143 | .grid_12, 144 | .grid_13, 145 | .grid_14, 146 | .grid_15, 147 | .grid_16 148 | { margin: 0; padding: 0; border: 0; float: left; } 149 | 150 | .container_16 { overflow: hidden; } 151 | 152 | .container_16 .grid_1 { 153 | width: 6.25%; 154 | } 155 | .container_16 .grid_2 { 156 | width: 12.5%; 157 | } 158 | .container_16 .grid_3 { 159 | width: 18.75%; 160 | } 161 | .container_16 .grid_4 { 162 | width: 25%; 163 | } 164 | .container_16 .grid_5 { 165 | width: 31.25%; 166 | } 167 | .container_16 .grid_6 { 168 | width: 37.5%; 169 | } 170 | .container_16 .grid_7 { 171 | width: 43.75%; 172 | } 173 | .container_16 .grid_8 { 174 | width: 50%; 175 | } 176 | .container_16 .grid_9 { 177 | width: 56.25%; 178 | } 179 | .container_16 .grid_10 { 180 | width: 62.5%; 181 | } 182 | .container_16 .grid_11 { 183 | width: 68.75%; 184 | } 185 | .container_16 .grid_12 { 186 | width: 75%; 187 | } 188 | .container_16 .grid_13 { 189 | width: 81.25%; 190 | } 191 | .container_16 .grid_14 { 192 | width: 87.5%; 193 | } 194 | .container_16 .grid_15 { 195 | width: 93.75%; 196 | } 197 | .container_16 .grid_16 { 198 | width: 100%; 199 | } 200 | 201 | .container_16 .prefix_1 { 202 | padding-left: 6.25%; 203 | } 204 | .container_16 .prefix_2 { 205 | padding-left: 12.5%; 206 | } 207 | .container_16 .prefix_3 { 208 | padding-left: 18.75%; 209 | } 210 | .container_16 .prefix_4 { 211 | padding-left: 25%; 212 | } 213 | .container_16 .prefix_5 { 214 | padding-left: 31.25%; 215 | } 216 | .container_16 .prefix_6 { 217 | padding-left: 37.5%; 218 | } 219 | .container_16 .prefix_7 { 220 | padding-left: 43.75%; 221 | } 222 | .container_16 .prefix_8 { 223 | padding-left: 50%; 224 | } 225 | .container_16 .prefix_9 { 226 | padding-left: 56.25%; 227 | } 228 | .container_16 .prefix_10 { 229 | padding-left: 62.5%; 230 | } 231 | .container_16 .prefix_11 { 232 | padding-left: 68.75%; 233 | } 234 | .container_16 .prefix_12 { 235 | padding-left: 75%; 236 | } 237 | .container_16 .prefix_13 { 238 | padding-left: 81.25%; 239 | } 240 | .container_16 .prefix_14 { 241 | padding-left: 87.5%; 242 | } 243 | .container_16 .prefix_15 { 244 | padding-left: 93.75%; 245 | } 246 | .container_16 .prefix_16 { 247 | padding-left: 100%; 248 | } 249 | 250 | .container_16 .suffix_1 { 251 | padding-right: 6.25%; 252 | } 253 | .container_16 .suffix_2 { 254 | padding-right: 12.5%; 255 | } 256 | .container_16 .suffix_3 { 257 | padding-right: 18.75%; 258 | } 259 | .container_16 .suffix_4 { 260 | padding-right: 25%; 261 | } 262 | .container_16 .suffix_5 { 263 | padding-right: 31.25%; 264 | } 265 | .container_16 .suffix_6 { 266 | padding-right: 37.5%; 267 | } 268 | .container_16 .suffix_7 { 269 | padding-right: 43.75%; 270 | } 271 | .container_16 .suffix_8 { 272 | padding-right: 50%; 273 | } 274 | .container_16 .suffix_9 { 275 | padding-right: 56.25%; 276 | } 277 | .container_16 .suffix_10 { 278 | padding-right: 62.5%; 279 | } 280 | .container_16 .suffix_11 { 281 | padding-right: 68.75%; 282 | } 283 | .container_16 .suffix_12 { 284 | padding-right: 75%; 285 | } 286 | .container_16 .suffix_13 { 287 | padding-right: 81.25%; 288 | } 289 | .container_16 .suffix_14 { 290 | padding-right: 87.5%; 291 | } 292 | .container_16 .suffix_15 { 293 | padding-right: 93.75%; 294 | } 295 | .container_16 .suffix_16 { 296 | padding-right: 100%; 297 | } 298 | 299 | -------------------------------------------------------------------------------- /css/jquery-mobile-fluid960.min.css: -------------------------------------------------------------------------------- 1 | .container_12 .alpha{clear-left:0;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{margin:0;padding:0;border:0;float:left;}.container_12{overflow:hidden;}.container_12 .grid_1{width:8.333333333333334%;}.container_12 .grid_2{width:16.666666666666668%;}.container_12 .grid_3{width:25%;}.container_12 .grid_4{width:33.333333333333336%;}.container_12 .grid_5{width:41.66666666666667%;}.container_12 .grid_6{width:50%;}.container_12 .grid_7{width:58.333333333333336%;}.container_12 .grid_8{width:66.66666666666667%;}.container_12 .grid_9{width:75%;}.container_12 .grid_10{width:83.33333333333334%;}.container_12 .grid_11{width:91.66666666666667%;}.container_12 .grid_12{width:100%;}.container_12 .prefix_1{padding-left:8.333333333333334%;}.container_12 .prefix_2{padding-left:16.666666666666668%;}.container_12 .prefix_3{padding-left:25%;}.container_12 .prefix_4{padding-left:33.333333333333336%;}.container_12 .prefix_5{padding-left:41.66666666666667%;}.container_12 .prefix_6{padding-left:50%;}.container_12 .prefix_7{padding-left:58.333333333333336%;}.container_12 .prefix_8{padding-left:66.66666666666667%;}.container_12 .prefix_9{padding-left:75%;}.container_12 .prefix_10{padding-left:83.33333333333334%;}.container_12 .prefix_11{padding-left:91.66666666666667%;}.container_12 .prefix_12{padding-left:100%;}.container_12 .suffix_1{padding-right:8.333333333333334%;}.container_12 .suffix_2{padding-right:16.666666666666668%;}.container_12 .suffix_3{padding-right:25%;}.container_12 .suffix_4{padding-right:33.333333333333336%;}.container_12 .suffix_5{padding-right:41.66666666666667%;}.container_12 .suffix_6{padding-right:50%;}.container_12 .suffix_7{padding-right:58.333333333333336%;}.container_12 .suffix_8{padding-right:66.66666666666667%;}.container_12 .suffix_9{padding-right:75%;}.container_12 .suffix_10{padding-right:83.33333333333334%;}.container_12 .suffix_11{padding-right:91.66666666666667%;}.container_12 .suffix_12{padding-right:100%;}.container_16 .alpha{clear-left:0;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{margin:0;padding:0;border:0;float:left;}.container_16{overflow:hidden;}.container_16 .grid_1{width:6.25%;}.container_16 .grid_2{width:12.5%;}.container_16 .grid_3{width:18.75%;}.container_16 .grid_4{width:25%;}.container_16 .grid_5{width:31.25%;}.container_16 .grid_6{width:37.5%;}.container_16 .grid_7{width:43.75%;}.container_16 .grid_8{width:50%;}.container_16 .grid_9{width:56.25%;}.container_16 .grid_10{width:62.5%;}.container_16 .grid_11{width:68.75%;}.container_16 .grid_12{width:75%;}.container_16 .grid_13{width:81.25%;}.container_16 .grid_14{width:87.5%;}.container_16 .grid_15{width:93.75%;}.container_16 .grid_16{width:100%;}.container_16 .prefix_1{padding-left:6.25%;}.container_16 .prefix_2{padding-left:12.5%;}.container_16 .prefix_3{padding-left:18.75%;}.container_16 .prefix_4{padding-left:25%;}.container_16 .prefix_5{padding-left:31.25%;}.container_16 .prefix_6{padding-left:37.5%;}.container_16 .prefix_7{padding-left:43.75%;}.container_16 .prefix_8{padding-left:50%;}.container_16 .prefix_9{padding-left:56.25%;}.container_16 .prefix_10{padding-left:62.5%;}.container_16 .prefix_11{padding-left:68.75%;}.container_16 .prefix_12{padding-left:75%;}.container_16 .prefix_13{padding-left:81.25%;}.container_16 .prefix_14{padding-left:87.5%;}.container_16 .prefix_15{padding-left:93.75%;}.container_16 .prefix_16{padding-left:100%;}.container_16 .suffix_1{padding-right:6.25%;}.container_16 .suffix_2{padding-right:12.5%;}.container_16 .suffix_3{padding-right:18.75%;}.container_16 .suffix_4{padding-right:25%;}.container_16 .suffix_5{padding-right:31.25%;}.container_16 .suffix_6{padding-right:37.5%;}.container_16 .suffix_7{padding-right:43.75%;}.container_16 .suffix_8{padding-right:50%;}.container_16 .suffix_9{padding-right:56.25%;}.container_16 .suffix_10{padding-right:62.5%;}.container_16 .suffix_11{padding-right:68.75%;}.container_16 .suffix_12{padding-right:75%;}.container_16 .suffix_13{padding-right:81.25%;}.container_16 .suffix_14{padding-right:87.5%;}.container_16 .suffix_15{padding-right:93.75%;}.container_16 .suffix_16{padding-right:100%;} -------------------------------------------------------------------------------- /demoFixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jquery mobile + 960 grid 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Home 17 |

jquery mobile + 960 grid: demo

18 |
19 | 20 |
21 | Demo page of the jquery-mobile-960 grid 22 |

12 columns

23 |
24 |
12
25 | 26 |
1
27 |
11
28 | 29 |
2
30 |
10
31 | 32 |
3
33 |
9
34 | 35 |
4
36 |
8
37 | 38 |
5
39 |
7
40 | 41 |
6
42 |
6
43 | 44 |
7
45 |
5
46 | 47 |
8
48 |
4
49 | 50 |
9
51 |
3
52 | 53 |
10
54 |
2
55 | 56 |
11
57 |
1
58 | 59 |
1
60 |
1
61 |
1
62 |
1
63 |
1
64 |
1
65 |
1
66 |
1
67 |
1
68 |
1
69 |
1
70 |
1
71 | 72 |
3
73 |
3
74 |
1
75 |
5
76 | 77 |
1
78 |
5
79 |
3
80 |
3
81 |
82 |

16 columns

83 |
84 |
16
85 | 86 |
1
87 |
15
88 | 89 |
2
90 |
14
91 | 92 |
3
93 |
13
94 | 95 |
4
96 |
12
97 | 98 |
5
99 |
11
100 | 101 |
6
102 |
10
103 | 104 |
7
105 |
9
106 | 107 |
8
108 |
8
109 | 110 |
9
111 |
7
112 | 113 |
10
114 |
6
115 | 116 |
11
117 |
5
118 | 119 |
12
120 |
4
121 | 122 |
13
123 |
3
124 | 125 |
14
126 |
2
127 | 128 |
15
129 |
1
130 | 131 |
1
132 |
1
133 |
1
134 |
1
135 |
1
136 |
1
137 |
1
138 |
1
139 |
1
140 |
1
141 |
1
142 |
1
143 |
1
144 |
1
145 |
1
146 |
1
147 | 148 |
4
149 |
4
150 |
1
151 |
7
152 | 153 |
1
154 |
7
155 |
4
156 |
4
157 |
158 |
159 | 160 |
161 |

Page Footer

162 |
163 |
164 | 165 | 166 | -------------------------------------------------------------------------------- /demoFluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jquery mobile + 960 grid 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Home 17 |

jquery mobile + 960 grid: demo

18 |
19 | 20 |
21 | Demo page of the jquery-mobile-960 grid 22 |

12 columns

23 |
24 |
12
25 | 26 |
1
27 |
11
28 | 29 |
2
30 |
10
31 | 32 |
3
33 |
9
34 | 35 |
4
36 |
8
37 | 38 |
5
39 |
7
40 | 41 |
6
42 |
6
43 | 44 |
7
45 |
5
46 | 47 |
8
48 |
4
49 | 50 |
9
51 |
3
52 | 53 |
10
54 |
2
55 | 56 |
11
57 |
1
58 | 59 |
1
60 |
1
61 |
1
62 |
1
63 |
1
64 |
1
65 |
1
66 |
1
67 |
1
68 |
1
69 |
1
70 |
1
71 | 72 |
3
73 |
3
74 |
1
75 |
5
76 | 77 |
1
78 |
5
79 |
3
80 |
3
81 |
82 |

16 columns

83 |
84 |
16
85 | 86 |
1
87 |
15
88 | 89 |
2
90 |
14
91 | 92 |
3
93 |
13
94 | 95 |
4
96 |
12
97 | 98 |
5
99 |
11
100 | 101 |
6
102 |
10
103 | 104 |
7
105 |
9
106 | 107 |
8
108 |
8
109 | 110 |
9
111 |
7
112 | 113 |
10
114 |
6
115 | 116 |
11
117 |
5
118 | 119 |
12
120 |
4
121 | 122 |
13
123 |
3
124 | 125 |
14
126 |
2
127 | 128 |
15
129 |
1
130 | 131 |
1
132 |
1
133 |
1
134 |
1
135 |
1
136 |
1
137 |
1
138 |
1
139 |
1
140 |
1
141 |
1
142 |
1
143 |
1
144 |
1
145 |
1
146 |
1
147 | 148 |
4
149 |
4
150 |
1
151 |
7
152 | 153 |
1
154 |
7
155 |
4
156 |
4
157 |
158 |
159 | 160 |
161 |

Page Footer

162 |
163 |
164 | 165 | 166 | -------------------------------------------------------------------------------- /experimentFixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jquery mobile + 960 grid 5 | 6 | 7 | 8 | 9 | 10 | 11 | 25 | 72 | 73 |
74 |
75 |

jquery mobile + 960 grid

76 |
77 | 78 |
79 |

grid-960-12 3time grid_4

80 |
81 |
82 |
button A
83 |
button A
84 |
button C
85 |
86 | 94 |
95 |
96 |

grid-960-12 3time grid_4

97 |
98 |
button A
99 |
button B
100 |
button C
101 |
102 |

grid-960-12 4time grid_3

103 |
104 |
Block A
105 |
Block B
106 |
Block C
107 |
Block D
108 |
Block A
109 |
Block B
110 |
Block D
111 |
Block A
112 |
Block B
113 |
Block D
114 |
Block A
115 |
Block D
116 |
117 |

grid-960-12 3time grid_4

118 |
119 |
Block A
120 |
Block B
121 |
Block C
122 |
123 | 124 |

grid-a

125 |
126 |
I'm Block A and text inside will wrap
127 |
I'm Block B and text inside will wrap
128 |
129 | 130 |

grid-b

131 |
132 |
Block A
133 |
Block B
134 |
Block C
135 |
136 | 137 |
138 | 139 |
140 |

Page Footer

141 |
142 |
143 | 144 | 145 | -------------------------------------------------------------------------------- /experimentFluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jquery mobile + 960 grid 5 | 6 | 7 | 8 | 9 | 10 | 62 | 63 |
64 |
65 |

jquery mobile + 960 grid

66 |
67 | 68 |
69 |

grid-960-12 3time grid_4

70 |
71 |
72 |
button A
73 |
button C
74 |
75 | 83 |
84 |
85 |

grid-960-12 3time grid_4

86 |
87 |
button A
88 |
button B
89 |
button C
90 |
91 |

grid-960-12 4time grid_3

92 |
93 |
Block A
94 |
Block B
95 |
Block C
96 |
Block D
97 |
Block A
98 |
Block B
99 |
Block D
100 |
Block A
101 |
Block B
102 |
Block D
103 |
Block A
104 |
Block D
105 |
106 |

grid-960-12 3time grid_4

107 |
108 |
Block A
109 |
Block B
110 |
Block C
111 |
112 | 113 |

grid-a

114 |
115 |
I'm Block A and text inside will wrap
116 |
I'm Block B and text inside will wrap
117 |
118 | 119 |

grid-b

120 |
121 |
Block A
122 |
Block B
123 |
Block C
124 |
125 | 126 |
127 | 128 |
129 |

Page Footer

130 |
131 |
132 | 133 | 134 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 960 Grid on jQuery-Mobile - merge 960.gs flexibility with jquery-mobile ease 5 | 6 | 7 | 8 | 9 | 10 | 11 | 62 |
63 |
64 |

960 Grid on jQuery-Mobile

65 |

66 | jquery-mobile-960 is a port of 960 grid to jquery mobile. 67 | 68 | It merge the flexibility of 960.gs, and the ease of jquery mobile. 69 | 70 | It aims to bring more flexibility to jquery-mobile layout and thus 71 | make it easier to use on tablets. 72 |

73 |

How to use it ?

74 | To use 960 grids in jQuery Mobile, simply add one line: 75 | 
    <link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
 76 |     <link href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-960.min.css" />
 77 |     <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
 78 |     <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
79 | And now you can use normal 960 grid syntax inside jQuery mobile pages 80 | 
    <fieldset class="container_12">
 81 | 	<div class="grid_2"><button type="submit">Button 1</button></div>
 82 | 	<div class="grid_8"><button type="submit">Button 2</button></div>	   
 83 | 	<div class="grid_2"><button type="submit">Button 3</button></div>	   
 84 |     </fieldset>
85 | And without more effort, jQuery Mobile gives you this result. 86 |
87 |
88 |
89 |
90 |
91 | For a complete documentation of 960 syntax, go see its homepage. 92 | 960 homepage 93 | 94 |

Demo

95 |

96 | The usual demo pages. 97 | Seeing is more convincing than believing 98 |

99 |
100 | Demo for fluid 960 101 | Demo for fixed 960 102 |
103 | 104 |

Motivation

105 |

106 | I loved jQuery-mobile ability to make an application by just describing its structure in HTML5. 107 | It makes applications real fast to develop. 108 |

109 |

110 | But jQuery mobile layout is currently rather raw. 111 | They only split the width in even parts, providing little controls to the designer. 112 | It uses an custom API with names ending with a, b, c or d, ui-block-a for example. 113 | Not the classic grid-4 or span-3, so it feel awkward. 114 |

115 |

116 | All in all, i felt jquery mobile layout was uselessly difficult to use, especially 117 | on large screens such as tablets. 960 grids are flexible and well known. 118 | So i used ported 960 grids to see if it helps. 119 |

120 | jQuery Mobile Grid Docs 121 | 122 |

Download

123 |

124 | jquery-mobile-960 has 2 versions of 960 grids: one is fixed width 125 | of 960px, the other is fluid. Each version supports 12 and 16 columns. 126 |

127 |
128 | jquery-mobile-960.css 129 | jquery-mobile-960.min.css 130 | jquery-mobile-fluid960.css 131 | jquery-mobile-fluid960.min.css 132 |
133 | 134 |

About

135 |

136 | The code is available on github under MIT license. The author is Jerome Etienne. 137 |

138 |
139 | jQuery-mobile-960 on github 140 | Jerome Etienne Homepage 141 |
142 |
143 |
144 | 145 | 146 | -------------------------------------------------------------------------------- /jquery-mobile-960.komodoproject: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /js/jquery-mobile/jquery.mobile-1.0a3.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Mobile v1.0a3 3 | * http://jquerymobile.com/ 4 | * 5 | * Copyright 2010, jQuery Project 6 | * Dual licensed under the MIT or GPL Version 2 licenses. 7 | * http://jquery.org/license 8 | */ 9 | /* 10 | * jQuery Mobile Framework 11 | * Copyright (c) jQuery Project 12 | * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. 13 | * Note: Code is in draft form and is subject to change 14 | */ 15 | 16 | 17 | /* A 18 | -----------------------------------------------------------------------------------------------------------*/ 19 | 20 | .ui-bar-a { 21 | border: 1px solid #2A2A2A; 22 | background: #111111; 23 | color: #ffffff; 24 | font-weight: bold; 25 | text-shadow: 0 -1px 1px #000000; 26 | background-image: -moz-linear-gradient(top, 27 | #3c3c3c, 28 | #111111); 29 | background-image: -webkit-gradient(linear,left top,left bottom, 30 | color-stop(0, #3c3c3c), 31 | color-stop(1, #111111)); 32 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; 33 | } 34 | .ui-bar-a, 35 | .ui-bar-a input, 36 | .ui-bar-a select, 37 | .ui-bar-a textarea, 38 | .ui-bar-a button { 39 | font-family: Helvetica, Arial, sans-serif; 40 | } 41 | .ui-bar-a .ui-link-inherit { 42 | color: #fff; 43 | } 44 | .ui-bar-a .ui-link { 45 | color: #7cc4e7; 46 | font-weight: bold; 47 | } 48 | .ui-body-a { 49 | border: 1px solid #2A2A2A; 50 | background: #222222; 51 | color: #fff; 52 | text-shadow: 0 1px 0 #000; 53 | font-weight: normal; 54 | background-image: -moz-linear-gradient(top, 55 | #666666, 56 | #222222); 57 | background-image: -webkit-gradient(linear,left top,left bottom, 58 | color-stop(0, #666666), 59 | color-stop(1, #222222)); 60 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')"; 61 | } 62 | .ui-body-a, 63 | .ui-body-a input, 64 | .ui-body-a select, 65 | .ui-body-a textarea, 66 | .ui-body-a button { 67 | font-family: Helvetica, Arial, sans-serif; 68 | } 69 | .ui-body-a .ui-link-inherit { 70 | color: #fff; 71 | } 72 | .ui-body-a .ui-link { 73 | color: #2489CE; 74 | font-weight: bold; 75 | } 76 | .ui-br { 77 | border-bottom: 1px solid rgba(130,130,130,.3); 78 | } 79 | .ui-btn-up-a { 80 | border: 1px solid #222; 81 | background: #333333; 82 | font-weight: bold; 83 | color: #fff; 84 | cursor: pointer; 85 | text-shadow: 0 -1px 1px #000; 86 | text-decoration: none; 87 | background-image: -moz-linear-gradient(top, 88 | #555555, 89 | #333333); 90 | background-image: -webkit-gradient(linear,left top,left bottom, 91 | color-stop(0, #555555), 92 | color-stop(1, #333333)); 93 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')"; 94 | } 95 | .ui-btn-up-a a.ui-link-inherit { 96 | color: #fff; 97 | } 98 | .ui-btn-hover-a { 99 | border: 1px solid #000; 100 | background: #444444; 101 | font-weight: bold; 102 | color: #fff; 103 | text-shadow: 0 -1px 1px #000; 104 | text-decoration: none; 105 | background-image: -moz-linear-gradient(top, 106 | #666666, 107 | #444444); 108 | background-image: -webkit-gradient(linear,left top,left bottom, 109 | color-stop(0, #666666), 110 | color-stop(1, #444444)); 111 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#444444')"; 112 | } 113 | .ui-btn-hover-a a.ui-link-inherit { 114 | color: #fff; 115 | } 116 | .ui-btn-down-a { 117 | border: 1px solid #000; 118 | background: #3d3d3d; 119 | font-weight: bold; 120 | color: #fff; 121 | text-shadow: 0 -1px 1px #000; 122 | background-image: -moz-linear-gradient(top, 123 | #333333, 124 | #5a5a5a); 125 | background-image: -webkit-gradient(linear,left top,left bottom, 126 | color-stop(0, #333333), 127 | color-stop(1, #5a5a5a)); 128 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')"; 129 | } 130 | .ui-btn-down-a a.ui-link-inherit { 131 | color: #fff; 132 | } 133 | .ui-btn-up-a, 134 | .ui-btn-hover-a, 135 | .ui-btn-down-a { 136 | font-family: Helvetica, Arial, sans-serif; 137 | } 138 | 139 | 140 | /* B 141 | -----------------------------------------------------------------------------------------------------------*/ 142 | 143 | .ui-bar-b { 144 | border: 1px solid #456f9a; 145 | background: #5e87b0; 146 | color: #fff; 147 | font-weight: bold; 148 | text-shadow: 0 -1px 1px #254f7a; 149 | background-image: -moz-linear-gradient(top, 150 | #81a8ce, 151 | #5e87b0); 152 | background-image: -webkit-gradient(linear,left top,left bottom, 153 | color-stop(0, #81a8ce), 154 | color-stop(1, #5e87b0)); 155 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8ce', EndColorStr='#5e87b0')"; 156 | } 157 | .ui-bar-b, 158 | .ui-bar-b input, 159 | .ui-bar-b select, 160 | .ui-bar-b textarea, 161 | .ui-bar-b button { 162 | font-family: Helvetica, Arial, sans-serif; 163 | } 164 | .ui-bar-b .ui-link-inherit { 165 | color: #fff; 166 | } 167 | .ui-bar-b .ui-link { 168 | color: #7cc4e7; 169 | font-weight: bold; 170 | } 171 | 172 | .ui-body-b { 173 | border: 1px solid #C6C6C6; 174 | background: #cccccc; 175 | color: #333333; 176 | text-shadow: 0 1px 0 #fff; 177 | font-weight: normal; 178 | background-image: -moz-linear-gradient(top, 179 | #e6e6e6, 180 | #cccccc); 181 | background-image: -webkit-gradient(linear,left top,left bottom, 182 | color-stop(0, #e6e6e6), 183 | color-stop(1, #cccccc)); 184 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e6e6e6', EndColorStr='#cccccc')"; 185 | } 186 | .ui-body-b, 187 | .ui-body-b input, 188 | .ui-body-b select, 189 | .ui-body-b textarea, 190 | .ui-body-b button { 191 | font-family: Helvetica, Arial, sans-serif; 192 | } 193 | .ui-body-b .ui-link-inherit { 194 | color: #333333; 195 | } 196 | .ui-body-b .ui-link { 197 | color: #2489CE; 198 | font-weight: bold; 199 | } 200 | .ui-btn-up-b { 201 | border: 1px solid #145072; 202 | background: #2567ab; 203 | font-weight: bold; 204 | color: #fff; 205 | cursor: pointer; 206 | text-shadow: 0 -1px 1px #145072; 207 | text-decoration: none; 208 | background-image: -moz-linear-gradient(top, 209 | #4e89c5, 210 | #2567ab); 211 | background-image: -webkit-gradient(linear,left top,left bottom, 212 | color-stop(0, #5f9cc5), 213 | color-stop(1, #396b9e)); 214 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e89c5', EndColorStr='#2567ab')"; 215 | } 216 | .ui-btn-up-b a.ui-link-inherit { 217 | color: #fff; 218 | } 219 | .ui-btn-hover-b { 220 | border: 1px solid #00516e; 221 | background: #4b88b6; 222 | font-weight: bold; 223 | color: #fff; 224 | text-shadow: 0 -1px 1px #014D68; 225 | background-image: -moz-linear-gradient(top, 226 | #72b0d4, 227 | #4b88b6); 228 | text-decoration: none; 229 | background-image: -webkit-gradient(linear,left top,left bottom, 230 | color-stop(0, #72b0d4), 231 | color-stop(1, #4b88b6)); 232 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#72b0d4', EndColorStr='#4b88b6')"; 233 | } 234 | .ui-btn-hover-b a.ui-link-inherit { 235 | color: #fff; 236 | } 237 | .ui-btn-down-b { 238 | border: 1px solid #225377; 239 | background: #4e89c5; 240 | font-weight: bold; 241 | color: #fff; 242 | text-shadow: 0 -1px 1px #225377; 243 | background-image: -moz-linear-gradient(top, 244 | #396b9e, 245 | #4e89c5); 246 | background-image: -webkit-gradient(linear,left top,left bottom, 247 | color-stop(0, #396b9e), 248 | color-stop(1, #4e89c5)); 249 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#396b9e', EndColorStr='#4e89c5')"; 250 | } 251 | .ui-btn-down-b a.ui-link-inherit { 252 | color: #fff; 253 | } 254 | .ui-btn-up-b, 255 | .ui-btn-hover-b, 256 | .ui-btn-down-b { 257 | font-family: Helvetica, Arial, sans-serif; 258 | } 259 | 260 | 261 | /* C 262 | -----------------------------------------------------------------------------------------------------------*/ 263 | 264 | .ui-bar-c { 265 | border: 1px solid #B3B3B3; 266 | background: #e9eaeb; 267 | color: #3E3E3E; 268 | font-weight: bold; 269 | text-shadow: 0 1px 1px #fff; 270 | background-image: -moz-linear-gradient(top, 271 | #f0f0f0, 272 | #e9eaeb); 273 | background-image: -webkit-gradient(linear,left top,left bottom, 274 | color-stop(0, #f0f0f0), 275 | color-stop(1, #e9eaeb)); 276 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e9eaeb')"; 277 | } 278 | .ui-bar-c, 279 | .ui-bar-c input, 280 | .ui-bar-c select, 281 | .ui-bar-c textarea, 282 | .ui-bar-c button { 283 | font-family: Helvetica, Arial, sans-serif; 284 | } 285 | .ui-body-c { 286 | border: 1px solid #B3B3B3; 287 | color: #333333; 288 | text-shadow: 0 1px 0 #fff; 289 | background: #f0f0f0; 290 | background-image: -moz-linear-gradient(top, 291 | #eeeeee, 292 | #dddddd); 293 | background-image: -webkit-gradient(linear,left top,left bottom, 294 | color-stop(0, #eeeeee), 295 | color-stop(1, #dddddd)); 296 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#dddddd')"; 297 | } 298 | .ui-body-c, 299 | .ui-body-c input, 300 | .ui-body-c select, 301 | .ui-body-c textarea, 302 | .ui-body-c button { 303 | font-family: Helvetica, Arial, sans-serif; 304 | } 305 | .ui-body-c .ui-link-inherit { 306 | color: #333333; 307 | } 308 | .ui-body-c .ui-link { 309 | color: #2489CE; 310 | font-weight: bold; 311 | } 312 | 313 | .ui-btn-up-c { 314 | border: 1px solid #ccc; 315 | background: #eee; 316 | font-weight: bold; 317 | color: #444; 318 | cursor: pointer; 319 | text-shadow: 0 1px 1px #f6f6f6; 320 | text-decoration: none; 321 | background-image: -moz-linear-gradient(top, 322 | #fefefe, 323 | #eeeeee); 324 | background-image: -webkit-gradient(linear,left top,left bottom, 325 | color-stop(0, #fdfdfd), 326 | color-stop(1, #eeeeee)); 327 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; 328 | } 329 | .ui-btn-up-c a.ui-link-inherit { 330 | color: #2F3E46; 331 | } 332 | 333 | .ui-btn-hover-c { 334 | border: 1px solid #bbb; 335 | background: #dadada; 336 | font-weight: bold; 337 | color: #101010; 338 | text-decoration: none; 339 | text-shadow: 0 1px 1px #fff; 340 | background-image: -moz-linear-gradient(top, 341 | #ededed, 342 | #dadada); 343 | background-image: -webkit-gradient(linear,left top,left bottom, 344 | color-stop(0, #ededed), 345 | color-stop(1, #dadada)); 346 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#dadada')"; 347 | } 348 | .ui-btn-hover-c a.ui-link-inherit { 349 | color: #2F3E46; 350 | } 351 | .ui-btn-down-c { 352 | border: 1px solid #808080; 353 | background: #fdfdfd; 354 | font-weight: bold; 355 | color: #111111; 356 | text-shadow: 0 1px 1px #ffffff; 357 | background-image: -moz-linear-gradient(top, 358 | #eeeeee, 359 | #fdfdfd); 360 | background-image: -webkit-gradient(linear,left top,left bottom, 361 | color-stop(0, #eeeeee), 362 | color-stop(1, #fdfdfd)); 363 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#fdfdfd')"; 364 | } 365 | .ui-btn-down-c a.ui-link-inherit { 366 | color: #2F3E46; 367 | } 368 | .ui-btn-up-c, 369 | .ui-btn-hover-c, 370 | .ui-btn-down-c { 371 | font-family: Helvetica, Arial, sans-serif; 372 | } 373 | 374 | 375 | /* D 376 | -----------------------------------------------------------------------------------------------------------*/ 377 | 378 | .ui-bar-d { 379 | border: 1px solid #ccc; 380 | background: #bbb; 381 | color: #333; 382 | text-shadow: 0 1px 0 #eee; 383 | background-image: -moz-linear-gradient(top, 384 | #ddd, 385 | #bbb); 386 | background-image: -webkit-gradient(linear,left top,left bottom, 387 | color-stop(0, #ddd), 388 | color-stop(1, #bbb)); 389 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#bbbbbb')"; 390 | } 391 | .ui-bar-d, 392 | .ui-bar-d input, 393 | .ui-bar-d select, 394 | .ui-bar-d textarea, 395 | .ui-bar-d button { 396 | font-family: Helvetica, Arial, sans-serif; 397 | } 398 | .ui-bar-d .ui-link-inherit { 399 | color: #333; 400 | } 401 | .ui-bar-d .ui-link { 402 | color: #2489CE; 403 | font-weight: bold; 404 | } 405 | .ui-body-d { 406 | border: 1px solid #ccc; 407 | color: #333333; 408 | text-shadow: 0 1px 0 #fff; 409 | background: #ffffff; 410 | } 411 | .ui-body-d, 412 | .ui-body-d input, 413 | .ui-body-d select, 414 | .ui-body-d textarea, 415 | .ui-body-d button { 416 | font-family: Helvetica, Arial, sans-serif; 417 | } 418 | .ui-body-d .ui-link-inherit { 419 | color: #333333; 420 | } 421 | .ui-body-d .ui-link { 422 | color: #2489CE; 423 | font-weight: bold; 424 | } 425 | .ui-btn-up-d { 426 | border: 1px solid #ccc; 427 | background: #fff; 428 | font-weight: bold; 429 | color: #444; 430 | text-decoration: none; 431 | text-shadow: 0 1px 1px #fff; 432 | } 433 | .ui-btn-up-d a.ui-link-inherit { 434 | color: #333; 435 | } 436 | .ui-btn-hover-d { 437 | border: 1px solid #aaa; 438 | background: #eeeeee; 439 | font-weight: bold; 440 | color: #222; 441 | cursor: pointer; 442 | text-shadow: 0 1px 1px #fff; 443 | text-decoration: none; 444 | background-image: -moz-linear-gradient(top, 445 | #fdfdfd, 446 | #eeeeee); 447 | background-image: -webkit-gradient(linear,left top,left bottom, 448 | color-stop(0, #fdfdfd), 449 | color-stop(1, #eeeeee)); 450 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; 451 | } 452 | .ui-btn-hover-d a.ui-link-inherit { 453 | color: #222; 454 | } 455 | .ui-btn-down-d { 456 | border: 1px solid #aaaaaa; 457 | background: #ffffff; 458 | font-weight: bold; 459 | color: #111; 460 | text-shadow: 0 1px 1px #ffffff; 461 | background-image: -moz-linear-gradient(top, 462 | #eeeeee, 463 | #ffffff); 464 | background-image: -webkit-gradient(linear,left top,left bottom, 465 | color-stop(0, #eeeeee), 466 | color-stop(1, #ffffff)); 467 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#ffffff')"; 468 | } 469 | .ui-btn-down-d a.ui-link-inherit { 470 | border: 1px solid #808080; 471 | background: #ced0d2; 472 | font-weight: bold; 473 | color: #111; 474 | text-shadow: none; 475 | background-image: -moz-linear-gradient(top, 476 | #cccccc, 477 | #eeeeee); 478 | background-image: -webkit-gradient(linear,left top,left bottom, 479 | color-stop(0, #cccccc), 480 | color-stop(1, #eeeeee)); 481 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; 482 | } 483 | .ui-btn-up-d, 484 | .ui-btn-hover-d, 485 | .ui-btn-down-d { 486 | font-family: Helvetica, Arial, sans-serif; 487 | } 488 | 489 | 490 | /* E 491 | -----------------------------------------------------------------------------------------------------------*/ 492 | 493 | .ui-bar-e { 494 | border: 1px solid #F7C942; 495 | background: #fadb4e; 496 | color: #333; 497 | text-shadow: 0 1px 0 #fff; 498 | background-image: -moz-linear-gradient(top, 499 | #fceda7, 500 | #fadb4e); 501 | background-image: -webkit-gradient(linear,left top,left bottom, 502 | color-stop(0, #fceda7), 503 | color-stop(1, #fadb4e)); 504 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; 505 | } 506 | .ui-bar-e, 507 | .ui-bar-e input, 508 | .ui-bar-e select, 509 | .ui-bar-e textarea, 510 | .ui-bar-d button { 511 | font-family: Helvetica, Arial, sans-serif; 512 | } 513 | .ui-bar-e .ui-link-inherit { 514 | color: #333; 515 | } 516 | .ui-bar-e .ui-link { 517 | color: #2489CE; 518 | font-weight: bold; 519 | } 520 | .ui-body-e { 521 | border: 1px solid #F7C942; 522 | color: #333333; 523 | text-shadow: 0 1px 0 #fff; 524 | background: #faeb9e; 525 | background-image: -moz-linear-gradient(top, 526 | #fff, 527 | #faeb9e); 528 | background-image: -webkit-gradient(linear,left top,left bottom, 529 | color-stop(0, #fff), 530 | color-stop(1, #faeb9e)); 531 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"; 532 | } 533 | .ui-body-e, 534 | .ui-body-e input, 535 | .ui-body-e select, 536 | .ui-body-e textarea, 537 | .ui-body-e button { 538 | font-family: Helvetica, Arial, sans-serif; 539 | } 540 | .ui-body-e .ui-link-inherit { 541 | color: #333333; 542 | } 543 | .ui-body-e .ui-link { 544 | color: #2489CE; 545 | font-weight: bold; 546 | } 547 | .ui-btn-up-e { 548 | border: 1px solid #F7C942; 549 | background: #fadb4e; 550 | font-weight: bold; 551 | color: #333; 552 | cursor: pointer; 553 | text-shadow: 0 1px 1px #fe3; 554 | text-decoration: none; 555 | text-shadow: 0 1px 0 #fff; 556 | background-image: -moz-linear-gradient(top, 557 | #fceda7, 558 | #fadb4e); 559 | background-image: -webkit-gradient(linear,left top,left bottom, 560 | color-stop(0, #fceda7), 561 | color-stop(1, #fadb4e)); 562 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; 563 | } 564 | .ui-btn-up-e a.ui-link-inherit { 565 | color: #333; 566 | } 567 | .ui-btn-hover-e { 568 | border: 1px solid #e79952; 569 | background: #fbe26f; 570 | font-weight: bold; 571 | color: #111; 572 | text-decoration: none; 573 | text-shadow: 0 1px 1px #fff; 574 | background-image: -moz-linear-gradient(top, 575 | #fcf0b5, 576 | #fbe26f); 577 | background-image: -webkit-gradient(linear,left top,left bottom, 578 | color-stop(0, #fcf0b5), 579 | color-stop(1, #fbe26f)); 580 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')"; 581 | } 582 | 583 | .ui-btn-hover-e a.ui-link-inherit { 584 | color: #333; 585 | } 586 | .ui-btn-down-e { 587 | border: 1px solid #F7C942; 588 | background: #fceda7; 589 | font-weight: bold; 590 | color: #111; 591 | text-shadow: 0 1px 1px #ffffff; 592 | background-image: -moz-linear-gradient(top, 593 | #fadb4e, 594 | #fceda7); 595 | background-image: -webkit-gradient(linear,left top,left bottom, 596 | color-stop(0, #fadb4e), 597 | color-stop(1, #fceda7)); 598 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fadb4e', EndColorStr='#fceda7')"; 599 | } 600 | .ui-btn-down-e a.ui-link-inherit { 601 | color: #333; 602 | } 603 | .ui-btn-up-e, 604 | .ui-btn-hover-e, 605 | .ui-btn-down-e { 606 | font-family: Helvetica, Arial, sans-serif; 607 | } 608 | 609 | 610 | /* links within "buttons" 611 | -----------------------------------------------------------------------------------------------------------*/ 612 | 613 | a.ui-link-inherit { 614 | text-decoration: none !important; 615 | } 616 | 617 | 618 | /* Active class used as the "on" state across all themes 619 | -----------------------------------------------------------------------------------------------------------*/ 620 | 621 | .ui-btn-active { 622 | border: 1px solid #155678; 623 | background: #4596ce; 624 | font-weight: bold; 625 | color: #fff; 626 | cursor: pointer; 627 | text-shadow: 0 -1px 1px #145072; 628 | text-decoration: none; 629 | background-image: -moz-linear-gradient(top, 630 | #85bae4, 631 | #5393c5); 632 | background-image: -webkit-gradient(linear,left top,left bottom, 633 | color-stop(0, #85bae4), 634 | color-stop(1, #5393c5)); 635 | -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')"; 636 | outline: none; 637 | } 638 | .ui-btn-active a.ui-link-inherit { 639 | color: #fff; 640 | } 641 | 642 | 643 | /* button inner top highlight 644 | -----------------------------------------------------------------------------------------------------------*/ 645 | 646 | .ui-btn-inner { 647 | border-top: 1px solid #fff; 648 | border-color: rgba(255,255,255,.3); 649 | } 650 | 651 | 652 | /* corner rounding classes 653 | -----------------------------------------------------------------------------------------------------------*/ 654 | 655 | .ui-corner-tl { 656 | -moz-border-radius-topleft: .6em; 657 | -webkit-border-top-left-radius: .6em; 658 | border-top-left-radius: .6em; 659 | } 660 | .ui-corner-tr { 661 | -moz-border-radius-topright: .6em; 662 | -webkit-border-top-right-radius: .6em; 663 | border-top-right-radius: .6em; 664 | } 665 | .ui-corner-bl { 666 | -moz-border-radius-bottomleft: .6em; 667 | -webkit-border-bottom-left-radius: .6em; 668 | border-bottom-left-radius: .6em; 669 | } 670 | .ui-corner-br { 671 | -moz-border-radius-bottomright: .6em; 672 | -webkit-border-bottom-right-radius: .6em; 673 | border-bottom-right-radius: .6em; 674 | } 675 | .ui-corner-top { 676 | -moz-border-radius-topleft: .6em; 677 | -webkit-border-top-left-radius: .6em; 678 | border-top-left-radius: .6em; 679 | -moz-border-radius-topright: .6em; 680 | -webkit-border-top-right-radius: .6em; 681 | border-top-right-radius: .6em; 682 | } 683 | .ui-corner-bottom { 684 | -moz-border-radius-bottomleft: .6em; 685 | -webkit-border-bottom-left-radius: .6em; 686 | border-bottom-left-radius: .6em; 687 | -moz-border-radius-bottomright: .6em; 688 | -webkit-border-bottom-right-radius: .6em; 689 | border-bottom-right-radius: .6em; 690 | } 691 | .ui-corner-right { 692 | -moz-border-radius-topright: .6em; 693 | -webkit-border-top-right-radius: .6em; 694 | border-top-right-radius: .6em; 695 | -moz-border-radius-bottomright: .6em; 696 | -webkit-border-bottom-right-radius: .6em; 697 | border-bottom-right-radius: .6em; 698 | } 699 | .ui-corner-left { 700 | -moz-border-radius-topleft: .6em; 701 | -webkit-border-top-left-radius: .6em; 702 | border-top-left-radius: .6em; 703 | -moz-border-radius-bottomleft: .6em; 704 | -webkit-border-bottom-left-radius: .6em; 705 | border-bottom-left-radius: .6em; 706 | } 707 | .ui-corner-all { 708 | -moz-border-radius: .6em; 709 | -webkit-border-radius: .6em; 710 | border-radius: .6em; 711 | } 712 | 713 | 714 | 715 | /* Interaction cues 716 | -----------------------------------------------------------------------------------------------------------*/ 717 | .ui-disabled { 718 | opacity: .3; 719 | } 720 | .ui-disabled, 721 | .ui-disabled a { 722 | cursor: default !important; 723 | } 724 | 725 | /* Icons 726 | -----------------------------------------------------------------------------------------------------------*/ 727 | 728 | .ui-icon { 729 | background-image: url(images/icons-18-white.png); 730 | background-repeat: no-repeat; 731 | background-color: #666; 732 | background-color: rgba(0,0,0,.4); 733 | -moz-border-radius: 9px; 734 | -webkit-border-radius: 9px; 735 | border-radius: 9px; 736 | } 737 | .ui-icon-disc { 738 | background-color: #666; 739 | background-color: rgba(0,0,0,.3); 740 | -moz-border-radius: 9px; 741 | -webkit-border-radius: 9px; 742 | border-radius: 9px; 743 | } 744 | 745 | /* Alt icon color 746 | -----------------------------------------------------------------------------------------------------------*/ 747 | 748 | .ui-icon-black { 749 | background-image: url(images/icons-18-black.png); 750 | } 751 | .ui-icon-black-disc { 752 | background-color: #fff; 753 | background-color: rgba(255,255,255,.3); 754 | -moz-border-radius: 9px; 755 | -webkit-border-radius: 9px; 756 | border-radius: 9px; 757 | } 758 | 759 | /* HD/"retina" sprite 760 | -----------------------------------------------------------------------------------------------------------*/ 761 | 762 | @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { 763 | .ui-icon { 764 | background-image: url(images/icons-36-white.png); 765 | background-size: 630px 18px; 766 | } 767 | .ui-icon-black { 768 | background-image: url(images/icons-36-black.png); 769 | } 770 | } 771 | 772 | /* plus minus */ 773 | .ui-icon-plus { 774 | background-position: -0 0; 775 | } 776 | .ui-icon-minus { 777 | background-position: -36px 0; 778 | } 779 | 780 | /* delete/close */ 781 | .ui-icon-delete { 782 | background-position: -72px 0; 783 | } 784 | 785 | /* arrows */ 786 | .ui-icon-arrow-r { 787 | background-position: -108px 0; 788 | } 789 | .ui-icon-arrow-l { 790 | background-position: -144px 0; 791 | } 792 | .ui-icon-arrow-u { 793 | background-position: -180px 0; 794 | } 795 | .ui-icon-arrow-d { 796 | background-position: -216px 0; 797 | } 798 | 799 | /* misc */ 800 | .ui-icon-check { 801 | background-position: -252px 0; 802 | } 803 | .ui-icon-gear { 804 | background-position: -288px 0; 805 | } 806 | .ui-icon-refresh { 807 | background-position: -324px 0; 808 | } 809 | .ui-icon-forward { 810 | background-position: -360px 0; 811 | } 812 | .ui-icon-back { 813 | background-position: -396px 0; 814 | } 815 | .ui-icon-grid { 816 | background-position: -432px 0; 817 | } 818 | .ui-icon-star { 819 | background-position: -468px 0; 820 | } 821 | .ui-icon-alert { 822 | background-position: -504px 0; 823 | } 824 | .ui-icon-info { 825 | background-position: -540px 0; 826 | } 827 | .ui-icon-home { 828 | background-position: -576px 0; 829 | } 830 | .ui-icon-search { 831 | background-position: -612px 0; 832 | } 833 | 834 | 835 | /* checks,radios */ 836 | .ui-icon-checkbox-off, 837 | .ui-icon-checkbox-on, 838 | .ui-icon-radio-off, 839 | .ui-icon-radio-on { 840 | background-color: transparent; 841 | -moz-border-radius: 0; 842 | -webkit-border-radius: 0; 843 | border-radius: 0; 844 | background-size: 20px 20px; 845 | } 846 | .ui-icon-checkbox-off { 847 | background-image: url(images/form-check-off.png); 848 | } 849 | .ui-icon-checkbox-on { 850 | background-image: url(images/form-check-on.png); 851 | } 852 | .ui-icon-radio-off { 853 | background-image: url(images/form-radio-off.png);} 854 | .ui-icon-radio-on { 855 | background-image: url(images/form-radio-on.png); 856 | } 857 | .ui-icon-searchfield { 858 | background-image: url(images/icon-search-black.png); 859 | background-size: 16px 16px; 860 | } 861 | 862 | /* loading icon */ 863 | .ui-icon-loading { 864 | background-image: url(images/ajax-loader.png); 865 | width: 40px; 866 | height: 40px; 867 | -moz-border-radius: 20px; 868 | -webkit-border-radius: 20px; 869 | border-radius: 20px; 870 | background-size: 35px 35px; 871 | } 872 | 873 | 874 | /* Button corner classes 875 | -----------------------------------------------------------------------------------------------------------*/ 876 | 877 | .ui-btn-corner-tl { 878 | -moz-border-radius-topleft: 1em; 879 | -webkit-border-top-left-radius: 1em; 880 | border-top-left-radius: 1em; 881 | } 882 | .ui-btn-corner-tr { 883 | -moz-border-radius-topright: 1em; 884 | -webkit-border-top-right-radius: 1em; 885 | border-top-right-radius: 1em; 886 | } 887 | .ui-btn-corner-bl { 888 | -moz-border-radius-bottomleft: 1em; 889 | -webkit-border-bottom-left-radius: 1em; 890 | border-bottom-left-radius: 1em; 891 | } 892 | .ui-btn-corner-br { 893 | -moz-border-radius-bottomright: 1em; 894 | -webkit-border-bottom-right-radius: 1em; 895 | border-bottom-right-radius: 1em; 896 | } 897 | .ui-btn-corner-top { 898 | -moz-border-radius-topleft: 1em; 899 | -webkit-border-top-left-radius: 1em; 900 | border-top-left-radius: 1em; 901 | -moz-border-radius-topright: 1em; 902 | -webkit-border-top-right-radius: 1em; 903 | border-top-right-radius: 1em; 904 | } 905 | .ui-btn-corner-bottom { 906 | -moz-border-radius-bottomleft: 1em; 907 | -webkit-border-bottom-left-radius: 1em; 908 | border-bottom-left-radius: 1em; 909 | -moz-border-radius-bottomright: 1em; 910 | -webkit-border-bottom-right-radius: 1em; 911 | border-bottom-right-radius: 1em; 912 | } 913 | .ui-btn-corner-right { 914 | -moz-border-radius-topright: 1em; 915 | -webkit-border-top-right-radius: 1em; 916 | border-top-right-radius: 1em; 917 | -moz-border-radius-bottomright: 1em; 918 | -webkit-border-bottom-right-radius: 1em; 919 | border-bottom-right-radius: 1em; 920 | } 921 | .ui-btn-corner-left { 922 | -moz-border-radius-topleft: 1em; 923 | -webkit-border-top-left-radius: 1em; 924 | border-top-left-radius: 1em; 925 | -moz-border-radius-bottomleft: 1em; 926 | -webkit-border-bottom-left-radius: 1em; 927 | border-bottom-left-radius: 1em; 928 | } 929 | .ui-btn-corner-all { 930 | -moz-border-radius: 1em; 931 | -webkit-border-radius: 1em; 932 | border-radius: 1em; 933 | } 934 | 935 | /* radius clip workaround for cleaning up corner trapping */ 936 | .ui-corner-tl, 937 | .ui-corner-tr, 938 | .ui-corner-bl, 939 | .ui-corner-br, 940 | .ui-corner-top, 941 | .ui-corner-bottom, 942 | .ui-corner-right, 943 | .ui-corner-left, 944 | .ui-corner-all, 945 | .ui-btn-corner-tl, 946 | .ui-btn-corner-tr, 947 | .ui-btn-corner-bl, 948 | .ui-btn-corner-br, 949 | .ui-btn-corner-top, 950 | .ui-btn-corner-bottom, 951 | .ui-btn-corner-right, 952 | .ui-btn-corner-left, 953 | .ui-btn-corner-all { 954 | -webkit-background-clip: padding-box; 955 | -moz-background-clip: padding-box; 956 | background-clip: padding-box; 957 | } 958 | 959 | /* Overlay / modal 960 | -----------------------------------------------------------------------------------------------------------*/ 961 | 962 | .ui-overlay { 963 | background: #666; 964 | opacity: .5; 965 | filter: Alpha(Opacity=50); 966 | position: absolute; 967 | width: 100%; 968 | height: 100%; 969 | } 970 | .ui-overlay-shadow { 971 | -moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6); 972 | -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6); 973 | box-shadow: 0px 0px 12px rgba(0,0,0,.6); 974 | } 975 | .ui-shadow { 976 | -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); 977 | -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3); 978 | box-shadow: 0px 1px 4px rgba(0,0,0,.3); 979 | } 980 | .ui-bar-a .ui-shadow, 981 | .ui-bar-b .ui-shadow , 982 | .ui-bar-c .ui-shadow { 983 | -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3); 984 | -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3); 985 | box-shadow: 0px 1px 0 rgba(255,255,255,.3); 986 | } 987 | .ui-shadow-inset { 988 | -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); 989 | -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); 990 | box-shadow: inset 0px 1px 4px rgba(0,0,0,.2); 991 | } 992 | .ui-icon-shadow { 993 | -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4); 994 | -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4); 995 | box-shadow: 0px 1px 0 rgba(255,255,255,.4); 996 | } 997 | 998 | 999 | /* Focus state - set here for specificity 1000 | -----------------------------------------------------------------------------------------------------------*/ 1001 | 1002 | .ui-focus { 1003 | -moz-box-shadow: 0px 0px 12px #387bbe; 1004 | -webkit-box-shadow: 0px 0px 12px #387bbe; 1005 | box-shadow: 0px 0px 12px #387bbe; 1006 | } 1007 | 1008 | /* unset box shadow in browsers that don't do it right 1009 | -----------------------------------------------------------------------------------------------------------*/ 1010 | 1011 | .ui-mobile-nosupport-boxshadow * { 1012 | -moz-box-shadow: none !important; 1013 | -webkit-box-shadow: none !important; 1014 | box-shadow: none !important; 1015 | } 1016 | 1017 | /* ...and bring back focus */ 1018 | .ui-mobile-nosupport-boxshadow .ui-focus { 1019 | outline-width: 2px; 1020 | }/* 1021 | * jQuery Mobile Framework 1022 | * Copyright (c) jQuery Project 1023 | * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. 1024 | * Note: Code is in draft form and is subject to change 1025 | */ 1026 | 1027 | /* some unsets - more probably needed */ 1028 | .ui-mobile fieldset, .ui-page { padding: 0; margin: 0; } 1029 | .ui-mobile a img, .ui-mobile fieldset { border: 0; } 1030 | 1031 | /* responsive page widths */ 1032 | .ui-mobile-viewport { margin: 0; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 1033 | 1034 | /* "page" containers - full-screen views, one should always be in view post-pageload */ 1035 | [data-role=page], [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; } 1036 | .ui-page-active { display: block; overflow: visible; } 1037 | 1038 | /*orientations from js are available */ 1039 | .portrait, 1040 | .portrait .ui-page { min-height: 480px; } 1041 | .landscape, 1042 | .landscape .ui-page { min-height: 320px; } 1043 | 1044 | /* loading screen */ 1045 | .ui-loading .ui-mobile-viewport { overflow: hidden !important; } 1046 | .ui-loading .ui-loader { display: block; } 1047 | .ui-loading .ui-page { overflow: hidden; } 1048 | .ui-loader { display: none; position: absolute; opacity: .85; z-index: 10; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; } 1049 | .ui-loader h1 { font-size: 15px; text-align: center; } 1050 | .ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; } 1051 | 1052 | /*fouc*/ 1053 | .ui-mobile-rendering > * { visibility: hidden; } 1054 | 1055 | /*headers, content panels*/ 1056 | .ui-bar, .ui-body { position: relative; padding: .4em 15px; overflow: hidden; display: block; clear:both; } 1057 | .ui-bar { font-size: 16px; margin: 0; } 1058 | .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; } 1059 | 1060 | .ui-header, .ui-footer { display: block; } 1061 | .ui-page .ui-header, .ui-page .ui-footer { position: relative; } 1062 | .ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em; } 1063 | .ui-header .ui-title, .ui-footer .ui-title { text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; } 1064 | .ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; } 1065 | 1066 | /*content area*/ 1067 | .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; } 1068 | .ui-page-fullscreen .ui-content { padding:0; } 1069 | 1070 | /* icons sizing */ 1071 | .ui-icon { width: 18px; height: 18px; } 1072 | 1073 | /* fullscreen class on ui-content div */ 1074 | .ui-fullscreen { } 1075 | .ui-fullscreen img { max-width: 100%; } 1076 | 1077 | /* non-js content hiding */ 1078 | .ui-nojs { position: absolute; left: -9999px; } 1079 | /* 1080 | * jQuery Mobile Framework 1081 | * Copyright (c) jQuery Project 1082 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1083 | */ 1084 | .spin { 1085 | -webkit-transform: rotate(360deg); 1086 | -webkit-animation-name: spin; 1087 | -webkit-animation-duration: 1s; 1088 | -webkit-animation-iteration-count: infinite; 1089 | } 1090 | @-webkit-keyframes spin { 1091 | from {-webkit-transform: rotate(0deg);} 1092 | to {-webkit-transform: rotate(360deg);} 1093 | } 1094 | 1095 | /* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ 1096 | Built by David Kaneda and maintained by Jonathan Stark. 1097 | */ 1098 | .in, .out { 1099 | -webkit-animation-timing-function: ease-in-out; 1100 | -webkit-animation-duration: 350ms; 1101 | } 1102 | 1103 | .slide.in { 1104 | -webkit-transform: translateX(0); 1105 | -webkit-animation-name: slideinfromright; 1106 | } 1107 | 1108 | .slide.out { 1109 | -webkit-transform: translateX(-100%); 1110 | -webkit-animation-name: slideouttoleft; 1111 | } 1112 | 1113 | .slide.in.reverse { 1114 | -webkit-transform: translateX(0); 1115 | -webkit-animation-name: slideinfromleft; 1116 | } 1117 | 1118 | .slide.out.reverse { 1119 | -webkit-transform: translateX(100%); 1120 | -webkit-animation-name: slideouttoright; 1121 | } 1122 | 1123 | .slideup.in { 1124 | -webkit-transform: translateY(0); 1125 | -webkit-animation-name: slideinfrombottom; 1126 | z-index: 10; 1127 | } 1128 | 1129 | .slideup.out { 1130 | -webkit-animation-name: dontmove; 1131 | z-index: 0; 1132 | } 1133 | 1134 | .slideup.out.reverse { 1135 | -webkit-transform: translateY(100%); 1136 | z-index: 10; 1137 | -webkit-animation-name: slideouttobottom; 1138 | } 1139 | 1140 | .slideup.in.reverse { 1141 | z-index: 0; 1142 | -webkit-animation-name: dontmove; 1143 | } 1144 | .slidedown.in { 1145 | -webkit-transform: translateY(0); 1146 | -webkit-animation-name: slideinfromtop; 1147 | z-index: 10; 1148 | } 1149 | 1150 | .slidedown.out { 1151 | -webkit-animation-name: dontmove; 1152 | z-index: 0; 1153 | } 1154 | 1155 | .slidedown.out.reverse { 1156 | -webkit-transform: translateY(-100%); 1157 | z-index: 10; 1158 | -webkit-animation-name: slideouttotop; 1159 | } 1160 | 1161 | .slidedown.in.reverse { 1162 | z-index: 0; 1163 | -webkit-animation-name: dontmove; 1164 | } 1165 | 1166 | @-webkit-keyframes slideinfromright { 1167 | from { -webkit-transform: translateX(100%); } 1168 | to { -webkit-transform: translateX(0); } 1169 | } 1170 | 1171 | @-webkit-keyframes slideinfromleft { 1172 | from { -webkit-transform: translateX(-100%); } 1173 | to { -webkit-transform: translateX(0); } 1174 | } 1175 | 1176 | @-webkit-keyframes slideouttoleft { 1177 | from { -webkit-transform: translateX(0); } 1178 | to { -webkit-transform: translateX(-100%); } 1179 | } 1180 | 1181 | @-webkit-keyframes slideouttoright { 1182 | from { -webkit-transform: translateX(0); } 1183 | to { -webkit-transform: translateX(100%); } 1184 | } 1185 | 1186 | 1187 | @-webkit-keyframes slideinfromtop { 1188 | from { -webkit-transform: translateY(-100%); } 1189 | to { -webkit-transform: translateY(0); } 1190 | } 1191 | 1192 | @-webkit-keyframes slideinfrombottom { 1193 | from { -webkit-transform: translateY(100%); } 1194 | to { -webkit-transform: translateY(0); } 1195 | } 1196 | 1197 | @-webkit-keyframes slideouttobottom { 1198 | from { -webkit-transform: translateY(0); } 1199 | to { -webkit-transform: translateY(100%); } 1200 | } 1201 | 1202 | @-webkit-keyframes slideouttotop { 1203 | from { -webkit-transform: translateY(0); } 1204 | to { -webkit-transform: translateY(-100%); } 1205 | } 1206 | @-webkit-keyframes fadein { 1207 | from { opacity: 0; } 1208 | to { opacity: 1; } 1209 | } 1210 | 1211 | @-webkit-keyframes fadeout { 1212 | from { opacity: 1; } 1213 | to { opacity: 0; } 1214 | } 1215 | 1216 | .fade.in { 1217 | opacity: 1; 1218 | z-index: 10; 1219 | -webkit-animation-name: fadein; 1220 | } 1221 | .fade.out { 1222 | z-index: 0; 1223 | -webkit-animation-name: fadeout; 1224 | } 1225 | 1226 | /* The properties in this body rule are only necessary for the 'flip' transition. 1227 | * We need specify the perspective to create a projection matrix. This will add 1228 | * some depth as the element flips. The depth number represents the distance of 1229 | * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate 1230 | * value. 1231 | */ 1232 | .ui-mobile-viewport-perspective { 1233 | -webkit-perspective: 1000; 1234 | position: absolute; 1235 | } 1236 | 1237 | .ui-mobile-viewport-transitioning, 1238 | .ui-mobile-viewport-transitioning .ui-page { 1239 | width: 100%; 1240 | height: 100%; 1241 | overflow: hidden; 1242 | } 1243 | 1244 | .flip { 1245 | -webkit-animation-duration: .65s; 1246 | -webkit-backface-visibility:hidden; 1247 | -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ 1248 | } 1249 | 1250 | .flip.in { 1251 | -webkit-transform: rotateY(0) scale(1); 1252 | -webkit-animation-name: flipinfromleft; 1253 | } 1254 | 1255 | .flip.out { 1256 | -webkit-transform: rotateY(-180deg) scale(.8); 1257 | -webkit-animation-name: flipouttoleft; 1258 | } 1259 | 1260 | /* Shake it all about */ 1261 | 1262 | .flip.in.reverse { 1263 | -webkit-transform: rotateY(0) scale(1); 1264 | -webkit-animation-name: flipinfromright; 1265 | } 1266 | 1267 | .flip.out.reverse { 1268 | -webkit-transform: rotateY(180deg) scale(.8); 1269 | -webkit-animation-name: flipouttoright; 1270 | } 1271 | 1272 | @-webkit-keyframes flipinfromright { 1273 | from { -webkit-transform: rotateY(-180deg) scale(.8); } 1274 | to { -webkit-transform: rotateY(0) scale(1); } 1275 | } 1276 | 1277 | @-webkit-keyframes flipinfromleft { 1278 | from { -webkit-transform: rotateY(180deg) scale(.8); } 1279 | to { -webkit-transform: rotateY(0) scale(1); } 1280 | } 1281 | 1282 | @-webkit-keyframes flipouttoleft { 1283 | from { -webkit-transform: rotateY(0) scale(1); } 1284 | to { -webkit-transform: rotateY(-180deg) scale(.8); } 1285 | } 1286 | 1287 | @-webkit-keyframes flipouttoright { 1288 | from { -webkit-transform: rotateY(0) scale(1); } 1289 | to { -webkit-transform: rotateY(180deg) scale(.8); } 1290 | } 1291 | 1292 | 1293 | /* Hackish, but reliable. */ 1294 | 1295 | @-webkit-keyframes dontmove { 1296 | from { opacity: 1; } 1297 | to { opacity: 1; } 1298 | } 1299 | 1300 | .pop { 1301 | -webkit-transform-origin: 50% 50%; 1302 | } 1303 | 1304 | .pop.in { 1305 | -webkit-transform: scale(1); 1306 | opacity: 1; 1307 | -webkit-animation-name: popin; 1308 | z-index: 10; 1309 | } 1310 | 1311 | .pop.out.reverse { 1312 | -webkit-transform: scale(.2); 1313 | opacity: 0; 1314 | -webkit-animation-name: popout; 1315 | z-index: 10; 1316 | } 1317 | 1318 | .pop.in.reverse { 1319 | z-index: 0; 1320 | -webkit-animation-name: dontmove; 1321 | } 1322 | 1323 | @-webkit-keyframes popin { 1324 | from { 1325 | -webkit-transform: scale(.2); 1326 | opacity: 0; 1327 | } 1328 | to { 1329 | -webkit-transform: scale(1); 1330 | opacity: 1; 1331 | } 1332 | } 1333 | 1334 | @-webkit-keyframes popout { 1335 | from { 1336 | -webkit-transform: scale(1); 1337 | opacity: 1; 1338 | } 1339 | to { 1340 | -webkit-transform: scale(.2); 1341 | opacity: 0; 1342 | } 1343 | }/* 1344 | * jQuery Mobile Framework 1345 | * Copyright (c) jQuery Project 1346 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1347 | */ 1348 | 1349 | /* content configurations. */ 1350 | .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } 1351 | .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; } 1352 | 1353 | /* grid a: 50/50 */ 1354 | .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; } 1355 | .ui-grid-a .ui-block-a { clear: left; } 1356 | 1357 | /* grid b: 33/33/33 */ 1358 | .ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.333%; } 1359 | .ui-grid-b .ui-block-a { clear: left; } 1360 | 1361 | /* grid c: 25/25/25/25 */ 1362 | .ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 25%; } 1363 | .ui-grid-c .ui-block-a { clear: left; } 1364 | 1365 | /* grid d: 20/20/20/20/20 */ 1366 | .ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 20%; } 1367 | .ui-grid-d .ui-block-a { clear: left; }/* 1368 | * jQuery Mobile Framework 1369 | * Copyright (c) jQuery Project 1370 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1371 | */ 1372 | /* fixed page header & footer configuration */ 1373 | .ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; } 1374 | .ui-header-fixed, .ui-footer-fixed { 1375 | z-index: 1000; 1376 | -webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */ 1377 | } 1378 | .ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; } 1379 | .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { opacity: .9; } 1380 | /* 1381 | * jQuery Mobile Framework 1382 | * Copyright (c) jQuery Project 1383 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1384 | */ 1385 | .ui-navbar { overflow: hidden; } 1386 | .ui-navbar ul, .ui-navbar-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;} 1387 | .ui-navbar-collapsed ul { float: left; width: 75%; margin-right: -2px; } 1388 | .ui-navbar-collapsed .ui-navbar-toggle { float: left; width: 25%; } 1389 | .ui-navbar li.ui-navbar-truncate { position: absolute; left: -9999px; top: -9999px; } 1390 | .ui-navbar li .ui-btn, .ui-navbar .ui-navbar-toggle .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; border-right-width: 0; } 1391 | .ui-navbar li .ui-btn { margin-right: -1px; } 1392 | .ui-navbar li .ui-btn:last-child { margin-right: 0; } 1393 | .ui-header .ui-navbar li .ui-btn, .ui-header .ui-navbar .ui-navbar-toggle .ui-btn, 1394 | .ui-footer .ui-navbar li .ui-btn, .ui-footer .ui-navbar .ui-navbar-toggle .ui-btn { border-top-width: 0; border-bottom-width: 0; } 1395 | .ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; } 1396 | .ui-navbar-noicons li .ui-btn .ui-btn-inner, .ui-navbar-noicons .ui-navbar-toggle .ui-btn-inner { padding-top: .8em; padding-bottom: .9em; } 1397 | /*expanded page styles*/ 1398 | .ui-navbar-expanded .ui-btn { margin: 0; font-size: 14px; } 1399 | .ui-navbar-expanded .ui-btn-inner { padding-left: 5px; padding-right: 5px; } 1400 | .ui-navbar-expanded .ui-btn-icon-top .ui-btn-inner { padding: 45px 5px 15px; text-align: center; } 1401 | .ui-navbar-expanded .ui-btn-icon-top .ui-icon { top: 15px; } 1402 | .ui-navbar-expanded .ui-btn-icon-bottom .ui-btn-inner { padding: 15px 5px 45px; text-align: center; } 1403 | .ui-navbar-expanded .ui-btn-icon-bottom .ui-icon { bottom: 15px; } 1404 | .ui-navbar-expanded li .ui-btn .ui-btn-inner { min-height: 2.5em; } 1405 | .ui-navbar-expanded .ui-navbar-noicons .ui-btn .ui-btn-inner { padding-top: 1.8em; padding-bottom: 1.9em; } 1406 | /* 1407 | * jQuery Mobile Framework 1408 | * Copyright (c) jQuery Project 1409 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1410 | */ 1411 | .ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; } 1412 | .ui-btn:focus, .ui-btn:active { outline: none; } 1413 | .ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; } 1414 | .ui-btn-inline { display: inline-block; } 1415 | .ui-btn-inner { padding: .6em 25px; display: block; height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; } 1416 | .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; } 1417 | .ui-btn-icon-notext { display: inline-block; width: 20px; height: 20px; padding: 2px 1px 2px 3px; text-indent: -9999px; } 1418 | .ui-btn-icon-notext .ui-btn-inner { padding: 0; } 1419 | .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999px; } 1420 | .ui-btn-icon-left .ui-btn-inner { padding-left: 33px; } 1421 | .ui-header .ui-btn-icon-left .ui-btn-inner, 1422 | .ui-footer .ui-btn-icon-left .ui-btn-inner, 1423 | .ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27px; } 1424 | .ui-btn-icon-right .ui-btn-inner { padding-right: 33px; } 1425 | .ui-header .ui-btn-icon-right .ui-btn-inner, 1426 | .ui-footer .ui-btn-icon-right .ui-btn-inner, 1427 | .ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27px; } 1428 | .ui-btn-icon-top .ui-btn-inner { padding-top: 33px; } 1429 | .ui-header .ui-btn-icon-top .ui-btn-inner, 1430 | .ui-footer .ui-btn-icon-top .ui-btn-inner, 1431 | .ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27px; } 1432 | .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33px; } 1433 | .ui-header .ui-btn-icon-bottom .ui-btn-inner, 1434 | .ui-footer .ui-btn-icon-bottom .ui-btn-inner, 1435 | .ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27px; } 1436 | 1437 | /*btn icon positioning*/ 1438 | .ui-btn-icon-notext .ui-icon { display: block; } 1439 | .ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon { position: absolute; top: 50%; margin-top: -9px; } 1440 | .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; } 1441 | .ui-btn-icon-left .ui-icon { left: 10px; } 1442 | .ui-btn-icon-right .ui-icon {right: 10px; } 1443 | .ui-header .ui-btn-icon-left .ui-icon, 1444 | .ui-footer .ui-btn-icon-left .ui-icon, 1445 | .ui-bar .ui-btn-icon-left .ui-icon { left: 4px; } 1446 | .ui-header .ui-btn-icon-right .ui-icon, 1447 | .ui-footer .ui-btn-icon-right .ui-icon, 1448 | .ui-bar .ui-btn-icon-right .ui-icon { right: 4px; } 1449 | .ui-header .ui-btn-icon-top .ui-icon, 1450 | .ui-footer .ui-btn-icon-top .ui-icon, 1451 | .ui-bar .ui-btn-icon-top .ui-icon { top: 4px; } 1452 | .ui-header .ui-btn-icon-bottom .ui-icon, 1453 | .ui-footer .ui-btn-icon-bottom .ui-icon, 1454 | .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4px; } 1455 | .ui-btn-icon-top .ui-icon { top: 5px; } 1456 | .ui-btn-icon-bottom .ui-icon { bottom: 5px; } 1457 | /*hiding native button,inputs */ 1458 | .ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: 0; cursor: pointer; } 1459 | /* 1460 | * jQuery Mobile Framework 1461 | * Copyright (c) jQuery Project 1462 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1463 | */ 1464 | .ui-collapsible-contain { margin: .5em 0; } 1465 | .ui-collapsible-heading { font-size: 16px; display: block; margin: 0 -8px; padding: 0; border-width: 0 0 1px 0; position: relative; } 1466 | .ui-collapsible-heading a { text-align: left; margin: 0; } 1467 | .ui-collapsible-heading a .ui-btn-inner { padding-left: 40px; } 1468 | .ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; } 1469 | .ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 0; } 1470 | .ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; } 1471 | .ui-collapsible-heading-status { position:absolute; left:-9999px; } 1472 | .ui-collapsible-content { display: block; padding: 10px 0 10px 8px; } 1473 | .ui-collapsible-content-collapsed { display: none; } 1474 | 1475 | .ui-collapsible-set { margin: .5em 0; } 1476 | .ui-collapsible-set .ui-collapsible-contain { margin: -1px 0 0; } 1477 | /* 1478 | * jQuery Mobile Framework 1479 | * Copyright (c) jQuery Project 1480 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1481 | */ 1482 | .ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; } 1483 | .ui-bar .ui-controlgroup { margin: 0 .3em; } 1484 | .ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; } 1485 | .ui-controlgroup-controls { display: block; width: 95%;} 1486 | .ui-controlgroup li { list-style: none; } 1487 | .ui-controlgroup-vertical .ui-btn, 1488 | .ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; } 1489 | .ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; } 1490 | .ui-controlgroup-horizontal { padding: 0; } 1491 | .ui-controlgroup-horizontal .ui-btn, 1492 | .ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { margin: 0 -5px 0 0; display: inline-block; } 1493 | .ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn, 1494 | .ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; } 1495 | .ui-controlgroup-horizontal .ui-controlgroup-last { margin-right: 0; } 1496 | .ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; } 1497 | /* conflicts with listview.. 1498 | .ui-controlgroup .ui-btn-icon-notext { width: 30px; height: 30px; text-indent: -9999px; } 1499 | .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { padding: 5px 6px 5px 5px; } 1500 | */ 1501 | 1502 | .min-width-480px .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; } 1503 | .min-width-480px .ui-controlgroup-controls { width: 60%; display: inline-block; } /* 1504 | * jQuery Mobile Framework 1505 | * Copyright (c) jQuery Project 1506 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1507 | */ 1508 | .ui-dialog { min-height: 480px; } 1509 | .ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { margin: 15px; position: relative; } 1510 | .ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; width: auto; } 1511 | .ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px; }/* 1512 | * jQuery Mobile Framework 1513 | * Copyright (c) jQuery Project 1514 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1515 | */ 1516 | .ui-checkbox, .ui-radio { position:relative; margin: .2em 0 .5em; z-index: 1; } 1517 | .ui-checkbox .ui-btn, .ui-radio .ui-btn { margin: 0; text-align: left; z-index: 2; } 1518 | .ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; } 1519 | .ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; } 1520 | .ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; } 1521 | .ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; } 1522 | /* input, label positioning */ 1523 | .ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }/* 1524 | * jQuery Mobile Framework 1525 | * Copyright (c) jQuery Project 1526 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1527 | */ 1528 | .ui-field-contain { background: none; padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; } 1529 | .ui-field-contain:first-child { border-top-width: 0; } 1530 | .min-width-480px .ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }/* 1531 | * jQuery Mobile Framework 1532 | * Copyright (c) jQuery Project 1533 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1534 | */ 1535 | .ui-select { display: block; position: relative; } 1536 | .ui-select select { position: absolute; left: -9999px; top: -9999px; } 1537 | .ui-select .ui-btn select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; height: 100%; opacity: 0.001; } 1538 | .ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; } 1539 | 1540 | .ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; } 1541 | .ui-select .ui-btn-icon-right .ui-icon { right: 15px; } 1542 | 1543 | /* labels */ 1544 | label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; } 1545 | 1546 | /*listbox*/ 1547 | .ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text { display: inline-block; min-height: 1em; } 1548 | .ui-select .ui-btn-text { text-overflow: ellipsis; overflow: hidden; width: 85% } 1549 | 1550 | .ui-selectmenu { position: absolute; padding: 0; z-index: 100 !important; width: 80%; max-width: 350px; padding: 6px; } 1551 | .ui-selectmenu .ui-listview { margin: 0; } 1552 | .ui-selectmenu .ui-btn.ui-li-divider { cursor: default; } 1553 | .ui-selectmenu-hidden { top: -9999px; left: -9999px; } 1554 | .ui-selectmenu-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; } 1555 | .ui-screen-hidden, .ui-selectmenu-list .ui-li .ui-icon { display: none; } 1556 | .ui-selectmenu-list .ui-li .ui-icon { display: block; } 1557 | .ui-li.ui-selectmenu-placeholder { display: none; } 1558 | 1559 | .min-width-480px label.ui-select { display: inline-block; width: 20%; margin: 0 2% 0 0; } 1560 | .min-width-480px .ui-select { width: 60%; display: inline-block; } 1561 | 1562 | /* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */ 1563 | .ui-selectmenu .ui-header h1:after { content: '.'; visibility: hidden; } 1564 | /* 1565 | * jQuery Mobile Framework 1566 | * Copyright (c) jQuery Project 1567 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1568 | */ 1569 | label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; } 1570 | input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 95%; } 1571 | input.ui-input-text { -webkit-appearance: none; } 1572 | textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; } 1573 | .ui-input-search { padding: 0 30px; width: 77%; background-position: 8px 50%; background-repeat: no-repeat; position: relative; } 1574 | .ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; } 1575 | .ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -14px; } 1576 | .ui-input-search .ui-input-clear-hidden { display: none; } 1577 | 1578 | /* orientation adjustments - incomplete!*/ 1579 | .min-width-480px label.ui-input-text { vertical-align: top; } 1580 | .min-width-480px label.ui-input-text { display: inline-block; width: 20%; margin: 0 2% 0 0; } 1581 | .min-width-480px input.ui-input-text, 1582 | .min-width-480px textarea.ui-input-text, 1583 | .min-width-480px .ui-input-search { width: 60%; display: inline-block; } 1584 | .min-width-480px .ui-input-search { width: 50%; }/* 1585 | * jQuery Mobile Framework 1586 | * Copyright (c) jQuery Project 1587 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1588 | */ 1589 | .ui-listview { margin: 0; counter-reset: listnumbering; } 1590 | .ui-content .ui-listview { margin: -15px; } 1591 | .ui-content .ui-listview-inset { margin: 1em 0; } 1592 | .ui-listview, .ui-li { list-style:none; padding:0; zoom: 1; } 1593 | .ui-li { display: block; margin:0; position: relative; overflow: hidden; text-align: left; border-width: 0; border-top-width: 1px; } 1594 | .ui-li .ui-btn-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 1595 | .ui-li-divider, .ui-li-static { padding: .5em 15px; font-size: 14px; font-weight: bold; counter-reset: listnumbering; } 1596 | ol.ui-listview .ui-link-inherit:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; } 1597 | ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */ 1598 | .ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; } 1599 | .ui-li:last-child { border-bottom-width: 1px; } 1600 | .ui-li .ui-btn-inner { display: block; position: relative; padding: .7em 75px .7em 15px; } 1601 | .ui-li-has-thumb .ui-btn-inner { min-height: 60px; padding-left: 100px; } 1602 | .ui-li-has-icon .ui-btn-inner { min-height: 20px; padding-left: 40px; } 1603 | .ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 1604 | .ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 1605 | .ui-li-thumb, .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; } 1606 | .ui-li-icon { max-height: 40px; max-width: 40px; left: 10px; top: .9em; } 1607 | .ui-li-thumb, .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; } 1608 | 1609 | .ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; } 1610 | .min-width-480px .ui-li-aside { width: 45%; } 1611 | .ui-li-has-alt .ui-btn-inner { padding-right: 95px; } 1612 | .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 38px; } 1613 | .ui-li-divider .ui-li-count { right: 10px; } 1614 | .ui-li-has-alt .ui-li-count { right: 55px; } 1615 | .ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; } 1616 | .ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; } 1617 | .ui-li-link-alt .ui-btn-inner { padding: 0; position: static; } 1618 | .ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; } 1619 | 1620 | .ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px } 1621 | .ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; } 1622 | 1623 | /* Odd iPad positioning issue. */ 1624 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 1625 | .ui-li .ui-btn-text { overflow: visible; } 1626 | }/* 1627 | * jQuery Mobile Framework 1628 | * Copyright (c) jQuery Project 1629 | * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. 1630 | */ 1631 | label.ui-slider { display: block; } 1632 | input.ui-slider-input, .min-width-480px input.ui-slider-input { display: inline-block; width: 50px; } 1633 | select.ui-slider-switch { display: none; } 1634 | div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; } 1635 | a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; } 1636 | a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; } 1637 | .min-width-480px label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; } 1638 | .min-width-480px div.ui-slider { width: 45%; } 1639 | 1640 | div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; } 1641 | div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; } 1642 | div.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; } 1643 | div.ui-slider-labelbg { position: absolute; top:0; margin: 0; border-width: 0; } 1644 | div.ui-slider-switch div.ui-slider-labelbg-a { width: 60%; height: 100%; left: 0; } 1645 | div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right: 0; } 1646 | .ui-slider-switch-a div.ui-slider-labelbg-a, .ui-slider-switch-b div.ui-slider-labelbg-b { z-index: 1; } 1647 | .ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 10; } 1648 | 1649 | div.ui-slider-switch a.ui-slider-handle { z-index: 20; width: 101%; height: 32px; margin-top: -18px; margin-left: -101%; } 1650 | span.ui-slider-label { width: 100%; position: absolute;height: 32px; font-size: 16px; text-align: center; line-height: 2; background: none; border-color: transparent; } 1651 | span.ui-slider-label-a { left: -100%; margin-right: -1px } 1652 | span.ui-slider-label-b { right: -100%; margin-left: -1px } 1653 | -------------------------------------------------------------------------------- /lib/build.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /** 3 | * Script to build all the css for jquery-mobile-960 4 | * Porting the famous 960 grid to jquery-mobile 5 | * jquery mobile grid are crud at best 6 | * surely not suitable for large screens 7 | * pure port 8 | */ 9 | 10 | 11 | ////////////////////////////////////////////////////////////////////////////////// 12 | // buildGeneric // 13 | ////////////////////////////////////////////////////////////////////////////////// 14 | 15 | var buildGenericAlphaOmega = function(nCols){ 16 | var str = ""; 17 | str += ".container_"+nCols+" .alpha { clear-left: 0; }\n"; 18 | str += "\n"; 19 | return str; 20 | } 21 | 22 | var buildGenericAllCols = function(nCols){ 23 | var str = ""; 24 | for(var col = 0; col < nCols; col++){ 25 | var width = (100/nCols)*(col+1); 26 | str += ".grid_"+(col+1); 27 | str += col+1 == nCols ? "\n" : ",\n"; 28 | } 29 | str += "{ margin: 0; padding: 0; border: 0; float: left; }\n"; 30 | str += "\n"; 31 | return str; 32 | } 33 | 34 | ////////////////////////////////////////////////////////////////////////////////// 35 | // buildFluid // 36 | ////////////////////////////////////////////////////////////////////////////////// 37 | 38 | var buildFluidInit = function(nCols){ 39 | var str = ""; 40 | str += ".container_"+nCols+" { overflow: hidden; }\n"; 41 | str += "\n"; 42 | return str; 43 | } 44 | 45 | var buildFluidAllCols = function(nCols) 46 | { 47 | var str = ""; 48 | for(var col = 0; col < nCols; col++){ 49 | var width = (100/nCols)*(col+1); 50 | str += ".container_"+nCols+" .grid_"+(col+1)+" {\n"; 51 | str += "\twidth: "+width+"%;\n"; 52 | str += "}\n"; 53 | } 54 | str += "\n"; 55 | return str; 56 | } 57 | 58 | var buildFluidAllPrefix = function(nCols) 59 | { 60 | var str = ""; 61 | for(var col = 0; col < nCols; col++){ 62 | var width = (100/nCols)*(col+1); 63 | str += ".container_"+nCols+" .prefix_"+(col+1)+" {\n"; 64 | str += "\tpadding-left: "+width+"%;\n"; 65 | str += "}\n"; 66 | } 67 | str += "\n"; 68 | return str; 69 | } 70 | var buildFluidAllSuffix = function(nCols) 71 | { 72 | var str = ""; 73 | for(var col = 0; col < nCols; col++){ 74 | var width = (100/nCols)*(col+1); 75 | str += ".container_"+nCols+" .suffix_"+(col+1)+" {\n"; 76 | str += "\tpadding-right: "+width+"%;\n"; 77 | str += "}\n"; 78 | } 79 | str += "\n"; 80 | return str; 81 | } 82 | 83 | var buildFluidPerCols = function(nCols, classPrefix, styleAttr, unitStr) 84 | { 85 | var str = ""; 86 | for(var col = 0; col < nCols; col++){ 87 | var width = (100/nCols)*(col+1); 88 | str += ".container_"+nCols+" ."+classPrefix+"_"+(col+1)+" {\n"; 89 | str += "\t"+styleAttr+": "+width+unitStr+";\n"; 90 | str += "}\n"; 91 | } 92 | str += "\n"; 93 | return str; 94 | } 95 | 96 | var buildFluidCss = function(nCols){ 97 | var str = ""; 98 | str += buildGenericAlphaOmega(nCols); 99 | str += buildGenericAllCols(nCols); 100 | str += buildFluidInit(nCols); 101 | str += buildFluidAllCols(nCols); 102 | str += buildFluidAllPrefix(nCols); 103 | str += buildFluidAllSuffix(nCols); 104 | return str; 105 | } 106 | 107 | var buildFluidFile = function(filename){ 108 | var str = ""; 109 | str += buildFluidCss(12) 110 | str += buildFluidCss(16) 111 | require('fs').writeFileSync(filename, str, encoding='utf8'); 112 | } 113 | 114 | ////////////////////////////////////////////////////////////////////////////////// 115 | // buildFixed // 116 | ////////////////////////////////////////////////////////////////////////////////// 117 | 118 | var buildFixedInit = function(nCols){ 119 | var str = ""; 120 | str += ".ui-mobile [data-role='page'], .ui-mobile [data-role='dialog'], .ui-page {\n" 121 | str += "\tleft: 50%;\n" 122 | str += "\tmargin-left: -480px;\n" 123 | str += "\twidth: 960px;\n" 124 | str += "}\n"; 125 | 126 | str += ".container_"+nCols+" {\n" 127 | str += "\twidth: 960px;\n" 128 | str += "}\n"; 129 | 130 | str += "\n"; 131 | return str; 132 | } 133 | 134 | var buildFixedPerCols = function(nCols, classPrefix, styleAttr) 135 | { 136 | var str = ""; 137 | var jqueryMarginW = 30; 138 | for(var col = 0; col < nCols; col++){ 139 | var width = (960-jqueryMarginW)/nCols*(col+1); 140 | str += ".container_"+nCols+" ."+classPrefix+"_"+(col+1)+" {\n"; 141 | str += "\t"+styleAttr+": "+width+"px;\n"; 142 | str += "}\n"; 143 | } 144 | str += "\n"; 145 | return str; 146 | } 147 | 148 | var buildFixedCss = function(nCols){ 149 | var str = ""; 150 | str += buildGenericAlphaOmega(nCols); 151 | str += buildGenericAllCols(nCols); 152 | str += buildFixedInit(nCols); 153 | str += buildFixedPerCols(nCols, "grid", "width"); 154 | str += buildFixedPerCols(nCols, "prefix", "padding-left"); 155 | str += buildFixedPerCols(nCols, "suffix", "padding-right"); 156 | return str; 157 | } 158 | 159 | var buildFixedFile = function(filename){ 160 | var str = ""; 161 | str += buildFixedCss(12) 162 | str += buildFixedCss(16) 163 | require('fs').writeFileSync(filename, str, encoding='utf8'); 164 | } 165 | 166 | ////////////////////////////////////////////////////////////////////////////////// 167 | // Main // 168 | ////////////////////////////////////////////////////////////////////////////////// 169 | 170 | buildFixedFile("css/jquery-mobile-960.css") 171 | buildFluidFile("css/jquery-mobile-fluid960.css") -------------------------------------------------------------------------------- /testOfficialGrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page Title 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

Page Title

16 |
17 | 18 |
19 |
20 |
21 | 26 |
27 |
28 | 33 |
34 |
35 | 41 |
42 |
43 |
44 |
45 | 50 |
51 |
52 | 57 |
58 |
59 | 65 |
66 |
67 |
68 | 69 |
70 |

Page Footer

71 |
72 |
73 | 74 | 75 | --------------------------------------------------------------------------------