kyndryl_design_toolkit/README.md

A little help to make ui for kyndryl

# Kyndryl Design Toolkit - KDT

This toolkit is the first steps that will help you to create better services based on Kyndryl's corporate identity.

### Installation
In the project directory, you can run:

```sh
npm install kyndryl_design_toolkit
```

## Usage
### There are multiple ways how you want to use your KDT:

1. add the following in your index.html / main.html whichever is your main loading html:

```JS
<link rel="stylesheet" type="text/css" href="./node_modules/kyndryl_design_toolkit/kyndryl_DTK.css">
```
Make sure the path to your node_modules folder is correct. Then, in your component or file you can use it like the code below without importing it in your component separately

```JS
<div class="card-div">Info here</div>

```

2. OR, there would be a file like index.scss / main.scss / application.scss file which already imports all other css / scss files. You can include your css file there like:

```JS
@import "./node_modules/kyndryl_design_toolkit/kyndryl_DTK.css"

```
Then, in your component or file you can use it like the code below without importing it in your component separately same as step 1:


```JS
<div class="card-div">Info here</div>

```

## Components

### Buttons

![buttons](images/buttons.png)

```html
  <button class="primary-button"> Ingresar con W3ID </button>
  <button class="secondary-button"> Ingresar con W3ID </button>
  <button class="disable-button"> Disable button </button>
  <button class="ghost-button"> ghost button </button>
  <a class="link">Link Action</a>
```

### Navbar
![Navbar](images/navbar.png)

```JS
   <!-- navbar red-->
  <header class="navbar navbar-red">
    <a href="" class="navbar-red-title">Name of the app</a>
    <nav>
      <ul class="nav-links">
        <li><a class="navbar-red-link" href="">Link 1</a></li>
        <li><a class="navbar-red-link" href="">Link 2 </a></li>
        <li><a class="navbar-red-link" href="">Link 3</a></li>
      </ul>
    </nav>
  </header>

  <!-- navbar light-->
  <header class="navbar navbar-light">
    <a href="" class="navbar-light-title">Name of the app</a>
    <nav>
      <ul class="nav-links">
        <li><a class="navbar-light-link" href="">Link 1</a></li>
        <li><a class="navbar-light-link" href="">Link 2 </a></li>
        <li><a class="navbar-light-link" href="">Link 3</a></li>
      </ul>
    </nav>
  </header>

```

### Form
![form](images/form.png)

```html
  <!-- some inputs -->
  <form>
    <label for="">Label name </label><br>
    <input class="input-texbox" type="text" id="" name=""><br><br>
    <label for="">Label name </label><br>
    <input class="input-texbox-disabled" type="text" id="" name="" placeholder="Disable input"><br><br>
    <label for="">Label name </label><br>
    <textarea class="text-area" id="" name="" rows="4" cols="50">
    </textarea>
  </form>
```

### Badges

![badges](images/badges.png)

```html
  <!-- badges -->
  <div class="primary-badge">Primary</div>
  <div class="secondary-badge">Secondary</div>
  <div class="warning-badge">Warning</div>
  <div class="info-badge">Info</div>
  <div class="success-badge">Success</div>
  <div class="light-badge">Light</div>
```

### Card

![card](images/card.png)

```JS
   <div class="card-div">
    <p class="card-title">Card Title</p>
    <p class="card-text-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo mauris, pulvinar et tempus a, congue non libero. Nullam ac diam scelerisque, feugiat sem sit amet, pharetra enim. Nullam sodales lacinia est, non facilisis nibh sagittis sit amet. Fusce mollis, neque vel tempus ultrices, augue neque tristique leo, sit amet posuere elit est ut arcu. Integer fringilla at tellus sed luctus. Aliquam commodo vestibulum ipsum vel blandit. Vestibulum suscipit congue odio, non ornare libero pellentesque sed. Etiam pretium sagittis sagittis.
    </p>
  </div>
```

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## Contact

Stefanny Fracica - Stefanny.Fracica@kyndryl.com

Project Link: [https://github.kyndryl.net/Stefanny-Fracica/Kyndryl_design_toolkit](https://github.kyndryl.net/Stefanny-Fracica/Kyndryl_design_toolkit)