#004

Mies, my great mentor said: “God is in the details.” That is the essence of syntax: the discipline that controls the proper use of grammar in the construction of phrases and the articulation of a language, Design. The syntax of design is provided by many components in the nature of the project.

For us Graphic Design is “organization of information.” There are other types of graphic design more concerned with illustration or of a narrative nature. Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express. There are in nite kinds of grids, but just one - the most appropriate - for any problem. Therefore, it becomes important to know which kind of grid is the most appropriate. The basic understanding is that the smaller the module of the grid the least helpful it could be. We could say that an empty page is a page with an in nitesimal small grid. Therefore, it is equivalent to not being there. Conversely a page with a coarse grid is a very restricting grid offering too few alternatives. The secret is to nd the proper kind of grid for the job at hand. Sometimes, in designing a grid we want to have the outside margins small enough to provide a certain tension between the edges of the page and the content. After that we divide the page in a certain number of columns according to the content, three, two, four, ve, six, etc. Columns provide only one kind of consistency, but we also need to have an horizontal frame of reference to assure certain levels of continuity throughout the publication. Therefore, we will divide the page from top to bottom in a certain number of Modules, four, six, eight, or more, according to size and need. Once we have structured the page, we will begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid. There are in nite ways of doing this and that is why the grid is a useful tool, rather than a constricting device.

Double

HTML

<main class="w-100 cf helvetica dark-gray bg-white pa3 pa4-m pa5-l mw9 center">
    <div class="fl w-50 pr2 pr3-l mb3 mb4-l">
      <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/v/022.jpg) center;"></div>
    </div>
    <div class="fl w-50 w-25-l pl2 pr2-m ph2-l mb3 mb4-l">
      <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/v/024.jpg) center;"> </div>
    </div>
    <div class="fl w-50 w-50 w-25-l pr2 pr0-l pl3-l mb3 mb4-l">
        <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/050.jpg) left;"> </div>
      </div>
    <div class="fl w-50 w-50 w-25-l pl2 pl0-l pr2-m pr4-l mb3 mb4-l">
      <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/049.jpg) center;"> </div>
    </div>
    <div class="fl w-100 w-50-l pr2-l pl2-ns mb4 mb0-l mb4 outline">
      <div class="pa4">
        <h1 class="f4 f2-l fw7 mt0 pv3-l bb-l bb--black">#004</h1>
        <p class="lh-copy mt2 mt3-m mt5-l f6">
          <span class="db-ns f6 fw7 lh-solid mb3 mb0-m mb4-l">Mies, my great mentor said:</span> 
          <span class="fw9 f6 f1-l db lh-title mb3 mb4-l">“God is in the details.”</span>
          <span class="db-l measure-wide">
          That is the essence of syntax: the discipline
          that controls the proper use of grammar in the construction of phrases and the articulation of a language, Design. The syntax of design is provided by many components in the nature of the project.
        </span>
        </p>
      </div>
    </div>
    <div class="cf">
      <div class="fl w-100 w-25-l pl3-l mb3 mb4-l">
          <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/051.jpg) center;"> </div>
      </div>
      <div class="fl w-100 w-25-l pr3-l">
        <p class="lh-copy measure f6 pt3 pt0-l mt0 mb3 mb4-l center">
          <span class="fw6">For us Graphic Design is “organization of information.”</span> There are other
          types of graphic design more concerned with illustration or of a
          narrative nature.  Nothing could be more useful to reach our intention
          than the Grid. The grid represents the basic structure of our graphic
          design, it helps to organize the content, it provides consistency, it
          gives an orderly look and it projects a level of intellectual elegance
          that we like to express.  There are in nite kinds of grids, but just
          one - the most appropriate - for any problem. Therefore, it becomes
          important to know which kind of grid is the most appropriate. The basic
          understanding is that the smaller the module of the grid the least
          helpful it could be. We could say that an empty page is a page with an
          in nitesimal small grid. Therefore, it is equivalent to not being
          there. Conversely a page with a coarse grid is a very restricting grid
          offering too few alternatives. The secret is to  nd the proper kind of
          grid for the job at hand. Sometimes, in designing a grid we want to
          have the outside margins small enough to provide a certain tension
          between the edges of the page and the content. After that we divide the
          page in a certain number of columns according to the content, three,
          two, four,  ve, six, etc. Columns provide only one kind of consistency,
          but we also need to have an horizontal frame of reference to assure
          certain levels of continuity throughout the publication. Therefore, we
          will divide the page from top to bottom in a certain number of Modules,
          four, six, eight, or more, according to size and need. Once we have
          structured the page, we will begin to structure the information and
          place it in the grid in such a way that the clarity of the message will
          be enhanced by the placement of the text on the grid. There are in nite
          ways of doing this and that is why the grid is a useful tool, rather
          than a constricting device. 
        </p>
      </div>
    
      <div class="fl w-100 w-75-l pv0 mv0">
        <div class="fl w-100 mb2 mb4-l">
          <div class="cover pv5 pv6-l" style="background:black url(http://mrmrs.io/photos/u/001.jpg) center;"> </div>
        </div>
        <div class="fl w-25 mb2 mb4-l">
          <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/u/002.jpg) center;"> </div>
        </div>
        <div class="fl w-75 pl2 pl4-l mb2 mb4-l">
          <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/u/003.jpg) center;"> </div>
        </div>
        <div class="fl w-100 mb2 mb4-l">
            <div class="cover pv5 pv6-ns" style="background:black url(http://mrmrs.io/photos/u/004.jpg) center;"> </div>
        </div>
      </div>
    </div>
</main>

css

@import './_normalize';

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

.outline {
    outline: 1px solid;
}

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.db {
    display: block;
}

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

.helvetica {
    font-family: 'helvetica neue', helvetica, sans-serif;
}

.fw6 {
    font-weight: 600;
}

.fw7 {
    font-weight: 700;
}

.fw9 {
    font-weight: 900;
}

.lh-solid {
    line-height: 1;
}

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

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

.mw9 {
    max-width: 96rem;
}

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.dark-gray {
    color: #333;
}

.bg-white {
    background-color: #fff;
}

.pa3 {
    padding: 1rem;
}

.pa4 {
    padding: 2rem;
}

.pl2 {
    padding-left: .5rem;
}

.pr2 {
    padding-right: .5rem;
}

.pt3 {
    padding-top: 1rem;
}

.pv0 {
    padding-top: 0;
    padding-bottom: 0;
}

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

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

.mb3 {
    margin-bottom: 1rem;
}

.mb4 {
    margin-bottom: 2rem;
}

.mt0 {
    margin-top: 0;
}

.mt2 {
    margin-top: .5rem;
}

.mv0 {
    margin-top: 0;
    margin-bottom: 0;
}

.f4 {
    font-size: 1.25rem;
}

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

.measure {
    max-width: 30em;
}

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

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

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

    .pl2-ns {
        padding-left: .5rem;
    }

    .pv6-ns {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .pa4-m {
        padding: 2rem;
    }

    .pr2-m {
        padding-right: .5rem;
    }

    .pv6-m {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .mb0-m {
        margin-bottom: 0;
    }

    .mt3-m {
        margin-top: 1rem;
    }
}

@media screen and (min-width: 60em) {
    .bb-l {
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .db-l {
        display: block;
    }

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

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

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

    .pa5-l {
        padding: 4rem;
    }

    .pl0-l {
        padding-left: 0;
    }

    .pl3-l {
        padding-left: 1rem;
    }

    .pl4-l {
        padding-left: 2rem;
    }

    .pr0-l {
        padding-right: 0;
    }

    .pr2-l {
        padding-right: .5rem;
    }

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

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

    .pt0-l {
        padding-top: 0;
    }

    .pv3-l {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .pv6-l {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .pv7-l {
        padding-top: 16rem;
        padding-bottom: 16rem;
    }

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

    .mb0-l {
        margin-bottom: 0;
    }

    .mb4-l {
        margin-bottom: 2rem;
    }

    .mt5-l {
        margin-top: 4rem;
    }

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

    .f2-l {
        font-size: 2.25rem;
    }
}

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

npm i --save tachyons-background-size tachyons-outlines tachyons-clears tachyons-display tachyons-floats tachyons-font-family tachyons-font-weight tachyons-line-height tachyons-max-widths tachyons-widths tachyons-skins tachyons-spacing tachyons-type-scale tachyons-typography tachyons-utilities tachyons-borders

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