LamaPress

Appearance

Responsive Design ​

This guide explains responsive design patterns in LamaPress, including breakpoints, mobile-first approach, and responsive utilities.

Table of Contents ​

Overview ​

LamaPress uses a mobile-first responsive design approach with custom breakpoints and responsive utilities. All design system utilities (typography, spacing, grid) are responsive by default.

Breakpoints ​

Standard Breakpoints ​

Breakpoints are defined in tailwind.config.js:

javascript
screens: {
  xs: '400px',
  sm: '600px',
  md: '800px',
  lg: '1000px',
  xl: '1200px',
  '2xl': '1440px',
  '3xl': '1600px',
}

Usage:

html
<div class="text-sm md:text-lg lg:text-xl">
  Responsive text
</div>

Negative Breakpoints ​

Negative breakpoints (max-width) are available:

javascript
'-xl': { max: '1199px' },
'-lg': { max: '999px' },
'-md': { max: '799px' },
'-sm': { max: '599px' },
'-xs': { max: '399px' },

Usage:

html
<div class="text-lg -md:text-sm">
  Large text, small below md
</div>

Mobile-First Approach ​

LamaPress follows a mobile-first approach:

  1. Base styles apply to mobile (default)
  2. Breakpoint prefixes apply styles at larger sizes
  3. Negative breakpoints apply styles at smaller sizes

Example:

html
<!-- Mobile: col-span-6, Desktop: col-span-4 -->
<div class="col-span-6 md:col-span-4">
  Content
</div>

Responsive Utilities ​

Typography ​

Typography classes are responsive by default (using clamp()):

html
<!-- Automatically scales -->
<h1 class="ll-heading-1">Responsive heading</h1>

Override at breakpoints:

html
<h1 class="ll-heading-2 md:ll-heading-1">
  Smaller on mobile, larger on desktop
</h1>

Spacing ​

Spacing utilities are responsive by default:

html
<!-- Automatically scales -->
<div class="mb-md">Responsive margin</div>

Override at breakpoints:

html
<div class="mb-sm md:mb-lg">
  Small margin on mobile, large on desktop
</div>

Grid ​

Grid columns are responsive:

html
<!-- Mobile: 6 cols, Desktop: 12 cols -->
<div class="ll-grid">
  <div class="col-span-6 md:col-span-4">Content</div>
  <div class="col-span-6 md:col-span-4">Content</div>
  <div class="col-span-6 md:col-span-4">Content</div>
</div>

Display ​

Show/hide elements at breakpoints:

html
<!-- Hidden on mobile, visible on desktop -->
<div class="hidden md:block">Desktop only</div>

<!-- Visible on mobile, hidden on desktop -->
<div class="block md:hidden">Mobile only</div>

Responsive Patterns ​

Stack to Grid ​

Common pattern: stack on mobile, grid on desktop:

html
<div class="ll-grid">
  <div class="col-span-6 md:col-span-4">Item 1</div>
  <div class="col-span-6 md:col-span-4">Item 2</div>
  <div class="col-span-6 md:col-span-4">Item 3</div>
</div>

Hide/Show Elements ​

Show different content at different breakpoints:

html
<!-- Mobile image -->
<img src="mobile.jpg" class="block md:hidden" alt="Mobile">

<!-- Desktop image -->
<img src="desktop.jpg" class="hidden md:block" alt="Desktop">

Responsive Images ​

Use WordPress image sizes with responsive attributes:

php
<?php
$image = llField('image', $key, $section);
if ($image) {
    echo wp_get_attachment_image(
        $image['ID'],
        'large',
        false,
        ['class' => 'w-full h-auto']
    );
}
?>

Best Practices ​

1. Mobile-First ​

Always start with mobile styles, then add desktop:

html
<!-- Good -->
<div class="text-sm md:text-lg">Content</div>

<!-- Avoid -->
<div class="text-lg md:text-sm">Content</div>

2. Test All Breakpoints ​

Test at all breakpoints:

  • Mobile (400px)
  • Tablet (800px)
  • Desktop (1200px+)
  • Large desktop (1440px+)

3. Use Design System ​

Prefer design system utilities over custom breakpoints:

html
<!-- Good - uses design system -->
<div class="ll-heading-1 mb-md">Content</div>

<!-- Avoid - custom values -->
<div class="text-2xl mb-4">Content</div>

Next Steps:

Released under the MIT License.

Copyright © 2024 LamaPress