wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add badges + cheatsheet table for text sizing docs

Browse source
This commit is contained in:
Jonathan Reinink 2017-10-31 12:14:42 -04:00
parent 44991b5ad4
commit 97c4500c2f
1 changed files with 73 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

77
docs/source/docs/text-sizing.blade.md
View file

@ -5,8 +5,77 @@ title: "Text Sizing"
# Text Sizing
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
<div class="text-xl text-slate-light mb-4">
Utilities for controlling the text size of an element.
</div>
@include('_partials.feature-badges', [
'responsive' => true,
'customizable' => true,
'hover' => false,
'focus' => false
])
<div class="border-t border-grey-lighter">
<table class="w-full text-left" style="border-collapse: collapse;">
<colgroup>
<col class="w-1/5">
<col class="w-2/5">
<col class="w-2/5">
</colgroup>
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xs</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: .75rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>.75rem</code> (<code>12px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-sm</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: .875rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>.875rem</code> (<code>14px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-base</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1rem</code> (<code>16px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-lg</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.125rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.125rem</code> (<code>18px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xl</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.25rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.25rem</code> (<code>20px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-2xl</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.5rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.5rem</code> (<code>24px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-3xl</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.875rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.875rem</code> (<code>30px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-4xl</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 2.25rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>2.25rem</code> (<code>36px</code>).</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-5xl</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 3rem;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>3rem</code> (<code>48px</code>).</td>
</tr>
</tbody>
</table>
</div>