“ A beginning is a very delicate time
Let's style something with MelangeCSS. We'll make the so-called “media component” that looks like this:
If you do not know how to create these using CSS, MelangeCSS will not be able to help you do that. But, if you do, Melange should make it easier.
First, let's get some markup going and try to use semantic tags where we can (we'll assume there are some other h1, h2, and h3 tags on the page):
<img src="muad-dib.png" width="150" height="150" />
<h4>Paul Muad'Dib</h4>
<h5>Emperor of the Known Universe</h5>
<a href="https://arrakis.planet">arrakis.planet</a>
Let's place things where they should go. There are a lot of ways to achieve this, but we'll use flexbox. We'll put a div around the image and name and have those align themselves along the center. We'll also put the entire thing in a div since we know we need a border later.
<div>
<div class="flex items-center">
<img src="muad-dib.png" width="150" height="150" />
<h4>Paul Muad'Dib</h4>
</div>
<h5>Emperor of the Known Universe</h5>
<a href="https://arrakis.planet">arrakis.planet</a>
</div>
The font sizes are all wrong, now. Let's fix that. Note that unlike normal CSS or TailwindCSS, MelangeCSS only provides a few sizes for text. Size 1 is the smallest, 2 is the body font size, and 7 is the largest. Let's try changing the sizes. The title also needs to be in italics.
<div>
<div class="flex items-center">
<img src="muad-dib.png" width="150" height="150" />
<h4 class="f-5">Paul Muad'Dib</h4>
</div>
<h5 class="f-3 i">Emperor of the Known Universe</h5>
<a href="https://arrakis.planet">arrakis.planet</a>
</div>
The name is too large, let's change that to f-4. While we're at it, let's fix the image size and the spacing between it and the name. MelangeCSS provides a size scale from 1 (smallest) to 7 (largest). For the image, let's try the fourth step for its dimensions. We'll use the second step for space between, using the left margin to create that space.
<div>
<div class="flex items-center">
<img src="muad-dib.png" class="w-4 h-4" />
<h4 class="f-4 ml-2">Paul Muad'Dib</h4>
</div>
<h5 class="f-3 i">Emperor of the Known Universe</h5>
<a href="https://arrakis.planet">arrakis.planet</a>
</div>
The image is now too small, so let's try the fifth step of the scale. We'll also add the border radius. There is a scale for that, too, so we'll try the third one.
<div>
<div class="flex items-center">
<img src="muad-dib.png" class="w-5 h-5 br-3" />
<h4 class="f-4 ml-2">Paul Muad'Dib</h4>
</div>
<h5 class="f-3 i">Emperor of the Known Universe</h5>
<a href="https://arrakis.planet">arrakis.planet</a>
</div>
Hopefully, you can see how this works. Let's fix a few more things. We need to make the title and link on black background, and the text needs to be closer together. We'll use margins for that.
<div>
<div class="flex items-center">
<img src="muad-dib.png" class="w-5 h-5 br-3" />
<h4 class="f-4 ml-2">Paul Muad'Dib</h4>
</div>
<div class="bg-black white pa-2">
<h5 class="f-3 i mv-2">Emperor of the Known Universe</h5>
<a class="blue-600" href="https://arrakis.planet">arrakis.planet</a>
</div>
</div>
Paul Muad'Dib
Emperor of the Known Universe
arrakis.planetNow, let's surround the entire thing with a border and use the same radius we used for the image.
<div class="ba br-3">
<div class="flex items-center">
<img src="muad-dib.png" class="w-5 h-5 br-3" />
<h4 class="f-4 ml-2">Paul Muad'Dib</h4>
</div>
<div class="bg-black white pa-2">
<h5 class="f-3 i mv-2">Emperor of the Known Universe</h5>
<a class="blue-600" href="https://arrakis.planet">arrakis.planet</a>
</div>
</div>
Paul Muad'Dib
Emperor of the Known Universe
arrakis.planetWe can clean this up with some additional border radius and spacing.
<div class="ba br-3">
<div class="flex items-center pa-2">
<img src="muad-dib.png" class="w-5 h-5 br-3" />
<h4 class="f-4 ml-2">Paul Muad'Dib</h4>
</div>
<div class="bg-black white pa-2 br-bottom-2">
<h5 class="f-3 i mv-2">Emperor of the Known Universe</h5>
<a class="blue-600" href="https://arrakis.planet">arrakis.planet</a>
</div>
</div>
Paul Muad'Dib
Emperor of the Known Universe
arrakis.planetThis looks pretty close. If you were following along, change some of the spacings. You'll notice that everything still looks relatively cohesive. This is the advantage of the grid-based design system.
Also note that there are a lot of ways to achieve this design—MelangeCSS doesn't prescribe any particular way. But do note that we didn't write any CSS nor did we have to leave our HTML and you can reliably predict how the elements will be styled by just looking at them. There's no need to refer to another file or files.