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.

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; } }
Css stats for this component
- Gzipped Size
- 496B
- Selectors
- 34
- Declarations
- 37
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