Utility classes

Utility classes are an optimal way to apply general styling. They remove large amounts of duplication from your stylesheets and lend visual harmony to your app.

Styleguide

As a basis of styleguides utility classes are unparalleled in providing a usable system for developers and a cohesive appearance to your users.

Ready to go

Enhance comes preconfigured with a customizable utility class system. During development you can use the stylesheet found in public/styles.css. For production you can inline this stylesheet into the head of your document since utility class stylesheets tend to be tiny — around ~30k on disk and 9k over the wire.

Usage

Apply utility classes to your element markup

export default function MyParagraph({ html }) {
  return html`
    <p class="font-serif p1 mb-1">
      <slot></slot>
    </p>
  `
}

Customize

It is possible to completely customize your project’s utility classes. To do so you will need to do two things:

Add these lines at the bottom of your .arc file in the root of your project.

@enhance-styles
config styleguide.json
💅🏽

Community Resources

GitHub
Visit Enhance on GitHub.
Discord
Join our Discord server to chat about development and get help from the community.