Styled Component with BSS

by porsager

Level: beginner • Mithril.js Version: latest

This example shows the use of Better Style Sheets known as BSS. It behaves like styled components, but way simpler.

Live Example


Type Name URL


const Button = 'button' + b`
  bc tomato
  c white
  p 12 24
  fs 16
  tt uppercase
  border none
  br 3
  min-width 120
  cursor pointer
  transition 0.3 transform, 0.3 opacity
  bs 0 1 2 rgba(0,0,0,.35)
  -webkit-font-smoothing: antialiased;
  transform translateY(-1px)
  filter brightness(130%)
  bs 0 1 5 rgba(0,0,0,.35)
  filter brightness(100%)
  transform translateY(0)
  bs 0 1 0 rgba(0,0,0,.35)

m.mount(document.body, {
  view: () =>
    m(Button, {
      onclick: () => p('clicked')
    }, 'Test button')

As a prerequisite for this snippet, the latest version of Mithril.js framework is required. Beginners should have no problems following this example, that simply shows some basic recipies.

In this code sample Mithril.js' m.mount API method is use, besides the basic hyperscript function m().

The example was written by porsager, last edits were made on 16 October 2021.


Did you note a typo or something else? So let me know by opening an issue. Or much better: just fork the repository on GitHub, push your commits and send a pull request. Ready to start your work? Then click on the edit link below. Thanks in advance!

See more code examples  •  Edit this example on GitHub