Issue Six

Summer MMXVI

The Chronicles

It's the space you put between the notes that make the music.

Massimo Vignelli

The repercussion of ugliness is endless

The choice of paper size is one of the first of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.

The international Standard paper sizes, called the A series, is based on a golden rectangle, the divine proportion. It is extremely handsome and practical as well. It is adopted by many countries around the world and is based on the German DIN metric Standards. The United States uses a basic letter size (8 1/2 x 11”) of ugly proportions, and results in complete chaos with an endless amount of paper sizes. It is a by-product of the culture of free enterprise, competition and waste. Just another example of the misinterpretations of freedom.

These are the basic DIN sizes in mm. for : A0, 841x1189 - A1, 594x841 - A2, 420x594 - A3, 297x420 - A4, 210x297 - A5, 148x210 - A6, 105 x148 - A7, 74x 105 - A8, 52x74 - A9, 37x52 - A10, 26x37.

The A4 is the basic size for stationary. Two thirds of it is a square, a nice economical happenstance resulting from the golden rectangle. It is one of the reasons we tend to use as much as possible the DIN sizes: proportions are always leading to other nice proportions.

This does not happen with the American basic size which leads to nothing. I counted 28 different standard sizes in USA!. The only reason we use it is because everybody in USA uses it, all stationary in USA is that size, so are manilla folders, les and of ce equipment! The repercussion of ugliness is endless.

Feature

HTML

<article class="athelas">
  <div class="vh-100 dt w-100 tc bg-dark-gray white cover" style="background:url(http://mrmrs.io/photos/u/009.jpg) no-repeat center;">
    <div class="dtc v-mid">
      <header class="white-70">
        <h2 class="f6 fw1 ttu tracked mb2 lh-title">Issue Six</h2>
        <h3 class="f6 fw1 lh-title">Summer MMXVI</h3>
      </header>
      <h1 class="f1 f-headline-l fw1 i white-60">The Chronicles</h1>
      <blockquote class="ph0 mh0 measure f4 lh-copy center">
        <p class="fw1 white-70">
          It's the space you put between the notes that make the music.
        </p>
        <cite class="f6 ttu tracked fs-normal">Massimo Vignelli</cite>
      </blockquote>
    </div>
  </div>
  <div class="center measure-wide f5 pv5 lh-copy ph2">
    <h1 class="f1 lh-title">The repercussion of ugliness is endless</h1>
    <p>
      The choice of paper size is one of the  first of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.
    </p>
    <p>
      The international Standard paper sizes, called the A series, is based
      on a golden rectangle, the divine proportion. It is extremely handsome
      and practical as well. It is adopted by many countries around the world
      and is based on the German DIN metric Standards. The United States uses
      a basic letter size (8 1/2 x 11”) of ugly proportions, and results in
      complete chaos with an endless amount of paper sizes. It is a
      by-product of the culture of free enterprise, competition and waste.
      Just another example of the misinterpretations of freedom.
    </p>
    <p>
      These are the basic DIN sizes in mm. for : A0, 841x1189 - A1, 594x841 -
      A2, 420x594 - A3, 297x420 - A4, 210x297 - A5, 148x210 - A6, 105 x148 -
      A7, 74x 105 - A8, 52x74 - A9, 37x52 - A10, 26x37.
    </p>
    <p>
      The A4 is the basic size for stationary. Two thirds of it is a square,
      a nice economical happenstance resulting from the golden rectangle.
      It is one of the reasons we tend to use as much
      as possible the DIN sizes: proportions are always leading to other nice proportions.
    </p>
    <p>
      This does not happen with the American basic size which leads to nothing. I counted 28 different standard sizes in USA!. The only reason we use it is because everybody in USA uses it, all stationary in USA is that size, so are manilla folders,  les and of ce equipment!
      The repercussion of ugliness is endless.
    </p>
  </div>
</article>

css

@import './_normalize';

.cover {
    background-size: cover !important;
}

.dt {
    display: table;
}

.dtc {
    display: table-cell;
}

.athelas {
    font-family: athelas, georgia, serif;
}

.i {
    font-style: italic;
}

.fs-normal {
    font-style: normal;
}

.fw1 {
    font-weight: 100;
}

.vh-100 {
    height: 100vh;
}

.tracked {
    letter-spacing: .1em;
}

.lh-title {
    line-height: 1.25;
}

.lh-copy {
    line-height: 1.5;
}

.w-100 {
    width: 100%;
}

.white-70 {
    color: rgba(255, 255, 255, .7);
}

.white-60 {
    color: rgba(255, 255, 255, .6);
}

.white {
    color: #fff;
}

.bg-dark-gray {
    background-color: #333;
}

.pv5 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.ph0 {
    padding-left: 0;
    padding-right: 0;
}

.ph2 {
    padding-left: .5rem;
    padding-right: .5rem;
}

.mb2 {
    margin-bottom: .5rem;
}

.mh0 {
    margin-left: 0;
    margin-right: 0;
}

.tc {
    text-align: center;
}

.ttu {
    text-transform: uppercase;
}

.f1 {
    font-size: 3rem;
}

.f4 {
    font-size: 1.25rem;
}

.f5 {
    font-size: 1rem;
}

.f6 {
    font-size: .875rem;
}

.measure {
    max-width: 30em;
}

.measure-wide {
    max-width: 34em;
}

.center {
    margin-right: auto;
    margin-left: auto;
}

.v-mid {
    vertical-align: middle;
}

@media screen and (min-width: 60em) {
    .f-headline-l {
        font-size: 6rem;
    }
}

Install via npm Only installs the needed tachyons-modules for this component

npm i --save tachyons-background-size tachyons-display tachyons-font-family tachyons-font-style tachyons-font-weight tachyons-heights tachyons-letter-spacing tachyons-line-height tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-text-transform tachyons-type-scale tachyons-typography tachyons-utilities tachyons-vertical-align

Other Components

Article Lists

Title Preview Author Media Flipped Title Preview Author Media

Articles

Feature Full Bleed Background Headline Title Text Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Highlight Header Cover Title Text Image Title Text

Avatars

Circle Border Circle Double Ring Rounded Large Rounded Medium Rounded Small Square

Banners

Basic Info Single Cta

Buttons

Basic Previous Next Basic Rounded Extra Small Basic Rounded Small Basic Rounded Basic Centered Icons Pill Grow Pill

Cards

Album Centered Album Left Basic Text Card News Card Product Card Profile Card Title Subtitle Profile Card Suggested Profile Text Card

Collections

Albums Movies Posters Dim Posters Square Title Subtitle Vinyl

Definition Lists

Inline Simple

Error Pages

404

Footers

Centered Icons Hover Glow Inline Text Simple Large Type Small Print Social Circles Social Simple Text Social Simple Social Text Social Studios

Forms

Checkbox List Input Text Label Newsletter Subscription Password Sign In Sign Up Textarea Label

Headers

Circle Avatar Title Subtitle Rounded Avatar Title Subtitle Startup Hero

Layout

Aspect Ratio 16x9 Aspect Ratio 1x1 Aspect Ratio 3x4 Aspect Ratio 4x3 Aspect Ratio 4x6 Aspect Ratio 5x7 Aspect Ratio 5x8 Aspect Ratio 6x4 Aspect Ratio 7x5 Aspect Ratio 8x5 Aspect Ratio 9x16 Centered Container Five Column Collapse Alternate Five Column Collapse Asymmetrical Five Column Collapse Mixed Five Column Collapse One Five Column Fixed Table Layout Grid Mixed Rows Fixed Table Layout Grid Flag Object Bottom Flag Object Collapse Flag Object Top Flag Object Four Column Collapse Two Collapse One Four Column Collapse Two Four Column Full Bleed 16x9 Full Bleed 4x6 Full Bleed 5x7 Full Bleed 5x8 Full Bleed 6x4 Full Bleed 7x5 Full Bleed 8x5 Full Bleed 9x16 Full Bleed Square Full Screen Centered Title Horizontal Aspect Ratios Three Column Collapse One Three Column Two Column Collapse One Two Column

Links

Animate Background Color Animate Color Dim No Underline Underline On Hover

Lists

Block Item Dotted Border Border Spaced Border Tight Contact Phone Follower Notifications Rounded Square Avatar Follower Notifications Hashtags Items Image Title Price Large Links Inline Links Animate Color Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text

Marketing

Iphone App

Nav

Fixed Semi Transparent Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Logo Titles Links Centered Minimal Sign Up Title Link List

Pages

4x4 Mixed Grid Double Portfolio Project Swiss Cover Five Columns

Quotes

Left Border Pull Quote

Tables

Basic Striped Dark

Text

Large Paragraph Narrow Paragraph Paragraph Small Narrow Paragraph Small Paragraph Title Subtitle Centered Wide Paragraph