Styling

Updated on August 22, 2024

Baleada Prose intentionally ships no styles, but it does ship several features that make styling easier.

Components have consistent classes

Each component's root element has a .baleada-prose-[component] class, where [component] is the name of the component, lowercased.

In each component, the content you actually write is inserted into an element with a .baleada-prose-contents class.

Finally, each component's documentation includes an outline of the complete markup structure. You could always use devtools to inspect markup structure, but hopefully those outlines make it easier to write effective CSS selectors.

Components accept additional classes

Each component has a classes prop, and you can pass a String to that prop to add additional classes

<template>
  <BaleadaProseAside :classes="bg-blue-100 text-blue-900">
    ...
  </BaleadaProseAside>
</template>

This is super useful when you need to add a class to a particular Prose component inside a Markdown file:

    ::: type=info classes="bg-blue-100 text-blue-900"
    I'm a blue ProseAside.
    :::

You can set default classes for any component

When you call Baleada Prose's createProse function to create your Vue plugin, you can pass options to customize default values for props.

import { createProse, components } from '@baleada/vue-prose'

const prosePlugin = createProse({
  components,

  // Use the `propDefaults` object to set default values
  // for the `classes` prop on any given component.
  propDefaults: {
    heading: {
      // Every `BaleadaProseHeading` will have `font-600 font-display`
      // added to the class list of its root element.
      classes: "font-600 font-display",
    },
    codeblock: {
      classes: "syntax-theme-dark",
    },
    table: {
      classes: "border border-gray-200",
    },
  }
})

See the Prop defaults guide for more info.

Edit doc on GitHub