Layout Utilities

Display

Control the display property:

<div class="bismillah-block">Block element</div>
<div class="bismillah-inline-block">Inline-block</div>
<div class="bismillah-inline">Inline element</div>
<div class="bismillah-none">Hidden element</div>
<div class="bismillah-flex">Flex container</div>
<div class="bismillah-grid">Grid container</div>

Position

Control element positioning:

<div class="bismillah-static">Static position</div>
<div class="bismillah-relative">Relative position</div>
<div class="bismillah-absolute">Absolute position</div>
<div class="bismillah-fixed">Fixed position</div>
<div class="bismillah-sticky">Sticky position</div>

Positioning coordinates (top, right, bottom, left, inset):

<!-- Spacing from edges -->
<div class="bismillah-absolute bismillah-top-0 bismillah-right-0">Top-right</div>
<div class="bismillah-fixed bismillah-inset-0">Cover entire screen</div>
<div class="bismillah-absolute bismillah-top-2 bismillah-left-2">With offset</div>

Size & Dimensions

Control width and height:

<!-- Width -->
<div class="bismillah-w-full">Full width</div>
<div class="bismillah-w-1/2">Half width</div>
<div class="bismillah-w-1/3">One-third width</div>
<div class="bismillah-w-64">16rem width</div>
<div class="bismillah-w-screen">Full viewport width</div>
<div class="bismillah-max-w-md">Max width medium</div>
<div class="bismillah-min-w-fit">Min width fit content</div>

<!-- Height -->
<div class="bismillah-h-full">Full height</div>
<div class="bismillah-h-screen">Full viewport height</div>
<div class="bismillah-h-64">16rem height</div>
<div class="bismillah-max-h-xs">Max height extra small</div>
<div class="bismillah-min-h-full">Min height full</div>

Overflow

Control how content overflows containers:

<div class="bismillah-overflow-auto">Auto scroll if needed</div>
<div class="bismillah-overflow-hidden">Hide overflow</div>
<div class="bismillah-overflow-x-auto bismillah-overflow-y-hidden">Scroll horizontally</div>
<div class="bismillah-overflow-ellipsis">Text ellipsis</div>

Container

Center and constrain content:

<!-- Max-width container centered -->
<div class="bismillah-container bismillah-mx-auto">
  Content with max-width, centered horizontally
</div>

<!-- With padding -->
<div class="bismillah-container bismillah-mx-auto bismillah-px-4">
  Content with padding on sides
</div>

Visibility

Control element visibility:

<div class="bismillah-visible">Visible element</div>
<div class="bismillah-invisible">Invisible (takes up space)</div>
<div class="bismillah-hidden">Hidden (doesn't take up space)</div>
<div class="bismillah-sr-only">Screen reader only (hidden visually)</div>

Z-Index

Control stacking order:

<div class="bismillah-z-0">Base layer</div>
<div class="bismillah-z-10">Higher layer</div>
<div class="bismillah-z-50">Even higher</div>
<div class="bismillah-z-auto">Auto z-index</div>

Common Patterns

<div class="bismillah-fixed bismillah-inset-0 bismillah-bg-black bismillah-bg-opacity-50 bismillah-z-50">
  <!-- Content centered on overlay -->
</div>

<header class="bismillah-sticky bismillah-top-0 bismillah-z-40 bismillah-bg-white bismillah-shadow">
  Navigation that sticks to top
</header>

<aside class="bismillah-fixed bismillah-left-0 bismillah-top-0 bismillah-h-screen bismillah-w-64 bismillah-bg-gray-100">
  Sidebar content
</aside>

<div class="bismillah-flex bismillah-items-center bismillah-justify-center bismillah-h-screen">
  Content centered both vertically and horizontally
</div>

Responsive Layout

Use responsive variants for different screen sizes:

<!-- Full width on mobile, contained on larger screens -->
<div class="bismillah-w-full md:bismillah-max-w-4xl bismillah-mx-auto">
  Responsive width
</div>

<!-- Hide on mobile, show on desktop -->
<div class="bismillah-hidden md:bismillah-block">
  Desktop only content
</div>

<!-- Different sizes at different breakpoints -->
<div class="bismillah-h-32 md:bismillah-h-48 lg:bismillah-h-64">
  Responsive height
</div>