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.

$3

- 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.

$3

- 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

$3

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

$3

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

- container
- spacing
- themes
- typography

$3

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