rds-foundations: Style Library based on the Repsol Oxygen Design System

RDS foundations is a style library created for frontend webapp projects using scss (CSS). This library is based on the Oxygen Design System and provides a set of classes, mixins, variables and tokens that make it easier to build layouts based on Repsol corporative designs.

Features

• SCSS
• BEM

Quick start

You need a parent project at least based on html and css technologies, but it is also possible to install on projects based on several frontend frameworks.

1. Install via yarn

To install the library using yarn, run the following command:

yarn add rds-foundations

2. Import

You can import the complete set of generated classes that provides you all the styles neccesaries for the construction of your application.

In addition, the library offer several outputs files that make it easier to import only the required bundles.

This can be consulted in the documentation

CSS

Import the compiled file. If other libraries are to be used, import first in order

<style lang="scss" src="./rds-foundations/dist/index.scss"></style>

SCSS

outputs:

- rds-reset.scss
- rds-variables.scss
- rds-foundations.scss
- global.scss (contains all of the above)

Vue

On SPA, in order to optimize the bundle, it is recommendable to differenciate between the files that contains classes and the files that contains mixins or variables. The first one should / must be imported at the begining and at once. This is located on rds-foundations.scss.

It Is recommended to generate, in the root project, a file that makes the @import rds-foundations.scss and this, at the same time, be imported on App.vue

For example:

main.scss

@import 'rds-vue3/rds-foundations';
// otros estilos que generan clases aquí

App.vue

importante: no añadir 'scoped'

<style lang="scss" src="./styles/main.scss"></style>

Variables and mixins It is recommended to create a file at first, called basic.scssin the root project. It must be container a @import of variables and mixins of the library that are on rds-variables

basic.scss

@import 'rds-vue3/rds-variables';
// others vars or mixins here

After, on vite.config:

vite.config

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/basic.scss";`
      }
    }
  }

On this way, this styles will be accessible by all the components of the Vue project.