8000 New article components · tylerhunt/tachyons-css.github.io@80f6bc6 · GitHub
Skip to content

Commit 80f6bc6

Browse files
author
mrmrs
committed
New article components
1 parent 088152f commit 80f6bc6

File tree

134 files changed

+1006
-109
lines changed
  • list-overflow
  • pages
  • quotes
  • text

    • Some content is hidden

    Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

    134 files changed

    +1006
    -109
    lines changed

    ‎components/article-lists/title-preview-author-media-flipped/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -375,6 +375,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    375375

    376376
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    377377

    378+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    379+
    378380
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    379381

    380382
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/article-lists/title-preview-author-media/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -390,6 +390,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    390390

    391391
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    392392

    393+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    394+
    393395
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    394396

    395397
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/articles/feature/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -355,6 +355,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    355355

    356356
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    357357

    358+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    359+
    358360
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    359361

    360362
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/articles/full-bleed-background/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -282,6 +282,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    282282

    283283
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    284284

    285+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    286+
    285287
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    286288

    287289
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/articles/headline-title-text/index.html‎

    Lines changed: 701 additions & 0 deletions
    Large diffs are not rendered by default.

    ‎components/articles/large-title-text/index.html‎

    Lines changed: 39 additions & 109 deletions
    Original file line numberDiff line numberDiff line change
    @@ -25,41 +25,18 @@
    2525
    <body class="w-100 sans-serif bg-white">
    2626
    <main>
    2727
    <article class="pa3 pa5-ns">
    28-
    <h1 class="f2 f-subheadline-ns mb4">9.5.1 If the text will be read on the screen, design it for that medium.</h1>
    29-
    <p class="gray f6 mb4 ttu tracked">By Robert Bringhurst</p>
    30-
    <p class="f4 f3-ns measure lh-copy">
    31-
    Like a forest or a garden or a field, an honest page of letters can absorb &ndash;
    32-
    and will repay &ndash; as much attention as it is given. Much type now, however, is
    33-
    composed not for the page but for the screen of a computer. That screen can be
    34-
    alive with flowing color, but the best computer monitors have dismal resolution
    35-
    (about 130 dpi: one fifth the current norm for laser printers and roughly 5% of
    36-
    the norm for professional digital typesetting). When the text is crudely
    37-
    rendered, the eye goes looking for distraction, which the screen is all too
    38-
    able to provide.
    28+
    <h1 class="f3 f2-m f1-l">Title</h1>
    29+
    <p class="measure lh-copy">
    30+
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    31+
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    32+
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    33+
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
    3934
    </p>
    40-
    <p class="f4 f3-ns measure lh-copy">
    41-
    The screen mimics the sky, not the earth. It bombards the eye with light
    42-
    instead of waiting to repay the gift of vision. It is not simultaneously
    43-
    restful and lively, like a field full of flowers, or the face of a thinking
    44-
    human being, or a well-made typographic page. And we read the screen the way
    45-
    we read the sky: in quick sweeps, guessing at the weather from the changing
    46-
    shapes of clouds, or like astronomers, in magnified small bits, examining
    47-
    details. We look to it for clues and revelations more than wisdom. This makes
    48-
    it an attractive place for advertising and dogmatizing, but not so good a
    49-
    place for thoughtful text.
    50-
    </p>
    51-
    <p class="f4 f3-ns measure lh-copy">
    52-
    The screen, in other words, is a reading environment even more fugitive than
    53-
    the newspaper. Intricate long sentences full of unfamiliar words stand little
    54-
    chance. At text size, subtle and delicate letterforms stand little chance as
    55-
    well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In
    56-
    the harsh light and coarse resolution of the screen such accessories are
    57-
    difficult to see; what is worse, they dispel the essential illusion of speed.
    58-
    so the links and jumps of hypertext replace them. All the subtexts then can be
    59-
    the same size and readers are at liberty to skip from text to text like
    60-
    children switching channels on tv. When reading takes this form, sentences and
    61-
    letterforms retreat to blunt simplicity. Forms bred on newsprint and signage
    62-
    are most likely to survive.
    35+
    <p class="measure lh-copy">
    36+
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    37+
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    38+
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    39+
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
    6340
    </p>
    6441
    </article>
    6542

    @@ -71,82 +48,35 @@ <h2 class="f5">HTML</h2>
    7148
    <p class="f5 black-70"></p>
    7249
    <pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
    7350
    &lt;article class=&quot;pa3 pa5-ns&quot;&gt;
    74-
    &lt;h1 class=&quot;f2 f-subheadline-ns mb4&quot;&gt;9.5.1 If the text will be read on the screen, design it for that medium.&lt;/h1&gt;
    75-
    &lt;p class=&quot;gray f6 mb4 ttu tracked&quot;&gt;By Robert Bringhurst&lt;/p&gt;
    76-
    &lt;p class=&quot;f4 f3-ns measure lh-copy&quot;&gt;
    77-
    Like a forest or a garden or a field, an honest page of letters can absorb &amp;ndash;
    78-
    and will repay &amp;ndash; as much attention as it is given. Much type now, however, is
    79-
    composed not for the page but for the screen of a computer. That screen can be
    80-
    alive with flowing color, but the best computer monitors have dismal resolution
    81-
    (about 130 dpi: one fifth the current norm for laser printers and roughly 5% of
    82-
    the norm for professional digital typesetting). When the text is crudely
    83-
    rendered, the eye goes looking for distraction, which the screen is all too
    84-
    able to provide.
    85-
    &lt;/p&gt;
    86-
    &lt;p class=&quot;f4 f3-ns measure lh-copy&quot;&gt;
    87-
    The screen mimics the sky, not the earth. It bombards the eye with light
    88-
    instead of waiting to repay the gift of vision. It is not simultaneously
    89-
    restful and lively, like a field full of flowers, or the face of a thinking
    90-
    human being, or a well-made typographic page. And we read the screen the way
    91-
    we read the sky: in quick sweeps, guessing at the weather from the changing
    92-
    shapes of clouds, or like astronomers, in magnified small bits, examining
    93-
    details. We look to it for clues and revelations more than wisdom. This makes
    94-
    it an attractive place for advertising and dogmatizing, but not so good a
    95-
    place for thoughtful text.
    51+
    &lt;h1 class=&quot;f3 f2-m f1-l&quot;&gt;Title&lt;/h1&gt;
    52+
    &lt;p class=&quot;measure lh-copy&quot;&gt;
    53+
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    54+
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    55+
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    56+
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
    9657
    &lt;/p&gt;
    97-
    &lt;p class=&quot;f4 f3-ns measure lh-copy&quot;&gt;
    98-
    The screen, in other words, is a reading environment even more fugitive than
    99-
    the newspaper. Intricate long sentences full of unfamiliar words stand little
    100-
    chance. At text size, subtle and delicate letterforms stand little chance as
    101-
    well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In
    102-
    the harsh light and coarse resolution of the screen such accessories are
    103-
    difficult to see; what is worse, they dispel the essential illusion of speed.
    104-
    so the links and jumps of hypertext replace them. All the subtexts then can be
    105-
    the same size and readers are at liberty to skip from text to text like
    106-
    children switching channels on tv. When reading takes this form, sentences and
    107-
    letterforms retreat to blunt simplicity. Forms bred on newsprint and signage
    108-
    are most likely to survive.
    58+
    &lt;p class=&quot;measure lh-copy&quot;&gt;
    59+
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    60+
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    61+
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    62+
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
    10963
    &lt;/p&gt;
    11064
    &lt;/article&gt;
    11165

    11266
    </pre>
    11367
    </div>
    11468
    <div class="fl w-100 w-25-ns pl0 pl2-ns">
    11569
    <h2 class="f5">css</h2>
    116-
    <pre class="pa3 ba br2 b--black-10 h5" id="css">.tracked {
    117-
    letter-spacing: .1em;
    118-
    }
    119-
    120-
    .lh-copy {
    70+
    <pre class="pa3 ba br2 b--black-10 h5" id="css">.lh-copy {
    12171
    line-height: 1.5;
    12272
    }
    12373

    124-
    .gray {
    125-
    color: #777;
    126-
    }
    127-
    12874
    .pa3 {
    12975
    padding: 1rem;
    13076
    }
    13177

    132-
    .mb4 {
    133-
    margin-bottom: 2rem;
    134-
    }
    135-
    136-
    .ttu {
    137-
    text-transform: uppercase;
    138-
    }
    139-
    140-
    .f2 {
    141-
    font-size: 2.25rem;
    142-
    }
    143-
    144-
    .f4 {
    145-
    font-size: 1.25rem;
    146-
    }
    147-
    148-
    .f6 {
    149-
    font-size: .875rem;
    78+
    .f3 {
    79+
    font-size: 1.5rem;
    15080
    }
    15181

    15282
    .measure {
    @@ -157,13 +87,17 @@ <h2 class="f5">css</h2>
    15787
    .pa5-ns {
    15888
    padding: 4rem;
    15989
    }
    90+
    }
    16091

    161-
    .f-subheadline-ns {
    162-
    font-size: 5rem;
    92+
    @media screen and (min-width: 30em) and (max-width: 60em) {
    93+
    .f2-m {
    94+
    font-size: 2.25rem;
    16395
    }
    96+
    }
    16497

    165-
    .f3-ns {
    166-
    font-size: 1.5rem;
    98+
    @media screen and (min-width: 60em) {
    99+
    .f1-l {
    100+
    font-size: 3rem;
    167101
    }
    168102
    }
    169103

    @@ -175,32 +109,26 @@ <h2 class="f5">css</h2>
    175109
    <h2 class="f5 mb3 mt4">Css stats for this component</h2>
    176110
    <dl class="dib mr4 mt0">
    177111
    <dt class="db f6">Gzipped Size</dt>
    178-
    <dd class="ml0 b f3 f2-ns">266<small class="f6">B</small>
    112+
    <dd class="ml0 b f3 f2-ns">185<small class="f6">B</small>
    179113
    </dd>
    180114
    </dl>
    181115
    <dl class="dib mr4 mt0">
    182116
    <dt class="db f6">Selectors</dt>
    183-
    <dd class="ml0 b f3 f2-ns">13</dd>
    117+
    <dd class="ml0 b f3 f2-ns">7</dd>
    184118
    </dl>
    185119
    <dl class="dib mt0">
    186120
    <dt class="db f6">Declarations</dt>
    187-
    <dd class="ml0 b f3 f2-ns">13</dd>
    121+
    <dd class="ml0 b f3 f2-ns">7</dd>
    188122
    </dl>
    189123
    </div>
    190124
    <div class="fl w-100">
    191125
    <h2 class="f5 mt4">Modules referenced</h2>
    192126
    <ul class="list pl0 cf lh-copy mw7">
    193127

    194-
    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-letter-spacing">tachyons-letter-spacing</a></li>
    195-
    196128
    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
    197129

    198-
    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-skins">tachyons-skins</a></li>
    199-
    200130
    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
    201131

    202-
    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-text-transform">tachyons-text-transform</a></li>
    203-
    204132
    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-type-scale">tachyons-type-scale</a></li>
    205133

    206134
    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-typography">tachyons-typography</a></li>
    @@ -213,7 +141,7 @@ <h2 class="f5 mt4">Modules referenced</h2>
    213141

    214142

    215143
    <h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
    216-
    <code class="f6">npm i --save tachyons-letter-spacing tachyons-line-height tachyons-skins tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-typography</code>
    144+
    <code class="f6">npm i --save tachyons-line-height tachyons-spacing tachyons-type-scale tachyons-typography</code>
    217145
    <section class="bt b--black-10 mt5 pv4">
    218146
    <h1 class="f6 b ttu">Other Components</h1>
    219147

    @@ -234,6 +162,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    234162

    235163
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    236164

    165+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    166+
    237167
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    238168

    239169
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/articles/left-title-top-border/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -308,6 +308,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    308308

    309309
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    310310

    311+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    312+
    311313
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    312314

    313315
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/articles/left-title/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -255,6 +255,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    255255

    256256
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    257257

    258+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    259+
    258260
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    259261

    260262
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/articles/photo-essay/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -485,6 +485,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    485485

    486486
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    487487

    488+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    489+
    488490
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    489491

    490492
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    ‎components/articles/single-column-large-title/index.html‎

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -317,6 +317,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
    317317

    318318
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
    319319

    320+
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
    321+
    320322
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
    321323

    322324
    <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

    0 commit comments

    Comments
     (0)
    CB2