TooTallNate / blessed-css

CSS engine for `blessed`

blessed-css

CSS engine for blessed

#background {
  bg: blue;
}

box {
  fg: black;
  bg: white;
}

box:border {
  fg: magenta;
}

What works?

• Inheriting styles from parent components
• Node names (box, form, button, etc.)
• ID names (#background)
• Class names (.dialog)
• Attribute selectors ([draggable], [shadow], etc.)
• Pseudo selectors (:border, :focus, :hover, :scrollbar, etc.)

Example

const blessed = require('blessed')
const css = require('blessed-css')

const style = css(`
  #background {
    bg: blue;
  }

  .dialog {
    fg: black;
    bg: white;
  }

  .dialog:border {
    fg: magenta;
  }
`)

const screen = blessed.screen({
  smartCSR: true
})

const background = blessed.box({
  parent: screen,
  id: 'background'
})

// Style the `box#background` according to the CSS rules
style(background)

const box = blessed.box({
  parent: screen,
  className: 'dialog',
  top: 'center',
  left: 'center',
  width: '60%',
  height: '55%',
  content: 'Hello world!',
  border: 'line',
  shadow: true
})

// Style the `box.dialog` according to the CSS rules
style(box)

screen.key(['escape', 'q', 'C-c'], (ch, key) => process.exit(0))

screen.render()