Developers

Usage of this platform

This platform is meant to be used as a reference for styling and as a foundation for the npm-package called vf-dds-vanilla. It uses a technology called CodeSandbox as a tool for a visual representation and some code attached as a simple example.

Code base and version control

Our repository is hosted on Bitbucket and split into two parts, the site and the npm package. The npm package is hosted on npm, here. The package will follow the rules of semver.

Quick start

The DDS provides a reusable HTML, CSS and JavaScript-library, for use with HTML and vanilla JavaScript. The project is created using some utilities like SCSS and webpack, but that should not have any effect on the end product. The library enables developers to use mark-up, styles behaviour supplied by us.

Installation

  • Install using yarn yarn add @vf-dds/vf-dds-vanilla
  • Install using yarn npm install @vf-dds/vf-dds-vanilla

CSS

CSS is divided at component level (i.e. buttons), category level (i.e. selection), at at a global level. Paste links similar to these to access the styles.

<link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/component-css/buttons.css' /><link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/component-css/buttons.css' /><link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/category-css/selection.css' /<link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/category-css/indicators.css' /><link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/style.css' />

Alternate imports

If you instead would like to import the styling via JavaScript you can write imports that look like:

import '@vf-dds/vf-dds-vanilla/src/style/component-css/buttons.css

or if you want to import the SCSS-files directly, you would write something like:

import '@vf-dds/vf-dds-vanilla/src/components/style/selection/buttons.scss'

JavaScript

The JavaScript supplied to this library is divided at a component level, and at a global level. Same as with the CSS you can import in your HTML or directly in your own js-file. Be aware that all of the components are written with specific class-names or ids in mind, so pay close attention to that when using them.

HTML examples<script src='node_modules/@vf-dds/vf-dds-vanilla/src/components/selection/standard-dropdown.js>JS examplesimport '@vf-dds/vf-dds-vanilla/src/components/standard-dropdown.js'

HTML Starter Template


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/component-css/buttons.css' />
    <link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/category-css/selection.css' />
    <link rel='stylesheet' href='node_modules/@vf-dds/vf-dds-vanilla/src/style/category-css/indicators.css' />

    <title>Vattenfall Design System Boilerplate!</title>
  </head>
  <body>
    <h1>I'm using Vattenfall Design System!</h1>

    <script src='node_modules/@vf-dds/vf-dds-vanilla/src/components/selection/standard-dropdown.js'></script>
    <!-- Optional JavaScript -->
  </body>
</html>