You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 19, 2021. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+9-7Lines changed: 9 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# less-css-helper-library
2
2
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.
4
4
5
5
## v1.0.0 styles & classes
6
6
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
****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.
32
34
33
35
#### Class names:
34
36
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
38
40
*`.flex center` sets display to flex, justify-content & align-items are set to center.
39
41
*`.flex-j-center` only sets display to flex & justify-content to center.
40
42
*`.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.
44
46
*`.img-wrapper` has same qualities of `.flex-center`, but with overflow set to hidden - to be used on the parent of an `img` element.
45
47
*`.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 imgmax-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.
47
49
48
50
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.
0 commit comments