-
Notifications
You must be signed in to change notification settings - Fork 223
Naming of Things
Viljami Salminen edited this page Nov 4, 2017
·
17 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:
- Multiword: Names should be most of the time multi-word, except for root App component: This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
- Meaningful: Not over specific, not overly abstract.
- Short: Maximum of 2 or 3 words.
- Pronounceable: We want to be able talk about them.
- 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-glyphThere 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-orspace-. If you have subcategories, include them in the naming as well and separate with hyphen, Example:color-primary-orcolor-secondary-. - Element, Pattern & Templates: Names don’t have a prefix, but should be multiword or otherwise compatible with existing and future HTML elements.
- Getting Started: How to install and run Vue Design System.
- Terminology: Introduction to the system concepts and its hierarchy.
- Naming of Things: Naming is hard, so it’s good to have clear guidelines.
- Directory Structure: What goes where and why.
-
Working with the System: Concrete examples on how to work with
Tokens,Elements,PatternsandTemplates. - Editing Living Documentation: How to customize the living system documentation.
- Spacing: A framework for creating a predictable and harmonious spacing.
- Component Status: Clear labels that reflect the state of completion.
- Component QA: How to review new components and keep the quality high.
- Contributing: A set of guidelines for contributing to the system.
- Code of Conduct: By participating you agree to abide by its terms.
- Frequently Asked Questions: How to use icons, how to use font-face, etc.
- Changelog: See releases pafge for the full changelog.