DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on

4 4

Open Source Adventures: Episode 50: Possible scenarios for Putin's successor meme with CSS grid

One of my favorite meme formats are various alignment charts, but it's actually a bit of a hassle to make one.

I asked some people how they make them, and apparently by hand in Inkscape or such is the answer. I definitely don't have patience for that. So I created one with web technologies.

Here's the finished meme.

Putin's successor chart

And this post is how to create something like that in just HTML and CSS.

Meme Code

Here's the complete HTML as a single file:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 120%;
}
.supergrid {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}
.left, .right, .top, .bottom {
  font-size: 200%;
  font-family: sans-serif;
  text-align: center;
}
.left {
  grid-column: 1;
  grid-row: 2;
  writing-mode: vertical-lr;
}
.right {
  grid-column: 3;
  grid-row: 2;
  writing-mode: vertical-lr;
}
.top {
  grid-column: 2;
  grid-row: 1;
}
.bottom {
  grid-column: 2;
  grid-row: 3;
}
.grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: #ccc;
}
.scenario {
  width: 500px;
  height: 300px;
  display: flex;
  gap: 10px;
}
.image {
  display: flex;
  align-items: center;
  justify-content: center;
}
img {
  max-width: 150px;
  display: inline-block;
}
h1 {
  margin: 0;
}
h2 {
  margin: 0;
}
p {
  margin: 0;
  margin-bottom: 0.5em;
}
</style>
</head>
<body>

<div class="supergrid">
  <h3 class="top">Retarded</h3>
  <h3 class="bottom">Enlightened</h3>
  <h3 class="right">Negative Credibility</h3>
  <h3 class="left">Imaginary Credibility</h3>

  <div class="grid">

    <div class="scenario">
      <div class="image">
        <img src="schroeder.png">
      </div>
      <div>
        <h1>FΓΌhrer Gerhard SchrΓΆder</h2>
        <h2>Fourth Reich</h2>
        <p>Germans were playing the long game.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="lukashenko.jpeg">
      </div>
      <div>
        <h1>Colonel Lukashenko</h2>
        <h2>Reverse Union State</h2>
        <p>All generals got switchbladed, leaving Colonel Lukashenko as the highest ranked officer of the Russian Forces.</p>
        <p>Surprisingly little changes for Russia.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="pooh.png">
      </div>
      <div>
        <h1>Xi Jinping</h2>
        <h2>Chinese Vassal State</h2>
        <p>Everything in Russia got sold to China to fund the war. War still lost.</p>
        <p>Uralvagonzavod now assembles Huawei phones.</p>
        <p>Most Russians better off this way.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="assad.jpeg">
      </div>
      <div>
        <h1>Caliph Bashar al-Assad</h2>
        <h2>al-Khilafat al-Ruwsia</h2>
        <p>Recruitment of Syrians goes better than expected.</p>
        <p>Syrians have a different idea once they get to Russia.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="kirill.jpeg">
      </div>
      <div>
        <h1>Patriarch Kirill</h2>
        <h2>Holy Russian Empire</h2>
        <p>Because only God can save Russia from this mess.</p>
        <p>Spoiler alert: Turns out God did not save Russia from this mess.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="zelensky.jpeg">
      </div>
      <div>
        <h1>President Zelensky</h2>
        <h2>Greater Ukraine</h2>
        <p>The way things are going, would it really be that surprising?</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="e2.jpeg">
      </div>
      <div>
        <h1>Queen Elizabeth II</h2>
        <h2>Crimean War 2: Electric Boogaloo</h2>
        <p>Charge of the Light Brigade takes Kremlin.</p>
        <p>Sun never sets on the British Empire.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="kadyrov.jpeg">
      </div>
      <div>
        <h1>Supreme Influencer Kadyrov</h2>
        <h2>Greater Chechnya</h2>
        <p>While Russian soldiers were dying, Tik Tok Army was looting.</p>
        <p>The only armed force left standing, with all the best stolen weapons.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="shoigu.jpeg">
      </div>
      <div>
        <h1>Khan Sergei Shoigu</h2>
        <h2>Khanate of Tuva</h2>
        <p>3000 black horses of Shoigu won the war.</p>
        <p>Horses can run through mud, Javelin can't lock onto horses, Kyiv taken in 48h.</p>
        <p>Nomad hordes roam free on the steppes once more.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS used

Most of it is straightforward stuff, or meme content, but there are two less known CSS tricks:

  • writing-mode: vertical-lr for sideways text, without any need for rotate transforms
  • nested display: grid - instead of doing a very complicated 5x5 grid, I created outer grid for just axes, and then inner grid for the scenarios. This really simplifies the code.

The outer grid code is a bit messy, and there are definitely better ways to do it, but it will do.

Story so far

It wouldn't be too hard to turn this into an online template, but alignment chart style memes are usually quite complex, and they don't follow one template.

All the code is on GitHub.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay