AlexMelvin
9/13/2019 - 8:54 AM

Bootstrap-like spacings

_spacings done right
content_copyfile_download
// MEDIA QUERY MANAGER
/*
[0 - 576]:    Phone (is where our normal styles apply)
576 - 900:    Tablet portrait (bp-sm)
900 - 1200:   Tablet landscape (bp-md)
1200 - 1500:  Desktop/Laptop (bp-lg)
1500px + :    Big desktop (bp-xl)

$breakpoint argument choices:
- bp-sm
- bp-md
- bp-lg
- bp-xl

1em = 16px
*/
@mixin respond($breakpoint) {
  @if $breakpoint == bp-sm {
    @media only screen and (min-width: 36em) {
      @content;
    } //576px
  } @else if $breakpoint == bp-md {
    @media only screen and (min-width: 56.25em) {
      @content;
    } //900px
  } @else if $breakpoint == bp-lg {
    @media only screen and (min-width: 75em) {
      @content;
    } //1200px
  } @else if $breakpoint == bp-xl {
    @media only screen and (min-width: 112.5em) {
      @content;
    } //1800
  } @else {
    @media only screen and (min-width: $breakpoint) {
      @content;
    } // custom
  }
}

$sizes-px: (
    '0': 0,
    '1': .4rem,
    '2': .8rem,
    '3': 1.2rem,
    '4': 1.6rem,
    '5': 2.0rem,
    '6': 2.4rem,
    '7': 2.8rem,
    '8': 3.2rem,
    '9': 3.6rem,
    '10': 4.0rem,
    '11': 4.4rem,
    '12': 4.8rem,
);

$breakpoint-list: (
    'bp-sm',
    'bp-md',
    'bp-lg',
    'bp-xl',
);

$breakpoint-shortcut-map: (
    'bp-sm': sm,
    'bp-md': md,
    'bp-lg': lg,
    'bp-xl': xl,
);

// POSITIVE SPACING
@for $i from 0 through 1 {

    $size: map-get($sizes-px, '#{$i}');

    // PADDING
    .p-#{$i} { padding: #{$size} !important; }
    .pt-#{$i} { padding-top: #{$size} !important; }
    .pr-#{$i} { padding-right: #{$size} !important; }
    .pb-#{$i} { padding-bottom: #{$size} !important; }
    .pl-#{$i} { padding-left: #{$size} !important; }
    .px-#{$i} {
        padding-left: #{$size} !important;
        padding-right: #{$size} !important;
    }
    .py-#{$i} {
        padding-top: #{$size} !important;
        padding-bottom: #{$size} !important;
    }

    // MARGINS
    .m-#{$i} { margin: #{$size} !important; }
    .mt-#{$i} { margin-top: #{$size} !important; }
    .mr-#{$i} { margin-right: #{$size} !important; }
    .mb-#{$i} { margin-bottom: #{$size} !important; }
    .ml-#{$i} { margin-left: #{$size} !important; }
    .mx-#{$i} {
        margin-left: #{$size} !important;
        margin-right: #{$size} !important;
    }
    .my-#{$i} {
        margin-top: #{$size} !important;
        margin-bottom: #{$size} !important;
    }

    @each $breakpoint-name in $breakpoint-list {
        @include respond($breakpoint-name) {

            $breakpoint-shortcut: map-get($breakpoint-shortcut-map, $breakpoint-name);

            // PADDING
            .p-#{$breakpoint-shortcut}-#{$i}  { padding: #{$size} !important; }
            .pt-#{$breakpoint-shortcut}-#{$i} { padding-top: #{$size} !important; }
            .pr-#{$breakpoint-shortcut}-#{$i} { padding-right: #{$size} !important; }
            .pb-#{$breakpoint-shortcut}-#{$i} { padding-bottom: #{$size} !important; }
            .pl-#{$breakpoint-shortcut}-#{$i} { padding-left: #{$size} !important; }
            .px-#{$breakpoint-shortcut}-#{$i} { padding-left: #{$size} !important; padding-right: #{$size} !important; }
            .py-#{$breakpoint-shortcut}-#{$i} { padding-top: #{$size} !important; padding-bottom: #{$size} !important; }

            // MARGINS
            .m-#{$breakpoint-shortcut}-#{$i}  { margin: #{$size} !important; }
            .mt-#{$breakpoint-shortcut}-#{$i} { margin-top: #{$size} !important; }
            .mr-#{$breakpoint-shortcut}-#{$i} { margin-right: #{$size} !important; }
            .mb-#{$breakpoint-shortcut}-#{$i} { margin-bottom: #{$size} !important; }
            .ml-#{$breakpoint-shortcut}-#{$i} { margin-left: #{$size} !important; }
            .mx-#{$breakpoint-shortcut}-#{$i} { margin-left: #{$size} !important; margin-right: #{$size} !important; }
            .my-#{$breakpoint-shortcut}-#{$i} { margin-top: #{$size} !important; margin-bottom: #{$size} !important; }
        }
    }
}

// NEGATIVE SPACING
@for $i from 1 through 2 {

    $size: map-get($sizes-px, '#{$i}');


    // PADDING
    .p-n#{$i} { padding: -#{$size} !important; }
    .pt-n#{$i} { padding-top: -#{$size} !important; }
    .pr-n#{$i} { padding-right: -#{$size} !important; }
    .pb-n#{$i} { padding-bottom: -#{$size} !important; }
    .pl-n#{$i} { padding-left: -#{$size} !important; }
    .px-n#{$i} {
        padding-left: -#{$size} !important;
        padding-right: -#{$size} !important;
    }
    .py-n#{$i} {
        padding-top: -#{$size} !important;
        padding-bottom: -#{$size} !important;
    }

    // MARGINS
    .m-n#{$i} { margin: -#{$size} !important; }
    .mt-n#{$i} { margin-top: -#{$size} !important; }
    .mr-n#{$i} { margin-right: -#{$size} !important; }
    .mb-n#{$i} { margin-bottom: -#{$size} !important; }
    .ml-n#{$i} { margin-left: -#{$size} !important; }
    .mx-n#{$i} {
        margin-left: -#{$size} !important;
        margin-right: -#{$size} !important;
    }
    .my-n#{$i} {
        margin-top: -#{$size} !important;
        margin-bottom: -#{$size} !important;
    }

    @each $breakpoint-name in $breakpoint-list {
        @include respond($breakpoint-name) {

            $breakpoint-shortcut: map-get($breakpoint-shortcut-map, $breakpoint-name);

            // PADDING
            .p-#{$breakpoint-shortcut}-n#{$i} { padding: -#{$size} !important; }
            .pt-#{$breakpoint-shortcut}-n#{$i} { padding-top: -#{$size} !important; }
            .pr-#{$breakpoint-shortcut}-n#{$i} { padding-right: -#{$size} !important; }
            .pb-#{$breakpoint-shortcut}-n#{$i} { padding-bottom: -#{$size} !important; }
            .pl-#{$breakpoint-shortcut}-n#{$i} { padding-left: -#{$size} !important; }
            .px-#{$breakpoint-shortcut}-n#{$i} { padding-left: -#{$size} !important; padding-right: -#{$size} !important; }
            .py-#{$breakpoint-shortcut}-n#{$i} { padding-top: -#{$size} !important; padding-bottom: -#{$size} !important; }

            // MARGINS
            .m-#{$breakpoint-shortcut}-n#{$i} { margin: -#{$size} !important; }
            .mt-#{$breakpoint-shortcut}-n#{$i} { margin-top: -#{$size} !important; }
            .mr-#{$breakpoint-shortcut}-n#{$i} { margin-right: -#{$size} !important; }
            .mb-#{$breakpoint-shortcut}-n#{$i} { margin-bottom: -#{$size} !important; }
            .ml-#{$breakpoint-shortcut}-n#{$i} { margin-left: -#{$size} !important; }
            .mx-#{$breakpoint-shortcut}-n#{$i} { margin-left: -#{$size} !important; margin-right: -#{$size} !important; }
            .my-#{$breakpoint-shortcut}-n#{$i} { margin-top: -#{$size} !important;margin-bottom: -#{$size} !important; }
        }
    }
}
_spacings done wrong
content_copyfile_download
$sizes-px: (
    '0': 0,
    '1': 4px,
    '2': 8px,
    '3': 12px,
    '4': 16px,
    '5': 20px,
    '6': 24px,
    '7': 28px,
    '8': 32px,
    '9': 36px,
    '10': 40px,
    '11': 44px,
    '12': 48px,
);

$breakpoint-map: (
    'medium': 1,
    'small': 2,
    'vSmall': 3,
);

$breakpoint-shortcut-map: (
    'medium': md,
    'small': sm,
    'vSmall': xs,
);

// POSITIVE SPACING
@for $i from 0 through 12 {

    $size: map-get($sizes-px, '#{$i}');

    // PADDING
    .p-#{$i} { padding: #{$size}; }
    .pt-#{$i} { padding-top: #{$size}; }
    .pr-#{$i} { padding-right: #{$size}; }
    .pb-#{$i} { padding-bottom: #{$size}; }
    .pL-#{$i} { padding-left: #{$size}; }
    .px-#{$i} {
         padding-left: #{$size};
         padding-right: #{$size};
    }
    .py-#{$i} {
         padding-top: #{$size};
         padding-bottom: #{$size};
    }

    // MARGINS
    .m-#{$i} { margin: #{$size}; }
    .mt-#{$i} { margin-top: #{$size}; }
    .mr-#{$i} { margin-right: #{$size}; }
    .mb-#{$i} { margin-bottom: #{$size}; }
    .mL-#{$i} { margin-left: #{$size}; }
    .mx-#{$i} {
         margin-left: #{$size};
         margin-right: #{$size};
    }
    .my-#{$i} {
         margin-top: #{$size};
         margin-bottom: #{$size};
    }

    @each $breakpoint-name, $breakpoint-ratio in $breakpoint-map {
        @include breakpoint($breakpoint-name) {

            $breakpoint-shortcut: map-get($breakpoint-shortcut-map, $breakpoint-name);

            // PADDING
            .p-#{$breakpoint-shortcut}-#{$i} { padding: #{$size - $breakpoint-ratio * $i }; }
            .pt-#{$breakpoint-shortcut}-#{$i} { padding-top: #{$size - $breakpoint-ratio * $i }; }
            .pr-#{$breakpoint-shortcut}-#{$i} { padding-right: #{$size - $breakpoint-ratio * $i }; }
            .pb-#{$breakpoint-shortcut}-#{$i} { padding-bottom: #{$size - $breakpoint-ratio * $i }; }
            .pL-#{$breakpoint-shortcut}-#{$i} { padding-left: #{$size - $breakpoint-ratio * $i }; }
            .px-#{$breakpoint-shortcut}-#{$i} {
                 padding-left: #{$size - $breakpoint-ratio * $i }; 
                 padding-right: #{$size - $breakpoint-ratio * $i }; 
            }
            .py-#{$breakpoint-shortcut}-#{$i} { 
                padding-top: #{$size - $breakpoint-ratio * $i };
                padding-bottom: #{$size - $breakpoint-ratio * $i };
            }

            // MARGINS
            .m-#{$breakpoint-shortcut}-#{$i} { margin: #{$size - $breakpoint-ratio * $i }; }
            .mt-#{$breakpoint-shortcut}-#{$i} { margin-top: #{$size - $breakpoint-ratio * $i }; }
            .mr-#{$breakpoint-shortcut}-#{$i} { margin-right: #{$size - $breakpoint-ratio * $i }; }
            .mb-#{$breakpoint-shortcut}-#{$i} { margin-bottom: #{$size - $breakpoint-ratio * $i }; }
            .mL-#{$breakpoint-shortcut}-#{$i} { margin-left: #{$size - $breakpoint-ratio * $i }; }
            .mx-#{$breakpoint-shortcut}-#{$i} {
                 margin-left: #{$size - $breakpoint-ratio * $i }; 
                 margin-right: #{$size - $breakpoint-ratio * $i }; 
            }
            .my-#{$breakpoint-shortcut}-#{$i} { 
                margin-top: #{$size - $breakpoint-ratio * $i };
                margin-bottom: #{$size - $breakpoint-ratio * $i };
            }
        }
    }
}

// NEGATIVE SPACING
@for $i from 1 through 12 {

    $size: map-get($sizes-px, '#{$i}');

    // PADDING
    .p-n#{$i} { padding: -#{$size}; }
    .pt-n#{$i} { padding-top: -#{$size}; }
    .pr-n#{$i} { padding-right: -#{$size}; }
    .pb-n#{$i} { padding-bottom: -#{$size}; }
    .pL-n#{$i} { padding-left: -#{$size}; }
    .px-n#{$i} {
        padding-left: -#{$size};
        padding-right: -#{$size};
    }
    .py-n#{$i} {
        padding-top: -#{$size};
        padding-bottom: -#{$size};
    }

    // MARGINS
    .m-n#{$i} { margin: -#{$size}; }
    .mt-n#{$i} { margin-top: -#{$size}; }
    .mr-n#{$i} { margin-right: -#{$size}; }
    .mb-n#{$i} { margin-bottom: -#{$size}; }
    .mL-n#{$i} { margin-left: -#{$size}; }
    .mx-n#{$i} {
        margin-left: -#{$size};
        margin-right: -#{$size};
    }
    .my-n#{$i} {
        margin-top: -#{$size};
        margin-bottom: -#{$size};
    }

    @each $breakpoint-name, $breakpoint-ratio in $breakpoint-map {
        @include breakpoint($breakpoint-name) {

            $breakpoint-shortcut: map-get($breakpoint-shortcut-map, $breakpoint-name);

            // PADDING
            .p-#{$breakpoint-shortcut}-n#{$i} { padding: -#{$size - $breakpoint-ratio * $i }; }
            .pt-#{$breakpoint-shortcut}-n#{$i} { padding-top: -#{$size - $breakpoint-ratio * $i }; }
            .pr-#{$breakpoint-shortcut}-n#{$i} { padding-right: -#{$size - $breakpoint-ratio * $i }; }
            .pb-#{$breakpoint-shortcut}-n#{$i} { padding-bottom: -#{$size - $breakpoint-ratio * $i }; }
            .pL-#{$breakpoint-shortcut}-n#{$i} { padding-left: -#{$size - $breakpoint-ratio * $i }; }
            .px-#{$breakpoint-shortcut}-n#{$i} {
                padding-left: -#{$size - $breakpoint-ratio * $i }; 
                padding-right: -#{$size - $breakpoint-ratio * $i }; 
            }
            .py-#{$breakpoint-shortcut}-n#{$i} { 
                padding-top: -#{$size - $breakpoint-ratio * $i };
                padding-bottom: -#{$size - $breakpoint-ratio * $i };
            }

            // MARGINS
            .m-#{$breakpoint-shortcut}-n#{$i} { margin: -#{$size - $breakpoint-ratio * $i }; }
            .mt-#{$breakpoint-shortcut}-n#{$i} { margin-top: -#{$size - $breakpoint-ratio * $i }; }
            .mr-#{$breakpoint-shortcut}-n#{$i} { margin-right: -#{$size - $breakpoint-ratio * $i }; }
            .mb-#{$breakpoint-shortcut}-n#{$i} { margin-bottom: -#{$size - $breakpoint-ratio * $i }; }
            .mL-#{$breakpoint-shortcut}-n#{$i} { margin-left: -#{$size - $breakpoint-ratio * $i }; }
            .mx-#{$breakpoint-shortcut}-n#{$i} {
                margin-left: -#{$size - $breakpoint-ratio * $i }; 
                margin-right: -#{$size - $breakpoint-ratio * $i }; 
            }
            .my-#{$breakpoint-shortcut}-n#{$i} { 
                margin-top: -#{$size - $breakpoint-ratio * $i };
                margin-bottom: -#{$size - $breakpoint-ratio * $i };
            }
        }
    }
}