|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <title> |
| 5 | + Tables / Elements / Docs / TACHYONS |
| 6 | + </title> |
| 7 | + <meta name="description" content="CSS"> |
| 8 | + <meta charset="utf-8"> |
| 9 | +<meta http-equiv="X-UA-Compatible" content="IE=Edge"> |
| 10 | +<meta name="author" content="@mrmrs"> |
| 11 | +<meta name="viewport" content="width=device-width, initial-scale=1"> |
| 12 | +<link rel="stylesheet" href="/css/tachyons.min.css"> |
| 13 | +<style> |
| 14 | + .blue { color: #0074D9; } |
| 15 | + .bg-blue { background-color: #0074D9; } |
| 16 | + |
| 17 | + .carbon-poweredby { width: 100%; font-size: 12px; float: left; } |
| 18 | + .carbon-wrap { float: left; width: 100%; box-sizing: border-box; } |
| 19 | + .carbon-img { float: left; width: 50%; box-sizing: border-box; } |
| 20 | + .carbon-text { float: left; width: 50%; padding-left: 16px; box-sizing: border-box; font-size: 12px; } |
| 21 | + |
| 22 | + #carbonads a:link { text-decoration: none!important; color: #222!important; } |
| 23 | + |
| 24 | +</style> |
| 25 | + |
| 26 | + </head> |
| 27 | + <body class="w-100 sans-serif"> |
| 28 | + |
| 29 | + <header class="w-100 dt pa3 ph5-ns bg-near-white"> |
| 30 | + <div class="dtc v-mid tl w-50"> |
| 31 | + <a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70 dim" title="Home"> |
| 32 | + Tachyons |
| 33 | + <div class="dib"> |
| 34 | + <small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.0.0-beta.34</small> |
| 35 | + </div> |
| 36 | + </a> |
| 37 | + </div> |
| 38 | + <nav class="db dtc v-mid w-100 tr"> |
| 39 | + <a title="Documentation" href="/docs/" |
| 40 | + class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib"> |
| 41 | + Docs |
| 42 | + </a> |
| 43 | + <a title="Components" href="/components/" |
| 44 | + class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib"> |
| 45 | + Components |
| 46 | + </a> |
| 47 | + <a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/" |
| 48 | + class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-l"> |
| 49 | + GitHub |
| 50 | + </a> |
| 51 | + </nav> |
| 52 | +</header> |
| 53 | + |
| 54 | + <main class=""> |
| 55 | + <article class="bg-near-white bt b--black-10 pv2 ph3 ph5-ns"> |
| 56 | + <h4 class="f4 mv0 fw6 dib mr4">tachyons-tables</h4> |
| 57 | + <span class="f4 b dib pl0 ml0 mr4">v1.0.0</span> |
| 58 | + <span class="f4 b dib pl0 ml0 mr4">142 B</span> |
| 59 | + <div> |
| 60 | + <dl class="dib mr4 mt0"> |
| 61 | + <dt class="f6 db">Declarations </dt> |
| 62 | + <dd class="db pl0 ml0 f4 f2-ns b">6</dd> |
| 63 | + </dl> |
| 64 | + <dl class="dib mr4"> |
| 65 | + <dt class="f6 db pr2">Selectors </dt> |
| 66 | + <dd class="db pl0 ml0 f4 f2-ns b">4</dd> |
| 67 | + </dl> |
| 68 | + <dl class="dib mr4"> |
| 69 | + <dt class="f6 db pr2">Max. Specificity Score </dt> |
| 70 | + <dd class="db pl0 ml0 f4 f2-ns b">20</dd> |
| 71 | + </dl> |
| 72 | + <dl class="dib mr4"> |
| 73 | + <dt class="f6 db pr2">Size of Avg. Rule </dt> |
| 74 | + <dd class="db pl0 ml0 f4 f2-ns b">1.5</dd> |
| 75 | + </dl> |
| 76 | + </div> |
| 77 | + <p class="measure f4 f3-ns lh-copy"> |
| 78 | + Tachyons has some basic utilities for styling forms that are easy to customize and extend. |
| 79 | + </p> |
| 80 | + </article> |
| 81 | + <div class="ph3 ph5-ns pt4 pb5"> |
| 82 | + <h2 class="f3 bold">Examples</h2> |
| 83 | +<h4 class="mb4">Striped - Light Gray</h4> |
| 84 | +<table class="collapse ba br2 b--black-10 pv2 ph3"> |
| 85 | + <tr class="striped--light-gray "><th class="pv2 ph3 tl f6 fw6 ttu">Name</th><th class="tr f6 ttu fw6 pv2 ph3">Rating</th></tr> |
| 86 | + <tr class="striped--light-gray "><td class="pv2 ph3">Jurassic Park</td><td class="pv2 ph3">5 stars</td></tr> |
| 87 | + <tr class="striped--light-gray "><td class="pv2 ph3">Back to the Future</td><td class="pv2 ph3">5 stars</td></tr> |
| 88 | + <tr class="striped--light-gray "><td class="pv2 ph3">Primer</td><td class="pv2 ph3">5 stars</td></tr> |
| 89 | + <tr class="striped--light-gray "><td class="pv2 ph3">Sunshine</td><td class="pv2 ph3">5 stars</td></tr> |
| 90 | + <tr class="striped--light-gray "><td class="pv2 ph3">Moon</td><td class="pv2 ph3">5 stars</td></tr> |
| 91 | +</table> |
| 92 | +<h4 class="mt5">Striped - Near white</h4> |
| 93 | +<table class="collapse ba br2 b--black-10 pv2 ph3 mt4"> |
| 94 | + <tr class="striped--near-white "><th class="pv2 ph3 tl f6 fw6 ttu">Name</th><th class="tr f6 ttu fw6 pv2 ph3">Rating</th></tr> |
| 95 | + <tr class="striped--near-white "><td class="pv2 ph3">Jurassic Park</td><td class="pv2 ph3">5 stars</td></tr> |
| 96 | + <tr class="striped--near-white "><td class="pv2 ph3">Back to the Future</td><td class="pv2 ph3">5 stars</td></tr> |
| 97 | + <tr class="striped--near-white "><td class="pv2 ph3">Primer</td><td class="pv2 ph3">5 stars</td></tr> |
| 98 | + <tr class="striped--near-white "><td class="pv2 ph3">Sunshine</td><td class="pv2 ph3">5 stars</td></tr> |
| 99 | + <tr class="striped--near-white "><td class="pv2 ph3">Moon</td><td class="pv2 ph3">5 stars</td></tr> |
| 100 | +</table> |
| 101 | + |
| 102 | + <div class="mt5 cf"> |
| 103 | + <div class="dib mr4"> |
| 104 | + <h1 class="f4 ttu tracked fw6">Previous</h1> |
| 105 | + <a href="/docs/elements/forms/" class="link fw6 blue dim">Forms</a> |
| 106 | + </div> |
| 107 | + <div class="dib"> |
| 108 | + <h1 class="f4 ttu tracked fw6">Next</h1> |
| 109 | + <a href="/docs/typography/scale/" class="link fw6 blue dim">Type Scale</a> |
| 110 | + </div> |
| 111 | + </div> |
| 112 | + <div class="mt5 dn"> |
| 113 | + <h1 class="f4 ttu tracked fw6">Reference</h1> |
| 114 | + <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db fw6 blue dim">MDN - Hover</a> |
| 115 | + <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a> |
| 116 | + </div> |
| 117 | + </div> |
| 118 | + <section class="bg-near-white black-70 pt4 pb5 overflow-container"> |
| 119 | + <header class="ph3 ph5-ns pt4"> |
| 120 | + <kbd class="yellow">src/_tables.css</kbd> |
| 121 | + </header> |
| 122 | +<pre class="ph3 ph5-ns"> |
| 123 | +<code class="code" style="font-size: .75rem;"> |
| 124 | +/* |
| 125 | + |
| 126 | + TABLES |
| 127 | + |
| 128 | +*/ |
| 129 | + |
| 130 | +:root { |
| 131 | + --light-silver: #aaa; |
| 132 | + --moon-gray: #ccc; |
| 133 | + --light-gray: #eee; |
| 134 | + --near-white: #f4f4f4; |
| 135 | +} |
| 136 | + |
| 137 | +.collapse { |
| 138 | + border-collapse: collapse; |
| 139 | + border-spacing: 0; |
| 140 | +} |
| 141 | + |
| 142 | +.striped--moon-gray:nth-child(odd) { |
| 143 | + background-color: var(--light-silver); |
| 144 | +} |
| 145 | + |
| 146 | +.striped--moon-gray:nth-child(odd) { |
| 147 | + background-color: var(--moon-gray); |
| 148 | +} |
| 149 | + |
| 150 | +.striped--light-gray:nth-child(odd) { |
| 151 | + background-color: var(--light-gray); |
| 152 | +} |
| 153 | + |
| 154 | +.striped--near-white:nth-child(odd) { |
| 155 | + background-color: var(--near-white); |
| 156 | +} |
| 157 | + |
| 158 | +</code> |
| 159 | +</pre> |
| 160 | + </section> |
| 161 | + <div class="ph3 ph5-ns pt3 pb5"> |
| 162 | + <section> |
| 163 | + <h2 class="f6 fw7 ttu tracked">Elements</h2> |
| 164 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/elements/images/" title="View images documentation">Images</a> |
| 165 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/elements/links/" title="View links documentation">Links</a> |
| 166 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/elements/lists/" title="View lists documentation">Lists</a> |
| 167 | + <a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/forms/" title="View forms documentation">Forms</a> |
| 168 | + <a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/tables/" title="View tables module documentation">Tables</a> |
| 169 | + <section class="cf w-100 mt3"> |
| 170 | + <article class="fn fl-ns w-100 w-25-l"> |
| 171 | + <h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2> |
| 172 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/scale" title="Type">Type Scale</a> |
| 173 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/measure/" title="Measure">Measure</a> |
| 174 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a> |
| 175 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a> |
| 176 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a> |
| 177 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a> |
| 178 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-style" title="Font Families">Font Style</a> |
| 179 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a> |
| 180 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a> |
| 181 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a> |
| 182 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a> |
| 183 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/typography/white-space" title="White Space">White Space</a> |
| 184 | + </article> |
| 185 | + <article class="fn fl-ns w-100 w-25-l"> |
| 186 | + <h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2> |
| 187 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/debug/" title="Debugging">Debugging</a> |
| 188 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a> |
| 189 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a> |
| 190 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/floats" title="Floats">Floats</a> |
| 191 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a> |
| 192 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/display" title="Display">Display</a> |
| 193 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/widths" title="Widths">Widths</a> |
| 194 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a> |
| 195 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/heights" title="Heights">Heights</a> |
| 196 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/layout/position" title="Position">Position</a> |
| 197 | + </article> |
| 198 | + <article class="fn fl-ns w-100 w-25-l"> |
| 199 | + <h2 class="f6 fw7 ttu tracked">Theming</h2> |
| 200 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/themes/skins/" title="Hovers">Skins</a> |
| 201 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a> |
| 202 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a> |
| 203 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/themes/borders/" title="Borders">Borders</a> |
| 204 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a> |
| 205 | + <a class="f5 fw4 dim link blue db pv1" href="/docs/themes/box-shadow/" title="Box Shadow">Box Shadow</a> |
| 206 | + </article> |
| 207 | + </section> |
| 208 | + </section> |
| 209 | +</div> |
| 210 | + |
| 211 | + </main> |
| 212 | + <footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10"> |
| 213 | + <a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;"> |
| 214 | + <svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff"> |
| 215 | + <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/> |
| 216 | + </svg> |
| 217 | + <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span> |
| 218 | + </a> |
| 219 | + <div class="mb4"> |
| 220 | + <a class="black-70 link dim b dib mr3" href="/" title="Home"> |
| 221 | + Home |
| 222 | + </a> |
| 223 | + <a class="black-70 link dim b dib mr3" href="/docs" title="Docs"> |
| 224 | + Docs |
| 225 | + </a> |
| 226 | + <a class="black-70 link dim b dib mr3" href="/components/" title="Components"> |
| 227 | + Components |
| 228 | + </a> |
| 229 | + </div> |
| 230 | + <article> |
| 231 | + <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> |
| 232 | + <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> |
| 233 | + </article> |
| 234 | + <div class="mt4"> |
| 235 | + <a class="ba b--black-20 bg-white black-70 link br2 dim b dib mr3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel"> |
| 236 | + Join our Slack Channel |
| 237 | + </a> |
| 238 | + <a class="ba b--black-20 bg-white br2 black-70 link dim b dib pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!"> |
| 239 | + Open an Issue |
| 240 | + </a> |
| 241 | + </div> |
| 242 | + <p class="measure copy lh-copy"> |
| 243 | + Have a question? Need help? Feel free to open an issue on GitHub or ask a |
| 244 | + question in our slack channel. We're here to try and help make designing in |
| 245 | + the browser fun. |
| 246 | + </p> |
| 247 | + <div class="pt4 cf mw5"> |
| 248 | + <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=tachyonsio" id="_carbonads_js"></script> |
| 249 | + </div> |
| 250 | + <small class="f6 measure db lh-copy mt5"> |
| 251 | + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle |
| 252 | + that always moves faster than light. |
| 253 | + The word comes from the Greek: |
| 254 | + <br> <br> |
| 255 | + ταχύς or tachys, meaning "swift, quick, fast, rapid" |
| 256 | + </small> |
| 257 | + |
| 258 | +</footer> |
| 259 | + |
| 260 | + <script> |
| 261 | + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| 262 | + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| 263 | + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| 264 | + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| 265 | + |
| 266 | +ga('create', 'UA-55773803-1', 'auto'); |
| 267 | +ga('send', 'pageview'); |
| 268 | + |
| 269 | + </script> |
| 270 | + |
| 271 | + </body> |
| 272 | +</html> |
0 commit comments