How To Make A Css Grid With A Swiss Style Typography Poster

For this article, we will re-present one Css tutorial, where scripts like this are rarely encountered. And therefore let us together listen to how to make it and what should be prepared.

For all developers or involved in the world of coding, CSS is something that is needed for the needs of improving the appearance of their website/blog. So it can be said that this CSS has a very high value even though it is undeniable also for developers to ignore it.

Let's go straight to the core of today's discussion. For the first step, prepare the CSS / Scss first. And for example you can see the following:

@import url("https://rsms.me/inter/inter.css");
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --poster-size: 95vmin;
  --ratio: 415 / 512;
  --poster-width: calc(var(--poster-size) * var(--ratio));
  --poster-height: var(--poster-size);
  --poster-text-color--light: hsl(300, 7%, 95%);
  --poster-text-color--mid: hsl(0, 1%, 73%);
  --poster-text-color--dark: hsl(226, 7%, 52%);
  --poster-background-color--light: hsl(248, 9%, 18%);
  --poster--background-color--dark: hsl(206, 18%, 8%);
  --app-background-color: hsl(206, 18%, 7%);
  font-family: "Inter", sans-serif;
  font-size: calc(var(--poster-width) / 100);
}

body {
  display: grid;
  min-height: 100vh;
  color: var(--poster-text-color--light);
  background: var(--app-background-color);
  place-items: center;
}

.poster {
  display: grid;
  width: var(--poster-width);
  height: var(--poster-size);
  padding: 9rem;
  background-image: radial-gradient(circle at top center, var(--poster-background-color--light), var(--poster--background-color--dark));
  grid-template-columns: repeat(20, 1fr);
}
.poster__content {
  font-size: 0.8rem;
  font-weight: 200;
}
.poster__content--upper {
  grid-column: 9 / span 3;
}
.poster__content--lower {
  grid-column: 12 / span 3;
}
.poster__content-block {
  margin-bottom: 1em;
}
.poster__header {
  font-size: 8rem;
  display: grid;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  grid-column: 1 / span 20;
  grid-template-columns: repeat(20, 1fr);
  grid-auto-flow: column;
}
.poster__title {
  --color: hsl(300, 7%, 95%);
  --color--dark: #bbb9b9;
  display: block;
}
.poster__title:nth-of-type(1) {
  grid-column: 12 / span 8;
  grid-row: 1;
}
.poster__title:nth-of-type(2) {
  grid-column: 9 / span 9;
  grid-row: 2;
}
.poster__title:nth-of-type(3) {
  grid-column: 6 / span 9;
  grid-row: 3;
}
.poster__title:nth-of-type(4) {
  grid-column: 3 / span 9;
  grid-row: 4;
}
.poster__title:nth-of-type(5) {
  grid-column: 9 / span 9;
  grid-row: 5;
}
.poster__title:nth-of-type(6) {
  grid-column: 9 / span 2;
  grid-row: 6;
}
.poster__title:nth-of-type(7) {
  grid-column: 6 / span 11;
  grid-row: 7;
}
.poster__title:nth-of-type(8) {
  grid-column: 3 / span 11;
  grid-row: 8;
}
.poster__title:nth-of-type(9) {
  grid-column: 1 / span 11;
  grid-row: 9;
}
.poster [role="presentation"] {
  --color: var(--poster-text-color--mid);
  --color--dark: var(--poster-text-color--dark);
}
.poster .char {
  color: var(--color);
}
.poster .char--dark {
  color: var(--color--dark);
}

Please copy the CSS code above, and paste it into the style.css and save it. What are the next steps? The second step is, for Javascript. You can see the code like this:

// Based on Jacqueline Casey's amazing MIT posters.

Splitting({target: '.poster__header', by:"chars"});

const characters = document.querySelectorAll('.char');
const darkCharacters = [1,3,6,9,11,12,14,15,17,20,23,25,26,28,29,32,34,36,38,39,41,43,45,48,50,52,54,55,57,59,61];
characters.forEach(character => {
    const correlativeIndex = parseInt(getComputedStyle(character).getPropertyValue('--char-index'))+1;
        if (darkCharacters.includes(correlativeIndex)) character.classList.add('char--dark');
        })

If so, just save the Javascript. If the two files above are all complete, the next step is we create html for the framework:

<main class="poster">
      <section class="poster__content poster__content--upper">
        <div class="poster__content-block">
          <p>Installations by</p>
          <ul>
            <li>Vernon Fisher</li>
            <li>Myrel Chernick</li>
            <li>Paul Sharits</li>
          </ul>
        </div>
        <div class="poster__content-block">
          <p>
            Haden Gallery <br />
            Hayden Memorial Library Building <br />
            Massachusetts Institute of Technology <br />
            160 Memorial Drive <br />
            Cambridge Massachusetts 02139
          </p>
        </div>
        <div class="poster__content-block">
          <p>November 20-December 23, 1962</p>
        </div>
        <div class="poster__content-block">
          Public Preview <br />
          Friday, November 19, 6-8 pm
        </div>
      </section>
      <header class="poster__header">
          <p class="poster__title" role="presentation">Mediums</p>
          <p class="poster__title" role="presentation">Mediums</p>
          <p class="poster__title" role="presentation">Mediums</p>
          <p class="poster__title">Mediums</p>
          <p class="poster__title">Of</p>
          <p class="poster__title">Language</p>
          <p class="poster__title" role="presentation">Language</p>
          <p class="poster__title" role="presentation">Language</p>
          <p class="poster__title" role="presentation">Language</p>
      </header>
      <section class="poster__content poster__content--lower">
        <div class="poster__content-block">
          <p>
            Panel Discussion and Slide Presentation by the Artists <br />
            MIT Building 6, Room 120 <br />
            Friday, November 19,<br />
            5:30 pm
          </p>
        </div>
        <div class="poster__content-block">
          <p>
            Gallery Hours <br />
            Weekdays 10-4, Weekends 1-5<br />
            Telephone <br />
            Gallery 253-4680 <br />
            Office 253-4400
          </p>
        </div>
        <div class="poster__content-block">
          <p>Illustrated Catalogue available</p>
        </div>
        <div class="poster__content-block">
          <p>
            Organized by the MIT Committee on the Visual Arts <br />
            Supported by the National Endowment for the Arts, <br />
            a Federal Agency, Washington, D.C.
          </p>
        </div>
      </section>
    </main>

Well, until here the making of Css grid is finished. For the results, please access through your browser.

That's the tutorial for this time, how to make a css grid with a swiss style typography poster. Hopefully useful and the end of the word I say thank you.

Tags: Blogging Tutorials

Share this: