export const defualtFlag = `
<h1>!default FLAG</h1>
<p style="width:70%;">
    When building a library, a framework, a grid system or any piece of Sass that is intended to be
    distributed and used by external developers, all configuration variables should be defined with the !default flag
    so they can be overwritten.
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
$baseline: 1em !default;
    </pre>
</div>

<p style="width:70%;">
    Thanks to this, a developer can define their own $baseline variable before importing your library
    without seeing their value redefined.
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Developer’s own variable
$baseline: 2em;

// Your library declaring \`$baseline\`
@import 'your-library';

// $baseline == 2em;
    </pre>
</div>`;
