Installation

CIVICA HTML design system is a rich set of bootstrap based UI components.

Introduction

The main access point for information regarding the Design System can be found in the central 'Forge' Azure DevOps project. This can be found here. Within this project is a live wiki describing detailing the development and feedback process along with up to date instructions on installing and using the Design System components. Excerpts from this can be found below.

Download

The HTML component assets are available as compressed file archive (.zip) that can be downloaded and used in any project. The file can be found here.

<complete path of the downloaded tgz file>

Styles

Styles (ds-styles.css) can imported inside and in the bottom of the head tag

<head>
  ...
  <link href="ds-assets/css/ds-styles.css" rel="stylesheet" />
</head>

JavaScript or jQuery

JavaScript or jQuery files can imported inside and in the bottom of the body tag.

<body>
  ...
  <script src="ds-assets/js/popper.min.js"></script>  
  <script src="ds-assets/js/bootstrap.js"></script>
</body>

Third Party Components

There are several components for which we have utilized third party libraries such as Dropdown, Multiselect dropdown, Autocomplete, Editor and Input number. To include that into your project you need to follow below steps and add dependent files such as CSS and JS or jQuery.

Dropdown or Multiselect
CSS, JS files and script should be added in a following sequence.
<head>
  ...
  <!-- Dropdown and Multiselect CSS >
  <link href="ds-assets/css/select2.min.css" rel="stylesheet" />
  <link href="ds-assets/css/ds-styles.css" rel="stylesheet" />
  
</head> 

<body>
  ...
  <script src="ds-assets/js/popper.min.js"></script>  
  <script src="ds-assets/js/bootstrap.js"></script> 
  <!-- Dropdown and Multiselect JS >
  <script src="ds-assets/js/select2.min.js"></script> 
  <!-- Script to be added underneath the JS file >
  <script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
        $('.js-example-basic-filter').select2();

        function formatState(state) {
            if (!state.id) {
                return state.text;
            }
            var $state = $(' <span> ' + state.text + ' </span>');
            return $state;
        };
        $( ".js-example-group ").select2({
            templateResult: formatState
        });
    }); 
  </script>
</body>

Quill Editor
CSS, JS files and script should be added in a following sequence.
<head>
  ...
  <!-- Dropdown and Multiselect CSS >
  <link href="ds-assets/css/select2.min.css" rel="stylesheet" />
  <!-- Quill editor CSS >
  <link href="ds-assets/css/quill-editor.css" rel="stylesheet" />
  <link href="ds-assets/css/ds-styles.css" rel="stylesheet" />
</head> 

<body>
  ...
  <script src="ds-assets/js/popper.min.js"></script>  
  <script src="ds-assets/js/bootstrap.js"></script> 
  <!-- Quill editor JS >
  <script src="ds-assets/css/quill-editor.js"></script> 
  <!-- Script to be added underneath the JS file >
  <script>  
    var toolbarOptions = [ 
      // toggled buttons  
      [{  
        'header': [1, 2, 3, 4, 5, 6, false]
      }],
      [{
        'font': []
      }],
        ['bold', 'italic', 'underline', 'link'],
      [{
        'color': []
      }, {
        'background': []
      }],
      ['code-block'],
      ['image'], // custom button values
      [{
        'list': 'ordered'
      }, {
        'list': 'bullet'
      }],
      [{
        'align': []
      }],
      ['clean'] // remove formatting button
    ];
    var options = {
      theme: 'snow',
      modules: {
        toolbar: toolbarOptions,
        formula: true // Include formula module (needs extra css + Katex Script)
      },
    }
    var container = document.getElementById('editor');
    var editor = new Quill(container, options);  
  </script>
</body>

Autocomplete
JS file and script should be added in a following sequence and add autocomplete to the input field to make it work.
<body>
  ...
  <script src="ds-assets/js/popper.min.js"></script>  
  <script src="ds-assets/js/bootstrap.js"></script> 
  <!-- Autocomplete JS >
  <script src="ds-assets/css/autocomplete.js"></script> 
  <!-- Script to be added underneath the JS file >
  <script> 
    $("input[type='number']").inputSpinner()
  </script> 
  </body>


Input number
JS file should be added in a following sequence.<body>
  ...
  <script src="ds-assets/js/popper.min.js"></script>  
  <script src="ds-assets/js/bootstrap.js"></script> 
  <!-- Input number JS >
  <script src="ds-assets/css/input-number.js"></script> 
</body>

Usage

Each component can be imported individually so that you only bundle what you use.

<button type="button" class="btn btn-primary">Submit</button>

Important notes

It is recommended to put the ds-assets folder into the root folder
Need Bootstrap version 5.3 to use the library.
Custom styles can be added in css folder and declared at the end of the head tag underneath design system and third party stylesheet respectively, this will help overwrite design system styles.

  <head>
    ...
    <link href="ds-assets/css/ds-styles.css" rel="stylesheet" />
    <link href="ds-assets/css/[third-party-style.css]" rel="stylesheet" />
    <link href="ds-assets/css/[custom-style.css]" rel="stylesheet" />
    
  </head>

Similarly to custom styles, custom javascript or jquery files could be added into js folder and declared at the bottom of the body tag.

<body>
  ...
  <script src="ds-assets/js/popper.min.js"></script>  
  <script src="ds-assets/css/[third-party-js-or-jquery.js]"></script>
  <script src="ds-assets/css/[custom-js-or-jquery.js]"></script>
</body>

Introduction Download Styles JavaScript Third Party Components Usage Important notes