Ant Design CSS Utilities

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.

Installation

1$ npm install antd-css-utilities

Add Into Your Project

React.js (index.js)

1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5++ import 'antd-css-utilities/utility.min.css'
6
7ReactDOM.render(
8    <React.StrictMode>
9        <App />
10    </React.StrictMode>,
11    document.getElementById('root')
12);

Setup Intellisense

• Install VSCode extension IntelliSense for CSS class names in HTML
• Add this line in your [PROJECT]/.vscode/settings.json file

1{
2  "html-css-class-completion.includeGlobPattern": "node_modules/antd-css-utilities/utility.min.css"
3}

If you already use IntelliSense for CSS class names in HTML

• Add this line in your [PROJECT]/.vscode/settings.json file

1{
2  "html-css-class-completion.includeGlobPattern": "{[YOUR_PATTERN],node_modules/antd-css-utilities/utility.min.css}"
3}

Margin & Padding

Class Names	Meaning
ma	margin(x & y axis)
mx	margin(x axis)
my	margin(y axis)
mt	margin-top
ml	margin-left
mr	margin-right
mb	margin-bottom
ms	margin-inline-start
me	margin-inline-end
pa	padding(x & y axis)
px	padding(x axis)
py	padding(y axis)
pt	padding-top
pl	padding-left
pr	padding-right
pb	padding-bottom
ps	padding-inline-start
pe	padding-inline-end

Example:

1<div class="ma-10">
2  <div class="ma-auto">Hello World!</div>
3</div>
4<!--value: 1-16 & auto -->

Other utility support. See All

• Flex
  • Flex
  • Justify
  • Align
  • Direction
  • Wrap
  • Grow
  • Gap
• Float
• Overflow
• Position
  • Position
  • Top
  • Right
  • Bottom
  • Left
• Display
• Cursor
• Height
• Width
• Text

Responsiveness (Web First)

We have four responsive breakpoints sm md lg xlg

Device Width	Class Prefix
576px	sm
768px	md
992px	lg
1200px	xlg

Example:

1<div class="sm-absolute">
2  <div class="hidden md-visible">My device width is less than 768px</div>
3  <div class="visible md-hidden">My device width is more than 768px</div>
4</div>

References

https://zahinafsar.github.io/antd-css-utilities/utility.min.css

License

MIT