Skip to content
This repository was archived by the owner on Oct 19, 2021. It is now read-only.

Commit 7630774

Browse files
committed
Update readme with color-related classes
1 parent 4ce2987 commit 7630774

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

README.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ The [less-css-helper-library](https://github.com/code-collabo/less-css-helper-li
88

99

1010
## 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:
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.
1212

13+
#### [display-related](https://github.com/code-collabo/less-css-helper-library/blob/main/less/02-style/display.less) classes:
1314
* `.block`
1415
* `.block-auto`
1516
* `.b-container`
@@ -27,12 +28,19 @@ v1.0.0 contains some [reset styles](https://github.com/code-collabo/less-css-he
2728
* `.img-wrapper-rounded`
2829
* `.img-default`
2930

31+
#### [Color-related](https://github.com/code-collabo/less-css-helper-library/blob/main/less/02-style/color.less) classes:
32+
* `.error`
33+
* `.error-bold`
34+
* `.btn-default`
35+
* `.btn-transparent`
36+
* `.btn-danger`
37+
3038
## How to use
3139
#### Install [package from npm](https://www.npmjs.com/package/less-css-helper-library):
3240
`npm install less-css-helper-library`
3341

3442
#### Reference the library in your project with:
35-
* ***For css project:*** `./node_modules/less-css-helper-library/css/styles.css`
43+
* ***For css project:*** `node_modules/less-css-helper-library/css/styles.css`
3644
* ***For less project:*** `node_modules/less-css-helper-library/less/styles.less`
3745

3846
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.
@@ -53,6 +61,7 @@ From the class names, it's easy to tell what they do. See effect when added to a
5361
* `.img-wrapper` has same qualities of `.flex-center`, but with overflow set to hidden - to be used on the parent of an `img` element.
5462
* `.img-wrapper-rounded` has same qualities of `.img-wrapper` but with border-radius set to 50% - to be used on the parent of an `img` element.
5563
* `.img-default` is same as our [reset style](https://github.com/code-collabo/less-css-helper-library/blob/main/less/01-base/reset.less) for images. It sets an `img` element's max-width to 100% and height to auto. ***Note:*** An `img` element inside a parent that uses `.img-wrapper` or `.img-wrapper-rounded` must be set to the reset style, therefore always add the `.img-default` class to such img element.
64+
* Just apply color-related classes to text, background or buttons as the case maybe to see effect.
5665

5766
You have total control over what the width of the element (and margin in the case of `-auto`) should be. More details & tutorial coming soon on this topic.
5867

0 commit comments

Comments
 (0)