Goron
Goron is a simple design token utility class generator.
This is extremely under development and the docs are rubbish.
Getting started
First up, install:
npm install goronThen run goron and determine your CSS output:
goron -out src/css/tokens.cssConfig
To customise the classes with your own config, create a file at the root of your project called goron.config.js.
Default config
If you donโt define a config in your project, Goron will use the default config which is this:
const colors = {
primary: '#ff00ff',
light: '#ffffff',
dark: '#252525'
};
const fonts = {
base: 'Helvetica, sans-serif',
serif: 'Georgia, serif'
};
const sizeScale = {
'300': '0.8rem',
'400': '1rem',
'500': '1.25rem',
'600': '1.56rem',
'700': '1.95rem',
'800': '2.44rem',
'900': '3.05rem'
};
module.exports = {
colors,
sizeScale,
fonts,
generateCustomProperties: true,
utilities: {
'bg': {
items: colors,
output: 'standard',
property: 'background'
},
'color': {
items: colors,
output: 'standard',
property: 'color'
},
'font': {
items: fonts,
output: 'standard',
property: 'font-family'
},
'gap-top': {
items: sizeScale,
output: 'standard',
property: 'margin-top'
},
'gap-bottom': {
items: sizeScale,
output: 'standard',
property: 'margin-bottom'
},
'leading': {
items: {
tight: '1.2',
mid: '1.5',
loose: '1.7'
},
output: 'standard',
property: 'line-height'
},
'measure': {
items: {
long: '75ch',
short: '60ch',
compact: '40ch'
},
output: 'standard',
property: 'max-width'
},
'pad-top': {
items: sizeScale,
output: 'standard',
property: 'padding-top'
},
'pad-bottom': {
items: sizeScale,
output: 'standard',
property: 'padding-bottom'
},
'pad-left': {
items: sizeScale,
output: 'standard',
property: 'padding-left'
},
'text': {
items: sizeScale,
output: 'responsive',
property: 'font-size'
},
'weight': {
items: {
light: '300',
regular: '400',
mid: '600',
bold: '700'
},
output: 'standard',
property: 'font-weight'
}
},
breakpoints: {
md: '48em',
lg: '68em'
}
};Generated classes example
Letโs use the leading option from the default config for this. The config looks like this:
'leading': {
items: {
tight: '1.2',
mid: '1.5',
loose: '1.7'
},
output: 'standard',
property: 'line-height'
}Goron takes that and generates the following CSS:
.leading-tight {
line-height: 1.2;
}
.leading-mid {
line-height: 1.5;
}
.leading-loose {
line-height: 1.7;
}If I set the output to be responsive instead of standard, we get this:
.leading-tight {
line-height: 1.2;
}
.leading-mid {
line-height: 1.5;
}
.leading-loose {
line-height: 1.7;
}
@media (min-width: 48em) {
.md\:leading-tight {
line-height: 1.2;
}
.md\:leading-mid {
line-height: 1.5;
}
.md\:leading-loose {
line-height: 1.7;
}
}
@media (min-width: 68em) {
.lg\:leading-tight {
line-height: 1.2;
}
.lg\:leading-mid {
line-height: 1.5;
}
.lg\:leading-loose {
line-height: 1.7;
}
}