component

b-atlas-component

This is example of component documentation. The first paragraph become the preamble for page. Try to provide that main idea of component in this lines.

Component page unlike regular guideline page consists of:

  • aside with includes, included in, local variables and imports stat
  • playground
  • footer with statistic and component structure

Playground

This is example of rendered component. Use html_example code "fence" to create playground.

Click on border of this box to expand the playground.

Just dummy example

Code in playground is live-editable. So any changes like another text, tags or classes could be previewed in real time. And if needed copied and pasted to content assets or so.

Playground also show area width on page resize so you get precise information of actual example width.

Regular code blocks

Also any css, html or js code could be added to description.

<div class="atlas-loader"></div>

For regular code blocks we have styles for "do"-"not do" blocks:

<i class="atlas-loader">Example of code "fences" usage</i>

Use div HTML-element so page will be better gziped:

<div class="atlas-loader"></div>

Use styles that not included in project css

To use styles that needed only for this component you have 2 options:

  1. define it in separate file that used only in atlas
  2. add style tag inside component documentation comment

See the b-atlas-component.scss source for example.

Component footer

In footer you get the information about:

  • Total declarations in component
  • Declaration size graph. Normal component have most of declaration in the beginning and very few at the end. If not component probably have deviated modifications.
  • Component structure that get you the idea of component organization without opening source file.
  • Possible bad practices count. Right now it Important, Vendor prefixes and floats. Hover on it to get additional info.
  • And basic properties count that sorted from most used to less used. This properties can provide you the idea about component profile. Container type of component should not have any styling properties, but only the metric and layouting.
  • If constants is declared than messages about constants consistency is showed.