@muhammedbilal/layout-css v1.8.0

Layout CSS Utilities

A lightweight and customizable utility-first CSS framework for spacing — built with SCSS.
Use intuitive class names like lp-l5, lm-y2, lp-a0 to apply layout padding and margin instantly.

🚀 Installation

npm install @muhammedbilal/layout-css

📦 Usage

In HTML

<link
  rel="stylesheet"
  href="node_modules/@muhammedbilal/layout-css/dist/layout.css"
/>

In SCSS

@import "@muhammedbilal/layout-css/dist/layout.css";

🧱 Class Naming Convention

Each class follows this pattern:

l[p/m]-[a/t/b/l/r/x/y][value]

Examples:

🔧 Customization

You can customize the $space-range in scss/_spacing.scss before building:

$space-range: 0, 2, 4, 8, 16, 32;

Then run:

npm run build

📁 Output

The built CSS is available at:

dist/layout.css

You can also generate a minified version if needed.

📃 License

MIT License — free to use and modify.

🤝 Contribute

Feel free to open issues, suggest new utilities, or submit pull requests!