Concepts

Learn more about the intuitive concepts used throughout the UI 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: IContainer, IButton, INavbar, etc.
Clarity - Component names should clearly reflect parent-child component relationships: INav and INavItem.
Consistency - Component prop names should be reused as often as possible to promote consistency: color, size, disabled, etc.

Inkline uses RSCSS (Reasonable System for CSS Stylesheet Structure) principles as a base 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 class
.-fluid represents a variant class, specific to the component
._text:center represents a utility class

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 (_). When adding the ! suffix, helpers provide styles that are tagged with !important.

._margin:0 { margin: 0; }

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

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

Design Tokens

CSS Variables in Inkline have a consistent naming scheme that you can follow whenever you want to redesign a component.

Global Design Tokens use only single hyphens -, can be either standalone or composed, and are very intuitively named:

var(--padding); // var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left)
var(--color-primary) // var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) var(--color-primary-a)

var(--margin-top);
var(--font-weight-bold);

Component Design Tokens use the following naming convention:

var(--[component]--[variant]--[state]--[element]--[elementVariant]--[elementState]--[property])

var(--navbar--light--item--color);

var(--button--primary--disabled--background);