Melange CSS Component Gallery

Gallery of Examples

Since you know CSS (right?), you should be able to create any component you want using what you already know. However, you may find inspiration from using MelangeCSS to create common components. These examples are intentionally busy to demonstrate that you do not have to create ultra-minimalist designs.

Button

<button
 class="dib pointer ph-3 pv-2 tc f-2 ba br-3 bg-gray-900 gray-100 ws-nowrap">
    Fold Space
</button>

Button (Alternate)

<button
 class="dib pointer ph-3 pv-2 tc bn ttu f-1 br-pill bg-purple-200 purple-800 ws-nowrap">
    Engage Thumper
</button>

Button (with Icon)

<button
 class="dib pointer pa-3 f-2 ba br-3 bg-blue-800 blue-200 flex items-center gap-2">
  <span role="img" aria-description="water droplet">💧</span>
  <span class="ws-nowrap">Void Stillsuit</span>
</button>

Alert (Basic)

<aside
 class="pa-3 br-3 ba bc-red-300 red-200 bg-red-800">
  <p class="lh-copy measure-wide ma-0">
    <strong class="db f-3">The Spice Has Failed to Flow!</strong>
    Please check your harvesters and contact the carry-all.
    Some of your spotters may be out of position.
  </p>
</aside>

Alert (Complex)

<aside
 class="pa-3 br-3 ba bc-red-300 red-200 bg-red-800 pos-relative">
  <div class="flex items-center gap-3">
    <span class="f-5" role="img" aria-description="exclamation point">
      ⚠️
    </span>
    <p class="lh-copy measure-wide ma-0">
      <strong class="db f-3">Shield Controls Not Responding!</strong>
      The Duke has been notified, however it is recommended
      that you proceed to the nearest safe room.
    </p>
  </div>
  <button class="f-1 bg-red-300 red-800 pv-1 ph-2 tc bn br-2 pointer ws-nowrap pos-absolute top-1 right-1">
    &times;<span class="dn di-l"> Close</span>
  </button>
</aside>

Card

Contents of Fremkit

Paracompass
Maker hooks
Thumper (charged)
Sandsnorkel
Stilltent

Please double-check the integrity of your Stilltent. Note, there is space for your flask, but one is not included.

<section class="ba bc-black-ish br-2 bg-white-ish measure shadow-3">
  <h4 class="bg-black-ish white-ish ma-0 ph-3 pv-3 f-3 fw-6">
    Contents of Fremkit
  </h4>
  <div class="ph-3">
    <ul class="pa-0 f-1 lsp-inside">
      <li class="p"> Paracompass </li>
      <li class="p"> Maker hooks </li>
      <li class="p"> Thumper (charged) </li>
      <li class="p"> Sandsnorkel </li>
      <li class="p"> Stilltent </li>
    </ul>
    <p class="p">
      Please double-check the integrity of your Stilltent.
      Note, there is space for your flask, but one is not included.
    </p>
  </div>
</section>

Form

<form action="#"
 class="pa-4 flex flex-column gap-3 bg-white-ish bc-gray-700 ba br-1">
  <label for="example-email"
    class="db flex flex-column gap-2">
    <div class="flex items-center w-100 gap-2">
      <input id="example-email" type="text"
                                style="min-width: 0";
      class="pa-2 f-3 br-2 bg-orange-900 orange-200 ba bc-orange-400 flex-grow-1">
      <code class="ws-nowrap">@house-atreides.gov</code>
    </div>
    <span class="f-1 fw-6">Email</span>
  </label>
  <label for="example-password"
    class="db flex flex-column gap-2">
    <input id="example-password" type="password"
     class="pa-2 f-3 br-2 bg-orange-900 orange-200 ba bc-orange-400"
    >
    <span
     class="f-1 fw-6">
        Password
    </span>
  </label>
  <button
   class="br-3 bg-blue-300 blue-700 f-3 tc ph-4 pv-3 bn pointer">
    Log In
  </button>
</form>

Avatar

Paul Atreides

<div class="flex">
<div class="bn br-4 bg-blue-600 pos-relative ph-0 pt-2 pb-3">
  <img src="muad-dib.png" class="br-100 w-5 h-5 mh-3">
  <div class="pa-1 bg-white br-left-0 br-right-pill pos-absolute bottom-2 left-0 right-2 tc">
  Paul Atreides
  </div>
</div>
</div>