Introduction
Anatomy is built React first. If you’re using a different framework, you can still leverage our agnostic tokens.
If you are looking for information on AEM components, please refer to the AEM Core components style guide.
Installing tokens
Tokens are available through npm and CDN. We recommend npm over CDN because Sass is our recommended syntax.
Base font size
Make sure that your application’s base font size and typography is compatible with tokens. If they are compatible, remove all local copies of tokens. Check for availability and naming or value conflicts.
npm
Run npm install @boston-scientific/anatomy-tokens in your application.
Import the tokens into your Sass files — it should be the first thing that gets imported.
@import "~@boston-scientific/anatomy-tokens/lib/sass/tokens"
CDN
Link to the minified tokens file in the <head> of your application.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@boston-scientific/anatomy-tokens@4.0.2/lib/css/tokens.min.css"/>
Installing the component library
The component library is available on npm. It has a dependency on tokens.
npm
Run npm install @boston-scientific/anatomy-react in your application.
Import the component styles into your Sass files — it should be imported after tokens, but before the rest of the styles.
@import '~@boston-scientific/anatomy-react/lib/styles/library';
@boston-scientific/anatomy-react also has a peer dependency on react-router-dom. You do not need to use react routing, but you will need to at least install @types/react-router-dom for typing purposes.
Installing automated code quality tools and shared configs
ESLint, Prettier, and Stylelint configs are available on npm. The configs align with our front-end code standards.
npm
Run the following commands in your application:
npm install -D @boston-scientific/eslint-config
npm install -D @boston-scientific/prettier-config
npm install -D @boston-scientific/stylelint-config
Add the following properties to package.json:
"eslintConfig": {
"extends": [
"@boston-scientific/eslint-config"
]
},
"prettier": "@boston-scientific/prettier-config",
"stylelint": {
"extends": [
"@boston-scientific/stylelint-config"
]
}
If you need to extend the shared configs in your project, you can add custom rules to the property in the package.json.