Nomenclature Predictably Misunderstood

    spacing

    0.3.0 • Public • Published

    spacing

    Opensource functional CSS spacing for modern web development

    setup

    npm install spacing
    

    import whichever file(s) meets your needs

    @import "node_modules/spacing/main";

    classes

    Classes are listed in order from least to most precendence.

    padding

    • .p0
    • .p1
    • .p2
    • .p3
    • .p4

    padding-top

    • .pt0
    • .pt1
    • .pt2
    • .pt3
    • .pt4

    padding-left

    • .pl0
    • .pl1
    • .pl2
    • .pl3
    • .pl4

    padding-right

    • .pr0
    • .pr1
    • .pr2
    • .pr3
    • .pr4

    padding-bottom

    • .pb0
    • .pb1
    • .pb2
    • .pb3
    • .pb4

    margin

    • .-m2
    • .-m1
    • .m0
    • .m1
    • .m2
    • .m3
    • .m4
    • .m-auto

    margin-top

    • .mt0
    • .mt1
    • .mt2
    • .mt3
    • .mt4
    • .mt-auto

    margin-left

    • .ml0
    • .ml1
    • .ml2
    • .ml3
    • .ml4
    • .ml-auto

    margin-right

    • .mr0
    • .mr1
    • .mr2
    • .mr3
    • .mr4
    • .mr-auto

    margin-bottom

    • .mb0
    • .mb1
    • .mb2
    • .mb3
    • .mb4
    • .mb-auto

    :first-child

    • .mt0-first
    • .ml0-first
    • .mr0-first
    • .mb0-first

    :last-child

    • .mt0-last
    • .ml0-last
    • .mr0-last
    • .mb0-last

    data-spacing

    Alternative to classes you can also space via [data-spacing] with value(s) being any of the classes.

    <p data-spacing="p1 m0 mb2">

    All [data-spacing] selectors come after the classes in the cascade.

    scaling

    spacing variables default to rem and therefore can be scaled responsively with the rem size

    :root {
      font-size: 1em;
      font-size: calc(.9em + .5vw + .5vh);
    }

    in CSS4 you could scale via media queries

    :root {
      --space-1: .5rem;
      --space-2: 1rem;
      --space-3: 1.5rem;
      --space-4: 3rem;
    }
     
    @media (min-width: 30em) and (min-height: 20em) {
      :root {
        --space-1: .5rem;
        --space-2: 1rem;
        --space-3: 2rem;
        --space-4: 4rem;
      }
    }

    files

    Install

    npm i spacing

    DownloadsWeekly Downloads

    12

    Version

    0.3.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • avatar