├── .gitignore ├── README.md ├── test.html ├── bento.scss └── bento.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | *.swo 3 | *.swp 4 | *.sublime* 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bento Grid System 2 | ================= 3 | 4 | 一款极具悟性的 CSS 栅格系统，支持 Firefox, WebKit, Opera, IE8+ 5 | 已应用在 [Typecho](http://typecho.org) 的新版后台开发上 6 | 7 | 灵感来源 [Fluidable](http://fluidable.com/) 8 | 9 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bento Grid System 7 | 8 | 12 | 13 | 14 |
15 |
16 | 17 |

 

18 |

 

19 | 20 |

 

21 |

 

22 | 23 |

 

24 |

 

25 | 26 |

 

27 |

 

28 | 29 |

 

30 |

 

31 | 32 |

 

33 |

 

34 | 35 |

 

36 |

 

37 | 38 |

 

39 |

 

40 | 41 |

 

42 |

 

43 | 44 |

 

45 |

 

46 | 47 |

 

48 |

 

49 | 50 |

mobile hidden

51 |

tablet hidden

52 |

desktop hidden

53 |
54 | 55 |
56 | 57 | -------------------------------------------------------------------------------- /bento.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Bento Grid System 3 | * Source: https://github.com/fenbox/bento 4 | * Version: 1.2.8 5 | * Update: 2013.11.25 6 | */ 7 | 8 | // 9 | // Config 10 | // 11 | $columns: 12; 12 | $column-width: 100% / $columns; 13 | $gutter-width: 20px; 14 | 15 | 16 | // Break point 17 | $screen-tablet: 768px; 18 | $screen-desktop: 992px; 19 | $screen-wide: 1200px; 20 | 21 | 22 | // Mixins 23 | %box-sizing { 24 | -webkit-box-sizing: border-box; 25 | -moz-box-sizing: border-box; 26 | box-sizing: border-box; 27 | } 28 | 29 | 30 | // Container 31 | .container { 32 | margin-left: auto; 33 | margin-right: auto; 34 | padding-left: $gutter-width / 2; 35 | padding-right: $gutter-width / 2; 36 | @extend %box-sizing; 37 | } 38 | 39 | // Column group 40 | .row { 41 | margin-right: $gutter-width / -2; 42 | margin-left: $gutter-width / -2; 43 | @extend .clearfix; 44 | } 45 | 46 | .row [class*="col-"] { 47 | float: left; 48 | min-height: 1px; 49 | padding-right: $gutter-width / 2; 50 | padding-left: $gutter-width / 2; 51 | @extend %box-sizing; 52 | } 53 | 54 | .row [class*="-push-"], 55 | .row [class*="-pull-"] { 56 | position: relative; 57 | } 58 | 59 | 60 | /* 61 | * Mobile and up 62 | */ 63 | 64 | @for $index from 1 through $columns { 65 | .col-mb-#{$index} { 66 | width: $column-width * $index; 67 | } 68 | } 69 | 70 | 71 | /* 72 | * Tablet and up 73 | */ 74 | 75 | @media (min-width: $screen-tablet) { 76 | .container { 77 | max-width: $screen-tablet - ($gutter-width * 2); 78 | } 79 | 80 | // Colunms 81 | @for $index from 1 through $columns { 82 | .col-tb-#{$index} { 83 | width: $column-width * $index; 84 | } 85 | } 86 | 87 | // Offset 88 | @for $index from 0 through $columns { 89 | .col-tb-offset-#{$index} { 90 | margin-left: $column-width * $index; 91 | } 92 | } 93 | 94 | // Pull 95 | @for $index from 0 through $columns { 96 | .col-tb-pull-#{$index} { 97 | right: $column-width * $index; 98 | } 99 | } 100 | 101 | // Push 102 | @for $index from 0 through $columns { 103 | .col-tb-push-#{$index} { 104 | left: $column-width * $index; 105 | } 106 | } 107 | } 108 | 109 | 110 | /* 111 | * Desktop and up 112 | */ 113 | 114 | @media (min-width: $screen-desktop) { 115 | .container { 116 | max-width: $screen-desktop - ($gutter-width * 2); 117 | } 118 | 119 | // Colunms 120 | @for $index from 1 through $columns { 121 | .col-#{$index} { 122 | width: $column-width * $index; 123 | } 124 | } 125 | 126 | // Offset 127 | @for $index from 0 through $columns { 128 | .col-offset-#{$index} { 129 | margin-left: $column-width * $index; 130 | } 131 | } 132 | 133 | // Pull 134 | @for $index from 0 through $columns { 135 | .col-pull-#{$index} { 136 | right: $column-width * $index; 137 | } 138 | } 139 | 140 | // Push 141 | @for $index from 0 through $columns { 142 | .col-push-#{$index} { 143 | left: $column-width * $index; 144 | } 145 | } 146 | } 147 | 148 | 149 | /* 150 | * Widescreen and up 151 | */ 152 | 153 | @media (min-width: $screen-wide) { 154 | .container { 155 | max-width: $screen-wide - ($gutter-width * 2); 156 | } 157 | 158 | // Colunms 159 | @for $index from 1 through $columns { 160 | .col-wd-#{$index} { 161 | width: $column-width * $index; 162 | } 163 | } 164 | 165 | // Offset 166 | @for $index from 0 through $columns { 167 | .col-wd-offset-#{$index} { 168 | margin-left: $column-width * $index; 169 | } 170 | } 171 | 172 | // Pull 173 | @for $index from 0 through $columns { 174 | .col-wd-pull-#{$index} { 175 | right: $column-width * $index; 176 | } 177 | } 178 | 179 | // Push 180 | @for $index from 0 through $columns { 181 | .col-wd-push-#{$index} { 182 | left: $column-width * $index; 183 | } 184 | } 185 | } 186 | 187 | 188 | /* 189 | * Responsive kit 190 | */ 191 | 192 | // Hidden in mobile and down 193 | @media (max-width: $screen-tablet - 1px) { 194 | .kit-hidden-mb { 195 | display: none; 196 | } 197 | } 198 | 199 | // Hidden in tablet and down 200 | @media (max-width: $screen-desktop - 1px) { 201 | .kit-hidden-tb { 202 | display: none; 203 | } 204 | } 205 | 206 | // Hidden in descktop and down 207 | @media (max-width: $screen-wide - 1px) { 208 | .kit-hidden { 209 | display: none; 210 | } 211 | } 212 | 213 | 214 | /* 215 | * Clearfix 216 | */ 217 | .clearfix { 218 | zoom: 1; 219 | &:before, &:after { 220 | content: " "; 221 | display: table; 222 | } 223 | &:after { 224 | clear: both; 225 | } 226 | } 227 | -------------------------------------------------------------------------------- /bento.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Bento Grid System 3 | * Source: https://github.com/fenbox/bento 4 | * Version: 1.2.8 5 | * Update: 2013.11.25 6 | */ 7 | .container, .row [class*="col-"] { 8 | -webkit-box-sizing: border-box; 9 | -moz-box-sizing: border-box; 10 | box-sizing: border-box; } 11 | 12 | .container { 13 | margin-left: auto; 14 | margin-right: auto; 15 | padding-left: 10px; 16 | padding-right: 10px; } 17 | 18 | .row { 19 | margin-right: -10px; 20 | margin-left: -10px; } 21 | 22 | .row [class*="col-"] { 23 | float: left; 24 | min-height: 1px; 25 | padding-right: 10px; 26 | padding-left: 10px; } 27 | 28 | .row [class*="-push-"], 29 | .row [class*="-pull-"] { 30 | position: relative; } 31 | 32 | /* 33 | * Mobile and up 34 | */ 35 | .col-mb-1 { 36 | width: 8.33333%; } 37 | 38 | .col-mb-2 { 39 | width: 16.66667%; } 40 | 41 | .col-mb-3 { 42 | width: 25%; } 43 | 44 | .col-mb-4 { 45 | width: 33.33333%; } 46 | 47 | .col-mb-5 { 48 | width: 41.66667%; } 49 | 50 | .col-mb-6 { 51 | width: 50%; } 52 | 53 | .col-mb-7 { 54 | width: 58.33333%; } 55 | 56 | .col-mb-8 { 57 | width: 66.66667%; } 58 | 59 | .col-mb-9 { 60 | width: 75%; } 61 | 62 | .col-mb-10 { 63 | width: 83.33333%; } 64 | 65 | .col-mb-11 { 66 | width: 91.66667%; } 67 | 68 | .col-mb-12 { 69 | width: 100%; } 70 | 71 | /* 72 | * Tablet and up 73 | */ 74 | @media (min-width: 768px) { 75 | .container { 76 | max-width: 728px; } 77 | 78 | .col-tb-1 { 79 | width: 8.33333%; } 80 | 81 | .col-tb-2 { 82 | width: 16.66667%; } 83 | 84 | .col-tb-3 { 85 | width: 25%; } 86 | 87 | .col-tb-4 { 88 | width: 33.33333%; } 89 | 90 | .col-tb-5 { 91 | width: 41.66667%; } 92 | 93 | .col-tb-6 { 94 | width: 50%; } 95 | 96 | .col-tb-7 { 97 | width: 58.33333%; } 98 | 99 | .col-tb-8 { 100 | width: 66.66667%; } 101 | 102 | .col-tb-9 { 103 | width: 75%; } 104 | 105 | .col-tb-10 { 106 | width: 83.33333%; } 107 | 108 | .col-tb-11 { 109 | width: 91.66667%; } 110 | 111 | .col-tb-12 { 112 | width: 100%; } 113 | 114 | .col-tb-offset-0 { 115 | margin-left: 0%; } 116 | 117 | .col-tb-offset-1 { 118 | margin-left: 8.33333%; } 119 | 120 | .col-tb-offset-2 { 121 | margin-left: 16.66667%; } 122 | 123 | .col-tb-offset-3 { 124 | margin-left: 25%; } 125 | 126 | .col-tb-offset-4 { 127 | margin-left: 33.33333%; } 128 | 129 | .col-tb-offset-5 { 130 | margin-left: 41.66667%; } 131 | 132 | .col-tb-offset-6 { 133 | margin-left: 50%; } 134 | 135 | .col-tb-offset-7 { 136 | margin-left: 58.33333%; } 137 | 138 | .col-tb-offset-8 { 139 | margin-left: 66.66667%; } 140 | 141 | .col-tb-offset-9 { 142 | margin-left: 75%; } 143 | 144 | .col-tb-offset-10 { 145 | margin-left: 83.33333%; } 146 | 147 | .col-tb-offset-11 { 148 | margin-left: 91.66667%; } 149 | 150 | .col-tb-offset-12 { 151 | margin-left: 100%; } 152 | 153 | .col-tb-pull-0 { 154 | right: 0%; } 155 | 156 | .col-tb-pull-1 { 157 | right: 8.33333%; } 158 | 159 | .col-tb-pull-2 { 160 | right: 16.66667%; } 161 | 162 | .col-tb-pull-3 { 163 | right: 25%; } 164 | 165 | .col-tb-pull-4 { 166 | right: 33.33333%; } 167 | 168 | .col-tb-pull-5 { 169 | right: 41.66667%; } 170 | 171 | .col-tb-pull-6 { 172 | right: 50%; } 173 | 174 | .col-tb-pull-7 { 175 | right: 58.33333%; } 176 | 177 | .col-tb-pull-8 { 178 | right: 66.66667%; } 179 | 180 | .col-tb-pull-9 { 181 | right: 75%; } 182 | 183 | .col-tb-pull-10 { 184 | right: 83.33333%; } 185 | 186 | .col-tb-pull-11 { 187 | right: 91.66667%; } 188 | 189 | .col-tb-pull-12 { 190 | right: 100%; } 191 | 192 | .col-tb-push-0 { 193 | left: 0%; } 194 | 195 | .col-tb-push-1 { 196 | left: 8.33333%; } 197 | 198 | .col-tb-push-2 { 199 | left: 16.66667%; } 200 | 201 | .col-tb-push-3 { 202 | left: 25%; } 203 | 204 | .col-tb-push-4 { 205 | left: 33.33333%; } 206 | 207 | .col-tb-push-5 { 208 | left: 41.66667%; } 209 | 210 | .col-tb-push-6 { 211 | left: 50%; } 212 | 213 | .col-tb-push-7 { 214 | left: 58.33333%; } 215 | 216 | .col-tb-push-8 { 217 | left: 66.66667%; } 218 | 219 | .col-tb-push-9 { 220 | left: 75%; } 221 | 222 | .col-tb-push-10 { 223 | left: 83.33333%; } 224 | 225 | .col-tb-push-11 { 226 | left: 91.66667%; } 227 | 228 | .col-tb-push-12 { 229 | left: 100%; } } 230 | /* 231 | * Desktop and up 232 | */ 233 | @media (min-width: 992px) { 234 | .container { 235 | max-width: 952px; } 236 | 237 | .col-1 { 238 | width: 8.33333%; } 239 | 240 | .col-2 { 241 | width: 16.66667%; } 242 | 243 | .col-3 { 244 | width: 25%; } 245 | 246 | .col-4 { 247 | width: 33.33333%; } 248 | 249 | .col-5 { 250 | width: 41.66667%; } 251 | 252 | .col-6 { 253 | width: 50%; } 254 | 255 | .col-7 { 256 | width: 58.33333%; } 257 | 258 | .col-8 { 259 | width: 66.66667%; } 260 | 261 | .col-9 { 262 | width: 75%; } 263 | 264 | .col-10 { 265 | width: 83.33333%; } 266 | 267 | .col-11 { 268 | width: 91.66667%; } 269 | 270 | .col-12 { 271 | width: 100%; } 272 | 273 | .col-offset-0 { 274 | margin-left: 0%; } 275 | 276 | .col-offset-1 { 277 | margin-left: 8.33333%; } 278 | 279 | .col-offset-2 { 280 | margin-left: 16.66667%; } 281 | 282 | .col-offset-3 { 283 | margin-left: 25%; } 284 | 285 | .col-offset-4 { 286 | margin-left: 33.33333%; } 287 | 288 | .col-offset-5 { 289 | margin-left: 41.66667%; } 290 | 291 | .col-offset-6 { 292 | margin-left: 50%; } 293 | 294 | .col-offset-7 { 295 | margin-left: 58.33333%; } 296 | 297 | .col-offset-8 { 298 | margin-left: 66.66667%; } 299 | 300 | .col-offset-9 { 301 | margin-left: 75%; } 302 | 303 | .col-offset-10 { 304 | margin-left: 83.33333%; } 305 | 306 | .col-offset-11 { 307 | margin-left: 91.66667%; } 308 | 309 | .col-offset-12 { 310 | margin-left: 100%; } 311 | 312 | .col-pull-0 { 313 | right: 0%; } 314 | 315 | .col-pull-1 { 316 | right: 8.33333%; } 317 | 318 | .col-pull-2 { 319 | right: 16.66667%; } 320 | 321 | .col-pull-3 { 322 | right: 25%; } 323 | 324 | .col-pull-4 { 325 | right: 33.33333%; } 326 | 327 | .col-pull-5 { 328 | right: 41.66667%; } 329 | 330 | .col-pull-6 { 331 | right: 50%; } 332 | 333 | .col-pull-7 { 334 | right: 58.33333%; } 335 | 336 | .col-pull-8 { 337 | right: 66.66667%; } 338 | 339 | .col-pull-9 { 340 | right: 75%; } 341 | 342 | .col-pull-10 { 343 | right: 83.33333%; } 344 | 345 | .col-pull-11 { 346 | right: 91.66667%; } 347 | 348 | .col-pull-12 { 349 | right: 100%; } 350 | 351 | .col-push-0 { 352 | left: 0%; } 353 | 354 | .col-push-1 { 355 | left: 8.33333%; } 356 | 357 | .col-push-2 { 358 | left: 16.66667%; } 359 | 360 | .col-push-3 { 361 | left: 25%; } 362 | 363 | .col-push-4 { 364 | left: 33.33333%; } 365 | 366 | .col-push-5 { 367 | left: 41.66667%; } 368 | 369 | .col-push-6 { 370 | left: 50%; } 371 | 372 | .col-push-7 { 373 | left: 58.33333%; } 374 | 375 | .col-push-8 { 376 | left: 66.66667%; } 377 | 378 | .col-push-9 { 379 | left: 75%; } 380 | 381 | .col-push-10 { 382 | left: 83.33333%; } 383 | 384 | .col-push-11 { 385 | left: 91.66667%; } 386 | 387 | .col-push-12 { 388 | left: 100%; } } 389 | /* 390 | * Widescreen and up 391 | */ 392 | @media (min-width: 1200px) { 393 | .container { 394 | max-width: 1160px; } 395 | 396 | .col-wd-1 { 397 | width: 8.33333%; } 398 | 399 | .col-wd-2 { 400 | width: 16.66667%; } 401 | 402 | .col-wd-3 { 403 | width: 25%; } 404 | 405 | .col-wd-4 { 406 | width: 33.33333%; } 407 | 408 | .col-wd-5 { 409 | width: 41.66667%; } 410 | 411 | .col-wd-6 { 412 | width: 50%; } 413 | 414 | .col-wd-7 { 415 | width: 58.33333%; } 416 | 417 | .col-wd-8 { 418 | width: 66.66667%; } 419 | 420 | .col-wd-9 { 421 | width: 75%; } 422 | 423 | .col-wd-10 { 424 | width: 83.33333%; } 425 | 426 | .col-wd-11 { 427 | width: 91.66667%; } 428 | 429 | .col-wd-12 { 430 | width: 100%; } 431 | 432 | .col-wd-offset-0 { 433 | margin-left: 0%; } 434 | 435 | .col-wd-offset-1 { 436 | margin-left: 8.33333%; } 437 | 438 | .col-wd-offset-2 { 439 | margin-left: 16.66667%; } 440 | 441 | .col-wd-offset-3 { 442 | margin-left: 25%; } 443 | 444 | .col-wd-offset-4 { 445 | margin-left: 33.33333%; } 446 | 447 | .col-wd-offset-5 { 448 | margin-left: 41.66667%; } 449 | 450 | .col-wd-offset-6 { 451 | margin-left: 50%; } 452 | 453 | .col-wd-offset-7 { 454 | margin-left: 58.33333%; } 455 | 456 | .col-wd-offset-8 { 457 | margin-left: 66.66667%; } 458 | 459 | .col-wd-offset-9 { 460 | margin-left: 75%; } 461 | 462 | .col-wd-offset-10 { 463 | margin-left: 83.33333%; } 464 | 465 | .col-wd-offset-11 { 466 | margin-left: 91.66667%; } 467 | 468 | .col-wd-offset-12 { 469 | margin-left: 100%; } 470 | 471 | .col-wd-pull-0 { 472 | right: 0%; } 473 | 474 | .col-wd-pull-1 { 475 | right: 8.33333%; } 476 | 477 | .col-wd-pull-2 { 478 | right: 16.66667%; } 479 | 480 | .col-wd-pull-3 { 481 | right: 25%; } 482 | 483 | .col-wd-pull-4 { 484 | right: 33.33333%; } 485 | 486 | .col-wd-pull-5 { 487 | right: 41.66667%; } 488 | 489 | .col-wd-pull-6 { 490 | right: 50%; } 491 | 492 | .col-wd-pull-7 { 493 | right: 58.33333%; } 494 | 495 | .col-wd-pull-8 { 496 | right: 66.66667%; } 497 | 498 | .col-wd-pull-9 { 499 | right: 75%; } 500 | 501 | .col-wd-pull-10 { 502 | right: 83.33333%; } 503 | 504 | .col-wd-pull-11 { 505 | right: 91.66667%; } 506 | 507 | .col-wd-pull-12 { 508 | right: 100%; } 509 | 510 | .col-wd-push-0 { 511 | left: 0%; } 512 | 513 | .col-wd-push-1 { 514 | left: 8.33333%; } 515 | 516 | .col-wd-push-2 { 517 | left: 16.66667%; } 518 | 519 | .col-wd-push-3 { 520 | left: 25%; } 521 | 522 | .col-wd-push-4 { 523 | left: 33.33333%; } 524 | 525 | .col-wd-push-5 { 526 | left: 41.66667%; } 527 | 528 | .col-wd-push-6 { 529 | left: 50%; } 530 | 531 | .col-wd-push-7 { 532 | left: 58.33333%; } 533 | 534 | .col-wd-push-8 { 535 | left: 66.66667%; } 536 | 537 | .col-wd-push-9 { 538 | left: 75%; } 539 | 540 | .col-wd-push-10 { 541 | left: 83.33333%; } 542 | 543 | .col-wd-push-11 { 544 | left: 91.66667%; } 545 | 546 | .col-wd-push-12 { 547 | left: 100%; } } 548 | /* 549 | * Responsive kit 550 | */ 551 | @media (max-width: 767px) { 552 | .kit-hidden-mb { 553 | display: none; } } 554 | @media (max-width: 991px) { 555 | .kit-hidden-tb { 556 | display: none; } } 557 | @media (max-width: 1199px) { 558 | .kit-hidden { 559 | display: none; } } 560 | /* 561 | * Clearfix 562 | */ 563 | .clearfix, .row { 564 | zoom: 1; } 565 | .clearfix:before, .row:before, .clearfix:after, .row:after { 566 | content: " "; 567 | display: table; } 568 | .clearfix:after, .row:after { 569 | clear: both; } 570 | --------------------------------------------------------------------------------