3.6.7 • Published 3 years ago
bb-toolbar v3.6.7
Install project
First of all, you need to add hook pre-push for avoid "git push -f origin master" into .git/hooks/
Run
npm install
Commands
Run test:
You need to download the selenium server Selenium server and copy to bin directory then launch server like :
java -jar bin/server_file.jar
You need to configure a tests/config/global.js file then you can
npm run build && npm run build-test
Run test
npm run test
Run watch:
npm run watch
Run watch test:
npm run watch-test
Contributing
Before each commit you must run the tests suit.
UI Elements
Grid
Based on a 12 colunms grid system, but not all sizes are available only the sizes that are used in the toolbar.
Different size of a column : 2, 3, 4, 5, 6, 7, 8, 10, 12
<div class="cloud-row">
<div class="cloud-col-6">
</div>
<div class="cloud-col-6">
</div>
</div>
Table
Class name | Description |
---|---|
.cloud-table-bordered | add border on the rows |
.cloud-table-hover | add a background color on the over on a row |
<table class="cloud-table cloud-table-bordered cloud-table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Contact</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mohsin</td>
<td>Irshad</td>
<td>isometric.mohsin@gmail.com</td>
<td>+923335586757</td>
<td>
<button class="btn btn-default btn-sm"><span class="icon icon-pencil"></span></button>
<button class="btn btn-default btn-sm"><span class="icon icon-times"></span></button>
</td>
</tr>
...
</tbody>
</table>
Pagination and Pager
Class name | Description |
---|---|
.active | highlight the current page |
.disabled | disable a link |
Exemple of a pagination
<nav class="cloud-nav">
<ul class="cloud-pagination">
<li>
<a href="#"><span class="icon icon-angle-left"></span></a>
</li>
<li><a href="#">1</a></li>
<li class="active"><span>2</span></li>
...
<li class="disabled">
<span><span class="icon icon-angle-right"></span></span>
</li>
</ul>
</nav>
Exemple of a pager, only previous page and next page
<nav class="cloud-nav">
<ul class="cloud-pager">
<li><a href="#"><span class="icon icon-angle-left"></span> Previous</a></li>
<li><a href="#">Next <span class="icon icon-angle-right"></span></a></li>
</ul>
</nav>
3.6.7
3 years ago