https://github.com/MaritzSTL/chameleon

Chameleon Web Components - A collection of lightweight, unidirectional, framework-agnostic elements based on the Chameleon Design System
https://github.com/MaritzSTL/chameleon

design-system lit-element lit-html webcomponents

Last synced: about 22 hours ago
JSON representation

Chameleon Web Components - A collection of lightweight, unidirectional, framework-agnostic elements based on the Chameleon Design System

• Host: GitHub
• URL: https://github.com/MaritzSTL/chameleon
• Owner: MaritzSTL
• License: mit
• Created: 2019-07-09T22:05:28.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T19:53:38.000Z (almost 2 years ago)
• Last Synced: 2024-10-31T07:35:18.466Z (5 days ago)
• Topics: design-system, lit-element, lit-html, webcomponents
• Language: JavaScript
• Homepage: https://chameleon-design-system.netlify.app
• Size: 11.3 MB
• Stars: 27
• Watchers: 10
• Forks: 7
• Open Issues: 53
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-components - Chameleon UI

README

        


  



[![Netlify Status](https://api.netlify.com/api/v1/badges/1dec763c-8977-46bc-b008-140b158960f6/deploy-status)](https://app.netlify.com/sites/chameleon-design-system/deploys)

[![CircleCI](https://circleci.com/gh/MaritzSTL/chameleon/tree/master.svg?style=shield)](https://circleci.com/gh/MaritzSTL/chameleon/tree/master)

[![codecov](https://codecov.io/gh/MaritzSTL/chameleon/branch/master/graph/badge.svg)](https://codecov.io/gh/MaritzSTL/chameleon)

# Chameleon Web Components

```js script

export default {

  title: "Intro|Chameleon Web Components",

  options: { selectedPanel: "storybookjs/docs/panel" },

};

```

Chameleon Web Components - A collection of lightweight, unidirectional, framework-agnostic elements based on the Chameleon Design System.

## Prerequisites

The Chameleon project relies on some awesome tools in order to work properly. You'll want to have the following installed:

- [Node.js](https://nodejs.org) - JavaScript runtime built on Chrome's V8 JavaScript Engine (this project uses v12.7.0)

- [Git](https://git-scm.com/downloads) - Version control software for cloning this repository

- [NVM (Node Version Manager)](https://github.com/nvm-sh/nvm) - A bash script to manage multiple active node.js versions

- [Yarn](https://yarnpkg.com/lang/en/) - Package manager used for Yarn workspaces

## Setup

**Note:** Please ensure you have all the prerequisite software installed before running any of these commands!

To setup Chameleon for development, run the following in your folder of choice:

```bash

git clone [email protected]:MaritzSTL/chameleon.git && cd chameleon && nvm use && yarn setup

```

Chameleon uses storybook for development, so when you're ready to get going just run:

```bash

yarn dev

```

To build each element and package for distribution, run:

```bash

yarn build

```

If something looks wrong or you need to refresh your dependencies for whatever reason you can run:

```bash

yarn clean

```