BismillahCSS Utility Classes

A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

<div class="bismillah-flex bismillah-flex-col bismillah-items-center bismillah-rounded-2xl">
  <div>
    <img class="bismillah-size-48 bismillah-shadow-xl" alt="" src="/img/cover.png" />
  </div>
  <div class="bismillah-flex">
    <span>Class Warfare</span>
    <span>The Anti-Patterns</span>
    <span class="bismillah-flex">
      <span>No. 4</span>
      <span>·</span>
      <span>2025</span>
    </span>
  </div>
</div>

Container

A component for fixing an element's width to the current breakpoint.

Container (width adapts to screen size)

Display

Utilities for controlling the display box type of an element.

Block

Inline Block

Inline

Flex

Inline Flex

Grid

Position

Utilities for controlling how an element is positioned in the DOM.

Static (default)

Absolute (top-right)

Sticky (sticks to top when scrolling)

Z-Index

Utilities for controlling the stack order of an element.

z-10

z-20

z-30

View Component Showcase