Inkline
Concepts
Learn more about the concepts used throughout the framework 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-navandi-nav-item.Consistency
Component prop names should be reused as often as possible to promote consistency:
variant,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">
.containerrepresents a component.-fluidrepresents a variant specific to the component._text-centerrepresents 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; }