Utility classes

Utility classes are an optimized way to apply general styling. They remove large amounts of duplication from your stylesheets and lend visual harmony to your app. Utility class stylesheets tend to be tiny — around ~30k on disk and 9k over the wire.

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 a stylesheet is generated and served via /enhance-styles.css and automatically included in your document’s <head> section.

⚠️

If you use a custom Head function, enhance-styles.css will not be included by default. To add Enhance Styles utility classes with a custom headm.mjs, it is recommended to use the helper function described below to include Enhance Styles.

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>
  `
}

generated.css

Enhance Styles stores a copy of generated styles at the root /.enhance/generated.css. This file can be used as a helpful reference for class names available to your HTML.

We’re working on providing a dynamic, project-specific styleguide that will contain this reference. Stay tuned 📡

😶‍🌫️

This /.enhance directory should be ignored from your project’s version control.

Customize

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

1. JSON config file

Add a styleguide.json (or choose another name) file to the root of your project.

📄

2. Update .arc

Edit your project’s .arc file to tell it where to grab the config. Add these lines at the bottom of your .arc file in the root of your project.

@enhance-styles
config styleguide.json
💅🏽

getStyles

By default Enhance Styles is automatically included in HTML documents rendered by Enhance. However, you may want to include these utility classes elsewhere or in a custom Head function.

A utility function is provided to access your generated stylesheet.

import { getStyles } from '@enhance/arc-plugin-styles'

const styles = getStyles.all()

styles.link    // a <link rel="stylesheet"> tag
styles.style   // a <style> tag for inline styles
styles.path    // root-relative path to the .css file

Furthermore, individual methods can be imported:

import { getStyles } from '@enhance/arc-plugin-styles'

getStyles.linkTag()   // a <link rel="stylesheet"> tag
getStyles.styleTag()  // a <style> tag for inline styles
getStyles.path()      // root-relative path to the .css file
ℹ️

Though @enhance/arc-plugin-styles is already a dependency of Enhance, you may want to declare it as a direct dependency of you project:

npm i @enhance/arc-plugin-styles

Community Resources

GitHub
Visit Enhance on GitHub.
Discord
Join our Discord server to chat about development and get help from the community.
Mastodon
Follow Enhance in the Fediverse. We're huge fans of the IndieWeb!