https://github.com/tootallnate/blessed-css

CSS engine for `blessed`
https://github.com/tootallnate/blessed-css

Last synced: 4 days ago
JSON representation

CSS engine for `blessed`

• Host: GitHub
• URL: https://github.com/tootallnate/blessed-css
• Owner: TooTallNate
• Created: 2018-01-02T20:14:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-03-17T21:56:06.000Z (almost 5 years ago)
• Last Synced: 2024-12-10T14:05:12.630Z (16 days ago)
• Language: TypeScript
• Homepage:
• Size: 61.5 KB
• Stars: 36
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
blessed-css

===========

### CSS engine for [`blessed`][blessed]

[![Build Status](https://github.com/TooTallNate/blessed-css/workflows/Node%20CI/badge.svg)](https://github.com/TooTallNate/blessed-css/actions?workflow=Node+CI)












```css

#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

```js

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()

```

[blessed]: https://github.com/chjj/blessed