Matrix CSS classes include:

• matrix
• matrix--header--is-fixed
• matrix--header
• matrix--sidebar
• matrix--body
• matrix--mobile

To include row and column hover, include the following data attributes on your rows and columns:

• data-row-hover
• data-column-hover

For mobile devices, you should provide an alternate experience, as matrix does not work well on smaller screens.

You'll also want to use Tables inside of your Matrix.

Matrix is a jQuery plugin that needs to be initalized by calling $('#your-id').frankieMatrix();. The id should be a wrapping div around your header, sidebar, and body.

The general HTML structure for matrix is as follows:

<div class="matrix matrix--header--is-fixed display--none display--block--md margin--off" id="matrix">
    <header class="matrix--header">
        <table class="table">
            ...
        </table>
    </header>
    <aside class="matrix--sidebar">
        <table class="table">
            ...
        </table>
    </aside>
    <div class="matrix--body">
        <table class="table">
            ...
        </table>
    </div>
</div>
<div class="matrix--mobile display--none--md margin--off">
    ...
</div>