Elentra JS Documentation
2.0
2.0
  • Introduction
  • Why Elentra JS 2.0?
    • Dedicated Repository
    • TypeScript
    • Class-Based Components
    • Vue Standard Routing
    • Organizational Theming
    • Yarn Package Manager
  • Developers
    • Getting Started
    • Setup Guide
      • Install Requirements
      • Clone the Repository
      • Environment Variables
      • Install Dependencies
      • Serve Dev Mode
  • Design System
    • Overview
    • Component Library
      • Directory Structure
      • Components
    • Style Library
      • Directory Structure
      • How it Works
        • Variables
        • Mixins
        • Utility Classes
        • Elements
        • Legacy Styles
        • Shim
    • Taxonomy
      • UI Taxonomy
      • UX Taxonomy
      • Variable & Utility Class Naming Convention
Powered by GitBook
On this page
  1. Design System
  2. Style Library

How it Works

PreviousDirectory StructureNextVariables

Last updated 5 years ago

Style Library Contents

Everything contained in the is loaded into Elentra JS with the inclusion of the root SCSS file, app.scss. Every file contained in the Style Library is classified as a SCSS "partial" (indicated by the prefixed underscore in the filename), with the only exception being app.scss.

app.scss is very sparse by design, simply importing each of the other adjacent partials (also located in the root /styles directory). Each of these subsequently include their own relevant SCSS partials located deeper in the library's hierarchy. Each subsection of How it Works provides greater detail on a specific partial and what that partial's responsibilities are in terms of what it includes.

Style Library hierarchy