{{#markdown}}
> Short CSS classes to help maintain consistency and save you time

These short, structured class names are easy to remember and help you work faster. What’s more, the spacings and sizes are consistent with the values declared in variables.
{{/markdown}}

<table class="table table-text table-hover">
        <thead>
          <tr>
            <th>Variable</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code class=" language-css">@siteWidth</code></td>
            <td>980px</td>
          </tr>
          <tr>
            <td><code class=" language-css">@spacingXs</code></td>
            <td>5px</td>
          </tr>
          <tr>
            <td><code class=" language-css">@spacingS</code></td>
            <td>10px</td>
          </tr>
          <tr>
            <td><code class=" language-css">@spacingM</code></td>
            <td>15px</td>
          </tr>
          <tr>
            <td><code class=" language-css">@spacingL</code></td>
            <td>20px</td>
          </tr>
          <tr>
            <td><code class=" language-css">@spacingXl</code></td>
            <td>30px</td>
          </tr>
        </tbody>
      </table>