Equator component library

This package provides a set of re-usable plain HTML components, coupled with Tailwind plugins which provide responsive style utilities.

Table of contents

[TOC]

Installation

Run this command:

npm i equator-component-library -D

Check that the ".vscode/" folder at the root of your solution contains a "html.code-snippets" file.

Requirements

• Tailwind CSS is our CSS framework. All of the HTML snippets are styled with Tailwind utility classes.
• VSCode is needed to use the snippets, since they are added as a VSCode config file.
• AlpineJS is our JavaSCript framework. Many of the HTML snippets contain AlpineJS directive attributes to power their interactivity.

Recommendations

• Use a Typescript Tailwind config file, instead of plain JS. This will improve the intellisense in your config file and make the plugins easier to configure.
• Tailwind CSS IntelliSense VSCode extension

Features and usage

Snippets

These are HTML snippets which generate blocks of HTML for components. They include tab stops to simply integration with data.

• accordion
• accordion-group
• card-grid
• card
• theme

Plugins

These are extensions of the out-the-box Tailwind config

• container
• spacing
• themes
• typography

Config

The exported Tailwind config "/modules/package/tailwind.config.ts" contains definitions for the following theme and extend properties. These can be imported together, or referenced individuals as required.

If your Tailwind config is a Typescript file, you should get Intellisense suggestions when referencing the exported object.

Rather than list them all here, just go look at the file in "node_modules/equator/component-library/modules/package/tailwind.config.ts" after installation.

Contributing

• Create or edit snippets
• Create/edit plugins
• Publish to NPM