Editorial design to CSS Grid. Summary

editorial-design-to-css-grid-summary.markdown

Editorial design to CSS Grid. Summary

To illustrate (and celebrate) the approach between editorial design and web design, we have set out to design with CSS Grid some pages of number 3 of the 99U Quarterly Magazine, a very interesting publication for the creative community.

Read the full article here

A Pen by Ricardo Prieto on CodePen.

License.

index.html

<div class="container">
  <div class="grid">
    <header class="header">
      <h1 class="title">Tip Sheet: <span>Beating Failure</span></h1>
      <span class="author">silocreativo.com<span>
    </header>
    <span class="cat">99U Quarterly</span>
    <p class="description">Editorial desing to CSS Grid. Read the full article about how it is made <a href="https://www.silocreativo.com/en/editorial-design-and-css-grid-inspiration-and-examples/">here</a></p>
     <article class="hentry">
       <span class="number">#01</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article>
      <article class="hentry">
       <span class="number">#02</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article> 
      <article class="hentry">
       <span class="number">#03</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article> 
      <article class="hentry">
       <span class="number">#04</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article> 
      <article class="hentry">
       <span class="number">#05</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article> 
      <article class="hentry">
       <span class="number">#06</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article> 
      <article class="hentry">
       <span class="number">#07</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article> 
      <article class="hentry">
       <span class="number">#08</span>
       <h2 class="entry-title">No one cares (and that's good)</h2>
       <p class="entry-content">Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
      </article> 
    
  </span>
  </div>
</div>

style.css

body {
  margin: 0;
  padding: 0;
  font-family: 'EB Garamond', serif;
  color: #565052;
}
p {
  margin-top: 0;
}
.container {
  background-color: #fff;
  display: grid;
  grid-template: minmax(100vh, 1fr) / 1fr;
}
.grid {
  background-color: #fff;
  padding: 30px;
  position: relative;
  text-align: left;
  display: grid;
  grid-gap: 30px;
  grid-template: repeat(3, 1fr) / repeat(6, 1fr);
}
.cat {
  font-family: 'Barlow Condensed', sans-serif;
  grid-area: 1 / 3 / 2 / 4;
  justify-self: center;
  text-transform: uppercase;
  border: 2px solid #565052;
  align-self: start;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0px;
}
.header {
  grid-area: 1 / 1 / 2 / 3;
  align-self: left;
}
.header .title {
  color: #565052;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: 3px;
  margin: 0;
  position: relative;
}
.header .title span {
  color: #00D0C0;
  display: block;
  font-style: italic;
}
.header .title:after {
  content: "";
  background-color: #00d0c0;
  height: 1px;
  width: 50px;
  display: block;  
  margin: 15px 0;
}
.header .author {
  font-size: 18px;
  font-style: italic;
}
.description {
  grid-area: 2 / 1 / 3 / 4;
  font-size: 24px;
  font-style: italic;
  text-decoration: underline;
  color: #00D0C0;
}
.description a {
  color: #00D0C0;
}
.hentry {
  border-top: 1px solid #565052;
  padding-top: 20px;
}
.hentry:nth-of-type(1) {
  grid-area: 3 / 2 / 4 / 3;
}
.hentry:nth-of-type(2) {
  grid-area: 3 / 3 / 4 / 4;
}
.hentry:nth-of-type(3) {
  grid-area: 1 / 5 / 2 / 6;
}
.hentry:nth-of-type(4) {
  grid-area: 1 / 6 / 2 / 7;
}
.hentry:nth-of-type(5) {
  grid-area: 2 / 4 / 3 / 5;
}
.hentry:nth-of-type(6) {
  grid-area: 2 / 5 / 3 / 6;
}
.hentry:nth-of-type(7) {
  grid-area: 3 / 5 / 4 / 6;
}
.hentry:nth-of-type(8) {
  grid-area: 3 / 6 / 4 / 7;
}
.hentry .entry-title {
  text-transform: uppercase;
  color: #00D0C0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 30px;
  font-weight: 500;
  margin: 5px 0;
}
.hentry .entry-content {
  line-height: 1.25;
}
@media (max-width: 1000px) {
  .grid {
    grid-gap: 20px;
    grid-template: auto / repeat(4, 1fr);
  }
  .header {
    grid-area: 1 / 1 / 2 / 4;
  }
  .cat {
    grid-area: 1 / 4 / 2 / 5;
    justify-self: end;
    align-self: start;
  }
  .description {
    grid-area: 2 / 1 / 3 / 5;
  }
  .hentry:nth-of-type(odd) {
    grid-area: auto / 1 / auto / 3;
  }
  .hentry:nth-of-type(even) {
    grid-area: auto / 3 / auto / 5;
  }
}
@media (max-width: 450px) {
  .header {
    grid-area: 2 / 1 / 3 / 5;
  }
  .cat {
    grid-area: 1 / 1 / 2 / 5;
    justify-self: start;
    align-self: start;
  }
  .description {
    grid-area: 3 / 1 / 4 / 5;
  }
  .hentry:nth-of-type(odd),
  .hentry:nth-of-type(even) {
    grid-area: auto / 1 / auto / 5;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i|Barlow+Condensed:400,500,600,700" rel="stylesheet" />