Skip to content

Instantly share code, notes, and snippets.

@bryanbuchanan

bryanbuchanan/theme-options.yaml

Created November 9, 2021 18:29
Show Gist options
  • Save bryanbuchanan/6193452599b52c508e7c52e604e440c2 to your computer and use it in GitHub Desktop.
Save bryanbuchanan/6193452599b52c508e7c52e604e440c2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
theme-options.yaml
title: Mesa # Human-readable theme name to be used in UI
name: mesa # camelCase theme name to be used by system
image: image.jpg # Name of theme preview image file
options: # List of categories of customizable properties
- name: logo
title: Logo
properties:
- image: true
name: logoImage
title: Graphic
- range: true
name: logoWidth
title: Logo Width
default: 200
min: 10
max: 800
step: 10
units: px
commands:
- type: css
selector: .logo__image
rules:
width: "{{value}}"
- info: true
content: When a logo graphic is present, the following options for a text logo and subtitle are ignored.
- heading: true
title: Text Logo
- font: true
name: logo-font
title: Font
default: helvetica
commands:
- type: css
selector: .logo__title
rules:
font-family: "{{value}}"
- range: true
name: logo-font-size
title: Font Size
default: 20
min: 8
max: 56
units: px
commands:
- type: css
selector: .logo__title
rules:
font-size: "{{value}}"
- weight: true
name: logo-weight
title: Font Weight
default: bold
commands:
- type: css
selector: .logo__title
rules:
font-weight: "{{value}}"
- range: true
name: logo-letter-spacing
title: Kerning
default: 0
min: -.05
max: 1
step: .05
units: em
commands:
- type: css
selector: .logo__title
rules:
letter-spacing: "{{value}}"
- range: true
name: logo-line-height
title: Leading
default: 1
min: -.05
max: 2
step: .05
units: em
commands:
- type: css
selector: .logo__title
rules:
line-height: "{{value}}"
- select: true
name: logo-text-transform
title: Capitalization
options:
- name: none
title: Normal
- name: uppercase
title: All-Caps
- name: lowercase
title: Lowercase
commands:
- type: css
selector: .logo__title
rules:
text-transform: "{{value}}"
- heading: true
title: Subtitle
name: nothing
- font: true
name: subtitle-font
title: Font
default: helvetica
commands:
- type: css
selector: .logo__subtitle
rules:
font-family: "{{value}}"
- range: true
name: subtitle-font-size
title: Font Size
default: 12
min: 8
max: 56
units: px
commands:
- type: css
selector: .logo__subtitle
rules:
font-size: "{{value}}"
- weight: true
name: subtitle-weight
title: Font Weight
default: normal
commands:
- type: css
selector: .logo__subtitle
rules:
font-weight: "{{value}}"
- range: true
name: subtitle-letter-spacing
title: Kerning
default: 0
min: -.05
max: 5
step: .05
units: em
commands:
- type: css
selector: .logo__subtitle
rules:
letter-spacing: "{{value}}"
- select: true
name: subtitle-text-transform
title: Capitalization
options:
- name: none
title: Normal
- name: uppercase
title: All-Caps
- name: lowercase
title: Lowercase
commands:
- type: css
selector: .logo__subtitle
rules:
text-transform: "{{value}}"
- name: header # camelCase category name to be used by system
title: Header # Human-readable category name to be used in UI
properties:
- select: true # Defines the input type
name: headerAlignment # camelCase property name to be used by system
title: Alignment # Human-readable property name to be used in UI
default: left # Default selection
options: # Defines select element's options
- name: left
title: Left
- name: center
title: Center
commands:
- type: class
selector: .header
class: "header--{{value}}"
- range: true
name: max-width
title: Max Width
default: 1000 # Default value
min: 600 # Minimum allowed value
max: 2500 # Maximum allowed value
units: "px" # Unit to be added to numerical property value before being applied
step: 10 # Defines the step attribute of range inputs
replacements:
- before: 2500
after: none
commands:
- type: css
selector: .header__container
rules:
max-width: "{{value}}"
- type: css
selector: .footer__container
rules:
max-width: "{{value}}"
- range: true
name: topSpacing
title: Top Spacing
default: 20
min: 0
max: 300
units: px
step: 5
commands:
- type: css
selector: .header
rules:
padding-top: "{{value}}"
- range: true
name: bottomSpacing
title: Bottom Spacing
default: 20
min: 0
max: 300
units: px
step: 5
commands:
- type: css
selector: .header
rules:
padding-bottom: "{{value}}"
- range: true
name: navSize
title: Navigation Size
default: 1
min: .5
max: 2
step: .1
units: rem
commands:
- type: css
selector: .nav__link, .social__link
rules:
font-size: "{{value}}"
- font: true
name: navFont
title: Navigation Font
default: Helvetica
commands:
- type: css
selector: .nav__link
rules:
font-family: "{{value}}"
- check: true
name: headerSocial
title: Social Links
default: true
commands:
- type: class
selector: .header .social
class: social--on
- name: colors
title: Colors
properties:
- color: true
name: colors-text
title: Text
default: "#000000"
commands:
- type: css
selector: body
rules:
color: "{{value}}"
- color: true
name: colors-logo
title: Logo
default: "#000000"
commands:
- type: css
selector: .logo__title
rules:
color: "{{value}}"
- color: true
name: colors-subtitle
title: Subtitle
default: "#000000"
commands:
- type: css
selector: .logo__subtitle
rules:
color: "{{value}}"
- color: true
name: colorsNav
title: Navigation
default: "#000000"
commands:
- type: css
selector: .nav__link, .social__link
rules:
color: "{{value}}"
- color: true
name: colorsBackground
title: Background
default: "#ffffff"
commands:
- type: css
selector: body
rules:
background-color: "{{value}}"
- type: css
selector: .overlay
rules:
background-color: "{{value}}f2"
- color: true
name: colors-headings
title: Headings
default: "#000000"
commands:
- type: css
selector: .content h1, .content h2, .content h3, .content h4, .content h5
rules:
color: "{{value}}"
- color: true
name: colors-accents
title: Accents
default: "#b26050"
commands:
- type: css
selector: a
rules:
color: "{{value}}"
- name: typography
title: Typography
properties:
- heading: true
title: Text
- font: true
name: text-font
title: Font
default: Georgia, 'Times New Roman', Times, serif
commands:
- type: css
selector: body
rules:
font-family: "{{value}}"
- range: true
name: text-size
title: Size
default: 20
min: 10
max: 30
units: px
commands:
- type: css
selector: body
rules:
font-size: "{{value}}"
- range: true
name: text-line-height
title: Leading
default: 1.5
min: .5
max: 5
step: .1
units: em
commands:
- type: css
selector: body
rules:
line-height: "{{value}}"
- range: true
name: text-letter-spacing
title: Kerning
default: 0
min: -.1
max: .5
step: .01
units: em
commands:
- type: css
selector: body
rules:
letter-spacing: "{{value}}"
- heading: true
title: Headings
- font: true
name: heading-font
title: Font
default: Arial Black
commands:
- type: css
selector: .content h1, .content h2, .content h3, .content h4, .content h5
rules:
font-family: "{{value}}"
- range: true
name: heading-size
title: Size
default: 2
min: 1
max: 6
step: .5
units: em
commands:
- type: css
selector: .content h1
rules:
font-size: "{{value}}"
- type: css
selector: .content h2
rules:
font-size: "calc({{value}} / 1.1)"
- type: css
selector: .content h3
rules:
font-size: "calc({{value}} / 1.5)"
- type: css
selector: .content h4, .content h5
rules:
font-size: 1em
- weight: true
name: heading-weight
title: Weight
commands:
- type: css
selector: .content h1, .content h2, .content h3, .content h4, .content h5
rules:
font-weight: "{{value}}"
- range: true
name: heading-letter-spacing
title: Kerning
default: 0
min: -.1
max: .5
step: .01
units: em
commands:
- type: css
selector: .content h1, .content h2, .content h3, .content h4, .content h5
rules:
letter-spacing: "{{value}}"
- select: true
name: heading-capitalization
title: Capitalization
default: whatever
options:
- name: none
title: Normal
- name: uppercase
title: ALL-CAPS
- name: lowercase
title: lowercase
commands:
- type: css
selector: .content h1, .content h2, .content h3, .content h4, .content h5
rules:
text-transform: "{{value}}"
- name: footer
title: Footer
properties:
- select: true
name: alignment
title: Alignment
default: center
options:
- name: left
title: Left
- name: center
title: Center
- name: right
title: Right
commands:
- type: class
selector: .footer
class: "footer--{{value}}"
- range: true
name: vertical-margin
title: Vertical Margin
default: 20
min: 0
max: 300
units: px
step: 5
commands:
- type: css
selector: .footer
rules:
padding-top: "{{value}}"
padding-bottom: "{{value}}"
- range: true
name: text-size
title: Text Size
default: 1
min: .25
max: 3
step: .1
units: rem
commands:
- type: css
selector: .footer
rules:
font-size: "{{value}}"
- check: true
name: footerSocial
title: Social Links
default: true
commands:
- type: class
selector: .footer .social
class: social--on
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment