Concepts

Learn more about the concepts used throughout the UI Components library and Inkline’s design decisions.

Component Naming Convention

When designing Inkline, component names and prop names were chosen to be as intuitive as possible. The naming rules are:

  • Namespacing

    Component names should be namespaced using the i- prefix to be easily recognizable and to avoid conflicts.

  • Simplicity

    Component names should be simple words where possible in order for them to be easy to remember: i-container, i-button, i-navbar, etc.

  • Clarity

    Component names should clearly reflect parent-child component relationships: i-nav and i-nav-item.

  • Consistency

    Component prop names should be reused as often as possible to promote consistency: color, size, value, etc.

Class Naming Convention

Inkline uses RSCSS (Reasonable System for CSS Stylesheet Structure) principles for naming classes, making them much easier to read and write. RSCSS is a simplified, more readable version of BEM.

The RSCSS naming convention encourages you to think in components and revolves around three core concepts: components, variants and utilities.

<div class="container -fluid _text:center">
  • .container represents a component
  • .-fluid represents a variant specific to the component
  • ._text:center represents an utility
Components

Components are standalone entities that are meaningful on their own. Each component should be aware of its own design only, and should be usable without a specific context unless it’s the only context they should be used in.

.navbar { /* ... */ }

.container { /* ... */ }

.button { /* ... */ }
Variants

Components may have variants that modify their appearance or behaviour. Class names for variants will be prefixed by a dash (-).

.button {
    &.-primary { /* ... */ }
    &.-disabled { /* ... */ }
    &.-block { /* ... */ }
}
Utilities

Utility classes are general-purpose helper classes meant to override values. Class names for helpers will be prefixed by an underscore (_). Helpers typically provide styles that are tagged with !important.

._margin:0 { margin: 0 !important; }

._text:center { text-align: center !important; }

._display:flex { display: flex !important; }
CSS Variables

CSS Variables in Inkline have levels of abstraction. This way we’re able to override the design of the application and the components both globally and individually.

We’ve designed CSS Variables in Inkline to fall under one of two categories:

  • Global CSS Variables

    Global variables are prefixed with --.

    var(--padding-top);
    var(--padding-right);
    var(--padding-bottom);
    var(--padding-left);
    
  • Local CSS Variables

    Local variables are prefixed with ----.

    var(----color);
    var(----color--hover);
    var(----link--color--hover);
    var(----header--link--color--hover);
    

Read more about the Design System.