|
4 | 4 | <title>
|
5 | 5 | Text Align / Typography / Docs / TACHYONS
|
6 | 6 | </title>
|
7 |
| - <meta name="description" content="css"> |
| 7 | + <meta name="description" content="Documentation on how to adjust text-alignment with the Tachyons css framework."> |
8 | 8 | <meta charset="utf-8">
|
9 | 9 | <meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
10 | 10 | <meta name="author" content="@mrmrs">
|
|
25 | 25 |
|
26 | 26 | </head>
|
27 | 27 | <body class="w-100 sans-serif">
|
28 |
| - |
29 | 28 | <header class="w-100 pa3 ph5-ns bg-white">
|
30 | 29 | <div class="dt mw9 center w-100">
|
31 | 30 | <div class="dtc v-mid tl w-50">
|
|
54 | 53 | </header>
|
55 | 54 |
|
56 | 55 | <main class="bg-white black-70">
|
57 |
| - <article class="bt b--black-10 pa3 ph5-ns"> |
58 |
| - <h4 class="f4 mv0 fw6 dib mr4">tachyons-text-align</h4> |
59 |
| - <span class="f4 b dib pl0 ml0 mr4">v3.0.1</span> |
60 |
| - <span class="f4 b dib pl0 ml0 mr4">145 B</span> |
61 |
| - <div> |
62 |
| - <dl class="dib mr4 mt0"> |
63 |
| - <dt class="f6 db">Declarations </dt> |
64 |
| - <dd class="db pl0 ml0 f4 f2-ns b">12</dd> |
65 |
| - </dl> |
66 |
| - <dl class="dib mr4"> |
67 |
| - <dt class="f6 db pr2">Selectors </dt> |
68 |
| - <dd class="db pl0 ml0 f4 f2-ns b">12</dd> |
69 |
| - </dl> |
70 |
| - <dl class="dib mr4"> |
71 |
| - <dt class="f6 db pr2">Max. Specificity Score </dt> |
72 |
| - <dd class="db pl0 ml0 f4 f2-ns b">10</dd> |
73 |
| - </dl> |
74 |
| - <dl class="dib mr4"> |
75 |
| - <dt class="f6 db pr2">Size of Avg. Rule </dt> |
76 |
| - <dd class="db pl0 ml0 f4 f2-ns b">1</dd> |
77 |
| - </dl> |
| 56 | + <header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto"> |
| 57 | + <div class="nowrap mw9 center"> |
| 58 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/scale/" title="Type">Type Scale</a> |
| 59 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/measure/" title="Measure">Measure</a> |
| 60 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height/" title="Line Height">Line Height / Leading</a> |
| 61 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking/" title="Tracking">Tracking</a> |
| 62 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight/" title="Font Weights">Font Weights</a> |
| 63 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style/" title="Font style">Font Style</a> |
| 64 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align/" title="Vertical Align">Vertical Align</a> |
| 65 | + <a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align/" title="Text Align">Text Align</a> |
| 66 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a> |
| 67 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a> |
| 68 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/white-space" title="White Space">White Space</a> |
| 69 | + <a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-family" title="Font Families">Font Families</a> |
78 | 70 | </div>
|
| 71 | + </header> |
| 72 | + <article class="pa3 ph5-ns"> |
| 73 | + <article class="bt b--black-10 pa3 ph5-ns"> |
79 | 74 | <p class="measure f4 f3-ns lh-copy">
|
80 | 75 | Designing for readability across infinite screen-sizes
|
81 | 76 | often times requires setting elements to have different text-alignments across breakpoints.
|
@@ -113,8 +108,29 @@ <h4 class="f6 fw6">Reference</h4>
|
113 | 108 | <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align" class="link fw6 blue dim">MDN - Text Align</a>
|
114 | 109 | </div>
|
115 | 110 | </div>
|
116 |
| - <section class="bg-white black-70 pt4 pb5 overflow-container"> |
| 111 | + <section class="bg-white bt bb b--black-40 black-70 pt4 pb5 overflow-container"> |
117 | 112 | <header class="ph3 ph5-ns pt4">
|
| 113 | + <h4 class="f4 mv0 fw6 dib mr4">tachyons-text-align</h4> |
| 114 | + <span class="f4 b dib pl0 ml0 mr4">v3.0.1</span> |
| 115 | + <span class="f4 b dib pl0 ml0 mr4">145 B</span> |
| 116 | + <div> |
| 117 | + <dl class="dib mr4 mt0"> |
| 118 | + <dt class="f6 db">Declarations </dt> |
| 119 | + <dd class="db pl0 ml0 f4 f2-ns b">12</dd> |
| 120 | + </dl> |
| 121 | + <dl class="dib mr4"> |
| 122 | + <dt class="f6 db pr2">Selectors </dt> |
| 123 | + <dd class="db pl0 ml0 f4 f2-ns b">12</dd> |
| 124 | + </dl> |
| 125 | + <dl class="dib mr4"> |
| 126 | + <dt class="f6 db pr2">Max. Specificity Score </dt> |
| 127 | + <dd class="db pl0 ml0 f4 f2-ns b">10</dd> |
| 128 | + </dl> |
| 129 | + <dl class="dib mr4"> |
| 130 | + <dt class="f6 db pr2">Size of Avg. Rule </dt> |
| 131 | + <dd class="db pl0 ml0 f4 f2-ns b">1</dd> |
| 132 | + </dl> |
| 133 | + </div> |
118 | 134 | <kbd>src/_text-align.css</kbd>
|
119 | 135 | </header>
|
120 | 136 | <pre class="ph3 ph5-ns">
|
|
0 commit comments