|
7 | 7 | The [less-css-helper-library](https://github.com/code-collabo/less-css-helper-library) for css, less and frontend projects. Related (css) key value pairs often used together are stored in css classes for easy use, reuse and to help quickly structure your projects. Styles or classes do not reflect personal preference(s), ***built-in css styles*** are only made accessible in your projects just by adding a class to an html element.
|
8 | 8 |
|
9 | 9 |
|
10 |
| -## v1.0.0 styles & classes |
11 |
| -v1.0.0 contains some [reset styles](https://github.com/code-collabo/less-css-helper-library/blob/main/less/01-base/reset.less) and classes which you can apply on html elements. |
| 10 | +## Styles & classes |
| 11 | +The library provides some [reset styles](https://github.com/code-collabo/less-css-helper-library/blob/main/less/01-base/reset.less) and classes which you can apply on html elements. |
12 | 12 |
|
13 | 13 | #### [display-related](https://github.com/code-collabo/less-css-helper-library/blob/main/less/02-style/display.less) classes:
|
14 | 14 | * `.block`
|
@@ -37,14 +37,24 @@ v1.0.0 contains some [reset styles](https://github.com/code-collabo/less-css-hel
|
37 | 37 | * `.btn-danger`
|
38 | 38 |
|
39 | 39 | ## How to use
|
40 |
| -#### Install [package from npm](https://www.npmjs.com/package/less-css-helper-library): |
41 |
| -`npm install less-css-helper-library` |
| 40 | +Install the npm package or use the cdn option. |
42 | 41 |
|
43 |
| -#### Reference the library in your project with: |
44 |
| -* ***For css project:*** `node_modules/less-css-helper-library/css/styles.css` |
45 |
| -* ***For less project:*** `node_modules/less-css-helper-library/less/styles.less` |
| 42 | +#### Install [npm package](https://www.npmjs.com/package/@code-collabo/less-css-helper-library): |
| 43 | +`npm i @code-collabo/less-css-helper-library` |
46 | 44 |
|
47 |
| -You can just ***reference both*** in your project if you use `less` & may need to switch to or mix with `css`. Make sure to add the reference(s) before that of your own css and/or less files. |
| 45 | +Reference the library in your project with: |
| 46 | +`node_modules/@code-collabo/less-css-helper-library/css/styles.css` - _For css project_. |
| 47 | + |
| 48 | +`node_modules/@code-collabo/less-css-helper-library/less/styles.less` - _For less project_. |
| 49 | + |
| 50 | +You can just ***reference both*** in case you need to switch from `css` to `less` & vice versa. Make sure to add the reference(s) before that of your own css and/or less files. |
| 51 | + |
| 52 | +If you are using less in an angular project for example, reference the one for less or both in the styles array in your angular.json file. You also need to import it at the top of your main .less file like so: |
| 53 | + |
| 54 | +`@import 'node_modules/@code-collabo/less-css-helper-library/less/styles.less';` |
| 55 | + |
| 56 | +#### Using CDN |
| 57 | +Add cdn content here once you have created & tested it. |
48 | 58 |
|
49 | 59 | #### Class names:
|
50 | 60 | From the class names, it's easy to tell what they do. See effect when added to an html element below:
|
|
0 commit comments