Dealogic Styleguide

section menu

Getting Started

Dealogic UI Components are a set of small pieces that can fit into a framework your team chooses to build with. They are designed to work inside all modern JavaScript frameworks, or to work on their own with no framework at all. Follow the steps below to get started!

Installation

Make sure Dealogic UI Toolkit styles and scripts are available to your page. See the installation steps.

"Hello World!" Example

Add <dl-button>Hello World!</dl-button> in your page to render “Hello World!” button.

Example

Hello World!

Code

<dl-button>Hello World!</dl-button>

Sample Page

<!doctype html>
  <html>
    <head>

      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Dealogic UI Toolkit: Hello World!</title>
     
      <!-- Dealogic UI Toolkit CSS -->
      <link rel="stylesheet" href="https://connect-cdn.dealogic.com/uitoolkit/6-5-0/styles/light.css">

      <!-- Dealogic UI Toolkit Scripts -->
      <script type="module" src="https://connect-cdn.dealogic.com/uitoolkit/6-5-0/scripts/dealogicui/dealogicui.esm.js"></script>
 
    </head>

    <!-- "dealogic" class on HTML tag to set context for styles -->
    <body class="dealogic">
       
      <dl-button>Hello World!</dl-button>
     
    </body>
</html>

Help, Questions or Feedback?

  • If something doesn't work - talk to us
  • If something is missing - talk to us

Talk to us via UI Toolkit Teams channel and uitoolkit@dealogic.com.

Would you like to contribute?

If you have a good idea – contribute – UI Toolkit source code is available via Git:

  • Create a separate branch from the develop branch following the naming conversion: feature/develop/[yourfeaturename]
  • Commit and push your changes to this new branch
  • If you're ready, create a pull request from your branch to the develop branch
  • The UI Toolkit team will review your changes and merge them if everything is fine