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

$ npm install antd-css-utilities

Add Into Your Project

React.js (index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
++ import 'antd-css-utilities/utility.min.css'

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

Setup Intellisense

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

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

If you already use IntelliSense for CSS class names in HTML

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

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

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:

<div class="ma-10">
  <div class="ma-auto">Hello World!</div>
</div>
<!--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:

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

References

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

License

MIT