UI Development Guideline

New UI Styling

SASS

VRMS using Sass for styling UI components.

Sass introduction

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

Learn more about Sass:

Sass documentation

Sass basics

Sass directories

Inside the client directory, you can find two sass folders:

The sass folder contains .scss files regarding the current UI.

The sass-new-folder contains .scss files regarding new UI. This guideline covers just new UI.

When creating new styles for a specific page or component inside the sass-new-ui folder, old styles need to be removed from the sass folder. When the sass folder will be empty we'll remove it and rename the sass-new-ui folder to sass.

Structure of sass-new-ui directory

Open folders inside sass-new-ui directory:

_main.scss

Individual sass files are imported to the _main.scss file, which is imported to the 'App.scss'. Styles are processed into a single stylesheet that defines all the styles used in the app.

resets

• _reset-local.scss removes built-in browser styling for specific elements

• _normalize.scss provides cross-browser consistency in the default styling of HTML elements

variables

This directory holds _colors, _typography, _elements .scss files

• _colors.scss stores color variables (based on the style guide) that should be used throughout styles

• _typography.scss stores typography variables (based on the style guide) that should be used throughout styles

• _elements.scss stores variables for elements (based on the style guide) that should be used throughout styles

core

This directory holds _fonts, _base, _mixins, _keyframes .scss files.

• _fonts.scss contains fonts with @font-face rules allow custom fonts to be loaded on the app

• _base.scss contains base global styles for all app

• _mixins.scss stores any mixins (style snippets) that will be used over and over

• _keyframes.scss stores any keyframes or animations for the app

elements

This directory contains any generic styles for elements in the app. Each file inside the directory should have selectors or classes, no ids for selectors.

• _buttons.scss stores any styles for buttons

components

This directory should contain an individual .scss file for each React component. At the moment this directory is empty.

pages

This directory should contain an individual .scss file for each page that requires custom styles. At the moment this directory is empty.

---

Please, use all superpowers of the sass preprocessor to optimize and organize styles for VRMS application.

Use variables, nested rules, mixins, inheritance, operators, etc.

To learn it check the sass-introduction section.