Batman-Comic.CSS
Tags: css, html, webdev, showdev
Published: 2024-07-09 14:48:55

---
title: Batman-Comic.CSS
published: true
description: Move aside, TailwindCSS, the next best CSS utility-class library, is already here, and it's all about web development... and comics. Because the caped crusader makes everything better.
tags: css,html,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbnbydb74eyco2v65fbv.png
canonical_url: https://alvaromontoro.com/blog/68056/batman-comic-css
---

<p>Last week, I participated in <a href="https://www.opensouthcode.org/" rel="nofollow noopener">Open South Code</a> in Malaga, explaining the creative process behind <a href="https://comicss.art/">comiCSS</a>. As part of the conference, there was a kid's event, and I volunteered for it.</p>
<p>The organizers asked me to do something related to my talk, and that's how a new CSS utility-class library was born: <a href="https://alvaromontoro.com/sansjs/demos/batman-comic-css/">batman-comic.css</a>. This library is for anyone willing to create Batman comic strips.</p>
<p>Since its creation in the past two weeks, we've used the library in two kids' conferences. The library allows children to play with HTML and quickly see the power of CSS &mdash;even when this may not be the best way to use it. <b>Children enjoy seeing how you can add text or replace some HTML classes, and a completely different comic pops up instantly</b>.</p>


<h2>Origin</h2>

<p>The original idea for the library came from "<a href="https://comicss.art/comics/50/">Wedding Invitation</a>," a comiCSS cartoon strip featuring Batman and Robin arguing about how <del>Bruce Wayne</del> Batman can be a penny-pincher:</p>

![Cartoon with multiple panels showing Robin and Batman fighting over Batman being a penny pincher and writing #000 Canary instead of Black Canary in some wedding invitations in order to save money.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gofgm0coodmmjmw65kml.png)

<p>I liked that comic idea and wanted to streamline the process, even if I didn't have anything planned with these characters. Simplifying the process would provide more consistency (and speed) to comiCSS. Apart from this library, I've been working on something on the side. But I digress.</p>
<p>Creating a CSS library to generate the characters seemed simple for the event (I only had a few days to prepare the activity), as I already had many facial expressions done.</p>
<p>The instant gratification of HTML and CSS would also go a long way with the kids. They were going to code and see how the comic updated immediately. And so it went.</p>

<h2>The Library</h2>

<p>There is a <a href="https://alvaromontoro.com/sansjs/demos/batman-comic-css/">documentation page online</a> with all the details, colors, and classes &mdash;and <a href="https://alvaromontoro.com/sansjs/demos/batman-comic/">another one in Spanish</a> that I created for the children's events.</p>
<p>The characters' drawings are in CSS using a single HTML element, its pseudo-elements, and many gradients. This simplicity makes it easy to add a character to the comic. For example, this will add a smiling Batman:</p>

```html
<div class="batman"></div>
```

<p>Then, there are classes to set different eyes and mouths. <b>All the characters have the same face-expression classes that generate up to 864 different combinations</b> (12 eye combinations * 24 mouth combinations * 3 additional features). For example, this will add an angry Batman:</p>

```html
<div class="batman eyes-angry mouth-angry"></div>
```

<p>These are the list of classes that each character can have. Some of them can be combined with others (noted as "combinable")</p>

<ul>
<li>Eyes
<ul>
<li><code>eyes-no</code>: No eyes.
<li><code>eyes-think</code>: Eyes slightly closed from the top.
<li><code>eyes-doubt</code>: Eyes slightly closed from top to bottom.
<li><code>eyes-sad</code>: Eyes skewed to look sad (towards the inside).
<li><code>eyes-angry</code>: Eyes skewed to look angry (towards the outside).
<li><code>eyes-suspicious</code>: The left eye thinks, and the right eye is angry.
<li><code>eyes-surprise</code> (combinable): larger eyes.
<li><code>eyes-shock</code> (combinable): the right eye is more prominent.
</ul>
</li>
<li>Mouth
<ul>
<li><code>mouth-no</code>: No mouth.
<li><code>mouth-sad</code>: Frawned mouth.
<li><code>mouth-angry</code>: see mouth-sad.
<li><code>mouth-talk</code>: Mouth with the character talking.
<li><code>mouth-round</code>: a circle
<li><code>mouth-whisper</code>: a small oval
<li><code>mouth-right</code> (combinable): moves the mouth slightly to the right side.
<li><code>mouth-left</code> (combinable): moves the mouth slightly to the left side.
<li><code>mouth-to-right</code> (combinable): skews the mouth towards the right.
<li><code>mouth-to-left</code> (combinable): skews the mouth towards the left.
</ul>
</li>
<li>Others
<ul>
<li><code>blush</code>: a reddish glow in the visible part of the face.
<li><code>scare</code>: a blueish glow in the visible part of the face.
<li><code>shame</code>: a (lighter?) reddish glow in the visible part of the face.
</ul>
</li>
</ul>

<p>I'm not 100% sold on these class names. I developed the library in a "quick and dirty" way and may likely change the names and default values to bring more consistency.</p>
<p>Additionally, <b>each character uses different CSS custom properties to define their colors</b> (<a href="https://alvaromontoro.com/sansjs/demos/batman-comic-css/">check the documentation for more information</a>), and <b>the comic strip panels use CSS Grid for layout</b> for easy customization.</p>

<h2>Examples</h2>
<p>Here are some examples of what can be created with the library as it is right now (quite limited):</p>

![Comic with three panels. Robin looks surprised as Batman (off-panel) asks 'did you was your red shirt with my suit?' Robin replies doubtful 'Hmmmm... no?' The last panel is Batman wearing a pink suit asking annoyed 'You sure?'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30oumyz7uxbr47zfsbdq.png)

![Cartoon with Batman wearing a pink suit and looking angry while saying: 'Robin!! Did you wash your red shirt with my suit?!?!'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00pyn5mb7uav3pn5mzj1.png)

![Comic strip with three panels showing Batman. In the first one, he says "Hi, I am Batman! I fight crime, and..." A voice off-panel interrupts him "Hey! Has anyone seen Bruce Wayne" to Batman shock. In the last panel he looks concerned and a bit ashamed "I have to go now... no reason in particular"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx0cryheh49y1zhcmfnh.png)


<p>A couple of them are the same idea implemented differently. I needed more ideas, but these examples should showcase the library options.</p>

<h2>What's next?</h2>
<p>As I mentioned above, I might use the library myself to generate new CSS comics, but in all honesty, I still don't know how it will apply.</p>
<p>I may reuse it in events &mdash;especially with children and beginners, who seem more impressed by their capabilities and what they can achieve with a bit of code. But it will require some updates:</p>
<ul>
<li>New characters (Superman? Bane? Joker? Catwoman?)</li>
<li>New facial expressions</li>
<li>Correct facial expressions (Robin is a bit buggy)</li>
<li>Adding props</li>
</ul>
<p>A future step will be to share the library on GitHub and open it to the world, allowing others to use it and contribute new content (especially props).</p>