toolbar: (options for table and inline-block)

by jorgeluis

HTML

<div class="container">
    
    <h2>table, table-row, table-cell</h2>
<div class="table">
    <div class="table-row">
        <div class="table-cell">
            1&ndash;10 (38 total)
        </div>

        <div class="table-cell">
            <label>Rows:</label>
            <select>
                <option>10</option>
                <option>50</option>
            </select>
        </div>

        <div class="table-cell">
            <label>Search:</label>
            <input type="search">
        </div>
        
        <nav class="table-cell">
	        <a href="#">Previous</a>
            <a href="#">Next</a>
        </nav>
            
    </div>
</div>

<h3>full-width table with nav pinned to right</h3>
<div class="table table--full">
    <div class="table-row">
        <div class="table-cell">
            1&ndash;10 (38 total)
        </div>

        <div class="table-cell">
            <label>Rows:</label>
            <select>
                <option>10</option>
                <option>50</option>
            </select>
        </div>

        <div class="table-cell">
            <label>Search:</label>
            <input type="search">
        </div>
        
        <nav class="table-cell pull-right">
	        <a href="#">Previous</a>
            <a href="#">Next</a>
        </nav>
            
    </div>
</div>



<h2>inline-blocks</h2>
<div class="ib-row">
    <div class="ib">
        1&ndash;10 (38 total)
    </div>

    <div class="ib">
        <label>Rows:</label>
        <select>
            <option>10</option>
            <option>50</option>
        </select>
    </div>

    <div class="ib">
        <label>Search:</label>
        <input type="search">
    </div>
    
    <nav class="ib">
        <a href="#">Previous</a>
        <a href="#">Next</a>
    </nav>
            
</div>

<h3>inline-block row with nav pinned to right</h3>
<div class="ib-row">
    <div class="ib">
        1&ndash;10 (38 total)
    </div>

    <div class="ib">
       ...

CSS

/* table display */
.table {
    display: table;
}
.table--full {
    width: 100%;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 0 1em;
}
.table-cell img {
}

/* ib = inline-blocks */
.ib {
    display: inline-block;
    box-sizing: border-box;
    line-height: 42px;
    padding: 0 1em;
    vertical-align: middle;
    
    /* hack to remove whitespace */
    margin-right: -4px;
    
    /* optional max size */
    max-width: 20em;
}


/* utility classes */
.pull-right {
    float: right;
}

/* -----------------------------
extra styles for visual sugar */

body { 
    padding: 20px; 
    font-family: sans-serif;
    color: #333;
}

h2 { 
    font-weight: bold; 
    font-size: 1.25em;
    margin: 1em 0; 
    border-top: solid 1px #ccc;
    padding-top: 1em;
}
h3 { 
    font-weight: bold; 
    font-size: 1em;
    margin: 1em 0 0.5em; 
}

.table-cell, .ib {
    border-right: solid 1px #ccc;
    background-color: #eee;
}

nav a {
    display: inline-block;
    text-decoration: none;
    margin-left: 5px;
    line-height: 42px;
}