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

Commit 097823d

Browse files
authored
Add more info, format & fix grammar
1 parent 7d89c15 commit 097823d

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

README.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# less-css-helper-library
22

3-
Helper [less/css library](https://github.com/code-collabo/less-css-helper-library) to be used in css and frontend projects, built as close as possible to css itself. Related css key value pairs often used together are stored in classes for ease, reuse and to give quick structuring.
3+
Helper [less/css library](https://github.com/code-collabo/less-css-helper-library) to be used in css, less and frontend projects, built as close as possible to css itself. Related css key value pairs often used together are stored in classes for ease, reuse and to give quick structuring.
44

55
## v1.0.0 styles & classes
66
v1.0.0 contains reset styles & some classes which you can apply on html elements:
@@ -27,8 +27,10 @@ v1.0.0 contains reset styles & some classes which you can apply on html elements
2727
`npm install less-css-helper-library`
2828

2929
#### Reference the library in your project with:
30-
* **For css project:** `./node_modules/less-css-helper-library/css/styles.css`
31-
* **For less project:** `node_modules/less-css-helper-library/less/styles.less`
30+
* ***For css project:*** `./node_modules/less-css-helper-library/css/styles.css`
31+
* ***For less project:*** `node_modules/less-css-helper-library/less/styles.less`
32+
33+
You can just reference both in your project if you use `less` & may need to switch to `css`. Make sure add it before your own css and/or less files.
3234

3335
#### Class names:
3436
From the class names, it's easy to tell what they do. See effect when added to an html element below:
@@ -38,12 +40,12 @@ From the class names, it's easy to tell what they do. See effect when added to a
3840
* `.flex center` sets display to flex, justify-content & align-items are set to center.
3941
* `.flex-j-center` only sets display to flex & justify-content to center.
4042
* `.flex-a-center` only sets display to flex & justify-content to center.
41-
* Class names with suffix `-auto` uses same styles as their look-alikes above, but make use of `margin: 0 auto;`. When applied on an element (with width changed to less than 100%), the element is horizontally centered.
42-
* `.b-container` uses same style as `block-auto`, but with width set & is responsive already. To be used on the body element or html element(s) acting as outermost containers.
43-
* **Exception:** `x-auto` sets overflow to auto.
43+
* Class names with ***suffix*** `-auto` uses same styles as their look-alikes above, but make use of `margin: 0 auto;`. When applied on an element (with width changed to less than 100%), the element is horizontally centered.
44+
* `.b-container` uses same style as `block-auto`, but with width set & is ***responsive*** already. To be used on the body element or html element(s) acting as outermost containers.
45+
* ***Exception:*** `x-auto` sets overflow to auto.
4446
* `.img-wrapper` has same qualities of `.flex-center`, but with overflow set to hidden - to be used on the parent of an `img` element.
4547
* `.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.
46-
* `.img-default` sets img max-width to 100% and height to auto - (should be) used on the img element whose parent uses `.img-wrapper` or `.img-wrapper-rounded`.
48+
* `.img-default` is same as our reset style 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.
4749

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

0 commit comments

Comments
 (0)