How to build a demo component

PatternFly Elements is an exciting new approach for building web components to meet our front-end needs at Red Hat and beyond (yay open source!). To that end, when learning a new coding concept, I like to get my hands typing as quickly as possible. Here are a few links to coding templates that can get you started right now. Below, I’ll describe a little bit of the differences between how the templates are written and how the repo works.

What they are and how they work

CodePen project | PatternFly Elements template

A project on CodePen is comprised of multiple files and it runs compilation to generate the preview. This demo has more working parts but is a closer representation of building a component in the repo.

• demo-theme | This folder contains the theming file which can be used to demonstrate how to theme components.
• pfe-sass | This contains the helper sass for the project should you choose to include it.
• pfe-thing | Rename this to your component name (i.e., pfe-card, pfe-button, etc.). This contains the template file (pfe-thing.html.js), the styles (pfe-thing.scss), and the definition and functionality (pfe-thing.js).
• pfelement | This is the root class, do not edit this file unless you super() know what you’re doing (get it? #dadjoke).
• index.html | This is the demo file. Use this to preview your hard work!

CodePen | PatternFly Elements template

This link is to a standard pen on CodePen. Pens are comprised of HTML, CSS, and JavaScript and tends to be a much quicker, easier demoing tool. For simple tests or examples, I recommend using this template as projects are limited in the free CodePen accounts and this will be easier to show and share with others.

How they differ from the real thing

As neither of these pens are running the PatternFly Elements build tools nor can they contain much architecture, a few shortcuts were made of which you should be aware.

In the project pen…

• All of the helper sass is contained in 1 file. This is because projects are limited in the number of files they support (in free accounts) so for brevity, I concatenated all our tooling into 1 file. In the repo, these tools would live in pfe-sass and use partials to pull in smaller files organized by type (function, mixin, variable, etc.).
• The template html file is declared as a JavaScript file so that it could be easily imported into the main class. In the PatternFly Elements repo, the template is a standard html file and it is injected into the main class using a build step.
• Styles are imported in PatternFly Elements using the same build task that injects the html. Styles are compiled and rendered inside a style tag in the template. In this demo, the styles are injected using a link in the template to the CSS file.

In the standard pen…

• To allow the user to build styles in Sass, the styles are injected using a query selector from the main class to grab them from their CodePen generated style tag.
• There is no PatternFly Elements root class in this example for simplicity. This demo pen uses a standard Custom Element approach to define and inject the component.
• The template is defined and attached to a variable in the JS file.