https://github.com/conectate/ct-elements
LitElement Web Components
https://github.com/conectate/ct-elements
conectate-elements javascript-modules lit-element litelement web-components
Last synced: 8 months ago
JSON representation
LitElement Web Components
- Host: GitHub
- URL: https://github.com/conectate/ct-elements
- Owner: Conectate
- License: bsd-3-clause
- Created: 2020-09-07T22:56:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-29T16:55:33.000Z (8 months ago)
- Last Synced: 2025-04-30T05:07:20.613Z (8 months ago)
- Topics: conectate-elements, javascript-modules, lit-element, litelement, web-components
- Language: TypeScript
- Homepage:
- Size: 1.53 MB
- Stars: 14
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Conectate Elements
> IMPORTANT: The Conectate Elements are a work in progress and subject to major changes.
The Conectate Elements (CT) are a collection of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) maintained by [@herberthobregon](https://github.com/herberthobregon) that implement [Material Design](https://material.io/design/).
## Components
| Component | Status | Issues |
| ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-button) | [](https://www.npmjs.com/package/@conectate/ct-button) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-button%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-card) | [](https://www.npmjs.com/package/@conectate/ct-card) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-card%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-chartjs) | [](https://www.npmjs.com/package/@conectate/ct-chartjs) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-charjs%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-checkbox) | [](https://www.npmjs.com/package/@conectate/ct-checkbox) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-checkbox%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-collapse) | [](https://www.npmjs.com/package/@conectate/ct-collapse) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-collapse%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-date) | [](https://www.npmjs.com/package/@conectate/ct-date) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-date%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-dialog) | [](https://www.npmjs.com/package/@conectate/ct-dialog) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-dialog%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-helpers) | [](https://www.npmjs.com/package/@conectate/ct-helpers) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-helpers%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-icon) | [](https://www.npmjs.com/package/@conectate/ct-icon) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-icon%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-img) | [](https://www.npmjs.com/package/@conectate/ct-img) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-img%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-input) | [](https://www.npmjs.com/package/@conectate/ct-input) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-input%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-lit) | [](https://www.npmjs.com/package/@conectate/ct-lit) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-lit%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-loading-bar) | [](https://www.npmjs.com/package/@conectate/ct-loading-bar) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-loading-bar%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-loading-placeholder) | [](https://www.npmjs.com/package/@conectate/ct-loading-placeholder) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-loading-placeholder%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-menu) | [](https://www.npmjs.com/package/@conectate/ct-menu) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-menu%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-radio) | [](https://www.npmjs.com/package/@conectate/ct-radio) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-radio%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-router) | [](https://www.npmjs.com/package/@conectate/ct-router) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-router%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-scroll-threshold) | [](https://www.npmjs.com/package/@conectate/ct-scroll-threshold) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-scroll-threshold%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-select) | [](https://www.npmjs.com/package/@conectate/ct-select) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-select%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-spinner) | [](https://www.npmjs.com/package/@conectate/ct-spinner) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-spinner%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-tabs) | [](https://www.npmjs.com/package/@conectate/ct-tabs) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-tabs%22) |
| [``](https://github.com/conectate/ct-elements/tree/master/packages/ct-tooltip) | [](https://www.npmjs.com/package/@conectate/ct-tooltip) | [_Issues_](https://github.com/conectate/ct-elements/issues?q=is%3Aissue+is%3Aopen+label%3A%22Component%3A+ct-tooltip%22) |
## Quick start with `ct-button`
#### 1) Install
Install a component (ct-button for example) from NPM:
```sh
npm i @conectate/ct-button @webcomponents/webcomponentsjs
# or
yarn install @conectate/ct-button @webcomponents/webcomponentsjs
```
#### 2) Write Raw HTML and JavaScript (without frameworks)
Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as ``:
```html
My Example App
Click Me!
// Importing this module registers <ct-button> as an element that you
// can use in this page.
//
// ====================================================================
// Note this import is a BARE MODULE specifier, so it must be converted
// to a path using a server such as es-dev-server.
// ====================================================================
import '@conectate/ct-button';
// Standard DOM APIs work with Web Components just like they do for
// built-in elements.
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
alert('You clicked!');
});
```
#### 3) Serve
Serve your HTML with any server or build process that supports **bare module specifier resolution** (see next section):
```sh
npm install -g es-dev-server
es-dev-server --node-resolve
```
## Bare module specifiers
The Conectate Elements are published as standard [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) that use _bare module specifiers_. Bare module specifiers are not yet supported by browsers, so it is necessary to use a tool that transforms
them to a _path_ (for example from `@conectate/ct-button` to `./node_modules/@conectate/ct-button/ct-button.js`).
Two great choices for tools that do this are:
- During local development, use open-wc's [`es-dev-server`](https://open-wc.org/developing/es-dev-server.html) with the `--node-resolve` flag.
- For your production deployment, build your application with [Webpack](http://webpack.js.org/) or [Rollup](https://rollupjs.org/guide/en/) with the [`rollup-plugin-node-resolve`](https://github.com/rollup/rollup-plugin-node-resolve) plugin.
## Fonts
Most applications should include the following tags in their main HTML file to ensure that text and icons
render correctly:
```html
```
The Conectate Elements default to using the [Roboto](https://fonts.google.com/specimen/Roboto) font for text. This fonts are _not_ automatically loaded, so it is the application's responsiblity to ensure that they are loaded.
## Supporting older browsers
The Conectate Elements use modern browser features that are natively supported in the latest versions of Chrome, Safari, Firefox, and Edge. IE11 and some older versions of other browsers are also supported, but they require additional build steps and polyfills.
Feature
Chrome
Safari
Firefox
Edge
IE11
Web Components
*
Modules
*
ES2015
*
#### Web Components
To support Web Components in IE11 and other older browsers, install the [Web Components Polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs):
```sh
npm install @webcomponents/webcomponentsjs
```
And include the `webcomponents-loader.js` script in your HTML, which detects when polyfills are needed and loads them automatically:
```html
```
#### Modules
To support IE11 or other older browsers that do not support JavaScript modules, you must transform JavaScript modules to classic JavaScript scripts. [Webpack](http://webpack.js.org/) or [Rollup](https://rollupjs.org/guide/en/) is a popular tool that can consume JavaScript modules and produce a number of other formats, such as AMD.
#### ES2015
If you support IE11 or other older browsers that do not support the latest version of JavaScript, you must _transpile_ your application to ES5. [Babel](https://babeljs.io/) is a popular tool that does this. You can integrate Babel transpilation into a Rollup or Webpack.