Insites Docs Web Components Getting Started

Getting Started

Published on February 01, 2021, updated on April 14, 2021

Insites framework allows you to create world class web applications using elements through a complete design and development eco-system.

Installation

Start using Insites on your projects by simply importing these files on your template.
 

CDN

Add these to your <head> tag.

Code Snippet

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
<script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>
Using the Latest Version

Using this version will keep your project up to date with the latest release of Insites Components.

Code Snippet

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
<script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>
Specific Version

You can put specific version of Insites Components in your project to avoid breaking change or unexpected changes when we release an update.

Code Snippet

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2.1.0/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2.1.0/css/insites.css" />
<script type="module" src="https://components.insites.io/v2.1.0/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2.1.0/insites.js"></script>
Using Specific CSS

You can choose which styles you only need for your page with specific CSS resource.

Code Snippet

<!-- Data Display -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-data-display.css" />

<!-- Data Display -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-data-display.css" />

<!-- Data Entry -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-data-entry.css" />

<!-- Feedback -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-feedback.css" />

<!-- Other -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-other.css" />

<!-- Shell -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-shell.css" />

<!-- Table -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-table.css" />