Fullwidth pages

Hey, I came up with this way to create pages that use the fullwidth of the screen and not the controlled space by the .container div.

I was inspired (actually i just copied) by the conditional check made to display the sidebar, but added a new function to be in charge of setting either the .container or .container-fluid class, so as you made with the sidebar, you just add the conditional to make the page fullwidth.

function display_fullwidth() {
  static $display;

  if (!isset($display)) {
    $conditionalCheck = new ConditionalTagCheck(
      [
        'is_front_page',
        ['is_page_template', 'template-fullwidth.php']
      ]
    );

    $display = apply_filters('sage/display_fullwidth', $conditionalCheck->result);
  }
  if ($display) {
    return "container";
  } else {
    return "container-fluid";
  }
}

And dont forget to print the result into the wrap div inside the base.php like this:

<div class="wrap <?php echo Config\display_fullwidth(); ?>" role="document">

Would be cool to have this like a new feature on Sage.

5 Likes

Nice, this looks cool. I will give this a try, I’ve been doing something very similar but I like the way you used the conditional tag check. Since this is bootstrap specific I doubt something like this will be included in the sage core.

This is exactly what I was looking for! Thanks