Skip to content

Commit 1386421

Browse files
adamwathanadamwathan
committed
Add WIP text alignment docs
1 parent 92c1503 commit 1386421

File tree

2 files changed

+61
-2
lines changed

2 files changed

+61
-2
lines changed

‎docs/source/_layouts/documentation.blade.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,12 +134,13 @@
134134
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/spacing" class="hover:underline {{ $page->active('/docs/spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a></li>
135135
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/svg" class="hover:underline {{ $page->active('/docs/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
136136
<li class="mb-3">
137-
<a href="{{ $page->baseUrl }}/docs/fonts" class="hover:underline block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
138-
<ul class="pl-4 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'block' : 'hidden' }}">
137+
<a href="{{ $page->baseUrl }}/docs/fonts" class="hover:underline block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/text-alignment', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
138+
<ul class="pl-4 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/text-alignment', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'block' : 'hidden' }}">
139139
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/fonts" class="hover:underline {{ $page->active('/docs/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
140140
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-color" class="hover:underline {{ $page->active('/docs/text-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
141141
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-sizing" class="hover:underline {{ $page->active('/docs/text-sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
142142
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/font-weight" class="hover:underline {{ $page->active('/docs/font-weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
143+
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-alignment" class="hover:underline {{ $page->active('/docs/text-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Alignment</a></li>
143144
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/line-height" class="hover:underline {{ $page->active('/docs/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
144145
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/letter-spacing" class="hover:underline {{ $page->active('/docs/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
145146
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-style" class="hover:underline {{ $page->active('/docs/text-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>

‎docs/source/docs/text-alignment.blade.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
extends: _layouts.documentation
3+
title: "Text Alignment"
4+
---
5+
6+
# Text Alignment
7+
8+
<div class="text-xl text-slate-light mb-4">
9+
Utilities for controlling the alignment of text.
10+
</div>
11+
12+
@include('_partials.feature-badges', [
13+
'responsive' => true,
14+
'customizable' => true,
15+
'hover' => false,
16+
'focus' => false
17+
])
18+
19+
@include('_partials.work-in-progress')
20+
21+
<div class="border-t border-grey-lighter">
22+
<table class="w-full text-left" style="border-collapse: collapse;">
23+
<colgroup>
24+
<col class="w-1/5">
25+
<col class="w-1/3">
26+
<col>
27+
</colgroup>
28+
<thead>
29+
<tr>
30+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
31+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
32+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
33+
</tr>
34+
</thead>
35+
<tbody class="align-baseline">
36+
<tr>
37+
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-left</td>
38+
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: left;</td>
39+
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the left.</td>
40+
</tr>
41+
<tr>
42+
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-center</td>
43+
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: center;</td>
44+
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the center.</td>
45+
</tr>
46+
<tr>
47+
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-right</td>
48+
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: right;</td>
49+
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the right.</td>
50+
</tr>
51+
<tr>
52+
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-justify</td>
53+
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: justify;</td>
54+
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify text.</td>
55+
</tr>
56+
</tbody>
57+
</table>
58+
</div>

0 commit comments

Comments
 (0)