Skip to content

Instantly share code, notes, and snippets.

@josephdburdick

josephdburdick/spacing_golden.js

Forked from JonathanZWhite/spacing_golden.js
Created April 27, 2017 16:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save josephdburdick/b0c00a3d43b27d6f16ebe66301e37218 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save josephdburdick/b0c00a3d43b27d6f16ebe66301e37218 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @JonathanZWhite JonathanZWhite revised this gist Apr 24, 2017. 1 changed file with 7 additions and 8 deletions.
    15 changes: 7 additions & 8 deletions spacing_golden.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,13 @@
    const spacingFactor = 8;
    export const spacing = {
    space0: `${computeGoldenRatio(spacingFactor, 0)}px`, // 4
    space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 8
    space2: `${computeGoldenRatio(spacingFactor, 2)}px`, // 16
    space3: `${computeGoldenRatio(spacingFactor, 3)}px`, // 24
    space4: `${computeGoldenRatio(spacingFactor, 4)}px`, // 32
    space5: `${computeGoldenRatio(spacingFactor, 5)}px`, // 40
    space6: `${computeGoldenRatio(spacingFactor, 6)}px`, // 48
    space0: `${computeGoldenRatio(spacingFactor, 0)}px`, // 8
    space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 13
    space2: `${computeGoldenRatio(spacingFactor, 2)}px`, // 21
    space3: `${computeGoldenRatio(spacingFactor, 3)}px`, // 34
    space4: `${computeGoldenRatio(spacingFactor, 4)}px`, // 55
    space5: `${computeGoldenRatio(spacingFactor, 5)}px`, // 89
    };

    function computeGoldenRatio(spacingFactor, exp) {
    return spacingFactor * Math.pow(1.618, exp);
    return Math.round(spacingFactor * Math.pow(1.618, exp));
    }
  2. @JonathanZWhite JonathanZWhite revised this gist Apr 24, 2017. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions spacing_golden.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,11 +2,11 @@ const spacingFactor = 8;
    export const spacing = {
    space0: `${computeGoldenRatio(spacingFactor, 0)}px`, // 4
    space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 8
    space2: `${computeGoldenRatio(spacingFactor, 3)}px`, // 16
    space3: `${computeGoldenRatio(spacingFactor, 4)}px`, // 24
    space4: `${computeGoldenRatio(spacingFactor, 5)}px`, // 32
    space5: `${computeGoldenRatio(spacingFactor, 6)}px`, // 40
    space6: `${computeGoldenRatio(spacingFactor, 7)}px`, // 48
    space2: `${computeGoldenRatio(spacingFactor, 2)}px`, // 16
    space3: `${computeGoldenRatio(spacingFactor, 3)}px`, // 24
    space4: `${computeGoldenRatio(spacingFactor, 4)}px`, // 32
    space5: `${computeGoldenRatio(spacingFactor, 5)}px`, // 40
    space6: `${computeGoldenRatio(spacingFactor, 6)}px`, // 48
    };

    function computeGoldenRatio(spacingFactor, exp) {
  3. @JonathanZWhite JonathanZWhite created this gist Apr 24, 2017.
    14 changes: 14 additions & 0 deletions spacing_golden.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    const spacingFactor = 8;
    export const spacing = {
    space0: `${computeGoldenRatio(spacingFactor, 0)}px`, // 4
    space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 8
    space2: `${computeGoldenRatio(spacingFactor, 3)}px`, // 16
    space3: `${computeGoldenRatio(spacingFactor, 4)}px`, // 24
    space4: `${computeGoldenRatio(spacingFactor, 5)}px`, // 32
    space5: `${computeGoldenRatio(spacingFactor, 6)}px`, // 40
    space6: `${computeGoldenRatio(spacingFactor, 7)}px`, // 48
    };

    function computeGoldenRatio(spacingFactor, exp) {
    return spacingFactor * Math.pow(1.618, exp);
    }