Spica Design System - The Core

Motivation

Spica Design system is strongly based on the Bootstrap 4 library of components (atoms and molecules).

The Spica Design System Core provides custom components that are not covered either by Bootstrap or the dev extreme tool kit.

Prerequisites

Projects must be based on the Bootstrap 4 and have sass processor configured. There are no restrictions on the js framework.

To use the SDS Core a basic knowledge of sass is required and NPM is required.

Installation

Add sds core package to your project

npm install @spicainternational/sds-core --save

It is recommended that you target latest minor version in the project's dependency section of the package.json.

"@spicainternational/sds-core":"~1.0.0"

Upgrade to new major release only after adapting to the version's breaking changes.

Configuration

Import SDS Core styles after the bootstrap.

Example

@import 'sds-bootstrap_variables';
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import 'sds-bootstrap';
@import 'sds-core';
@import 'app-specific-components';
@import 'third-party-styles';
...

Publish

To publish new package bump version and use npm publish.

Beta

It is crucial that we add beta.0 at the end of your version. The .0 indicates which beta version it is. When we publish a new fix as beta, we will increment the .0 to .1 and so on. Example: 5.20.0-beta.0

To publish the beta version just run the following command: npm publish --tag beta

Resources

Figma files:

• Web design Presentation
• Web design Bootstrap 4