Created
July 24, 2020 09:17
-
-
Save Andy-set-studio/1e6a6c877d500835640f9be673bebb77 to your computer and use it in GitHub Desktop.
Minimal Gorko Config: https://github.com/hankchizljaw/gorko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * BASE SIZE | |
| * All calculations are based on this. It’s recommended that | |
| * you keep it at 1rem because that is the root font size. You | |
| * can set it to whatever you like and whatever unit you like. | |
| */ | |
| $gorko-base-size: 1rem; | |
| /** | |
| * SIZE SCALE | |
| * This is a Major Third scale that powers all the utilities that | |
| * it is relevant for (font-size, margin, padding). All items are | |
| * calcuated off the base size, so change that and cascade across | |
| * your whole project. | |
| */ | |
| $gorko-size-scale: ( | |
| '300': $gorko-base-size * 0.8, | |
| '400': $gorko-base-size, | |
| '500': $gorko-base-size * 1.25, | |
| '600': $gorko-base-size * 1.6, | |
| '700': $gorko-base-size * 2, | |
| '900': $gorko-base-size * 3, | |
| ); | |
| /** | |
| * COLORS | |
| * Colors are shared between backgrounds and text by default. | |
| * You can also use them to power borders, fills or shadows, for example. | |
| */ | |
| $gorko-colors: ( | |
| 'dark': #1a1a1a, | |
| 'light': #f3f3f3, | |
| ); | |
| /** | |
| * CORE CONFIG | |
| * This powers everything from utility class generation to breakpoints | |
| * to enabling/disabling pre-built components/utilities. | |
| */ | |
| $gorko-config: ( | |
| 'bg': ( | |
| 'items': $gorko-colors, | |
| 'output': 'standard', | |
| 'property': 'background', | |
| ), | |
| 'color': ( | |
| 'items': $gorko-colors, | |
| 'output': 'standard', | |
| 'property': 'color', | |
| ), | |
| 'font': ( | |
| 'items': ( | |
| 'base': 'Helvetica, Arial, sans-serif', | |
| ), | |
| 'output': 'standard', | |
| 'property': 'font-family', | |
| ), | |
| 'gap-top': ( | |
| 'items': $gorko-size-scale, | |
| 'output': 'standard', | |
| 'property': 'margin-top', | |
| ), | |
| 'pad-top': ( | |
| 'items': $gorko-size-scale, | |
| 'output': 'standard', | |
| 'property': 'padding-top', | |
| ), | |
| 'text': ( | |
| 'items': $gorko-size-scale, | |
| 'output': 'responsive', | |
| 'property': 'font-size', | |
| ), | |
| 'weight': ( | |
| 'items': ( | |
| 'light': '300', | |
| 'regular': '400', | |
| 'bold': '700', | |
| ), | |
| 'output': 'standard', | |
| 'property': 'font-weight', | |
| ), | |
| 'breakpoints': ( | |
| 'md': '(min-width: 48em)', | |
| ), | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment