oik_rwd_adjusted_max_width_for_context() – Return the max-width in pixels taking into account the context

Description

Return the max-width in pixels taking into account the context

I started writing these comments then realised it would be just as easy to get the user to type in a single number rather than mess about with calculations. Here's some documentation explaining what would have needed to have been done… The RWD classes are intended for use within the main content which may be next to some sidebars and then further padded out by left and right margins. +——–+———————————+——–+

+——–+———————–+———+——–+ So the CSS we might have in the stylesheet is body { width: 80%; margin: 0 auto; } sidebar { width: 30%; }

left	body	right
+———————–+———+
main content	sidebar
breakpoint

The "breakpoint" is the minimum width we allow the main content to reduce to before we start applying media query logic to adjust the div widths, padding and margins As you can see this figure is nowhere near the max-width. We have to calculate what this max-width would be given the constraints:

• breakpoint – min width in pixels before the main content breaks
• sidebar – %age to allow for sidebars
• margins – %age to allow for margins

Calculation: body_width = breakpoint + ( breakpoint x ( sidebar% / ( 100 – sidebar% ) ) ) max_width = body_width + ( body_width x ( margins% / ( 100 – margins% ) ) )

Usage

oik_rwd_adjusted_max_width_for_context();

Parameters

Returns

void

Source

File name: oik-rwd/shortcodes/oik-rwd.php
Lines:

function oik_rwd_adjusted_max_width_for_context( ) {
  static $max_width;
  if ( is_null( $max_width ) ) {
    $max_width = bw_get_option( "max_width", "bw_rwd" );
    if ( $max_width && is_numeric( $max_width ) ) {
      // Good - we'll use this - let's hope it's greater than or equal to 768.  
    } else {
      $max_width = 768;
    }    
  }
  return( $max_width );
}
 

 View on GitHub