Skip to content

Digital design system in Scania includes core setup, components, themes, demos

License

Notifications You must be signed in to change notification settings

Nicklas-ahlgren/sdds

 
 

Repository files navigation

Scania Digital Design System components and theme

https://digitaldesign.scania.com/

The design system supports the design and development of digital solutions at Scania. The purpose is to secure a coherent and premium brand and user experience across all of Scania's digital touchpoints.

Browser Support

  • Chrome
  • Firefox
  • Safari
  • Edge (chromium)

Getting started

You can use SDDS CSS custom properties to use the design tokens for colour, typography, spacing, and logotype. To have all CSS custom properties available, you need to install both compoonents and scania-theme. And then you need to include sdds-theme component in your application. Check instruction below on how to install components and scania-theme.

You can also install a standalone package for different part. These are available packages:

Package Name Description
@scania/components Scania reusable web components built with StencilJS
@scania/theme-light Scania default theming
@scania/typography Scania official typography styling package
@scania/colour Scania official colour scale package
@scania/grid Scania official grid package
@scania/icons Scania official pictograms & icons package

You can find everything in NPM

Demo

Check the working demo on this repository.

Migration

You can find out how to migrate by reading our MIGRATION.md file in this repository.

If you are still using older component while migrate and still need the old documentation you can visit these links

Contributing

This repository is a place for all Front End Developers to join the UI Developement at Scania. It is us together that develop and maintain this repository as well as the documentation. Check out our Contributing Guide and help us improving the design system technical solution!

About

Digital design system in Scania includes core setup, components, themes, demos

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • SCSS 39.1%
  • JavaScript 24.7%
  • TypeScript 20.4%
  • CSS 15.8%