Introduction

This is css style library based on the foundations of Repsol's newest design system: Energy. It includes every basic element needed to style basic web products, such as colour tokens, sizes, spacing, etc.

It can be used on static websites, SPAs or even AEM products. It is the basic pillar supports energy-components.

Getting Started

This library requires Vue.js v3.2 or higher.

Recomendación: Se recomienda instalar las últimas versiones de SASS y Vite para que todo funcione correctamente sin warnings.

Yarn

yarn add energy-foundations

NPM

npm i energy-foundations

Import and use

CSS (recomendado) Importa el CSS compilado una sola vez al inicio de tu aplicación. Cuando uses otras librerías Energy, esta línea debe ir por encima de los estilos de componentes.

// main.ts
import 'energy-foundations/dist/style.css';

Sass (@use opcional) Entradas Sass disponibles para distintos casos:

• rds-reset.scss
• rds-variables.scss
• rds-foundations.scss
• global.scss (contiene los anteriores)
• style.scss (nuevo): entrada Sass "todo-en-uno" para emitir el CSS base de Foundations desde tu pipeline Sass.

Ejemplo de uso Sass global:

// src/styles/index.scss
@use 'energy-foundations/dist/style.scss';

Evita duplicar CSS: si usas @use '.../style.scss', no importes también energy-foundations/dist/style.css en main.ts.

Tokens y mixins:

@use 'energy-foundations/dist/rds-variables' as *;
@use 'energy-foundations/dist/mixins/typography' as typography;

Nota: style.scss no incorpora variables.css (custom properties). Si necesitas CSS variables precompiladas, usa la importación recomendada de CSS en main.ts.

Use To optimize load times in an SPA, we recommend separating files that contain classes from those that contain mixins and variables:

Clases (CSS base) Mantén el CSS base importado una sola vez (vía main.ts recomendado, o @use '.../style.scss' opcional) y carga tus hojas globales como prefieras.

Mixins y variables Recomendamos crear una hoja basic.scss en tu proyecto donde declares:

@forward 'energy-foundations/dist/rds-variables';
// .btn { color: $rds-color-primary; }

E inyectarla globalmente en Vite:

// vite.config.ts
css: {
  preprocessorOptions: {
    scss: {
      additionalData: "@use './src/styles/basic.scss' as *;"
    }
  }
}

One may also add the following code to the same vite.config.ts file to use styles from node_modules in their project:

server: {
  fs: {
    allow: [".."]
  }
}