<?php include 'inc/config.php'; $template['header_link'] = 'UI ELEMENTS'; ?>
<?php include 'inc/template_start.php'; ?>
<?php include 'inc/page_head.php'; ?>

<!-- Page content -->
<div id="page-content">
    <!-- Blocks - Grid Header -->
    <div class="content-header">
        <div class="row">
            <div class="col-sm-6">
                <div class="header-section">
                    <h1>Blocks &amp; Grid</h1>
                </div>
            </div>
            <div class="col-sm-6 hidden-xs">
                <div class="header-section">
                    <ul class="breadcrumb breadcrumb-top">
                        <li>User Interface</li>
                        <li>Elements</li>
                        <li><a href="">Blocks &amp; Grid</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END Blocks - Grid Header -->

    <!-- Block with Options Row -->
    <div class="row">
        <div class="col-sm-4">
            <!-- Block -->
            <div class="block">
                <!-- Block Title -->
                <div class="block-title">
                    <h2>Title</h2>
                </div>
                <!-- END Block Title -->

                <!-- Block Content -->
                <p>A nice block..</p>
                <!-- END Block Content -->
            </div>
            <!-- END Block -->
        </div>
        <div class="col-sm-4">
            <!-- Block with Options -->
            <div class="block">
                <!-- Block with Options Title -->
                <div class="block-title">
                    <div class="block-options pull-right">
                        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Settings"><i class="fa fa-cog"></i></a>
                        <div class="btn-group">
                            <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default dropdown-toggle enable-tooltip" data-toggle="dropdown" title="Options"><i class="fa fa-chevron-down"></i></a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="fa fa-pencil pull-right"></i>
                                        Edit
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="fa fa-refresh pull-right"></i>
                                        Update
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="fa fa-trash-o fa-fw pull-right"></i>
                                        Delete
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <h2>Title</h2>
                </div>
                <!-- END Block with Options Title -->

                <!-- Block with Options Content -->
                <p>A nice block with options..</p>
                <!-- END Block with Options Content -->
            </div>
            <!-- END Block with Options -->
        </div>
        <div class="col-sm-4">
            <!-- Block with Options Left -->
            <div class="block">
                <!-- Block with Options Left Title -->
                <div class="block-title text-right">
                    <div class="block-options pull-left">
                        <div class="btn-group">
                            <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default dropdown-toggle enable-tooltip" data-toggle="dropdown" title="Options"><i class="fa fa-chevron-down"></i></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="fa fa-pencil pull-right"></i>
                                        Edit
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="fa fa-refresh pull-right"></i>
                                        Update
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="fa fa-trash-o fa-fw pull-right"></i>
                                        Delete
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default" data-toggle="tooltip" title="Settings"><i class="fa fa-cog"></i></a>
                    </div>
                    <h2>Title</h2>
                </div>
                <!-- END Block with Options Left Title -->

                <!-- Block with Options Left Content -->
                <p>With options to the left..</p>
                <!-- END Block with Options Left Content -->
            </div>
            <!-- END Block with Options Left -->
        </div>
    </div>
    <!-- END Block with Options Row -->

    <!-- Blocks in Grid -->
    <div class="row">
        <div class="col-xs-3">
            <div class="block">
                <div class="block-title"><h4>1/4</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="block">
                <div class="block-title"><h4>1/4</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="block">
                <div class="block-title"><h4>1/4</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="block">
                <div class="block-title"><h4>1/4</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="block">
                <div class="block-title"><h4>1/3</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="block">
                <div class="block-title"><h4>1/3</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="block">
                <div class="block-title"><h4>1/3</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="block">
                <div class="block-title"><h4>1/2</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="block">
                <div class="block-title"><h4>1/2</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="block">
                <div class="block-title"><h4>1/3</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-8">
            <div class="block">
                <div class="block-title"><h4>2/3</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-8">
            <div class="block">
                <div class="block-title"><h4>2/3</h4></div>
                <p>...</p>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="block">
                <div class="block-title"><h4>1/3</h4></div>
                <p>...</p>
            </div>
        </div>
    </div>
    <!-- END Blocks in Grid -->

    <!-- Grid Content Block -->
    <div class="block">
        <!-- Grid Content Title -->
        <div class="block-title">
            <h2>12 Column Bootstrap Grid</h2>
        </div>
        <!-- END Grid Content Title -->

        <!-- Grid Content Content -->
        <h4 class="sub-header">Extra Small <small><code>.col-xs-(1-12)</code> (never collapsing)</small></h4>
        <div class="row">
            <div class="col-xs-6">
                <div class="block"><p><code>.col-xs-6</code></p></div>
            </div>
            <div class="col-xs-6">
                <div class="block"><p><code>.col-xs-6</code></p></div>
            </div>
        </div>
        <h4 class="sub-header">Small <small><code>.col-sm-(1-12)</code> (collapsed at 768px)</small></h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="block"><p><code>.col-sm-6</code></p></div>
            </div>
            <div class="col-sm-6">
                <div class="block"><p><code>.col-sm-6</code></p></div>
            </div>
        </div>
        <h4 class="sub-header">Medium <small><code>.col-md-(1-12)</code> (collapsed at 992px)</small></h4>
        <div class="row">
            <div class="col-md-6">
                <div class="block"><p><code>.col-md-6</code></p></div>
            </div>
            <div class="col-md-6">
                <div class="block"><p><code>.col-md-6</code></p></div>
            </div>
        </div>
        <h4 class="sub-header">Large <small><code>.col-lg-(1-12)</code> (collapsed at 1200px)</small></h4>
        <div class="row">
            <div class="col-lg-6">
                <div class="block"><p><code>.col-lg-6</code></p></div>
            </div>
            <div class="col-lg-6">
                <div class="block"><p><code>.col-lg-6</code></p></div>
            </div>
        </div>
        <!-- END Grid Content Content -->
    </div>
    <!-- END Grid Content Block -->

    <!-- Multiple Grid Classes Block -->
    <div class="block">
        <!-- Multiple Grid Classes Title -->
        <div class="block-title">
            <h2>Multiple Grid Classes</h2>
        </div>
        <!-- END Multiple Grid Classes Title -->

        <!-- Multiple Grid Classes Content -->
        <div class="row">
            <div class="col-xs-6 col-lg-3">
                <div class="block"><p><code>.col-xs-6</code> <code>.col-lg-3</code></p></div>
            </div>
            <div class="col-xs-6 col-lg-3">
                <div class="block"><p><code>.col-xs-6</code> <code>.col-lg-3</code></p></div>
            </div>
            <div class="col-xs-6 col-lg-3">
                <div class="block"><p><code>.col-xs-6</code> <code>.col-lg-3</code></p></div>
            </div>
            <div class="col-xs-6 col-lg-3">
                <div class="block"><p><code>.col-xs-6</code> <code>.col-lg-3</code></p></div>
            </div>
        </div>
        <!-- END Multiple Grid Classes Content -->
    </div>
    <!-- END Multiple Grid Classes Block -->

    <!-- Helper Classes Block -->
    <div class="block">
        <!-- Helper Classes Title -->
        <div class="block-title">
            <h2>Helper Classes</h2>
        </div>
        <!-- END Helper Classes Title -->

        <!-- Helper Classes Content -->
        <div class="table-responsive">
            <table class="table table-borderless table-condensed text-center">
                <thead>
                    <tr>
                        <th></th>
                        <th class="text-center">
                            Extra small devices<br>
                            <small>Phones (&lt;768px)</small>
                        </th>
                        <th class="text-center">
                            Small devices<br>
                            <small>Tablets (&ge;768px)</small>
                        </th>
                        <th class="text-center">
                            Medium devices<br>
                            <small>Desktops (&ge;992px)</small>
                        </th>
                        <th class="text-center">
                            Large devices<br>
                            <small>Desktops (&ge;1200px)</small>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th><code>.visible-xs</code></th>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                    </tr>
                    <tr>
                        <th><code>.visible-sm</code></th>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                    </tr>
                    <tr>
                        <th><code>.visible-md</code></th>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                    </tr>
                    <tr>
                        <th><code>.visible-lg</code></th>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <th><code>.hidden-xs</code></th>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                    </tr>
                    <tr>
                        <th><code>.hidden-sm</code></th>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                    </tr>
                    <tr>
                        <th><code>.hidden-md</code></th>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                    </tr>
                    <tr>
                        <th><code>.hidden-lg</code></th>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td class="success"><i class="fa fa-check text-success"></i></td>
                        <td><i class="fa fa-times text-danger"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- END Helper Classes Content -->
    </div>
    <!-- END Helper Classes Block -->
</div>
<!-- END Page Content -->

<?php include 'inc/page_footer.php'; ?>
<?php include 'inc/template_scripts.php'; ?>
<?php include 'inc/template_end.php'; ?>