Contributing

Avior grows the way it started: someone needs a part, writes it so others can tune it, and shares it.

Edit page

Principles

  • Every change is a change to the system. Could a site with completely different content use it?
  • A component changes its look through variables only. Nobody should need to edit it.
  • No CSS framework, grid library or component library inside. Avior is the library.
  • Read docs/decisions.md before deleting a rule that looks redundant.

Names

A helper is a short alternative to one property: aic, p-t-24. A component takes the word almost everyone already uses for it: card, tabs, accordion. A part is the component plus one word, written by nesting: card-head.

New names are agreed before they are used. Propose them in an issue, with a line on why each reads well to someone who has never seen Avior.

Write a component

A component is one file in src/styles/components/. Variables come first, each with !default and prefixed with the name. Colours come from the mode properties, so it works in light and dark without a second set of rules.

components/_card.sass
$card-padding: 24px !default
$card-radius: 12px !default

.card
  padding: $card-padding
  border: 1px solid var(--line)
  border-radius: $card-radius
  &-head
    margin-bottom: 16px
  &-foot
    border-top: 1px solid var(--line-soft)

Add it to custom.sass before the grid and the helpers, and give it a page in the docs: an example, the markup and the table of its variables.

Send a pull request

  1. Branch from main, one idea per branch.
  2. Run yarn build and make sure it passes.
  3. Check the page in light and dark mode, on a phone and on a desktop.
  4. Write the commit message in English, in the imperative mood.