export const responsiveWebDesignAndBreakpoints = `
<h1>NAMING BREAKPOINTS</h1>
<p style="width:70%;">
    I think it is safe to say that media queries should not be tied to specific devices. For
    instance, this is definitely a bad idea to try targeting iPads or Blackberry phones specifically. Media queries
    should take care of a range of screen sizes, until the design breaks and the next media query takes over.
</p>
<p style="width:70%;">
    For the same reasons, breakpoints should not be named after devices but something more general.
    Especially since some phones are now bigger than tablets, some tablets bigger than some tiny screen computers, and
    so on…
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Yep
$breakpoints: (
  'medium': (min-width: 800px),
  'large': (min-width: 1000px),
  'huge': (min-width: 1200px),
);

// Nope
$breakpoints: (
  'tablet': (min-width: 800px),
  'computer': (min-width: 1000px),
  'tv': (min-width: 1200px),
);
    </pre>
</div>

<p style="width:70%;">At this point, any naming convention that makes crystal clear that a design is not intimately
    tied to a specific device type will do the trick, as long as it gives a sense of magnitude.</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
$breakpoints: (
    'seed': (min-width: 800px),
    'sprout': (min-width: 1000px),
    'plant': (min-width: 1200px),
  );
    </pre>
</div>`;
