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-systemImport 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 formatNote 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-systemVersioning 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:
- 0.13.0 - Add A component
- 0.14.0 - Add B component
- 0.15.0 - Add C component
Style:
- 0.13.0 - Add A styling
- 0.14.0 - No changes (released to maintain version parity)
- 0.15.0 - Add C styling (no styling changes for B)
This approach ensures that the version numbers between the component library and styling package remain consistent.