Getting Started with Smart HTML Elements

Depending on your preferences and the requirements of your project, you can:

Hosting Smart HTML Elements in Your Project

To host Smart HTML Elements in your project, you need to:

  • Download Smart HTML Elements
  • Add the CSS and JavaScript references.

Download Smart HTML Elements

After you download any of the Smart HTML Elements bundles, the folders listed below are hosted in your local repository.

FOLDERSCONTENTS
/demos The folder contains quick-start demo files. It is recommended that you open them through a web server instead of folder from the file system, because that approach breaks the Ajax data requests.
/source Contains the minified JavaScript files.
/source/styles Consists of the minified CSS files and theme images.
readme.htm Provides the Smart HTML Elements release notes.

Add CSS and JavaScript References

To use Smart HTML Elements your project, include the required JavaScript and CSS files.

Step 1 Extract the /source and /styles folders from the bundle archive and copy them to your web application root folder.

Step 2 Include the Smart HTML Elements Javascript and CSS files in the head tag of your HTML document..

Example
<!DOCTYPE html>  
 <html lang="en">  
   <head>  
    <link rel="stylesheet" href="source/styles/smart.default.css" type="text/css" />  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>  
    <script type="text/javascript" src="source/smart.elements.js"></script>  
   </head>  
   <body>  
    <smart-button id="button">Click Me</smart-button>  
   </body>  
 </html>  
Using with npm and import
  • Install smart-core and create a new index.htm file:
     <!DOCTYPE html>  
     <html>  
     <head>  
       <link rel="stylesheet" href="./node_modules/@smarthtmlelements/smart-core/source/styles/smart.default.css" type="text/css" />  
          <style>  
               smart-carousel {  
                    width: 100%;  
                    height: 600px;  
               }  
          </style>  
       <script type="module">  
               import './node_modules/@smarthtmlelements/smart-core/source/smart.core.js';  
       </script>  
       <script>  
        window.onload = function () {  
               const carouselSquare = document.getElementById('carouselSquare');   
               carouselSquare.dataSource = [  
                    {image: 'https://free-images.com/md/86a4/aroma_aromatic_beverage_bio.jpg'},  
                    {image: 'https://free-images.com/md/4138/artistic_conception_green_689793.jpg'},  
                    {image: 'https://free-images.com/md/9947/splashing_splash_aqua_water.jpg'},  
                    {image: 'https://free-images.com/lg/521e/common_snowdrop_galanthus_nivalis.jpg'},  
                    {image: 'https://free-images.com/lg/7bf2/snowdrop_blossom_bloom_1025078.jpg'}  
               ];  
           }  
       </script>  
     </head>  
     <body>  
        <smart-carousel id="carouselSquare" hide-arrows auto-play slide-show loop hide-indicators hide-buttons keyboard display-mode="3d" interval="10000"></smart-carousel>  
     </body>  
     </html>  
    
  • Install http-server
  • Run the server with this command prompt command: http-server
  • Navigate to http://localhost:8080/index.htm.

WebComponents polyfills should be the first referenced javascript files in the header of the page since not all browsers support Custom Elements natively.