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

Commit d71d6f3

Browse files
authored
Update readme description (rough changes)
1 parent f5a8a2b commit d71d6f3

File tree

1 file changed

+20
-11
lines changed

1 file changed

+20
-11
lines changed

README.md

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22

33
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.
44

5-
## How to use
6-
* Install: `npm install less-css-helper-library`
7-
* link to use in your project : `./node_modules/less-css-helper-library/css/styles.css` (for css project) or `node_modules/less-css-helper-library/less/styles.less` (for less project).
8-
95
## v1.0.0 styles & classes
106
v1.0.0 contains reset styles & some classes which you can apply on html elements:
117

@@ -26,12 +22,25 @@ v1.0.0 contains reset styles & some classes which you can apply on html elements
2622
* `.img-wrapper-rounded`
2723
* `.img-default`
2824

29-
#### Extra classes:
30-
* `.btn-default`
31-
* `.btn-default-2`
32-
* `.btn-danger`
33-
* `.error`
34-
* `.error-bold`
25+
## How to use
26+
#### Install:
27+
`npm install less-css-helper-library`
28+
29+
#### Reference the library in your project with:
30+
`./node_modules/less-css-helper-library/css/styles.css` (for css project) or `node_modules/less-css-helper-library/less/styles.less` (for less project).
31+
32+
#### Class names:
33+
From the class names, it's easy to tell what they do. See effect when added to an html element below:
34+
* `.block` only sets display to block.
35+
* `.grid` only sets display to grid.
36+
* `.flex` only sets display to flex.
37+
* `.flex center` sets display to flex, justify-content & align-items are set to center. `flex-j-center` only sets justify content to center
38+
39+
* Class names with suffix `-auto` make use of `margin: 0 auto;`. When applied on an element (with width changed to less than 100%), the element is horizontally centered.
40+
41+
42+
* `.b-container` uses same style as `block-auto` but with width set. Advicable to use this for the body element or html element(s) acting as outermost containers.
43+
44+
A few exceptions: except for `x-auto` which means
3545

36-
More detailed docs & tutorial comming soon.
3746

0 commit comments

Comments
 (0)