Before installing IDS for usage in your project, make sure to install its dependencies:
You can use NPM (or Yarn) to install from the global NPM registry:
npm install --save ids-enterprise@latest
You can also use ids-enterprise@dev
for a nightly (and potentially unstable) development build.
After installation, the pre-built files are accessible in ./node_modules/ids-enterprise/dist
. When you use npm the needed dependencies are included automatically.
Include the IDS dependencies and the library itself in your page's <head>
tag:
<head>
<link rel="stylesheeet" href="css/theme-new-light.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/sohoxi.js"></script>
</head>
Next, establish some IDS components using the appropriate HTML markup and CSS styles. For a full list of available components, see our component documentation. Below is an example of what's necessary to create a simple IDS Button component inside of a twelve column layout:
<div class="row">
<div class="twelve columns">
<button id="my-button" class="btn-primary">
<span>This is My Button</span>
</button>
</div>
</div>
Finally, in a footer section below the markup on your page, add a <script>
tag with some Javascript code that will invoke the Javascript interactions available for each IDS component. One way to do this is to call the generic Initializer on the <body>
tag (or whatever block element in which you want to scope IDS):
<script type="text/javascript">
$('body').initialize();
</script>
It's also possible to manually initialize each individual component:
$('#my-button').button();
If you've got some specific Javascript code you'd like to run after IDS completely initializes, simply add an event listener for IDS's generic initialized
event on the <body>
tag:
<script type="text/javascript">
$('body').on('initialized', function () {
// extra code runs here
});
</script>
At this point, IDS should be completely setup in your project!
To manually build the contents of the distributable folder (dist/
), run the following:
npm run build
It's also possible to run a custom build of IDS with your choice of components. The custom bundler can be run with:
npm run build -- --components=button,input,masks,popupmenu,listview
Then check the dist
folder for the output.