Jahrbuch 1988/69

Beitrage zut

Kunst
des 19. und 20.Jahrhunderts

Grids are one of the several tools helping designers to achieve syntactical consistency in graphic design.

The attention to details requires discipline. There is no room for sloppiness, for carelessness, for procrastination.

A set of self imposed rules, parameters within which we operate. It is a bag of tools that allows us to design in a consistent manner from beginning to end.

Appropriateness directs us to the right kind of media, the right kind of materials, the right kind of scale, the right kind of expression, color and texture.

iceland

Swiss Cover

HTML

<main class="pa3 pa4-m pa5-l mw9 center">
  <div class="dt-l mb4">
    <div class="dtc-l w-25-l">
      <p class="f6 lh-copy mt0">Jahrbuch <small>1988/69</small></p>
    </div>
    <div class="cf dtc-l w-75-l">
      <p class="f6">Beitrage zut</p>
      <h1 class="f2 f1-l lh-title mt0 mb4 mb5-l">Kunst<br class="dn db-ns"> des 19. und 20.Jahrhunderts</h1>
      <div class="f6 lh-copy overflow-hidden dt-l dt--fixed-l">
        <div class="fl fn-l dtc-l w-50-m pr0 pr3-m pr4-l">
          <p class="lh-copy">Grids are one of the several tools helping designers to achieve syntactical consistency in graphic design.  </p> 
        </div>
        <div class="fl fn-l w-50-m dtc-l pr0 pr3 pr4-ns">
          <p>The attention to details requires discipline.
            There is no room for sloppiness, for carelessness, for procrastination.</p> 
        </div>
        <div class="fl fn-l w-50-m dtc-l pr0 pr3 pr4-ns">
          <p>A set of self imposed rules, parameters within which we operate. It is a bag of tools that allows us to design in a consistent manner from beginning to end.</p> 
        </div>
        <div class="fl fn-l w-50-m dtc-l pr0 pr3 pr4-ns">
          <p>Appropriateness directs us to the right kind of media, the right kind of materials, the right kind of scale, the right kind of expression, color and texture.</p> 
        </div>
      </div>
    </div>
  </div>
  <img src="http://mrmrs.io/photos/u/007.jpg" class="db" alt="iceland"/>
</main>

css

.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.dn {
    display: none;
}

.db {
    display: block;
}

.fl {
    float: left;
    _display: inline;
}

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

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

.mw9 {
    max-width: 96rem;
}

.overflow-hidden {
    overflow: hidden;
}

.pa3 {
    padding: 1rem;
}

.pr0 {
    padding-right: 0;
}

.pr3 {
    padding-right: 1rem;
}

.mb4 {
    margin-bottom: 2rem;
}

.mt0 {
    margin-top: 0;
}

.f2 {
    font-size: 2.25rem;
}

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

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

@media screen and (min-width: 30em) {
    .db-ns {
        display: block;
    }

    .pr4-ns {
        padding-right: 2rem;
    }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .w-50-m {
        width: 50%;
    }

    .pa4-m {
        padding: 2rem;
    }

    .pr3-m {
        padding-right: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .dt-l {
        display: table;
    }

    .dtc-l {
        display: table-cell;
    }

    .dt--fixed-l {
        table-layout: fixed;
        width: 100%;
    }

    .fn-l {
        float: none;
    }

    .w-25-l {
        width: 25%;
    }

    .w-75-l {
        width: 75%;
    }

    .pa5-l {
        padding: 4rem;
    }

    .pr4-l {
        padding-right: 2rem;
    }

    .mb5-l {
        margin-bottom: 4rem;
    }

    .f1-l {
        font-size: 3rem;
    }
}

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

npm i --save tachyons-clears tachyons-display tachyons-floats tachyons-line-height tachyons-max-widths tachyons-overflow tachyons-spacing tachyons-type-scale tachyons-utilities tachyons-widths

Other Components

articles

Feature Full Bleed Background Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Text Image Title Text

banners

Basic

buttons

Basic Pill Grow Pill

cards

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

collections

Albums Movies Posters

footers

Simple Large Type Small Print Social Circles Social Text Social

headers

Circle Avatar Title Subtitle Fixed Semi Transparent Rounded Avatar Title Subtitle

layout

Centered Container Flag Object Collapse Flag Object Four Column Collapse Two Four Column Two Column Collapse One Two Column

lists

Border Spaced Border Tight Large Links Inline Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text

nav

Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Title Link List

pages

Swiss Cover