Aquaponem

Aquaponem is a web components library using lit-element to create a shared design system for my personal projects.

Table of Contents

1. Getting Started
2. Installing
   1. Install via npm
   2. Install via cdn
3. Initialization
   1. Initialize All Components
   2. Initialize Single Component
4. Usage
5. Demos
6. Built With
7. Authors
8. License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development purposes.

Installing

Install Aquaponem via npm

npm i aquaponem

Install Aquaponem via url

Put this into your html and replace @latest with any version you want to use, ex. @0.0.5

Note: if you use script tag, please skip initialization and go to Usage section

<script type="module" src="https://unpkg.com/aquaponem@latest/build/dist/index.js"></script>

or

<script type="module" src='https://unpkg.com/aquaponem@latest/build/dist/app/index.js'></script>
<script type="module" src='https://unpkg.com/aquaponem@latest/build/dist/theme/index.js'></script>
<script type="module" src='https://unpkg.com/aquaponem@latest/build/dist/button/index.js'></script>

Initialization

All component initialization

import 'aquaponem';

Single component initialization

import { App, Theme, Button } from 'aquaponem';

Usage

<aq-app>
   <aq-theme dark>
      <aq-btn color="primary">Button</aq-btn>
   </aq-theme>
</aq-app>

Demos

1. Static
2. Vue - script tag
3. Vue - npm
4. Svelte - npm

Built With

• lit-element - A simple base class for creating fast, lightweight web components
• lit-html - An efficient, expressive extensible HTML templating library for JavaScript
• typescript - Typed JavaScript at Any Scale
• snowpack - The faster frontend build tool.

Authors

• Abdullah Calisir - Front End Engineer - github - linkedin

License

This project is licensed under the MIT License - see the LICENSE file for details