Skip to content

Commit 64d9f6f

Browse files
zahinafsarzahinafsar
committed
📝 Updated readme
1 parent 6add491 commit 64d9f6f

File tree

8 files changed

+168
-68
lines changed

8 files changed

+168
-68
lines changed

‎README.md

Lines changed: 58 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
## Ant Design CSS Utilities
2+
23
![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg) ![npm version](https://img.shields.io/npm/v/antd-css-utilities)
34

45
Basic CSS utilities for ant design. Ant design doesn't have its own CSS utility classes, so we are here to help you. You can easily integrate and start using this library with ant design as well as other frameworks you like.
@@ -10,7 +11,9 @@ $ npm install antd-css-utilities
1011
```
1112

1213
## Add Into Your Project
14+
1315
### React.js (index.js)
16+
1417
```js
1518
import React from 'react';
1619
import ReactDOM from 'react-dom';
@@ -27,76 +30,95 @@ ReactDOM.render(
2730
```
2831

2932
### Setup Intellisense
30-
- Install VSCode extension [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
33+
34+
- Install VSCode extension [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
3135
- Add this line in your `[PROJECT]/.vscode/settings.json` file
36+
3237
```json
3338
{
34-
"html-css-class-completion.includeGlobPattern": "node_modules/antd-css-utilities/utility.min.css"
39+
"html-css-class-completion.includeGlobPattern": "node_modules/antd-css-utilities/utility.min.css"
3540
}
3641
```
3742

38-
### If you already use [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
43+
### If you already use [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
44+
3945
- Add this line in your `[PROJECT]/.vscode/settings.json` file
46+
4047
```json
4148
{
42-
"html-css-class-completion.includeGlobPattern": "{[YOUR_PATTERN],node_modules/antd-css-utilities/utility.min.css}"
49+
"html-css-class-completion.includeGlobPattern": "{[YOUR_PATTERN],node_modules/antd-css-utilities/utility.min.css}"
4350
}
4451
```
4552

4653
## Margin & Padding
47-
Class Names | Meaning
48-
------------- | -------------
49-
ma | margin(x & y axis)
50-
mx | margin(x axis)
51-
my | margin(y axis)
52-
mt | margin-top
53-
ml | margin-left
54-
mr | margin-right
55-
mb | margin-bottom
56-
pa | padding(x & y axis)
57-
px | padding(x axis)
58-
py | padding(y axis)
59-
pt | padding-top
60-
pl | padding-left
61-
pr | padding-right
62-
pb | padding-bottom
54+
55+
| Class Names | Meaning |
56+
| ----------- | ------------------- |
57+
| ma | margin(x & y axis) |
58+
| mx | margin(x axis) |
59+
| my | margin(y axis) |
60+
| mt | margin-top |
61+
| ml | margin-left |
62+
| mr | margin-right |
63+
| mb | margin-bottom |
64+
| pa | padding(x & y axis) |
65+
| px | padding(x axis) |
66+
| py | padding(y axis) |
67+
| pt | padding-top |
68+
| pl | padding-left |
69+
| pr | padding-right |
70+
| pb | padding-bottom |
71+
6372
#### Example:
6473

6574
```html
66-
<div class="ma-10" >
67-
<div class="ma-auto">Hello World!</div>
75+
<div class="ma-10">
76+
<div class="ma-auto">Hello World!</div>
6877
</div>
6978
<!--value: 1-16 & auto -->
7079
```
80+
7181
## Other utility support. [See All](https://zahinafsar.github.io/antd-css-utilities/classes.txt)
7282

7383
- Flex
74-
- Justify
75-
- Align
76-
- Direction
77-
- Wrap
78-
- Grow
84+
- Flex
85+
- Justify
86+
- Align
87+
- Direction
88+
- Wrap
89+
- Grow
90+
- Gap
7991
- Float
8092
- Overflow
8193
- Position
94+
- Position
95+
- Top
96+
- Right
97+
- Bottom
98+
- Left
8299
- Display
100+
- Cursor
101+
- Height
102+
- Width
103+
- Text
83104

84105
## Responsiveness (Web First)
106+
85107
We have four responsive breakpoints `sm` `md` `lg` `xlg`
86108

87-
Device Width | Class Prefix
88-
------------- | -------------
89-
576px | sm
90-
768px | md
91-
992px | lg
92-
1200px | xlg
109+
| Device Width | Class Prefix |
110+
| ------------ | ------------ |
111+
| 576px | sm |
112+
| 768px | md |
113+
| 992px | lg |
114+
| 1200px | xlg |
93115

94116
#### Example:
95117

96118
```html
97-
<div class="sm-position-absolute" >
98-
<div class="d-none md-d-block">My device width is less than 768px</div>
99-
<div class="d-block md-d-none">My device width is more than 768px</div>
119+
<div class="sm-absolute">
120+
<div class="hidden md-visible">My device width is less than 768px</div>
121+
<div class="visible md-hidden">My device width is more than 768px</div>
100122
</div>
101123
```
102124

@@ -108,5 +130,4 @@ https://zahinafsar.github.io/antd-css-utilities/utility.min.css
108130

109131
[MIT](LICENSE)
110132

111-
112133
[npm-url]: https://npmjs.org/package/antd-css-utilities

‎classes.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
.gap-16
5858
.float-left
5959
.float-right
60+
.ma-auto
6061
.ma-0
6162
.mx-0
6263
.my-0
@@ -188,6 +189,7 @@
188189
.y-hidden
189190
.y-visible
190191
.y-scroll
192+
.pa-auto
191193
.pa-0
192194
.px-0
193195
.py-0

‎main.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,11 @@
295295
}
296296

297297

298+
.ma-auto {
299+
margin: auto;
300+
}
301+
302+
298303
.ma-0 {
299304
margin: 0px;
300305
}
@@ -950,6 +955,11 @@
950955
}
951956

952957

958+
.pa-auto {
959+
padding: auto;
960+
}
961+
962+
953963
.pa-0 {
954964
padding: 0px;
955965
}
@@ -2575,6 +2585,11 @@ max-width: 100%;
25752585
}
25762586

25772587

2588+
.sm-ma-auto {
2589+
margin: auto;
2590+
}
2591+
2592+
25782593
.sm-ma-0 {
25792594
margin: 0px;
25802595
}
@@ -3230,6 +3245,11 @@ max-width: 100%;
32303245
}
32313246

32323247

3248+
.sm-pa-auto {
3249+
padding: auto;
3250+
}
3251+
3252+
32333253
.sm-pa-0 {
32343254
padding: 0px;
32353255
}
@@ -4683,6 +4703,11 @@ max-width: 100%;
46834703
}
46844704

46854705

4706+
.md-ma-auto {
4707+
margin: auto;
4708+
}
4709+
4710+
46864711
.md-ma-0 {
46874712
margin: 0px;
46884713
}
@@ -5338,6 +5363,11 @@ max-width: 100%;
53385363
}
53395364

53405365

5366+
.md-pa-auto {
5367+
padding: auto;
5368+
}
5369+
5370+
53415371
.md-pa-0 {
53425372
padding: 0px;
53435373
}
@@ -6791,6 +6821,11 @@ max-width: 100%;
67916821
}
67926822

67936823

6824+
.lg-ma-auto {
6825+
margin: auto;
6826+
}
6827+
6828+
67946829
.lg-ma-0 {
67956830
margin: 0px;
67966831
}
@@ -7446,6 +7481,11 @@ max-width: 100%;
74467481
}
74477482

74487483

7484+
.lg-pa-auto {
7485+
padding: auto;
7486+
}
7487+
7488+
74497489
.lg-pa-0 {
74507490
padding: 0px;
74517491
}
@@ -8899,6 +8939,11 @@ max-width: 100%;
88998939
}
89008940

89018941

8942+
.xl-ma-auto {
8943+
margin: auto;
8944+
}
8945+
8946+
89028947
.xl-ma-0 {
89038948
margin: 0px;
89048949
}
@@ -9554,6 +9599,11 @@ max-width: 100%;
95549599
}
95559600

95569601

9602+
.xl-pa-auto {
9603+
padding: auto;
9604+
}
9605+
9606+
95579607
.xl-pa-0 {
95589608
padding: 0px;
95599609
}

‎package-lock.json

Lines changed: 31 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "antd-css-utilities",
3-
"version": "2.0.0",
3+
"version": "2.0.3",
44
"private": false,
55
"repository": {
66
"type": "git",
7-
"url": "https://github.com/Mdzahin/antd-utility-class",
7+
"url": "https://github.com/zahinafsar/antd-utility-class",
88
"directory": "packages/antd-css-utilities"
99
},
1010
"scripts": {
11-
"deploy": "git add . && git commit -m 'updated' && git push && npm publish",
11+
"deploy": "npm publish",
1212
"build": "node builder.js && sass --style=compressed main.scss utility.min.css",
1313
"dev": "node esbuild.js",
1414
"commit": "git add . && gitmoji -c"
@@ -22,7 +22,7 @@
2222
"ant design",
2323
"style"
2424
],
25-
"dependencies": {
25+
"devDependencies": {
2626
"@types/react": "^18.0.28",
2727
"@types/react-dom": "^18.0.11",
2828
"esbuild": "^0.17.11",
@@ -31,10 +31,8 @@
3131
"react": "^17.0.2",
3232
"react-dom": "^17.0.2",
3333
"sass": "^1.66.1",
34-
"typescript": "^5.0.2"
35-
},
36-
"devDependencies": {
37-
"antd-css-utilities": "^1.0.3",
34+
"typescript": "^5.0.2",
35+
"antd-css-utilities": "^2.0.0",
3836
"autoprefixer": "^10.4.14",
3937
"chrome-types": "^0.1.176",
4038
"postcss": "^8.4.21",

0 commit comments

Comments
 (0)