export const componentsStructure = `
<h1>COMPONENTS STRUCTURE</h1>
<p style="width:70%;">
    Ideally, components should exist in their own Sass partial (within the components/ folder, as is
    described in the 7-1 pattern), such as components/_button.scss. The styles described in each component file should
    only be concerned with:
</p>
<ul>
    <li>The style of the component itself.</li>
    <li>The style of the component’s variants, modifiers, and/or states.</li>
    <li>The styles of the component’s descendents (i.e. children), if necessary.</li>
</ul>
<p style="width:70%;">
    If you want your components to be able to be themed externally (e.g. from a theme inside the
    themes/ folder), limit the declarations to only structural styles, such as dimensions (width/height), padding,
    margins, alignment, etc. Exclude styles such as colors, shadows, font rules, background rules, etc.
</p>
<p style="width:70%;">
    A component partial can include component-specific variables, placeholders, and even mixins and
    functions. Keep in mind, though, that you should avoid referencing (i.e. @import-ing) component files from other
    component files, as this can make your project’s dependency graph an unmaintainable tangled mess.
</p>
<p style="width:70%;">
    Here is an example of a button component partial:
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Button-specific variables
$button-color: $secondary-color;

// … include any button-specific:
// - mixins
// - placeholders
// - functions

/**
 * Buttons
 */
.button {{'{'}}
  @include vertical-rhythm;
  display: block;
  padding: 1rem;
  color: $button-color;
  // … etc.

  /**
   * Inlined buttons on large screens
   */
  @include respond-to('medium') {{'{'}}
    display: inline-block;
  {{'}'}}
{{'}'}}

/**
 * Icons within buttons
 */
.button > svg {{'{'}}
  fill: currentcolor;
  // … etc.
{{'}'}}

/**
 * Inline button
 */
.button--inline {{'{'}}
  display: inline-block;
{{'}'}}
    </pre>
</div>
`;
