Skip to content

Conectate/ct-elements

Repository files navigation

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 maintained by @herberthobregon that implement Material Design.

Components

Component Status Issues
<ct-button> Published on npm Issues
<ct-card> Published on npm Issues
<ct-chartjs> Published on npm Issues
<ct-checkbox> Published on npm Issues
<ct-collapse> Published on npm Issues
<ct-date> Published on npm Issues
<ct-dialog> Published on npm Issues
<ct-helpers> Published on npm Issues
<ct-icon> Published on npm Issues
<ct-img> Published on npm Issues
<ct-input> Published on npm Issues
<ct-lit> Published on npm Issues
<ct-loading-bar> Published on npm Issues
<ct-loading-placeholder> Published on npm Issues
<ct-menu> Published on npm Issues
<ct-radio> Published on npm Issues
<ct-router> Published on npm Issues
<ct-scroll-threshold> Published on npm Issues
<ct-select> Published on npm Issues
<ct-spinner> Published on npm Issues
<ct-tabs> Published on npm Issues
<ct-tooltip> Published on npm Issues

Quick start with ct-button

1) Install

Install a component (ct-button for example) from NPM:

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 <button>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example App</title>

    <!-- Add support for Web Components to older browsers. -->
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    <!-- Your application must load the Roboto and Material Icons fonts. -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <body>
    <!-- Use Web Components in your HTML like regular built-in elements. -->
    <ct-button id="myButton" raised>Click Me!</ct-button>

    <!-- The Conectate Elements use standard JavaScript modules. -->
    <script type="module">
      // 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!');
      });
    </script>
  </body>
</html>

3) Serve

Serve your HTML with any server or build process that supports bare module specifier resolution (see next section):

npm install -g es-dev-server
es-dev-server --node-resolve

Bare module specifiers

The Conectate Elements are published as standard JavaScript 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:

Fonts

Most applications should include the following tags in their main HTML file to ensure that text and icons render correctly:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />

The Conectate Elements default to using the 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 Yes Yes Yes Yes Polyfill *
Modules Yes Yes Yes Yes Transform *
ES2015 Yes Yes Yes Yes Transpile *

Web Components

To support Web Components in IE11 and other older browsers, install the Web Components Polyfills:

npm install @webcomponents/webcomponentsjs

And include the webcomponents-loader.js script in your HTML, which detects when polyfills are needed and loads them automatically:

<!-- Add support for Web Components to IE11. -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Modules

To support IE11 or other older browsers that do not support JavaScript modules, you must transform JavaScript modules to classic JavaScript scripts. Webpack or Rollup 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 is a popular tool that does this. You can integrate Babel transpilation into a Rollup or Webpack.