YAML Best Practices
All available YML data types:
| Types | Options |
|---|---|
borderStyle |
none / hidden / dotted / dashed / solid |
color |
hex color picker |
dimension |
auto / % / px / em / initial / inherit |
fontFamily |
list of avialible fonts |
fontSize |
medium / xx-small / x-small / small / large / x-large / xx-large / smaller / larger /% /px /em / initial / inherit |
fontWeight |
normal / bold / bolder / lighter / 100..900 / initial / inherit |
gradientColor |
gradient color picker |
group |
group type |
groupSelect |
group select type |
image |
button to select image |
number |
custom integer |
opacity |
slider to select a value 0..1 |
position |
static / relative / fixed / absolute / initial / inherit |
select |
dropdown menu for fields separating |
text |
custom text |
textAlign |
left / center / right |
textDecoration |
none / overline / line-through / underline / initial / inherit |
Each of YML file parse to Object. You can see example in the playground.
We have 2 required parameters: default_css_attributes and css_form
var yaml = require("js-yaml")
var objectFromYml = yaml.safeLoad(
//example YML
`---
default_css_attributes:
main-border: 'solid 1px #ccc'
color: '#eee'
image: 'url()'
css_form:
- type: 'group'
label: 'Heading'
children:
- key: 'cmp-border'
label: 'main'
type: 'opacity'`)
JSON.stringify(objectFromYml, "", 4);
An additional level of 'nesting' has 2 additional whitepaces:
css_form:
..- type: 'group'
....label: 'Heading'
......children:
........- key: 'cmp-border'
..........label: 'main'
..........type: 'opacity'
Avoid single letter names and short cuts. Be descriptive with your naming.
- Use lisp-case or snake_case when naming variable
// ☠️ bad
default_css_attributes:
mbtn-br: 'solid 1px #ccc'
mn-clr: '#eee'
mn-pc: 'url()'
// 🐬 good
default_css_attributes:
top-image-border: 'solid 1px #ccc'
big-button-color: '#eee'
background-image: 'url()'