chilp - v2.0.1-rc1

Styling the Chilp widget

With DaisyUI

Chilp v2 or newer does not inline it’s own CSS, but instead comes with DaisyUI-compatible classes, this means you can optimally have Chilp adapted to your own site’s theme.

Do note, Tailwind may need to be pointed to the classes Chilp uses, so make sure to either source it on the ./dist folder AFTER build, or

@import "tailwindcss";
@plugin "daisyui";
@source "./build/packages/chilp/src/chilp/widget.gleam";

Try something like the above. You could of course also point to the build/dev/javascript, especially if you work with a path dependency (in which case the widget.gleam file won’t be in ./build/).

Styling with Oat

Oat is an ultra-lightweight HTML + CSS, semantic UI component library with no framework, build, or other dependencies. OatUI can style most of Chilp out of the box without even including it’s javascript. Chilp applies mostly semantic HTML and has some extra attributes added for enhanced compatibility with Oat.

Some things that Oat can’t style, need a slight bit of manual CSS’ing:

.chilp-oat-enhance-hide {
  display: none;
}

.chilp-oat-enhance-inset-2em {
  padding-inline-start: 2em;
}

.chilp-oat-enhance-inset-1em {
  padding-inline-start: 1em;
}

.chilp-oat-enhance-inset-quoteblock {
  border-left: 1px solid;
  padding-inline-start: 1.5em;
}

.chilp-oat-enhance-inset-blueskyreply,
.chilp-oat-enhance-inset-witchskyreply,
.chilp-oat-enhance-inset-blackskyreply {
  /* We reset an oat-set value here. */
  gap: unset !important;
}

.chilp-oat-enhance-inset-blueskyreply {
  color: rgb(0, 106, 255);
  background-color: white;

  &::after {
    content: "luesky";
  }
}

.chilp-oat-enhance-inset-blackskyreply {
  color: white;
  background-color: black;

  &::after {
    content: "lacksky";
  }
}

.chilp-oat-enhance-inset-witchskyreply {
  color: white;
  background-color: rgb(237, 83, 69);

  &::after {
    content: "itchsky";
  }
}

But with this, Oat can fully style Chilp widgets as well!

Styling with vanilla CSS

If you’d like to not use DaisyUI or OatUI, styling the widget yourself is very viable, all elements are queryable using css classes.

There is also an example of DaisyUI output sourced merely off the widget, with no theme or colourscheme information included, this is a ‘basic default’. You should probably not embed that file. TailwindCSS/DaisyUI normally runs over a whole site and can optimise the css quite well, but because this css is generated purely off one component, it’ll be massive if put together with your own styles. It’ll contain CSS you won’t need. And it won’t style well on all sites, as it is scoped to not spill out to your site (:root and :host are for example removed, and the entire file is scoped to the comment-widget-class). But you can embed that file if you’re just testing out things, and may use it as reference when you write your own CSS for the widget. I bet your CSS will make it look way more awesome!

✨ Search Document