features.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <aside id="features" class="left">
  2. <header data-title="BETA Features"></header>
  3. <article class="list scroll">
  4. <ul>
  5. <!-- Basic Layout -->
  6. <li class="current">
  7. <a href="#main-article" data-router="article">
  8. <strong>Meet the frameworks</strong>
  9. <small>A brief summary of features.</small>
  10. </a>
  11. </li>
  12. <!-- Layout & Navigation -->
  13. <li>
  14. <a href="#layout" data-router="section">
  15. <div class="bubble right">5</div>
  16. <strong>Layout</strong>
  17. <small>How to distribute the content in your app.</small>
  18. </a>
  19. </li>
  20. <!-- List -->
  21. <li>
  22. <a href="#list" data-router="section" data-count="17">
  23. <strong>Lists</strong>
  24. <small>Different formats for creating lists.</small>
  25. </a>
  26. </li>
  27. <!-- Forms -->
  28. <li>
  29. <a href="#form" data-router="section">
  30. <div class="bubble right">8</div>
  31. <strong>Form Elements</strong>
  32. <small>Controls available in BETA version</small>
  33. </a>
  34. </li>
  35. <!-- Asides -->
  36. <li>
  37. <a href="#aside" data-router="section">
  38. <div class="bubble right">8</div>
  39. <strong>Asides</strong>
  40. <small>The fashion element in all cool Apps</small>
  41. </a>
  42. </li>
  43. <!-- Data-Attributes -->
  44. <li>
  45. <a href="#data" data-router="section">
  46. <div class="bubble right">9</div>
  47. <strong>Data-attributes</strong>
  48. <small>Semantic links to create complex elements</small>
  49. </a>
  50. </li>
  51. <!-- Icons -->
  52. <li>
  53. <a href="#icon" data-router="section">
  54. <div class="bubble right">109</div>
  55. <strong>Icons</strong>
  56. <small>A huge repository vectorized icons</small>
  57. </a>
  58. </li>
  59. <!-- Scrolls -->
  60. <li>
  61. <a href="#scroll" data-router="section">
  62. <div class="bubble right">2</div>
  63. <strong>Scrolls</strong>
  64. <small>Everything is scrollable</small>
  65. </a>
  66. </li>
  67. <!-- Touch Events -->
  68. <li>
  69. <a href="#touchevents" data-router="section">
  70. <div class="bubble right">19</div>
  71. <strong>Touch Events</strong>
  72. <small>Touch, Tap, Double-Tap, Swipe...</small>
  73. </a>
  74. </li>
  75. <!-- Notifications -->
  76. <li>
  77. <a href="#notification" data-router="section">
  78. <div class="bubble right">8</div>
  79. <strong>Notifications</strong>
  80. <small>Cross-device notification system</small>
  81. </a>
  82. </li>
  83. <!-- Notifications -->
  84. <li>
  85. <a href="#pull" data-router="section">
  86. <strong>Pull & Refresh</strong>
  87. <small>Beautiful refresh event</small>
  88. </a>
  89. </li>
  90. <!-- Colours -->
  91. <li>
  92. <a href="#color" data-router="section" data-title="Colours">
  93. <div class="bubble right">14</div>
  94. <strong>Colors</strong>
  95. <small>Everything is more beautiful if you put a color.</small>
  96. </a>
  97. </li>
  98. <!-- Grid System -->
  99. <li>
  100. <a href="#grid" data-router="section">
  101. <strong>Grid System</strong>
  102. <small>System percentage dimension</small>
  103. </a>
  104. </li>
  105. </ul>
  106. </article>
  107. </aside>