Enhance Export

Web components are a compelling way to design with HTMl & CSS. Needless to say, we're excited about the future of web components. In this release we're adding an option to export designs as production ready web components ready for use in any Enhance project.

What's Enhance?

Enhance is a web standards-based HTML framework. It’s designed to provide a dependable foundation for building lightweight, flexible, and future-proof web applications.

Built by the folks over at Begin, it's an exciting new open source project. Check out the docs to learn more.

What are web components?

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Web components have three primary technologies to help create custom components with encapsulated styling and functionality: Custom elements, shadow DOM, and HTML templates. MDN has a great set of docs that you can uset to familiarize yourself with terms and technology before deciding where to dive in.

How does it work?

Any new or existing component created in Studio or with css.gui can be exported as an Enhance SFC (single file component).

  1. Click on the export panel
  2. Change the export format to Enhance SFC
  3. Copy the code and drop it into your Enhance app

It's that simple.

Example

Here we have a blockquote component that can render slots for text (quote), author, and title.

Save or edit this design

Export as Enhance SFC and drop this component into any Enhance project.

export default function Component({ html, state = {} }) {
  return html`
  <style>
    .css-1lgu829 {
      background-color: #f9ff5f;
      color: #000000;
      margin: 0px;
      padding: 64px;
      font-size: 16px;
      text-align: start;
    }
    .css-q87xdf {
      margin: 0px;
    }
    .css-ifixb9 {
      line-height: 1.25;
      font-weight: 400;
      max-width: 48ch;
      font-size: 2em;
      margin: 0px;
    }
    .css-1b98mrh {
      font-weight: 900;
      font-size: 1.5em;
      margin: 8px 0px 0px 0px;
    }
    .css-16jjrsn {
      font-style: normal;
      font-size: 0.75em;
      display: block;
    }
  </style>

  <figure class="css-1lgu829">
    <blockquote class="css-q87xdf">
      <p class="css-ifixb9">
        <slot name="text"></slot>
      </p>
    </blockquote>
    <figcaption class="css-1b98mrh">
      <slot name="author"></slot>
      <cite class="css-16jjrsn">
        <slot name="title"></slot>
      </cite>
    </figcaption>
  </figure>
  `;
}

Components are ready to use out of the box, but can be extended with your own interactions and dynamic data.

Links