Guía para desarrolladores

Oxygen nace para mejorar la forma en la que construimos productos digitales para la transición energética. Creando herramientas para tomar decisiones y resolviendo problemas de forma más eficiente. Aquí encontrarás los primeros pasos para construir el futuro de la energía.

RDS cuenta con librería core construida utilizando HTML, CSS (SCSS) y JavaScript nativo.

Partiendo de dicha librería y en función de las necesidades de los casos digitales, se irán construyendo distribuciones específicas para diferentes soluciones digitales, por ejemplo, para el framework Vue.

A continuación encuentras las instrucción básicas de instalación y uso de las librerías.


Librería RDS-Core

Introducción a la librería RDS-Core cuenta con librería core construida utilizando HTML, CSS (SCSS) y JavaScript nativo.

Instalación

Usando npm

$ npm install --save rds-core

o si prefieres yarn

$ yarn add rds-core

¿Qué está incluido?


  rds-core/
  └── src
      └── styles
          └── rds-core.scss
          └── rds-reset.scss
          └── rds-variables.scss
          └── rds-foundations.scss
          └── rds-icons.scss
          └── rds-components.scss
      └── index.js

SCSS

La librería core utiliza SCSS para construir sus estilos. Cosas a tener en cuenta:

  • Autoprefixer: asegúrate de incluir en tu proceso de compilado autoprefixer para incluir los prefijos de los diferentes navegadores.

Tenemos varios ficheros .scss disponibles para importar.

@import 'node_modules/rds-core/src/styles/rds-core.scss';

Al importar este fichero estaremos importando todos los estilos de la librería core. Este fichero se encarga de importar el resto de paquetes que conforman los estilos. Cada uno de estos paquetes se podría importar por separado.

@import 'node_modules/rds-core/src/styles/rds-reset.scss';

Incluye la librería normalize y un reset propio para unificar aquellos estilos propios de los navegadores que no nos interesan. No es necesario importar si se importa rds-core.scss.

@import 'node_modules/rds-core/src/styles/rds-variables.scss';

Incluye todas las variables de scss que conforman los estilos y los mixins relacionados: colores, tipografías, grid, elevación y espaciado. No es necesario importar si se importa rds-core.scss.

@import 'node_modules/rds-core/src/styles/rds-foundations.scss';

Incluye todas las foundations definidas. Importa a su vez la librería de variables rds-variables.scss. Puedes ver cómo se usa cada una en su historia de storybook. No es necesario importar si se importa rds-core.scss.

@import 'node_modules/rds-core/src/styles/rds-icons.scss';

Incluye el listado de clases necesarias para usar los iconos de RDS como fuente iconográfica. Los ficheros de la fuente (.woff, .eot, .svg, .ttf) no están incluidos. Solicitar dichos ficheros al equipo de RDS. No es necesario importar si se importa rds-core.scss.

@import 'node_modules/rds-core/src/styles/rds-components.scss';

Incluye todos los componentes definidos. Importa a su vez la librería de variables rds-variables.scss. Puedes ver cómo se usa cada una en su historia de storybook. No es necesario importar si se importa rds-core.scss.

JavaScript

Algunos componentes de la librería core dependen de funciones JavaScript para un correcto funcionamiento. Cosas a tener en cuenta:

  • ES6 modules: la librería está construida utilizando el estándar de módulos de JavaScript. Si necesitas dar soporte a navegadores como IE11, asegúrate de incluir en tu proceso de compilado herramientas que transpilen y den soporte, como Babel.

Todos los componentes son exportados desde un único punto. Cada componente se importará por separado de esta forma:

import { Accordion, Lightbox, Tooltip } from 'rds-core'

Una vez importados, para inicializar cada componente ejecutaremos su método init. Ejemplo:

Accordion.init()
Lightbox.init()
Tooltip.init()

Recursos

Descarga y accede a todos los materiales que necesitas para trabajar con el sistema de diseño.

Componentes

Conoce las unidades mínimas para construir productos digitales en Repsol.

Foundations

Los estilos y cualidades básicas que los productos digitales de Repsol deben compartir.