[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/collection/HTMLElements/smarthtmlelements-core) Best Material Components for the Web ----------------------------------------------------------------------------------------------------- [Grid Web Component](https://htmlelements.com/demos/) Build responsive, mobile-first projects on the Web with the most advanced front-end component library ----------------------------------------------------------------------------------------------------- What is Smart HTML Elements? ---------------------------- Smart HTML Elements represents a framework based on Javascript, HTML and CSS for building web-based applications that run on PC, Touch and Mobile devices. Smart HTML Elements includes more than 40 UI components. All components are designed from ground-up and based on a powerful common core. The framework core provides fundamental capabilities like support for HTML Element extensions and inheritance, HTML Templates , Data Binding, Event handling and routing, property change notifications, device and browser compatibility detection and adjustments. Works across devices and browsers --------------------------------- Smart HTML Elements takes the JavaScript & HTML UI development to a new level. It is platform independent, cross-browser compatible and works on PC and mobile devices. Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript library based on native technologies.The product supports all major desktop and mobile web browsers - Internet Explorer 11.0, Edge, Firefox, Safari, Opera, Google Chrome. [Professional/Enterprise and Community Comparison](https://www.htmlelements.com/docs/community-and-enterprise/) [Theme Builder](https://www.htmlelements.com/themebuilder/) Web Components -------------- A suite of polyfills supporting the Web Components specs is included in our examples. These polyfills ensure that Custom Elements are supported in all browsers. Custom Elements --- | Component | Status | Issues | ----------| ------ | ------ | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+accordion) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+button) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+calendar) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+card) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-carousel) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+toggle+button) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+check+box) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+grid) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+input) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+list+box) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+power+button) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+progress+bar) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+radio+button) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+repeat+button) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+scroll+bar) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+switch+button) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sortable) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+table) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+tabs) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+toggle+button) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+tooltip) | [``](https://github.com/HTMLElements/smart-elements-community) | [![Published on npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-elements-community.svg)](https://www.npmjs.com/package/@smarthtmlelements/smart-elements-community) | [*Issues*](https://github.com/HTMLElements/smart-elements-community/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+toggle+button) Download and Installation ------------------------- [Download Smart HTML Elements](http://www.htmlelements.com/download/) * ### The SDK files are located in the jqwidgets 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: Core Smart HTML Elements framework * smart.elements.js: Smart HTML Elements bundle * Stylesheet files. Include at least one stylesheet Theme file and the images folder: * styles/smart.default.css: Stylesheet for the base 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: https://www.htmlelements.com/docs/scripts-dependencies/ * ### Examples The index.htm file starts the demo/examples browser Individual UI components examples are located in the /demos directory * ### Documentation Browse the documentation https://www.htmlelements.com/docs/ * ### Other files The /scripts, /images, /styles folders contain the files used by the demos only.