Getting Started

Published on February 01, 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" />