131 lines
2.0 KiB
Plaintext
131 lines
2.0 KiB
Plaintext
import { Meta } from '@storybook/addon-docs';
|
|
|
|
<Meta title="Style Guide/Sizing" />
|
|
|
|
# Sizing
|
|
|
|
Use sizing function for things like margins,
|
|
padding, and borders. Sizes are returned in rem units rather than
|
|
pixels, but have been calibrated with pixel equivalents in mind.
|
|
|
|
To use the rems sizing function, first import the sizing module,
|
|
then use it in your code wherever you normally specify a size. For example...
|
|
|
|
```scss
|
|
@import 'variables/sizing';
|
|
border: sizing.rems(xxxxs) solid;
|
|
```
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="column">Name</th>
|
|
<th scope="column" class="number-col">PX Equiv.</th>
|
|
<th scope="column">SCSS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>xxl</code>
|
|
</th>
|
|
<td class="number-col">48</td>
|
|
<td>
|
|
<code>sizing.rems(xxl)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>xl</code>
|
|
</th>
|
|
<td class="number-col">36</td>
|
|
<td>
|
|
<code>sizing.rems(xl)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>l</code>
|
|
</th>
|
|
<td class="number-col">24</td>
|
|
<td>
|
|
<code>sizing.rems(l)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>m</code>
|
|
</th>
|
|
<td class="number-col">16</td>
|
|
<td>
|
|
<code>sizing.rems(m)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>s</code>
|
|
</th>
|
|
<td class="number-col">12</td>
|
|
<td>
|
|
<code>sizing.rems(s)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>xs</code>
|
|
</th>
|
|
<td class="number-col">8</td>
|
|
<td>
|
|
<code>sizing.rems(xs)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>off-xs</code>
|
|
</th>
|
|
<td class="number-col">5</td>
|
|
<td>
|
|
<code>sizing.rems(off-xs)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>xxs</code>
|
|
</th>
|
|
<td class="number-col">4</td>
|
|
<td>
|
|
<code>sizing.rems(xxs)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>xxxs</code>
|
|
</th>
|
|
<td class="number-col">2</td>
|
|
<td>
|
|
<code>sizing.rems(xxxs)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<code>xxxxs</code>
|
|
</th>
|
|
<td class="number-col">1</td>
|
|
<td>
|
|
<code>sizing.rems(xxxxs)</code>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|