Naming of Things

Viljami Salminen edited this page Sep 29, 2018 · 16 revisions

We use the names to communicate about Tokens, Elements, Patterns and Templates. Hence, they must be short, meaningful and pronounceable. Each name must be:

  • Verb Rather Than Noun: To understand the purpose, focus on what it does rather than what you think it is. This helps us broaden potential use cases as well as define its purpose more accurately.
  • Meaningful: Not over specific, not overly abstract.
  • Short: Maximum of 2 or 3 words.
  • Pronounceable: We want to be able talk about them.
  • Capitalized: We recommend naming components with a capital letter, so that they are not mistaken for an HTML tag.
  • Custom element spec compliant: Don’t use reserved names. Reserved names include:
 * annotation-xml      * color-profile
 * font-face           * font-face-src
 * font-face-uri       * font-face-format
 * font-face-name      * missing-glyph

Prefixing Names

There are a few rules around prefixing things, that you’ll want to follow to keep the system consistent:

  • Tokens: Token names always start with a category name and a hyphen. For example color- or space-. If you have subcategories, include them in the naming as well and separate with hyphen, Example: color-primary- or color-secondary-.
  • Element, Pattern & Templates: Names don’t have a prefix, but should be compatible with existing and future HTML elements and start with a capital letter.

Naming Sizes

Vue Design System uses the following convention:

  • Default: The default unit is always called medium (m).
  • Smaller than default: When you want to define a size that is smaller than medium it should be named either small (s), x-small (xs), xx-small (xxs) and so on.
  • Larger than default: When you want to define a size that is larger than medium we use large (l), x-large (xl), xx-large (xxl) and so on. A concrete example of this looks like:
size_xxl:
  value: "64px"
size_xl:
  value: "48px"
size_l:
  value: "24px"
size_m:
  value: "16px"
size_s:
  value: "13px"
size_xs:
  value: "11px"
size_xxs:
  value: "8px"

Naming Colors

Vue Design System uses the following convention:

  • Default: The default base color is always called color-{name}.
  • Darker than default: When you want to define a shade, use either color-{name}-dark, color-{name}-darker or color-{name}-darkest.
  • Lighter than default: When you want to define a tint, use color-{name}-light, color-{name}-lighter, color-{name}-lightest and so on. A concrete example of this looks like:
color_red_darker:
  value: "hsla(7, 83%, 33%, 1)"
color_red_dark:
  value: "hsla(7, 83%, 43%, 1)"
color_red:
  value: "hsla(7, 83%, 53%, 1)"
color_red_light:
  value: "hsla(7, 83%, 63%, 1)"
color_red_lighter:
  value: "hsla(7, 83%, 73%, 1)"

Read also Terminology section which is closely tied to “Naming of Things”.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.