Spica Design System - The Bootstrap Toolkit

Motivation

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

The Bootstrap Toolkit provides easy way of customizing the default Bootstrap 4 schema in order to apply Spica Design System to the web based apps.

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 Bootstrap Toolkit a basic knowledge of sass is required and NPM is required.

Installation

Add sds bootstrap toolkit package to your project

npm install @spicainternational/sds-bootstrap --save

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

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

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

Configuration

The Bootstrap toolkit provides two sass style sheets:

• bootstrap variables overrides
• deep impact bootstrap style sheets

The order of @import statements in project's styles list is important due to sass default variable values.

Example

@import 'sds_bootstrap_variables';
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import 'sds_bootstrap';
@import 'app-specific-components';
@import 'third-party-styles';
...

Bootstrap variables overrides

These are the basic overrides that modify the bootstrap design. Majority of the customization should are placed here.

Style sheets MUST be placed BEFORE the bootstrap files.

filename: sds_bootstrap_variables.scss

Deep impact

Only those modifications that cannot be done via variables are placed here.

Style sheets MUST be placed AFTER the bootstrap files.

filename: sds_bootstrap.scss

Resources

Figma files:

• Web design Presentation
• Web design Bootstrap 4

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