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>