Skip to content

Instantly share code, notes, and snippets.

@JawsomeJason

JawsomeJason/spacing.css

Created May 20, 2018 10:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JawsomeJason/2dab3363d2077bbb33a26bd6c71bb64a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JawsomeJason/2dab3363d2077bbb33a26bd6c71bb64a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JawsomeJason created this gist May 20, 2018.
    21 changes: 21 additions & 0 deletions spacing.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    /*
    * Automatically applies spacing to all non-inline siblings
    * Disable in an element with `--SPACING-ENABLED: 0;`. Will automatically re-activate in children. Good for Grid Layout gap control.
    * Change direction with `--SPACING-HORIZONTAL: 1`
    */

    * {
    margin: 0;
    /* change this to 1 if you need to space it from it's previous sibling. */
    --SPACING-ENABLED: 0;
    --SPACING: 1em;
    /* change this to 0 to make an element spaced horizontally instead */
    margin-top: calc(var(--SPACING) * var(--SPACING-ENABLED) * (1 - var(--SPACING-HORIZONTAL)));

    /* DO NOT CHANGE */
    --SPACING-HORIZONTAL: 0;
    margin-left: calc(var(--SPACING) * var(--SPACING-ENABLED) * var(--SPACING-HORIZONTAL));
    }

    /* All non-first sibling will be spaced apart */
    body * + * { --SPACING-ENABLED: 1; }