git.roojs.org Git - ratchet/blob - test/components/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Testing</title>
   6     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
   7     <meta name="apple-mobile-web-app-capable" content="yes">
   8     <meta name="apple-mobile-web-app-status-bar-style" content="black">
   9     <link rel="stylesheet" href="../../lib/css/base.css">
  10     <link rel="stylesheet" href="../../lib/css/bars.css">
  11     <link rel="stylesheet" href="../../lib/css/lists.css">
  12     <link rel="stylesheet" href="../../lib/css/forms.css">
  13     <link rel="stylesheet" href="../../lib/css/buttons.css">
  14     <link rel="stylesheet" href="../../lib/css/chevrons.css">
  15     <link rel="stylesheet" href="../../lib/css/counts.css">
  16     <link rel="stylesheet" href="../../lib/css/segmented-controllers.css">
  17     <link rel="stylesheet" href="../../lib/css/popovers.css">
  18     <link rel="stylesheet" href="../../lib/css/sliders.css">
  19     <link rel="stylesheet" href="../../lib/css/toggles.css">
  20     <link rel="stylesheet" href="../../lib/css/push.css">
  21     <script src="../../lib/js/push.js"></script>
  22     <script src="../../lib/js/toggles.js"></script>
  23     <script src="../../lib/js/sliders.js"></script>
  24     <script src="../../lib/js/popovers.js"></script>
  25     <script src="../../lib/js/segmented-controllers.js"></script>
  26
  27     <style>
  28       [class*="bar"] {
  29         position: relative;
  30       }
  31       .slider,
  32       .slider li,
  33       .slider li img {
  34         width: 100%;
  35       }
  36     </style>
  37
  38   </head>
  39
  40 <!-- ontouchstart property makes :active/:hover behaviors work on everything -->
  41 <body ontouchstart="">
  42
  43   <div class="content">
  44
  45   <header class="bar-title">
  46     <ul class="segmented-controller">
  47       <li class="active">
  48         <a href="#item1">Thing one</a>
  49       </li>
  50       <li>
  51         <a href="#item2">Thing two</a>
  52       </li>
  53     </ul>
  54   </header>
  55
  56   <div>
  57     <div id="item1" class="segmented-controller-item active"><p>section #1</p></div>
  58     <div id="item2" class="segmented-controller-item"><p>section #2</p></div>
  59   </div>
  60
  61
  62   <!-- SLIDER ============================================================ -->
  63   <div class="slider">
  64     <ul>
  65       <li>
  66         <img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
  67       </li>
  68       <li>
  69         <img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
  70       </li>
  71       <li>
  72         <img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
  73       </li>
  74     </ul>
  75   </div>
  76    <div class="slider">
  77     <ul>
  78       <li>
  79         <img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
  80       </li>
  81       <li>
  82         <img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
  83       </li>
  84       <li>
  85         <img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
  86       </li>
  87     </ul>
  88   </div>
  89
  90   <!-- POPOVER ============================================================ -->
  91   <div id="myPopover" class="popover">
  92     <header class="popover-header">
  93       <a class="button" href="#">
  94         Open
  95       </a>
  96       <h3 class="title">Popover title</h3>
  97       <a class="button" href="#">
  98         Filter
  99       </a>
 100     </header>
 101     <ul class="list">
 102       <li>Item1</li>
 103       <li>Item2</li>
 104       <li>Item3</li>
 105       <li class="list-divider">With counts</li>
 106       <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
 107       <li>Item2 <span class="count">1</span></li>
 108       <li>Item3 <span class="count">1</span></li>
 109       <li class="list-divider">With chevrons</li>
 110       <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
 111       <li>Item2 <span class="chevron"></span></li>
 112       <li>Item3 <span class="chevron"></span></li>
 113     </ul>
 114   </div>
 115
 116   <!-- TITLEBAR ============================================================ -->
 117
 118   <!-- Title-bar left and right buttons -->
 119   <header class="bar-title">
 120     <a class="button button-prev" href="#">
 121       Left
 122     </a>
 123     <h1 class="title">Title</h1>
 124     <a class="button button-next" href="#">
 125       Right
 126     </a>
 127   </header>
 128
 129   <!-- Title-bar -->
 130   <header class="bar-title">
 131     <h1 class="title"><a href="#myPopover">Title</a></h1>
 132   </header>
 133
 134   <!-- Title-bar left button -->
 135   <header class="bar-title">
 136     <a class="button open-shelf" href="#">
 137       Open fatty
 138     </a>
 139     <h1 class="title">Title</h1>
 140   </header>
 141
 142   <!-- Title-bar right button -->
 143   <header class="bar-title">
 144     <h1 class="title">Title</h1>
 145     <a class="button" href="#">
 146       Filter
 147     </a>
 148   </header>
 149
 150   <div class="test"></div>
 151
 152   <!-- Title-bar right button -->
 153   <header class="bar-title">
 154     <ul class="segmented-controller">
 155       <li class="active">
 156         <a href="#">Thing one</a>
 157       </li>
 158       <li>
 159         <a href="#">Thing two</a>
 160       </li>
 161       <li>
 162         <a href="#">Thing three</a>
 163       </li>
 164     </ul>
 165   </header>
 166
 167   <!-- Title-bar left button -->
 168   <header class="bar-title" id="newshit">
 169     <a class="button open-shelf" href="#">
 170       Open
 171     </a>
 172     <ul class="segmented-controller">
 173       <li>
 174         <a href="#">Thing one</a>
 175       </li>
 176       <li class="active">
 177         <a href="#">Thing two</a>
 178       </li>
 179     </ul>
 180   </header>
 181
 182   <!-- Title-bar left button -->
 183   <header class="bar-title">
 184     <ul class="segmented-controller">
 185       <li>
 186         <a href="#">Thing one</a>
 187       </li>
 188       <li class="active">
 189         <a href="#">Thing two</a>
 190       </li>
 191     </ul>
 192     <a class="button" href="#">
 193       Filter
 194     </a>
 195   </header>
 196
 197   <!-- Title-bar left button -->
 198   <header class="bar-title">
 199     <a class="button open-shelf" href="#">
 200       Open
 201     </a>
 202     <ul class="segmented-controller">
 203       <li>
 204         <a href="#">Thing one</a>
 205       </li>
 206       <li class="active">
 207         <a href="#">Thing two</a>
 208       </li>
 209     </ul>
 210     <a class="button" href="#">
 211       Filter
 212     </a>
 213   </header>
 214
 215   <!-- BAR-TAB ============================================================ -->
 216
 217   <!-- Bar-tab 5 -->
 218   <nav class="bar-tab">
 219     <ul class="tab-inner">
 220       <li class="tab-item active">
 221         <img class="tab-icon" src="../docs/img/icon-home.png" alt="">
 222         <div class="tab-label">test</div>
 223       </li>
 224       <li class="tab-item">
 225         <img class="tab-icon" src="../docs/img/icon-profile.png" alt="">
 226         <div class="tab-label">test</div>
 227       </li>
 228       <li class="tab-item">
 229         <img class="tab-icon" src="../docs/img/icon-messages.png" alt="">
 230         <div class="tab-label">test</div>
 231       </li>
 232       <li class="tab-item">
 233         <img class="tab-icon" src="../docs/img/icon-hamburger.png" alt="">
 234         <div class="tab-label">test</div>
 235       </li>
 236       <li class="tab-item">
 237         <img class="tab-icon" src="../docs/img/icon-settings.png" alt="">
 238         <div class="tab-label">test</div>
 239       </li>
 240     </ul>
 241   </nav>
 242
 243   <!-- Bar-tab 4 -->
 244   <nav class="bar-tab">
 245     <ul class="tab-inner">
 246       <li class="tab-item active">
 247         <img class="tab-icon" src="../docs/img/icon-home.png" alt="">
 248         <div class="tab-label">test</div>
 249       </li>
 250       <li class="tab-item">
 251         <img class="tab-icon" src="../docs/img/icon-profile.png" alt="">
 252         <div class="tab-label">test</div>
 253       </li>
 254       <li class="tab-item">
 255         <img class="tab-icon" src="../docs/img/icon-messages.png" alt="">
 256         <div class="tab-label">test</div>
 257       </li>
 258       <li class="tab-item">
 259         <img class="tab-icon" src="../docs/img/icon-settings.png" alt="">
 260         <div class="tab-label">test</div>
 261       </li>
 262     </ul>
 263   </nav>
 264
 265   <!-- Bar-tab 3 -->
 266   <nav class="bar-tab">
 267     <ul class="tab-inner">
 268       <li class="tab-item active">
 269         <img class="tab-icon" src="../docs/img/icon-home.png" alt="">
 270         <div class="tab-label">test</div>
 271       </li>
 272       <li class="tab-item">
 273         <img class="tab-icon" src="../docs/img/icon-messages.png" alt="">
 274         <div class="tab-label">test</div>
 275       </li>
 276       <li class="tab-item">
 277         <img class="tab-icon" src="../docs/img/icon-settings.png" alt="">
 278         <div class="tab-label">test</div>
 279       </li>
 280     </ul>
 281   </nav>
 282
 283
 284   <!-- SEARCH BAR ============================================================ -->
 285   <!-- Search bar -->
 286   <div class="bar-standard">
 287     <form>
 288       <input type="search" placeholder="Search">
 289     </form>
 290   </div>
 291
 292
 293   <!-- CONTROLLER BAR ============================================================ -->
 294
 295   <!-- Segmented controller as a bar -->
 296   <nav class="bar-standard">
 297     <ul class="segmented-controller">
 298       <li>
 299         <a href="#">Thing one</a>
 300       </li>
 301       <li class="active">
 302         <a href="#">Thing two</a>
 303       </li>
 304     </ul>
 305   </nav>
 306
 307   <!-- Segmented controller as a bar w/ 3 options -->
 308   <nav class="bar-standard">
 309     <ul class="segmented-controller">
 310       <li>
 311         <a href="#">Thing one</a>
 312       </li>
 313       <li class="active">
 314         <a href="#">Thing two</a>
 315       </li>
 316       <li>
 317         <a href="#">Thing one</a>
 318       </li>
 319     </ul>
 320   </nav>
 321
 322   <!-- BUTTON BAR ============================================================ -->
 323
 324   <!-- Button bar -->
 325   <div class="bar-standard">
 326     <a class="button-block">Block level button</a>
 327   </div>
 328
 329   <!-- Button bar main -->
 330   <div class="bar-standard">
 331     <a class="button-main button-block">Block level button</a>
 332   </div>
 333
 334   <!-- Button bar positive -->
 335   <div class="bar-standard">
 336     <a class="button-positive button-block">Block level button</a>
 337   </div>
 338
 339   <!-- Button bar negative -->
 340   <div class="bar-standard">
 341     <a class="button-negative button-block">Block level button</a>
 342   </div>
 343
 344   <!-- BUTTONS ============================================================ -->
 345
 346   <!-- Standard buttons -->
 347   <a class="button">Button</a>
 348   <a class="button-main">Button</a>
 349   <a class="button-positive">Button</a>
 350   <a class="button-negative">Button</a>
 351
 352   <!-- Buttons w/ counts -->
 353   <a class="button">Button <span class="count">1</span></a>
 354   <a class="button-main">Button <span class="count">1</span></a>
 355   <a class="button-positive">Button <span class="count">1</span></a>
 356   <a class="button-negative">Button <span class="count">1</span></a>
 357
 358   <!-- Buttons at block level -->
 359   <a class="button-block">Block level button</a>
 360   <a class="button-main button-block">Block level button</a>
 361   <a class="button-positive button-block">Block level button</a>
 362   <a class="button-negative button-block">Block level button</a>
 363
 364   <!-- Buttons at block level w/ counts -->
 365   <a class="button-block">Block level button <span class="count">1</span></a>
 366   <a class="button-main button-block">Block level button <span class="count">1</span></a>
 367   <a class="button-positive button-block">Block level button <span class="count">1</span></a>
 368   <a class="button-negative button-block">Block level button <span class="count">1</span></a>
 369
 370   <!-- TOGGLE ============================================================ -->
 371   <div class="toggle">
 372     <div class="toggle-handle"></div>
 373   </div>
 374
 375   <!-- COUNTS ============================================================ -->
 376   <span class="count">1</span>
 377   <span class="count-main">2</span>
 378   <span class="count-positive">3</span>
 379   <span class="count-negative">4</span>
 380   <span class="count">5</span>
 381
 382   <!-- LIST ============================================================ -->
 383   <ul class="list">
 384     <li>Item1</li>
 385     <li>Item2</li>
 386     <li>Item3</li>
 387     <li class="list-divider">With counts</li>
 388     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
 389     <li>Item2 <span class="count">1</span></li>
 390     <li>Item3 <span class="count">1</span></li>
 391     <li class="list-divider">With chevrons</li>
 392     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
 393     <li>Item2 <span class="chevron"></span></li>
 394     <li>Item3 <span class="chevron"></span></li>
 395     <li class="list-divider">With chevrons &amp; counts</li>
 396     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-main">1</span></li>
 397     <li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li>
 398     <li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li>
 399     <li class="list-divider">With buttons</li>
 400     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
 401     <li>Item2 <a class="button-main">Button</a></li>
 402     <li>Item3 <a class="button-positive">Button</a></li>
 403     <li>Item4 <a class="button-negative">Button</a></li>
 404     <li class="list-divider">With a toggle</li>
 405     <li>
 406       Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
 407       <div class="toggle">
 408         <div class="toggle-handle"></div>
 409       </div>
 410     </li>
 411     <li>
 412       <a href="#">
 413         Item2
 414       </a>
 415       <div class="toggle">
 416         <div class="toggle-handle"></div>
 417       </div>
 418     </li>
 419     <li>
 420       Item3
 421       <div class="toggle">
 422         <div class="toggle-handle"></div>
 423       </div>
 424     </li>
 425   </ul>
 426
 427   <ul class="list inset">
 428     <li class="list-divider">Normal</li>
 429     <li>Item1</li>
 430     <li>Item2</li>
 431     <li>Item3</li>
 432     <li class="list-divider">With counts</li>
 433     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
 434     <li>Item2 <span class="count">1</span></li>
 435     <li>Item3 <span class="count">1</span></li>
 436     <li class="list-divider">With chevrons</li>
 437     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
 438     <li>Item2 <span class="chevron"></span></li>
 439     <li>Item3 <span class="chevron"></span></li>
 440     <li class="list-divider">With chevrons &amp; counts</li>
 441     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count">1</span></li>
 442     <li>Item2 <span class="chevron"></span><span class="count">1</span></li>
 443     <li>Item3 <span class="chevron"></span><span class="count">1</span></li>
 444     <li class="list-divider">With buttons</li>
 445     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
 446     <li>Item2 <a class="button-main">Button</a></li>
 447     <li>Item3 <a class="button-positive">Button</a></li>
 448     <li>Item4 <a class="button-negative">Button</a></li>
 449     <li class="list-divider">With a toggle</li>
 450     <li>
 451       Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
 452       <div class="toggle">
 453         <div class="toggle-handle"></div>
 454       </div>
 455     </li>
 456     <li>
 457       Item2
 458       <div class="toggle">
 459         <div class="toggle-handle"></div>
 460       </div>
 461     </li>
 462     <li>
 463       Item3
 464       <div class="toggle">
 465         <div class="toggle-handle"></div>
 466       </div>
 467     </li>
 468     <li class="list-divider">Bottom list-divider test</li>
 469   </ul>
 470
 471   <!-- List with <a>'s -->
 472   <ul class="inset list">
 473     <li>
 474       <a href="#">Item1</a>
 475     </li>
 476     <li>
 477       <a href="#">Item2</a>
 478     </li>
 479   </ul>
 480
 481   <!-- SEGMENTED CONTROLLER ============================================================ -->
 482
 483   <!-- Segmented controller with 2 tabs -->
 484   <ul class="segmented-controller">
 485     <li><a href="#">Thing one</a></li>
 486     <li class="active"><a href="#">Thing two</a></li>
 487   </ul>
 488
 489   <!-- Segmented controller with 3 tabs -->
 490   <ul class="segmented-controller">
 491     <li><a href="#">Thing one</a></li>
 492     <li><a href="#">Thing two</a></li>
 493     <li class="active"><a href="#">Thing three</a></li>
 494   </ul>
 495
 496   <!-- Segmented controller with 4 tabs -->
 497   <ul class="segmented-controller">
 498     <li><a href="#">Thing one</a></li>
 499     <li><a href="#">Thing two</a></li>
 500     <li class="active"><a href="#">Thing three</a></li>
 501     <li><a href="#">Thing four</a></li>
 502   </ul>
 503
 504   <!-- Segmented controller with 5 tabs -->
 505   <ul class="segmented-controller">
 506     <li><a href="#">Thing one</a></li>
 507     <li><a href="#">Thing two</a></li>
 508     <li class="active"><a href="#">Thing three</a></li>
 509     <li><a href="#">Thing four</a></li>
 510     <li><a href="#">Thing five</a></li>
 511   </ul>
 512
 513   <!-- FORMS ============================================================ -->
 514
 515   <!-- Input -->
 516   <form>
 517     <input type="text" placeholder="Full name">
 518     <input type="search" placeholder="Search">
 519     <textarea rows="5"></textarea>
 520     <a class="button button-block">Choose existing</a>
 521   </form>
 522
 523   <!-- Input group -->
 524   <form class="input-group">
 525     <input type="text" placeholder="Full name">
 526     <input type="email" placeholder="Email">
 527     <input type="text" placeholder="Username">
 528   </form>
 529
 530   <!-- Input group with labels-->
 531   <form class="input-group">
 532     <div class="input-row">
 533       <label>Full name</label>
 534       <input type="text" placeholder="Mister Ratchet">
 535     </div>
 536     <div class="input-row">
 537       <label>Email</label>
 538       <input type="email" placeholder="ratchetframework@gmail.com">
 539     </div>
 540     <div class="input-row">
 541       <label>Username</label>
 542       <input type="text" placeholder="goRatchet">
 543     </div>
 544   </form>
 545
 546   </div>
 547
 548 </body>
 549 </html>