export const breakpointManager = `
<h1>BREAKPOINT MANAGER</h1>
<p style="width:70%;">
    Once you have named your breakpoints the way you want, you need a way to use them in actual media
    queries. There are plenty of ways to do so but I must say I am a big fan of the breakpoint map read by a getter
    function. This system is both simple and efficient.
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
/// Responsive breakpoint manager
/// @access public
/// @param {{'{'}}String{{'} '}}$breakpoint - Breakpoint
/// @requires $breakpoints
@mixin respond-to($breakpoint) {{'{'}}
  $raw-query: map-get($breakpoints, $breakpoint);

  @if $raw-query {{'{'}}
    $query: if(
      type-of($raw-query) == 'string',
      unquote($raw-query),
      inspect($raw-query)
    );

    @media #{{'{'}}$query{{'} '}}{{'{'}}
      @content;
    }
  {{'} '}}@else {{'{'}}
    @error 'No value found for \`#{{'{'}}$breakpoint{{'}'}}\`'. '
         + 'Please make sure it is defined in '$breakpoints' map.';
  {{'} '}}
{{'} '}}
    </pre>
</div>
`;
