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.
<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>