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.
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.
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.
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';
...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
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
Figma files:
To publish new package bump version and use npm publish.
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