SENSES Library

The foundation of every SENSES module. Also known as living style guide and component library.

Using the Library

Installation

In your project directory run:

npm i github:SensesProject/library

Use Styles

Import base style – You generally want to do that once at the root of your app

@import "library/src/style/base.scss";

Import variables and mixins – You generally want to import them wherever you need them, likely in all your components

@import "library/src/style/global.scss";

If you run into issues with font imports you might need to explicitly set the path to the font files before importing the base style

$font-prefix: "../../node_modules/library/src/assets/fonts";

Components

Import Components individually wherever you need them, e.g.

import SensesMenu from 'library/src/components/SensesMenu.vue'

Guides

Colors

Colors generally follow this naming convention $color-red. You can acces different shades of said color like getColor(red, 20). Refer to /style for available colors and shades

Tinting elements

`global.scss` provides a mixin to tint css attributes based on class names, particularly useful for visualisations. Use it like this:

@include tint(stroke, 50)

And it will be translated into this:

&.violet {
  stroke: getColor(violet, 50);
}
&.red {
  stroke: getColor(red, 50);
}
&.orange {
  stroke: getColor(orange, 50);
},
…

    

Glyphs

You can easily use glyphs like this <span class="glyph-toolkit"/> which wll be displayed as . Refer to /style for available glyphs and class names

Meta tags

You can use this helper component to create meta tags for your module, which you then can copy and paste

Meta tags for Nuxt.js projects

Add this to your nuxt.config.js

const { getHead } = require('library/src/assets/js/head.js')
…
head: getHead({
  title: 'Senses Toolkit',
  description: 'The Senses Toolkit offers a wide range of modules to help you understand and communicate climate change scenarios'
})
    

You can pass a object to the getHead function to overwrite the default settings

{
  title: 'Senses Project',
  description: 'The Senses Project make climate change scenarios more understandable through visualisation',
  type: 'website',
  card: 'summary'
}