Responsive Design

Mobile-First Approach

BismillahCSS uses a mobile-first approach to responsive design. This means you write styles for mobile devices first, then add media queries for larger screens using responsive breakpoints.

Breakpoints

BismillahCSS includes the following responsive breakpoints:

Using Breakpoints

Add breakpoint prefixes to any utility class:

<!-- Mobile-first: 1 column by default -->
<!-- sm: 2 columns on small screens -->
<!-- md: 3 columns on medium screens -->
<!-- lg: 4 columns on large screens -->
<div class="bismillah-grid bismillah-grid-cols-1 sm:bismillah-grid-cols-2 md:bismillah-grid-cols-3 lg:bismillah-grid-cols-4 bismillah-gap-4">
  <div class="bismillah-bg-gray-100 bismillah-p-4">Column</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Column</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Column</div>
  <div class="bismillah-bg-gray-100 bismillah-p-4">Column</div>
</div>

Responsive Examples

<section class="bismillah-py-12 md:bismillah-py-24 bismillah-px-4">
  <div class="bismillah-container bismillah-mx-auto">
    <h1 class="bismillah-text-2xl md:bismillah-text-4xl lg:bismillah-text-5xl bismillah-font-bold bismillah-mb-4">
      Welcome to BismillahCSS
    </h1>
    <p class="bismillah-text-base md:bismillah-text-lg bismillah-text-gray-600 bismillah-max-w-2xl">
      Build responsive designs without leaving your HTML
    </p>
  </div>
</section>

<!-- Stacked on mobile, side-by-side on larger screens -->
<div class="bismillah-flex bismillah-flex-col md:bismillah-flex-row bismillah-gap-8">
  <div class="bismillah-flex-1">
    <h2 class="bismillah-text-2xl bismillah-font-bold bismillah-mb-3">Left Content</h2>
    <p class="bismillah-text-gray-600">Your content here</p>
  </div>
  <div class="bismillah-flex-1">
    <h2 class="bismillah-text-2xl bismillah-font-bold bismillah-mb-3">Right Content</h2>
    <p class="bismillah-text-gray-600">Your content here</p>
  </div>
</div>

<nav class="bismillah-bg-gray-900 bismillah-text-white">
  <div class="bismillah-container bismillah-mx-auto bismillah-px-4 bismillah-py-4">
    <!-- On mobile: stacked, On larger screens: flex row -->
    <div class="bismillah-flex bismillah-flex-col sm:bismillah-flex-row bismillah-items-center bismillah-justify-between bismillah-gap-4">
      <div class="bismillah-text-2xl bismillah-font-bold">Logo</div>
      <div class="bismillah-flex bismillah-flex-col sm:bismillah-flex-row bismillah-gap-2 sm:bismillah-gap-6 bismillah-w-full sm:bismillah-w-auto">
        <a href="#" class="hover:bismillah-text-gray-300">Home</a>
        <a href="#" class="hover:bismillah-text-gray-300">About</a>
        <a href="#" class="hover:bismillah-text-gray-300">Contact</a>
      </div>
    </div>
  </div>
</nav>

<!-- Different padding on different screen sizes -->
<div class="bismillah-p-4 md:bismillah-p-8 lg:bismillah-p-12">
  <h2 class="bismillah-mb-2 md:bismillah-mb-4 lg:bismillah-mb-6 bismillah-text-lg md:bismillah-text-xl lg:bismillah-text-2xl">
    Responsive Content
  </h2>
  <p class="bismillah-text-sm md:bismillah-text-base lg:bismillah-text-lg">
    Padding and text size adjust based on screen size
  </p>
</div>

<!-- Card grid that adapts to screen size -->
<div class="bismillah-grid bismillah-grid-cols-1 sm:bismillah-grid-cols-2 lg:bismillah-grid-cols-4 bismillah-gap-4">
  <div class="bismillah-bg-white bismillah-rounded-lg bismillah-shadow-md bismillah-p-4">
    <h3 class="bismillah-font-bold bismillah-mb-2">Card 1</h3>
    <p class="bismillah-text-sm bismillah-text-gray-600">Content</p>
  </div>
  <!-- Repeat for more cards -->
</div>

<!-- Show on mobile, hide on larger screens -->
<button class="md:bismillah-hidden">Mobile Menu</button>

<!-- Hide on mobile, show on larger screens -->
<div class="bismillah-hidden md:bismillah-block">
  Desktop Navigation Menu
</div>

Responsive Text

Adjust font sizes for different screen sizes for better readability:

<h1 class="bismillah-text-2xl sm:bismillah-text-3xl md:bismillah-text-4xl lg:bismillah-text-5xl bismillah-font-bold">
  Responsive Heading
</h1>

<p class="bismillah-text-sm sm:bismillah-text-base md:bismillah-text-lg bismillah-text-gray-600">
  Responsive body text that scales with screen size
</p>

Responsive Images

Scale images responsively using width utilities:

<!-- Full width on mobile, half width on medium screens, and so on -->
<img 
  src="image.jpg" 
  class="bismillah-w-full md:bismillah-w-1/2 lg:bismillah-w-1/3 bismillah-h-auto bismillah-rounded-lg"
  alt="Responsive image"
/>

<!-- Using max-width for responsive behavior -->
<img 
  src="image.jpg" 
  class="bismillah-max-w-full md:bismillah-max-w-md bismillah-h-auto"
  alt="Responsive image"
/>

Container Queries (Advanced)

For container-based responsive design within components:

<!-- The container with responsive context -->
<div class="bismillah-container bismillah-mx-auto bismillah-px-4">
  <div class="@container">
    <!-- Respond to container size, not viewport -->
    <h2 class="@sm:bismillah-text-lg @md:bismillah-text-xl @lg:bismillah-text-2xl">
      Container-relative heading
    </h2>
  </div>
</div>

Testing Responsive Design

Responsive Design Tips

• Start mobile-first: Design for mobile first, then enhance for larger screens.
• Test early: Don't wait until the end to test responsive behavior.
• Use flexible layouts: Prefer flexbox and grid for flexible, responsive layouts.
• Keep it simple: Don't overcomplicate responsive designs with too many breakpoints.
• Use relative units: Use `%`, `em`, `rem` instead of fixed `px` where possible.
• Consider touch: Make buttons and links larger on mobile (minimum 44x44px).