myspacers

myspacers is a lightweight CSS utility package that provides margin and padding helper classes with a step increment of 5px, going up to 300px.

Installation

You can install myspacers via npm:

npm install myspacers

Usage

Simply include the CSS file in your project:

In HTML (via CDN or Local Import)

<link rel="stylesheet" href="node_modules/myspacers/dist/margin-padding.css">

Minfied version

<link rel="stylesheet" href="node_modules/myspacers/dist/margin-padding.min.css">

In a JavaScript/SCSS Project

@import 'myspacers/dist/margin-padding.css';

Available Classes

The classes are structured as follows:

• Margin:

  • .mtX → margin-top: Xpx;

  • .mbX → margin-bottom: Xpx;

  • .mlX → margin-left: Xpx;

  • .mrX → margin-right: Xpx;

  • .mX → margin: Xpx;

  • Symmetrical Horizontal and Vertical Margin:

    • .mxX → margin-left: Xpx; margin-right: Xpx;
    • .myX → margin-top: Xpx; margin-bottom: Xpx;

  • To center a block element use:

    • .mxAuto → margin-left: auto; margin-right:auto

• Padding:

  • .ptX → padding-top: Xpx;

  • .pbX → padding-bottom: Xpx;

  • .plX → padding-left: Xpx;

  • .prX → padding-right: Xpx;

  • .pX → padding: Xpx;

  • Symmetrical Horizontal and Vertical Padding:

    • .pxX → padding-left: Xpx; padding-right: Xpx;
    • .pyX → padding-top: Xpx; padding-bottom: Xpx;

Where X is a value in increments of 5px, ranging from 0px to 300px.

Example Usage

Desktop Spacing

<div class="mt60 mb30 ml15 pr20">
    This div has:
    - 60px margin-top  
    - 30px margin-bottom  
    - 15px margin-left  
    - 20px padding-right  
</div>

Mobile-Specific Spacing

For mobile-specific classes, prepend m to the class name:

<div class="mmt30 mmb20">
    This div has:
    - 30px margin-top on mobile  
    - 20px margin-bottom on mobile  
</div>

Mobile classes (mmtX, mmbX, mmlX, mmrX, mpX, etc.) use !important to ensure they override other styles.

License

This package is licensed under the MIT License.