Skip to content

Latest commit

 

History

History
93 lines (63 loc) · 2.74 KB

INSTALLATION.md

File metadata and controls

93 lines (63 loc) · 2.74 KB
Raw

Installation, Building and Bundling Into Projects

IDS Dependencies

Before installing IDS for usage in your project, make sure to install its dependencies:

Download IDS Enterprise

Node Package Manager

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.

Adding the library to a project

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!

Building the component bundles

To manually build the contents of the distributable folder (dist/), run the following:

npm run build

Custom builds

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.