DocPage

The documentation page template: the site header, the area navigation, the content and the page index, ready. Whoever uses it only fills in the regions.

On this page

When to use

On every page of the Feitio documentation: foundations, development guides, components and templates.
On any documentation that follows Feitio, changing only what goes in the regions.

When not to use

On the site home page: it is a presentation, with no side navigation and no index.
On a product work screen: that is the AppShell.

The regions

The template only divides the page. What goes in each region comes in as a property; it builds the rest by itself.

Region	Takes	What for
`area`	`"design"`, `"dev"`, `"comp"`	The site area. Marks the current area in the header.
`sideNav`	the area navigation	The groups and pages of the area, with the current one marked. On the left on wide screens; in the Drawer on mobile.
`crumb`	short text	Where the page sits: the area and the group.
`title`	text	The page title, the only `h1`.
`lede`	one or two sentences	What it is, in one sentence, right below the title.
`children`	the sections	The content: sections with `h2` and, inside, `h3`, each with an `id`. The Anchor comes from them.
`toc`	`true` (default), `false`	Shows the Anchor. Turn it off only on short, single-section pages.

What comes built in

The site header: the areas, Search, language, day and night, and GitHub.
On mobile, the Drawer with all of that and the area navigation.
The Anchor, built from the h2 and h3 with an id: on the right on wide screens, in a closed "On this page" on mobile.
On wide screens, the navigation column runs down to the footer, with the thin line; the list stays pinned on screen and, when it does not fit, scrolls on its own with its own ScrollFade. The Anchor does the same, without the line.
The page ScrollFade, the BackToTop in the bottom right corner, and the footer.

Widths

Mobile: one column. The header hides when scrolling down and comes back when scrolling up.
From 64rem: the area navigation on the left, in a column that runs down to the footer, and the areas in the header.
From 80rem: the Anchor on the right.
Large screens: the whole stops at 90rem and stays centered; the content, at 46rem.

Content rules

A single h1, the title.
Every section starts with an h2 and has an id; subsections use h3, also with an id. Without an id, they stay out of the Anchor.
Examples go in an Example, with its code.
Nothing outside the regions: an extra bar in the header, a notice pinned to a corner.

Code

React

JSX

<DocPage
  area="comp"
  sideNav={componentsNav}
  crumb="Componentes, base"
  title="Button"
  lede="Um botão faz uma ação na tela onde está."
>
  <Section id="quando" title="Quando usar">…</Section>
  <Section id="exemplos" title="Exemplos">
    <Example id="ex-principal" title="Principal" code={primarySource}>
      <Button variant="primary">Salvar alterações</Button>
    </Example>
  </Section>
</DocPage>

The HTML it produces

HTML

<header class="site-header">…</header>          <!-- automático -->
<div class="site-body has-side has-toc">
  <aside class="site-side">                   <!-- a coluna, até o rodapé -->
    <div class="side-inner">…sideNav…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
  <main class="site-main" id="conteudo" tabindex="-1">
    <p class="crumb">…crumb…</p>
    <h1>…title…</h1>
    <p class="lede">…lede…</p>
    <details class="toc-mobile">…</details>    <!-- automático, dos h2 e h3 -->
    …children…
  </main>
  <aside class="site-toc">                    <!-- automático, dos h2 e h3 -->
    <div class="side-inner">…Anchor…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
</div>
<a class="feitio-button feitio-back-to-top" …>Topo</a>   <!-- automático -->
<span class="feitio-scroll-fade" aria-hidden="true"></span>   <!-- automático -->
<footer class="site-footer">…</footer>       <!-- automático -->

The Button page is a page built with this template.