Skip to content

Commit 5d2d7b5

Browse files
authored
docs(styles): include npm package info (#6221)
1 parent 06909f4 commit 5d2d7b5

File tree

1 file changed

+64
-0
lines changed

1 file changed

+64
-0
lines changed

README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,76 @@ Available values for `themeName` are
8080
The compiled CSS for the full library and modules, e.g., core, layout, etc., are distributed
8181
via [NPM](https://www.npmjs.com/package/fundamental-styles).
8282

83+
#### Installation
84+
8385
````
8486
npm install fundamental-styles --save
8587
````
8688

89+
Or with yarn:
90+
91+
````
92+
yarn add fundamental-styles
93+
````
94+
8795
> NOTE: We only distribute compiled CSS for each component, not the full project or HTML for specific components.
8896
97+
#### Usage
98+
99+
After installation, you can import the styles into your project in several ways:
100+
101+
**Option 1: Import in JavaScript/TypeScript**
102+
103+
If you're using a bundler like Webpack, Vite, or Rollup, you can import the CSS directly in your JavaScript/TypeScript files:
104+
105+
```javascript
106+
// Import all styles
107+
import 'fundamental-styles/dist/fundamental-styles.css';
108+
```
109+
110+
**Option 2: Import in SCSS/CSS files**
111+
112+
You can also import in your main stylesheet:
113+
114+
```scss
115+
/* Import all styles */
116+
@import 'fundamental-styles/dist/fundamental-styles.css';
117+
```
118+
119+
**Option 3: Import specific components**
120+
121+
To reduce bundle size, you can import only the components you need:
122+
123+
```javascript
124+
// Import specific component styles
125+
import 'fundamental-styles/dist/icon.css';
126+
import 'fundamental-styles/dist/button.css';
127+
import 'fundamental-styles/dist/input.css';
128+
```
129+
130+
#### Theming with NPM
131+
132+
When using the NPM package, you'll also need to install the theming base content:
133+
134+
```bash
135+
npm install @sap-theming/theming-base-content --save
136+
```
137+
138+
Then import the theme CSS files:
139+
140+
```javascript
141+
// Import theme base variables
142+
import '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css';
143+
144+
// Import fundamental-styles theme customizations
145+
import 'fundamental-styles/dist/theming/sap_horizon.css';
146+
147+
// Import fundamental-styles components
148+
import 'fundamental-styles/dist/fundamental-styles.css';
149+
```
150+
151+
Available theme names: `sap_horizon`, `sap_horizon_dark`, `sap_horizon_hcb`, `sap_horizon_hcw`, `sap_horizon_set`, `sap_fiori_3`, `sap_fiori_3_dark`, `sap_fiori_3_hcb`, `sap_fiori_3_hcw`, `sap_fiori_3_set`, `sap_fiori_3_light_dark`
152+
89153

90154
### Icons
91155

0 commit comments

Comments
 (0)