Responsive Design

// Located in: classes/class-breakpoints.php:16-49
class Visual_Portfolio_Breakpoints {
    private static $default_xs = 320;   // Extra Small (Mobile)
    private static $default_sm = 576;   // Small (Large Mobile)
    private static $default_md = 768;   // Medium (Tablet)
    private static $default_lg = 992;   // Large (Desktop)
    private static $default_xl = 1200;  // Extra Large (Large Desktop)
}

// Located in: classes/class-breakpoints.php:54
public static function get_breakpoints() {
    $xs = self::get_breakpoint_xs();
    $xs = ( ! empty( $xs ) && $xs ) ? $xs : self::$default_xs;
    
    $sm = self::get_breakpoint_sm();
    $sm = ( ! empty( $sm ) && $sm ) ? $sm : self::$default_sm;
    
    $md = self::get_breakpoint_md();
    $md = ( ! empty( $md ) && $md ) ? $md : self::$default_md;
    
    $lg = self::get_breakpoint_lg();
    $lg = ( ! empty( $lg ) && $lg ) ? $lg : self::$default_lg;
    
    $xl = self::get_breakpoint_xl();
    $xl = ( ! empty( $xl ) && $xl ) ? $xl : self::$default_xl;
    
    return array( $xs, $sm, $md, $lg, $xl );
}

// Located in: classes/class-breakpoints.php:84
public static function get_default_breakpoints() {
    return array(
        'xs' => self::get_default_breakpoint_xs(),
        'sm' => self::get_default_breakpoint_sm(),
        'md' => self::get_default_breakpoint_md(),
        'lg' => self::get_default_breakpoint_lg(),
        'xl' => self::get_default_breakpoint_xl(),
    );
}

// Extra Small
add_filter( 'vpf_breakpoint_xs', function( $breakpoint ) {
    return 375; // iPhone X size
});

// Small
add_filter( 'vpf_breakpoint_sm', function( $breakpoint ) {
    return 640; // Custom small device size
});

// Medium
add_filter( 'vpf_breakpoint_md', function( $breakpoint ) {
    return 800; // Custom tablet size
});

// Large
add_filter( 'vpf_breakpoint_lg', function( $breakpoint ) {
    return 1024; // Custom desktop size
});

// Extra Large
add_filter( 'vpf_breakpoint_xl', function( $breakpoint ) {
    return 1400; // Custom large desktop size
});

// Located in: classes/class-breakpoints.php:100-182
add_filter( 'vpf_default_breakpoint_xs', function( $breakpoint ) {
    return 360;
});

add_filter( 'vpf_default_breakpoint_sm', function( $breakpoint ) {
    return 600;
});

add_filter( 'vpf_default_breakpoint_md', function( $breakpoint ) {
    return 768;
});

add_filter( 'vpf_default_breakpoint_lg', function( $breakpoint ) {
    return 1024;
});

add_filter( 'vpf_default_breakpoint_xl', function( $breakpoint ) {
    return 1280;
});

// Desktop (default)
'columns' => 3,

// Tablet
'columns_tablet' => 2,

// Mobile
'columns_mobile' => 1,

// All breakpoints
'items_gap' => 30,

// Custom vertical gap
'items_gap_vertical' => 20,

'items_per_view' => 3,
'items_per_view_tablet' => 2,
'items_per_view_mobile' => 1,

:root {
    --vp-breakpoint-xs: 320px;
    --vp-breakpoint-sm: 576px;
    --vp-breakpoint-md: 768px;
    --vp-breakpoint-lg: 992px;
    --vp-breakpoint-xl: 1200px;
}

/* Mobile-first approach */
.vp-portfolio__item {
    width: 100%;
}

@media (min-width: var(--vp-breakpoint-sm)) {
    .vp-portfolio__item {
        width: 50%;
    }
}

@media (min-width: var(--vp-breakpoint-md)) {
    .vp-portfolio__item {
        width: 33.333%;
    }
}

@media (min-width: var(--vp-breakpoint-lg)) {
    .vp-portfolio__item {
        width: 25%;
    }
}

// Access breakpoints
const breakpoints = window.VPData.breakpoints;

console.log(breakpoints);
// Output: [320, 576, 768, 992, 1200]

// Use in responsive logic
function getColumnsForWidth(width) {
    if (width < breakpoints[1]) return 1;      // < SM: 1 column
    if (width < breakpoints[2]) return 2;      // SM-MD: 2 columns
    if (width < breakpoints[3]) return 3;      // MD-LG: 3 columns
    if (width < breakpoints[4]) return 4;      // LG-XL: 4 columns
    return 5;                                   // XL+: 5 columns
}

array(
    'columns' => 3,           // Desktop: 3 columns
    'columns_tablet' => 2,    // Tablet: 2 columns
    'columns_mobile' => 1,    // Mobile: 1 column
)

array(
    'type' => '3|1,1|',       // Desktop pattern
    // Automatically adjusts for mobile
)

array(
    'row_height' => 200,           // Desktop height
    'row_height_tablet' => 150,    // Tablet height
    'row_height_mobile' => 100,    // Mobile height
)

array(
    'items_per_view' => 3,         // Desktop: 3 slides
    'items_per_view_tablet' => 2,  // Tablet: 2 slides
    'items_per_view_mobile' => 1,  // Mobile: 1 slide
)

// Located in: classes/class-settings.php:242
$default_breakpoints = Visual_Portfolio_Breakpoints::get_default_breakpoints();

// Settings fields use breakpoint values
array(
    'name'    => 'breakpoint_md',
    'label'   => esc_html__( 'Medium Breakpoint', 'visual-portfolio' ),
    'type'    => 'number',
    'default' => $default_breakpoints['md'],
)

// Check if mobile-friendly
if ( wp_is_mobile() ) {
    // Mobile-specific adjustments
}