docs.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844
  1. <div class="hbox hbox-auto-xs hbox-auto-sm">
  2. <!-- .aside -->
  3. <div class="col w w-auto-xs bg-light inherit dk b-r">
  4. <div class="wrapper-md b-b">
  5. <a class="btn btn-link pull-right m-t-n-xs m-r-n-sm visible-sm visible-xs" ui-toggle-class="show" data-target="#nav-docs">
  6. <i class="fa fa-bars"></i>
  7. </a>
  8. <span class="h4">Documents</span>
  9. </div>
  10. <div class="hidden-sm hidden-xs" id="nav-docs">
  11. <ul class="nav">
  12. <li class="padder b-b l-h-2x bg text-info"><em>Build</em></li>
  13. <li><a ui-scroll="node-req">Requirements</a></li>
  14. <li><a ui-scroll="bower">Bower</a></li>
  15. <li><a ui-scroll="grunt">Grunt</a></li>
  16. <li><a ui-scroll="dev-server">Local Server</a></li>
  17. <li class="padder b-b l-h-2x bg text-success"><em>CSS</em></li>
  18. <li><a ui-scroll="bootstrap">Bootstrap</a></li>
  19. <li><a ui-scroll="icons">Icons</a></li>
  20. <li><a ui-scroll="animate">Animate</a></li>
  21. <li><a ui-scroll="colors">Colors</a></li>
  22. <li><a ui-scroll="layout">Layout</a></li>
  23. <li><a ui-scroll="utilities">Utilities</a></li>
  24. <li ui-scroll="core" class="padder b-b b-t l-h-2x bg text-danger"><em>Core</em></li>
  25. <li><a ui-scroll="ui-router">ui-router</a></li>
  26. <li><a ui-scroll="ui-load">ui-load</a></li>
  27. <li><a ui-scroll="ui-jq">ui-jq</a></li>
  28. <li><a ui-scroll="ui-module">ui-module</a></li>
  29. <li><a ui-scroll="ui-validate">ui-validate</a></li>
  30. <li ui-scroll="directives" class="padder b-b b-t l-h-2x bg text-primary"><em>Directives</em></li>
  31. <li><a ui-scroll="ui-toggle-class">ui-toggle-class</a></li>
  32. <li><a ui-scroll="ui-shift">ui-shift</a></li>
  33. <li><a ui-scroll="ui-scroll">ui-scroll</a></li>
  34. <li><a ui-scroll="ui-fullscreen">ui-fullscreen</a></li>
  35. <li ui-scroll="plugins" class="padder b-b b-t l-h-2x bg text-info"><em>Plugins</em></li>
  36. <li><a ui-scroll="plugins">Plugins docs</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. <!-- /.aside -->
  41. <div class="col">
  42. <div class="clearfix padder-md">
  43. <h3 class="text-info m-t-xl font-thin m-b-none">Build </h3>
  44. <div>Build your project with grunt and manage dependencies with bower.</div>
  45. <div id="node-req" class="wrapper"></div>
  46. <div class="line b-b"></div>
  47. <h4 class="m-t-xl">Requirements</h4>
  48. <p>
  49. In order to utilize <a href="http://gruntjs.com" class="text-info font-bold">Grunt</a> you will need to have installed <a href="http://nodejs.org" class="text-info font-bold">Node.js</a> on your computer. Also
  50. insure that you have <a href="https://www.npmjs.org/" class="text-info font-bold">NPM</a> installed. <br />
  51. You can check if these are installed properly by opening up a Terminal (Linux or Mac) or Command Prompt (Windows) <br />
  52. and entering the command: <code>node --version</code> and <code>npm --version</code>
  53. These commands should output something similar to "v0.10.31" and "1.4.23" respectively.
  54. </p>
  55. <p>
  56. Once you have installed these programs, you'll need to get grunt and bower. You can achieve this by running the following command:
  57. <code>npm install -g bower grunt-cli</code> <br />
  58. Now you should be able to exectue the commands "grunt" and "bower".
  59. </p>
  60. <p class="well b bg-light lt wrapper-sm m-t text-danger font-bold">
  61. Please note that any commands we tell you to run must be ran from the project's root folder.
  62. </p>
  63. <div id="bower" class="wrapper"></div>
  64. <div class="line b-b"></div>
  65. <h4 class="m-t-xl">Bower Dependency Management</h4>
  66. <p>
  67. To ensure you have all updated the Javascript libraries managed by bower, run the command <code>bower install</code> in a terminal or command prompt
  68. while you are in the current working directory of the project.
  69. </p>
  70. <div id="grunt" class="wrapper"></div>
  71. <div class="line b-b"></div>
  72. <h4 class="m-t-xl">Grunt Build Tool</h4>
  73. <p>
  74. This project supports build steps with Grunt. The supported Grunt tasks that this project ships with is:
  75. </p>
  76. <ul>
  77. <li>Less Compilation</li>
  78. <li>Bower Depenecy Inclusion</li>
  79. <li>Release Tagging (requires project to be a <a href="http://git-scm.com/" class="text-info font-bold">GIT repository</a>)</li>
  80. </ul>
  81. <p>
  82. To build your project, just run the command <code>grunt build:dev</code>. This will compile your less files and
  83. copy over your bower dependencies.
  84. </p>
  85. <p>
  86. Release tagging allows you to bump your current project's version and tag it with git. It also creates a changelog based on your
  87. prevoius commit history. Checkout <a href="https://github.com/ericmatthys/grunt-changelog" class="text-info font-bold">the grunt-changelog module</a> for more
  88. details and how to customize.
  89. </p>
  90. <div id="dev-server" class="wrapper"></div>
  91. <div class="line b-b"></div>
  92. <h4 class="m-t-xl">Local Server Development</h4>
  93. <p>
  94. We've made it easy to develop and test on your local machine. Once you've installed the bower dependencies and built your project,
  95. you can start a local server by running the command <code>npm start</code>. This will start a local server and open up your browser.
  96. </p>
  97. <div id="css" class="wrapper"></div>
  98. <div class="line b-b"></div>
  99. <h3 class="text-success m-t-xl font-thin m-b-none">CSS </h3>
  100. <div>Extensible classes</div>
  101. <div id="bootstrap" class="wrapper"></div>
  102. <div class="line b-b"></div>
  103. <h4 class="m-t-xl">Bootstrap CSS</h4>
  104. <p>
  105. For the bootstrap css and components, please check the <a href="http://getbootstrap.com" class="text-info font-bold">Bootstrap 3</a>
  106. </p>
  107. <p><strong>Angular UI Bootstrap</strong>, This project does not use bootstrap.js, but use Angular UI Bootstrap written in pure AngularJS, check <a ui-sref="app.ui.bootstrap" class="text-info font-bold">UI Boostrap</a> and <a href="http://angular-ui.github.io/bootstrap" class="text-info font-bold">Official Documents</a></p>
  108. <div id="less" class="wrapper"></div>
  109. <div class="line b-b"></div>
  110. <h4 class="m-t-xl">LESS</h4>
  111. <p>This file's css is generated by LESS files. There are many Variables, Mixins you can use.</p>
  112. <p><strong>Compile</strong>, you can use the less.php to output the css. </p>
  113. <div id="icons" class="wrapper"></div>
  114. <div class="line b-b"></div>
  115. <h4 class="m-t-xl">Icons</h4>
  116. <ul>
  117. <li>FontAwesome icons <label class="label bg-info">4.1</label> <p>Check <strong><a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a></strong> for more details to see how to use and examples</p></li>
  118. <li>Glyphicons <p>Bootstrap default icons</p></li>
  119. <li>Simple Line Icons</li>
  120. </ul>
  121. <div id="animate" class="wrapper"></div>
  122. <div class="line b-b"></div>
  123. <h4 class="m-t-xl">Animate</h4>
  124. <p><a href="http://daneden.me/animate/"><strong>animate.css</strong></a> is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. </p>
  125. <p><strong>Page view transition</strong>, This project also used Animate css for <strong>ui-view animation</strong>, you can use <code>.fade-in, .fade-in-left, .fade-in-right, .fade-in-up, .fade-in-down, .fade-in-right-big, .fade-in-left-big, .fade-in-up-big, .fade-in-down-big</code>, if you want to use the big animation, you can use a <code>.smooth</code> class for smoothing animation.</p>
  126. <div id="colors" class="wrapper"></div>
  127. <div class="line b-b"></div>
  128. <h4 class="m-t-xl">Colors</h4>
  129. <p><strong>8 default color palettes</strong>, build colorful widgets. you can open the less/app.variables.less to config your own colors(<code>@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light</code>).
  130. </p>
  131. <p><strong>Use less file to build your colors</strong>, You can use the mixin wariant. use <code>.color-variant</code> and <code>.font-variant</code> to build the color scheme, check more details in the css/less/app.colors.less.</p>
  132. <div class="row">
  133. <div class="col-sm-6">
  134. <p>.bg-light</p>
  135. <div class="m-b">
  136. <span class="bg-light hbox">
  137. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  138. </span>
  139. </div>
  140. <p>.bg-dark</p>
  141. <div class="m-b">
  142. <span class="bg-dark hbox">
  143. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  144. </span>
  145. </div>
  146. <p>.bg-black</p>
  147. <div class="m-b">
  148. <span class="bg-black hbox">
  149. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  150. </span>
  151. </div>
  152. <p>.bg-primary</p>
  153. <div class="m-b">
  154. <span class="bg-primary hbox">
  155. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  156. </span>
  157. </div>
  158. </div>
  159. <div class="col-sm-6">
  160. <p>.bg-info</p>
  161. <div class="m-b">
  162. <span class="bg-info hbox">
  163. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  164. </span>
  165. </div>
  166. <p>.bg-success</p>
  167. <div class="m-b">
  168. <span class="bg-success hbox">
  169. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  170. </span>
  171. </div>
  172. <p>.bg-warning</p>
  173. <div class="m-b">
  174. <span class="bg-warning hbox">
  175. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  176. </span>
  177. </div>
  178. <p>.bg-danger</p>
  179. <div class="m-b">
  180. <span class="bg-danger hbox">
  181. <span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
  182. </span>
  183. </div>
  184. </div>
  185. </div>
  186. <div id="layout" class="wrapper"></div>
  187. <div class="line b-b"></div>
  188. <h4 class="m-t-xl">Layout</h4>
  189. <p>
  190. <strong>Fix header</strong>, use <code>.app-header-fixed</code> class on ".app" to fixed header.position
  191. </p>
  192. <p>
  193. <strong>Fix aside</strong>, use <code>.app-aside-fixed</code> class on ".app" to fixed aside position.
  194. </p>
  195. <p>
  196. <strong>Fold aside</strong>, use <code>.app-aside-folded</code> class on ".app" to fold aside.
  197. </p>
  198. <p><strong>Hbox</strong>, use <code>.hbox</code> and <code>.col</code> to build column layout. and you can use the <code>.w-lg, .w-md, .w, .w-sm, .w-xs</code> to fix column width. and use <code>.hbox-auto-sm, .hbox-auto-xs</code> to disable hbox on small screen.</p>
  199. <div id="utilities" class="wrapper"></div>
  200. <div class="line b-b"></div>
  201. <h4 class="m-t-xl">CSS Utilities</h3>
  202. <table class="table table-border bg-white-only b-a">
  203. <tbody>
  204. <tr class="bg-light lt">
  205. <td colspan="2">Margin</td>
  206. </tr>
  207. <tr>
  208. <td>.m</td>
  209. <td>margin: 15px</td>
  210. </tr>
  211. <tr>
  212. <td>.m-xs</td>
  213. <td>margin: 5px</td>
  214. </tr>
  215. <tr>
  216. <td>.m-sm</td>
  217. <td>margin: 10px</td>
  218. </tr>
  219. <tr>
  220. <td>.m-md</td>
  221. <td>margin: 20px</td>
  222. </tr>
  223. <tr>
  224. <td>.m-lg</td>
  225. <td>margin: 30px</td>
  226. </tr>
  227. <tr>
  228. <td>.m-n</td>
  229. <td>margin: 0px</td>
  230. </tr>
  231. <tr>
  232. <td>.m-l</td>
  233. <td>margin-left: 15px</td>
  234. </tr>
  235. <tr>
  236. <td>.m-l-xs</td>
  237. <td>margin-left: 5px</td>
  238. </tr>
  239. <tr>
  240. <td>.m-l-sm</td>
  241. <td>margin-left: 10px</td>
  242. </tr>
  243. <tr>
  244. <td>.m-l-md</td>
  245. <td>margin-left: 20px</td>
  246. </tr>
  247. <tr>
  248. <td>.m-l-lg</td>
  249. <td>margin-left: 30px</td>
  250. </tr>
  251. <tr>
  252. <td>.m-l-xl</td>
  253. <td>margin-left: 40px</td>
  254. </tr>
  255. <tr>
  256. <td>.m-l-xxl</td>
  257. <td>margin-left: 50px</td>
  258. </tr>
  259. <tr>
  260. <td>.m-l-none</td>
  261. <td>margin-left: 0px</td>
  262. </tr>
  263. <tr>
  264. <td>.m-l-n</td>
  265. <td>margin-left: -15px</td>
  266. </tr>
  267. <tr>
  268. <td>.m-l-n-xxs</td>
  269. <td>margin-left: -1px</td>
  270. </tr>
  271. <tr>
  272. <td>.m-l-n-xs</td>
  273. <td>margin-left: -5px</td>
  274. </tr>
  275. <tr>
  276. <td>.m-l-n-sm</td>
  277. <td>margin-left: -10px</td>
  278. </tr>
  279. <tr>
  280. <td>.m-l-n-md</td>
  281. <td>margin-left: -20px</td>
  282. </tr>
  283. <tr>
  284. <td>.m-l-n-lg</td>
  285. <td>margin-left: -30px</td>
  286. </tr>
  287. <tr>
  288. <td>.m-l-n-xl</td>
  289. <td>margin-left: -40px</td>
  290. </tr>
  291. <tr>
  292. <td>.m-l-n-xxl</td>
  293. <td>margin-left: -50px</td>
  294. </tr>
  295. <tr>
  296. <td colspan="2">.m-r <em>(margin right)</em> , m-t <em>(margin top)</em> , m-b <em>(margin bottom)</em> have the same classes as the .m-l.</td>
  297. </tr>
  298. <tr class="bg-light lt">
  299. <td colspan="2">Border</td>
  300. </tr>
  301. <tr>
  302. <td>.b-a</td>
  303. <td>border:1px solid @border-color(see app.variables.less)</td>
  304. </tr>
  305. <tr>
  306. <td>.b-l</td>
  307. <td>border left</td>
  308. </tr>
  309. <tr>
  310. <td>.b-t</td>
  311. <td>border top</td>
  312. </tr>
  313. <tr>
  314. <td>.b-r</td>
  315. <td>border right</td>
  316. </tr>
  317. <tr>
  318. <td>.b-b</td>
  319. <td>border bottom</td>
  320. </tr>
  321. <tr>
  322. <td>.b-light, .b-dark, .b-primary, .b-success, .b-info, .b-warning, .b-danger, .b-black, .b-white</td>
  323. <td>border with specific color.</td>
  324. </tr>
  325. <tr>
  326. <td>.b-2x</td>
  327. <td>border width with 2px</td>
  328. </tr>
  329. <tr>
  330. <td>.b-3x</td>
  331. <td>border width with 3px</td>
  332. </tr>
  333. <tr>
  334. <td>.no-border</td>
  335. <td>border width: 0</td>
  336. </tr>
  337. <tr>
  338. <td>.no-border-xs</td>
  339. <td>border width: 0 on etremely small screen.</td>
  340. </tr>
  341. <tr class="bg-light lt">
  342. <td colspan="2">Radius</td>
  343. </tr>
  344. <tr>
  345. <td>.r</td>
  346. <td>border-radius: @border-radius-base</td>
  347. </tr>
  348. <tr>
  349. <td>.r-l</td>
  350. <td>border-radius: @border-radius-base 0 0 @border-radius-base</td>
  351. </tr>
  352. <tr>
  353. <td>.r-r</td>
  354. <td>border-radius: 0 @border-radius-base @border-radius-base 0</td>
  355. </tr>
  356. <tr>
  357. <td>.r-t</td>
  358. <td>border-radius: @border-radius-base @border-radius-base 0 0</td>
  359. </tr>
  360. <tr>
  361. <td>.r-b</td>
  362. <td>border-radius: 0 0 @border-radius-base @border-radius-base</td>
  363. </tr>
  364. <tr>
  365. <td>.r-2x</td>
  366. <td>radius size: 2 x @border-radius-base</td>
  367. </tr>
  368. <tr>
  369. <td>.r-3x</td>
  370. <td>radius size: 3 x @border-radius-base</td>
  371. </tr>
  372. <tr class="bg-light lt">
  373. <td colspan="2">Padder and Wrapper</td>
  374. </tr>
  375. <tr>
  376. <td>.padder</td>
  377. <td>padding-left: 15px; padding-right: 15px</td>
  378. </tr>
  379. <tr>
  380. <td>.padder-md</td>
  381. <td>padding-left: 20px; padding-right: 20px</td>
  382. </tr>
  383. <tr>
  384. <td>.padder-lg</td>
  385. <td>padding-left: 30px; padding-right: 30px</td>
  386. </tr>
  387. <tr>
  388. <td>.no-padder</td>
  389. <td>padding: 0</td>
  390. </tr>
  391. <tr>
  392. <td>.wrapper</td>
  393. <td>padding: 15px</td>
  394. </tr>
  395. <tr>
  396. <td>.wrapper-sm</td>
  397. <td>padding: 10px</td>
  398. </tr>
  399. <tr>
  400. <td>.wrapper-xs</td>
  401. <td>padding: 5px</td>
  402. </tr>
  403. <tr>
  404. <td>.wrapper-md</td>
  405. <td>padding: 20px</td>
  406. </tr>
  407. <tr>
  408. <td>.wrapper-lg</td>
  409. <td>padding: 30px</td>
  410. </tr>
  411. <tr>
  412. <td>.wrapper-xl</td>
  413. <td>padding: 50px</td>
  414. </tr>
  415. <tr class="bg-light lt">
  416. <td colspan="2">Text</td>
  417. </tr>
  418. <tr>
  419. <td>.text-u-c</td>
  420. <td>text uppercase</td>
  421. </tr>
  422. <tr>
  423. <td>.text-l-t</td>
  424. <td>text line through</td>
  425. </tr>
  426. <tr>
  427. <td>.text-u-l</td>
  428. <td>text under line</td>
  429. </tr>
  430. <tr>
  431. <td>.text-ellipsis</td>
  432. <td>display text in one line with ellipsis</td>
  433. </tr>
  434. <tr>
  435. <td>.text-center-xs</td>
  436. <td>center text only on extremely small devices</td>
  437. </tr>
  438. <tr>
  439. <td>.text-left-xs</td>
  440. <td>align text left only on extremely small devices</td>
  441. </tr>
  442. <tr>
  443. <td>.text-right-xs</td>
  444. <td>align text right only on extremely small devices</td>
  445. </tr>
  446. <tr class="bg-light lt">
  447. <td colspan="2">Width and Height</td>
  448. </tr>
  449. <tr>
  450. <td>.w-xxl</td>
  451. <td>width: 360px</td>
  452. </tr>
  453. <tr>
  454. <td>.w-xl</td>
  455. <td>width: 320px</td>
  456. </tr>
  457. <tr>
  458. <td>.w-lg</td>
  459. <td>width: 280px</td>
  460. </tr>
  461. <tr>
  462. <td>.w-md</td>
  463. <td>width: 240px</td>
  464. </tr>
  465. <tr>
  466. <td>.w</td>
  467. <td>width: 200px</td>
  468. </tr>
  469. <tr>
  470. <td>.w-sm</td>
  471. <td>width: 158px</td>
  472. </tr>
  473. <tr>
  474. <td>.w-xs</td>
  475. <td>width: 90px</td>
  476. </tr>
  477. <tr>
  478. <td>.w-xxs</td>
  479. <td>width: 60px</td>
  480. </tr>
  481. <tr>
  482. <td>.w-full</td>
  483. <td>width: 100%</td>
  484. </tr>
  485. <tr>
  486. <td>.w-auto-xs</td>
  487. <td>width: auto on extremely small screen.</td>
  488. </tr>
  489. <tr>
  490. <td>.h-full</td>
  491. <td>height: 100%</td>
  492. </tr>
  493. <tr class="bg-light lt">
  494. <td colspan="2">Thumb</td>
  495. </tr>
  496. <tr>
  497. <td>.thumb-xl</td>
  498. <td>width: 128px</td>
  499. </tr>
  500. <tr>
  501. <td>.thumb-lg</td>
  502. <td>width: 96px</td>
  503. </tr>
  504. <tr>
  505. <td>.thumb-md</td>
  506. <td>width: 64px</td>
  507. </tr>
  508. <tr>
  509. <td>.thumb</td>
  510. <td>width: 50px</td>
  511. </tr>
  512. <tr>
  513. <td>.thumb-sm</td>
  514. <td>width: 48px</td>
  515. </tr>
  516. <tr>
  517. <td>.thumb-xs</td>
  518. <td>width: 34px</td>
  519. </tr>
  520. <tr>
  521. <td>.thumb-xxs</td>
  522. <td>width: 30px</td>
  523. </tr>
  524. <tr>
  525. <td>.img-full</td>
  526. <td>width: 100%</td>
  527. </tr>
  528. <tr class="bg-light lt">
  529. <td colspan="2">Avatar</td>
  530. </tr>
  531. <tr>
  532. <td>.avatar</td>
  533. <td>circle photo</td>
  534. </tr>
  535. <tr>
  536. <td>status</td>
  537. <td>status, '.on', '.off', '.busy', '.away'</td>
  538. </tr>
  539. <tr>
  540. <td>status position</td>
  541. <td>status position, '.left', '.right', '.bottom'</td>
  542. </tr>
  543. <tr class="bg-light lt">
  544. <td colspan="2">Arrow</td>
  545. </tr>
  546. <tr>
  547. <td>.arrow</td>
  548. <td>base class</td>
  549. </tr>
  550. <tr>
  551. <td>.left</td>
  552. <td>left arrow, position:middle</td>
  553. </tr>
  554. <tr>
  555. <td>.right</td>
  556. <td>right arrow, position:middle</td>
  557. </tr>
  558. <tr>
  559. <td>.top</td>
  560. <td>top arrow, position:center</td>
  561. </tr>
  562. <tr>
  563. <td>.bottom</td>
  564. <td>bottom arrow, position:center</td>
  565. </tr>
  566. <tr>
  567. <td>.pull-left</td>
  568. <td>.top and .bottom arrow with left position</td>
  569. </tr>
  570. <tr>
  571. <td>.pull-right</td>
  572. <td>.top and .bottom arrow with right position</td>
  573. </tr>
  574. <tr>
  575. <td>.pull-up</td>
  576. <td>.left and .right arrow with up position</td>
  577. </tr>
  578. <tr>
  579. <td>.pull-down</td>
  580. <td>.left and .right arrow with down position</td>
  581. </tr>
  582. <tr class="bg-light lt">
  583. <td colspan="2">Item</td>
  584. </tr>
  585. <tr>
  586. <td>.item-overlay</td>
  587. <td>overlay the element on an item, default display:none, with '.active' class will show</td>
  588. </tr>
  589. <tr>
  590. <td>.top</td>
  591. <td>top element on a item element</td>
  592. </tr>
  593. <tr>
  594. <td>.bottom</td>
  595. <td>bottom element on a item element</td>
  596. </tr>
  597. <tr>
  598. <td>.center</td>
  599. <td>center element on a item element</td>
  600. </tr>
  601. <tr class="bg-light lt">
  602. <td colspan="2">Button</td>
  603. </tr>
  604. <tr>
  605. <td class="w">.btn-rounded</td>
  606. <td>rounded button</td>
  607. </tr>
  608. <tr>
  609. <td>.btn-icon</td>
  610. <td>icon only button</td>
  611. </tr>
  612. <tr>
  613. <td>.btn-addon</td>
  614. <td>icon addon, must have a i tag, and can use .pull-left and .pull-right</td>
  615. </tr>
  616. <tr class="bg-light lt">
  617. <td colspan="2">Timeline</td>
  618. </tr>
  619. <tr>
  620. <td class="w">.timeline</td>
  621. <td>timeline wrapper class</td>
  622. </tr>
  623. <tr>
  624. <td class="w">.timeline-center</td>
  625. <td>timeline with center position</td>
  626. </tr>
  627. <tr>
  628. <td class="w">.tl-item</td>
  629. <td>timeline item</td>
  630. </tr>
  631. <tr>
  632. <td class="w">.tl-wrap</td>
  633. <td>timeline item wrap</td>
  634. </tr>
  635. <tr>
  636. <td class="w">.tl-date</td>
  637. <td>timeline date</td>
  638. </tr>
  639. <tr>
  640. <td class="w">.tl-content</td>
  641. <td>timeline content</td>
  642. </tr>
  643. <tr class="bg-light lt">
  644. <td colspan="2">Streamline</td>
  645. </tr>
  646. <tr>
  647. <td class="w">.streamline</td>
  648. <td>streamline class</td>
  649. </tr>
  650. <tr>
  651. <td class="w">.sl-item</td>
  652. <td>streamline item, you can use .b-l and .b-info, b-danger... class to make it colorful.</td>
  653. </tr>
  654. <tr class="bg-light lt">
  655. <td colspan="2">Hbox</td>
  656. </tr>
  657. <tr>
  658. <td>.hbox</td>
  659. <td>display: table</td>
  660. </tr>
  661. <tr>
  662. <td>.col</td>
  663. <td>display: table-cell</td>
  664. </tr>
  665. <tr>
  666. <td>.v-middle</td>
  667. <td>vertical align: middle</td>
  668. </tr>
  669. <tr>
  670. <td>.v-top</td>
  671. <td>vertical align: top</td>
  672. </tr>
  673. <tr>
  674. <td>.v-bottom</td>
  675. <td>vertical align: bottom</td>
  676. </tr>
  677. </tbody>
  678. </table>
  679. <div id="core" class="wrapper"></div>
  680. <div class="line b-b"></div>
  681. <h3 class="text-danger font-thin m-t-xl m-b-none">Core</h3>
  682. <div>You must know AngularJS, "ui-router" and "ui-jq" to get started your project.</div>
  683. <div id="ui-router" class="wrapper"></div>
  684. <div class="line b-b"></div>
  685. <h4 class="m-t-xl">ui-router</h4>
  686. <p>
  687. ui-router for <strong>Nested Routing</strong> and <strong>Nested View</strong>, check the <a href="http://angular-ui.github.io/ui-router/" class="text-info">official documents</a>
  688. </p>
  689. <div id="ui-load" class="wrapper"></div>
  690. <div class="line b-b"></div>
  691. <h4 class="m-t-xl">ui-load</h4>
  692. <p>ui-load for <strong>lazy loading</strong> the js and css files. </p>
  693. <p class="well text-black bg-light lter">
  694. angular.module('myModule', ['ui.load']);<br><br>
  695. uiLoad.load(
  696. ['path/style.css', 'path/script.js']
  697. ).then(function() {<br>
  698. <span class="text-muted m-l">// loaded succesfully.</span><br>
  699. }).catch(function() {<br>
  700. <span class="text-muted m-l">// There was some error loading the files.</span><br>
  701. });<br>
  702. </p>
  703. <p>ui-load also used in the ui-router <code>resolve:{}</code> for lazy loading Angular Directives, Controllers and Services.</p>
  704. <div id="ui-jq" class="wrapper"></div>
  705. <div class="line b-b"></div>
  706. <h4 class="m-t-xl">ui-jq</h4>
  707. <p>
  708. <code>ui-jq</code> Call the jQuery function or plugin specified on the element. check the <a href="http://angular-ui.github.io/ui-utils/#/jq" class="text-info">official documents</a>
  709. </p>
  710. <div id="ui-module" class="wrapper"></div>
  711. <div class="line b-b"></div>
  712. <h4 class="m-t-xl">ui-module</h4>
  713. <p>
  714. <code>ui-module</code> Load other dependences for child directive.
  715. you need config the dependences in "js/app.js" constant "MODULE_CONFIG".
  716. <br>example: check the "ui-select2" directive on "form/element"
  717. </p>
  718. <div id="ui-validate" class="wrapper"></div>
  719. <div class="line b-b"></div>
  720. <h4 class="m-t-xl">ui-validate</h4>
  721. <p>
  722. The <code>ui-validate</code> directive makes it very easy to create custom validator expressions. check the <a href="http://angular-ui.github.io/ui-utils/#/validate" class="text-info">official documents</a>
  723. </p>
  724. <div id="directives" class="wrapper"></div>
  725. <div class="line b-b"></div>
  726. <h3 class="text-primary font-thin m-t-xl m-b-none">Directives</h3>
  727. <div id="ui-toggle-class" class="wrapper"></div>
  728. <div class="line b-b"></div>
  729. <h4 class="m-t-xl">ui-toggle-class</h4>
  730. <p>
  731. Toggle class when click on the element, attr <code>target</code> for target element.
  732. <code>&lt;div ui-toggle-class="show" target="#nav">&lt;/div></code>
  733. </p>
  734. <div id="ui-shift" class="wrapper"></div>
  735. <div class="line b-b"></div>
  736. <h4 class="m-t-xl">ui-shift</h4>
  737. <p>
  738. Shift element on xs screen, attr <code>target</code> for target element.
  739. <code>&lt;div ui-shift="append" target="#nav">&lt;/div></code>
  740. </p>
  741. <div id="ui-scroll" class="wrapper"></div>
  742. <div class="line b-b"></div>
  743. <h4 class="m-t-xl">ui-scroll</h4>
  744. <p>
  745. Scroll to element when click, attr value for target element.
  746. <code>&lt;a ui-scroll="target">&lt;/a></code>
  747. </p>
  748. <div id="ui-fullscreen" class="wrapper"></div>
  749. <div class="line b-b"></div>
  750. <h4 class="m-t-xl">ui-fullscreen</h4>
  751. <p>
  752. Request fullscreen mode for element.
  753. <code>&lt;a ui-fullscreen>&lt;/a></code> or <code>&lt;a ui-fullscreen target="#target">&lt;/a></code>
  754. </p>
  755. <div id="plugins" class="wrapper"></div>
  756. <div class="line b-b"></div>
  757. <h3 class="text-info font-thin m-t-xl m-b-lg">Plugins</h3>
  758. <p>All jQuery plugins are depended on <code>ui-jq</code>, do not need create the Angular Directive for each of the plugin. you can config in the js/app.js Angular Constant <code>JQ_CONFIG</code>, <code>functionName => pluginPath</code>, the js and css files are lazy loaded.</p>
  759. <div class="row m-b-xl">
  760. <div class="col-md-6">
  761. <h4 class="m-t-md">FullCalendar</h4>
  762. <p>Check the online <a href="http://arshaw.com/fullcalendar/"><strong>document</strong></a> and <a href="http://angular-ui.github.io/ui-calendar/"><strong>Angular Fullcalendar Wrapper</strong></a></p>
  763. <h4 class="m-t-md">Datatables</h4>
  764. <p>Check the online <a href="http://datatables.net/"><strong>document</strong></a>. </p>
  765. <h4 class="m-t-md">Chosen</h4>
  766. <p>Check the online <a href="http://github.com/harvesthq/chosen"><strong>document</strong></a>. </p>
  767. <h4 class="m-t-md">File-input</h4>
  768. <p>Check the online <a href="http://dev.tudosobreweb.com.br/bootstrap-filestyle/"><strong>document</strong></a>. </p>
  769. <h4 class="m-t-md">Slider</h4>
  770. <p>Check the online <a href="http://www.eyecon.ro/bootstrap-slider"><strong>document</strong></a>.</p>
  771. <h4 class="m-t-md">TouchSpin</h4>
  772. <p>Check the online <a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/"><strong>document</strong></a>. </p>
  773. <h4 class="m-t-md">WYSISYG</h4>
  774. <p>Check the online <a href="http://github.com/mindmup/bootstrap-wysiwyg"><strong>document</strong></a>. </p>
  775. </div>
  776. <div class="col-md-6">
  777. <h4 class="m-t-md">Flotchart</h4>
  778. <p>Check the online <a href="http://www.flotcharts.org/"><strong>document</strong></a>. </p>
  779. <h4 class="m-t-md">Sparklines</h4>
  780. <p>Check the online <a href="http://omnipotent.net/jquery.sparkline"><strong>document</strong></a>. </p>
  781. <h4 class="m-t-md">Easy pie chart</h4>
  782. <p>Check the online <a href="http://rendro.github.io/easy-pie-chart"><strong>document</strong></a>. </p>
  783. <h4 class="m-t-md">Sortable</h4>
  784. <p>Check the online <a href="http://farhadi.ir/projects/html5sortable"><strong>document</strong></a>. </p>
  785. <h4 class="m-t-md">Nestable</h4>
  786. <p>Check the online <a href="http://dbushell.github.io/Nestable/"><strong>document</strong></a>. </p>
  787. <h4 class="m-t-md">SlimScroll</h4>
  788. <p>Check the online <a href="http://rocha.la"><strong>document</strong></a>. </p>
  789. <h4 class="m-t-md">JvectorMap</h4>
  790. <p>Check the online <a href="http://jvectormap.com/"><strong>document</strong></a>. </p>
  791. </div>
  792. </div>
  793. </div>
  794. </div>
  795. </div>