Create your own Modern Mobile-first Custom Elements or use our UI Toolkit

What is Smart HTML Elements?

  • Framework similar to Polymer and based on Javascript, HTML and CSS which allows you to create your own Custom Elements.

    The Framework's default class is called Smart.BaseElement. The Smart.BaseElement class extends the native HTMLElement class adding additional features like:
    • Data Binding
    • Reactivity System
    • Cross-Browser and Device compatible event system
    • Event Routing
    • Style Change Notifications
    • Resize Notifications
    • Browser and Device detection API
    • Property Type detection API
    • Observable Objects
    • Observable Arrays
    • Localization
    • Property Change notifications
    • Typed properties
    • Templates
    • Property Bindings
    • Nested Elements with Automatic Property and Event Bindings
    • Automatic Event Listeners and Memory Leak resolutions
    • Lifecycle callbacks
    • Date and Numeric API for Engineering and Scientific Apps
    • Conditional Formatting API a.k.a. MS Excel
    • Data Export to Excel, CSV, TSV, HTML and PDF
    Visit: https://www.htmlelements.com/docs/base-element/ for additional details about it.


  • UI Toolkit with Custom Elements created by our team. All components are designed from ground-up and based on a powerful common core.


    See the Pen Button Events by Boyko Markov (@boyko-markov) on CodePen.

.

Works across devices and browsers

Supports Edge, Firefox, Safari, Opera, Google Chrome for Desktop and Mobile.

Download and Installation

Download Smart HTML Elements
  • The SDK files are located in the source directory

    In general you need to use files from this directory only.

    Files list & description:

    Files required in all projects using the SDK
    • smart.element.js: Smart HTML Elements framework
    • Stylesheet files. Include at least one stylesheet Theme file and the images folder:
    • styles/smart.default.css: Stylesheet for the┬ádefault Material Theme. The smart.default.css file should be always included in your project.
    • styles/images: contains images referenced in the stylesheet files
    Files for elements. Include depending on project needs:
    • smart.core.js: Free Custom Elements
    • smart.elements.js: Commercial Custom Elements
  • Examples

    Individual Web components examples are located in the /demos folder. The Angular examples are located in the /angular folder.
  • Documentation

    Browse the documentation online: https://www.htmlelements.com/docs/
  • Other files

    The /scripts, /images, /styles folders contain the files used by the demos only.