byceps/byceps

View on GitHub
byceps/blueprints/common/style_guide/templates/common/style_guide/sections/_tables.html

Summary

Maintainability
Test Coverage
<p>With class <code>index</code>:</p>

{% call render_example() %}
<table class="index">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>a2</td>
      <td>a3</td>
    </tr>
    <tr>
      <td>b1</td>
      <td>b2</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>c1</td>
      <td>c2</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>
{% endcall %}

<p>With classes <code>index is-wide</code>:</p>

{% call render_example() %}
<table class="index is-wide">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>a2</td>
      <td>a3</td>
    </tr>
    <tr>
      <td>b1</td>
      <td>b2</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>c1</td>
      <td>c2</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>
{% endcall %}

<p>With class <code>itemlist</code>:</p>

{% call render_example() %}
<table class="itemlist">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>a2</td>
      <td>a3</td>
    </tr>
    <tr>
      <td>b1</td>
      <td>b2</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>c1</td>
      <td>c2</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>
{% endcall %}

<p>With classes <code>itemlist is-wide</code>:</p>

{% call render_example() %}
<table class="itemlist is-wide">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>a2</td>
      <td>a3</td>
    </tr>
    <tr>
      <td>b1</td>
      <td>b2</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>c1</td>
      <td>c2</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>
{% endcall %}