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.

Yarn

yarn add energy-foundations

NPM

npm i energy-foundations

Import and use

CSS You may import the compiled CSS sheet. If you are going to use other energy libraries, this line must be above all the others.

<style lang="scss" src="./energy-foundations/dist/style.css"></style>

SCSS These different exports are generated for different use cases:

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

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

Classes To do this, the former should be imported only once, by adding a stylesheet that imports style.css in our project root, like this:

@import 'energy-foundations/dist/style.css';

and then load it in App.vue's style section as global styling:

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

Mixins and variables We recommend creating another stylesheet named basic.scss in our project root where we then import the following:

@import 'energy-foundations/dist/rds-variables';

This in turn should be imported in our vite.config.ts file within the defineConfig function object parameter:

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

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: [".."]
  }
}