Neighborly Package Megalodon

    @citizensadvice/margins

    1.0.3 • Public • Published

    Margins npm (scoped)

    Defines the space outside the element.

    Abbreviations

    Abbr Value
    m margin
    t top
    r right
    mb bottom
    ml left
    mv vertical, top & bottom
    mh horizontal, left & right
    0 $spacing-0 (0rem, 0px)
    1 $spacing-1 (0.25rem, 4px)
    2 $spacing-2 (0.5rem, 8px)
    3 $spacing-3 (0.75rem, 12px)
    4 $spacing-4 (1rem, 16px)
    5 $spacing-5 (1.5rem, 24px)
    6 $spacing-6 (2rem, 32px)
    7 $spacing-7 (2.5rem, 40px)

    Examples

    Uniform margin

    <div class="m-0">Lorem ipsum</div>
    <div class="m-1">Lorem ipsum</div>
    <div class="m-2">Lorem ipsum</div>
    <div class="m-3">Lorem ipsum</div>
    <div class="m-4">Lorem ipsum</div>
    <div class="m-5">Lorem ipsum</div>
    <div class="m-6">Lorem ipsum</div>
    <div class="m-7">Lorem ipsum</div>
    
    // This will give a margin of x to all sides.

    Directional margin

    <div class="mt-4">Lorem ipsum</div>
    // This will give a margin-top of 16px.
    
    <div class="mr-3">Lorem ipsum</div>
    // This will give a margin-right of 12px.
    
    <div class="mb-5">Lorem ipsum</div>
    // This will give a margin-bottom of 24px
    
    <div class="ml-7">Lorem ipsum</div>
    // This will give a margin-left of 40px.

    Responsive margin classes

    To apply specific classes at set screen widths, use the following classes:

    Abbr Value
    ns $breakpoint-ns (min-width: 48rem)
    m $breakpoint-m (min-width: 48rem, max-width: 64rem)
    l $breakpoint-l (min-width: 64rem)
    <div class="ml-7-l ml-5-ns ml-3">Lorem ipsum</div>
    
    // This will give a margin-left of 40px on device widths over 64rem, 24px on devices with a width of
    48rem and finally 12px on devices with a width up to 48rem.

    Installation

    $ npm install @citizensadvice/margins

    now import into your stylesheet...

    @import '@citizensadvice/margins/index.scss';

    You can make use of the unpkg service, try adding the link below to the head of your HTML file.

    <link src="https://unpkg.com/@citizensadvice/margins@latest/build/margins.css" />

    Keywords

    none

    Install

    npm i @citizensadvice/margins

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    43.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • marianayovcheva
    • mrdaniellewis
    • davidsauntson
    • davidrapson