@bas-world/design-system NPM

BAS Design System: CSS

This design system is based on: https://xd.adobe.com/view/8dde20d7-0e85-4fad-bba2-8767e7f6faf4-d88d

Usage

This package comes with two stylesheets: bas-external and bas-internal. These have some small differences (e.g. font face), so be sure to select the right one depending on the type of the application. They are used for customer-facing and internal (e.g. backoffice) applications respectively.

Development

Create a {yourcomponent}.scss file in the src/components folder and put your SCSS in there. Also put your newly created file in the import list in src/base.scss in alphabetical order. Use custom command npm start after linking with the React project to compile after each change. (details below)

Sass

Install the package:

npm i @bas-world/design-system

Import it:

@import "@bas-world/design-system/src/bas-external";
// Or:
@import "@bas-world/design-system/src/bas-internal";

Plain HTML

Include a link to the stylesheet in the <head> of the document:

<link rel="stylesheet" href="bas-external.css" />
<!-- Or: -->
<link rel="stylesheet" href="bas-internal.css" />

Quick Start

# Install NPM dependencies
npm i

# Run the build in watch mode
npm start

# Format the code
npm run format

Note that you may need to link this package to other component projects during development. This can be done like so:

npm link

# In the other project:
npm link @bas-world/design-system

Versioning Strategy

The BAS Design System project follows semantic versioning for both this styling package and its complementary React component library. This section provides guidelines on versioning these packages and syncing them when necessary.

Semantic Versioning

Semantic versioning (SemVer) is a widely adopted versioning scheme that helps communicate the nature of changes in a software project. It consists of three parts: MAJOR.MINOR.PATCH.

MAJOR version is incremented when there are incompatible changes or major feature additions.
MINOR version is incremented when new features are added in a backward-compatible manner.
PATCH version is incremented for backward-compatible bug fixes or other minor changes.

Consistent versioning between the projects

To maintain clarity and ease of use for users, it is recommended to keep the version numbers of the styling package and component library in sync for minor releases. This ensures that users can easily identify which versions of the components and styles are compatible with each other.

Scenario 1: Adding components with styling changes

In cases where a new component is added to the library and there are corresponding changes required in the styling, the versioning should be synchronized. Here's an example:

React:

0.13.0 - Add A component
0.14.0 - Add B component with styling changes
0.15.0 - Add C component with styling changes

Style:

0.13.0 - Add A styling
0.14.0 - Update styling for B component
0.15.0 - Update styling for C component

By keeping the version numbers in sync, it is easy for users to identify which versions of the components and styles are compatible with each other.

Scenario 2: Adding components without styling changes

In cases where a new component is added to the library, but no changes to styling are required, the versioning should still be synchronized. Here's an example:

React: