LoopOS UI v1.1.26.2

Previews

No matching results.

Overview

This documentation is intended to provide a comprehensive overview of the ViewComponents available in the LoopOS Design System. It is a collection of previews for each component, along with usage guidelines and code snippets. It's developer oriented.

Motivation

This Design System was created to provide a consistent and easy way to build user interfaces for LoopOS applications. It's based on the principles of atomic design, which means that each component is a building block that can be combined to create more complex components. The main movation can be summarized as:

"Promote consistency between applications, facilitate design, UX and DX"

List of useful links and information:

  • Lookbook: This is the Design System entry point, where you can see the design system components list, their collection of previews for ViewComponents, alongside their documentation.
  • Figma. This is where the design system is maintained and updated. You can find the latest design files here.

Architecture

The LoopOS Design System is to be used by all rails apps, effectively replacing the old react DS. While in the process of migrations the LoopOS Design System will use the DS as a dependency. A diagram to better visualize is displayed below:

Architecture

Technologies used

This Design System / lightweight backend framework was made to be used with Ruby on Rails applications. It uses the following technologies:

  • ViewComponent - A Ruby gem that makes it easy to create reusable, testable, and encapsulated view components in Rails.
  • TailwindCSS - A utility-first CSS framework for rapidly building custom designs.
  • CSS - The standard styling language for web pages, used for component styling.
  • Hotwire - A set of technologies that allows you to build modern web applications without using much JavaScript. "HTML over the wire" approach.
    • Stimulus - A JavaScript framework for the HTML you already have.
    • Turbo - It's a set of technologies that allows you to build modern web applications without using much JavaScript.

It's highly recommended to have a basic understanding of these technologies to use and develop components in the LoopOS Design System.

You can start by reading the short presentation about the LoopOS Design System.