Sinch Design System

Welcome to the Sinch Design System! This library contains SCSS files and will include JavaScript functionalities in the future. It is intended for internal use for Sinch company websites.

Introduction

The Sinch Design System provides a consistent and reusable set of styles and components for building Sinch company websites. It ensures a unified look and feel across all our web properties.

Installation

To install the SCSS package, you can use npm:

npm install @sinch-web/design-system

Usage

To use the SCSS files in your project, you have two options:

1. Include the entire library:

   Import the main SCSS file to include the entire design system:

   @import 'path/to/sinch-design-system/scss/design-system';

2. Include components or elements separately:

   Use the @use rule to import specific components or elements, and then call the mixins inside those files to include the CSS code. For example:

   @use 'path/to/sinch-design-system/scss/elements/buttons';
   @include buttons.btn();
   @include buttons.btn-primary();
   @include buttons.btn-lg();

   For the order of inclusion of the files and for a list of existing mixins, it is recommended to consult the scss/design-system.scss file.

   Additionally, you can call different mixins from the mixins folder. For example, to use breakpoint mixins:

   @use 'path/to/sinch-design-system/scss/mixins/breakpoints';
   @include breakpoints.media-breakpoint-up('lg') {
     // Your styles here
   }

   Some components may have parameters. Check each mixin's files to see what parameters you can use.

   The utilities can also all be loaded (without specifying any parameters), or you can specify which utility to load and what values ​​to use for it (via a parameter). See the demo.html file for more details.