# kyosei-bootstrap

> kyosei theme based on bootstrap

Latest version **1.1.2** (published 2017-09-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install kyosei-bootstrap
pnpm add kyosei-bootstrap
yarn add kyosei-bootstrap
bun add kyosei-bootstrap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2017-09-07 |
| First published | 2017-08-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | Huang An-Sheng |
| Maintainers | andy_huang |

## Links

- npm: https://www.npmjs.com/package/kyosei-bootstrap
- Repository: https://github.com/gotcha-io/bootstrap-kyosei-theme
- Homepage: https://github.com/gotcha-io/bootstrap-kyosei-theme#readme
- Issues: https://github.com/gotcha-io/bootstrap-kyosei-theme/issues
- npm.io page: https://npm.io/package/kyosei-bootstrap

## Dependencies (9)

- [wnumb](https://npm.io/package/wnumb.md) ^1.1.0
- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [dropzone](https://npm.io/package/dropzone.md) ^5.1.1
- [bootstrap](https://npm.io/package/bootstrap.md) ^3.3.7
- [simplemde](https://npm.io/package/simplemde.md) ^1.11.2
- [nouislider](https://npm.io/package/nouislider.md) ^10.1.0
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [daterangepicker](https://npm.io/package/daterangepicker.md) ^2.1.25
- [bootstrap-select](https://npm.io/package/bootstrap-select.md) ^1.12.4

## Recent versions

- 1.1.2 (latest) — 2017-09-07
- 1.1.0 — 2017-09-04
- 1.0.1 — 2017-08-31
- 1.0.0 — 2017-08-30

## README

# Kyosei Bootstrap

## Status
v1.1.0

## Documentation
[check here](http://kyosei.io/bootstrap-kyosei-theme/)

## Install
`npm install kyosei-bootstrap`

## Usage
1. Add kyosei-bootstrap.css & font-awesome.css
```htmlmixed=
<link rel="stylesheet" href="node_modules/kyosei-bootstrap/dist/css/kyosei-bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
```
2. Add Script tags
```htmlmixed=
<!-- Main Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Sliders ( Optional ) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<!-- Select ( Optional ) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- Date Picker ( Optional ) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
```


## What's included
```
kyosei-bootstrap/dist
├── css/
│   ├── kyosei-bootstrap.css
│   └── kyosei-bootstrap.min.css
└── js/
    └── bootstrap.min.js
```

## What's new

### switch
```htmlmixed=
<input class="switch" name="switch1" type="checkbox">
```

also can be used as radio type
```htmlmixed=
<input class="switch" name="switch2" type="radio">
<input class="switch" name="switch2" type="radio">
<input class="switch" name="switch2" type="radio">
```

### btn-secondary
Dark theme button
```htmlmixed=
<a href="#" class="btn btn-secondary">Secondary</a>
```

### card
Same rule as the `.card` from [bootstrap 4 beta](https://getbootstrap.com/docs/4.0/components/card/)

```htmlmixed=
<div class="card">
    <img class="card-img-top" src="https://unsplash.it/600/400" alt="Card image cap">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
```

#### card-inverse
Background of card with colors.
```htmlmixed=
<div class="card card-inverse card-secondary">
    <div class="card-body">
    <h4 class="card-title">Card Secondary</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
```

### jumbotron-inverse
Dark background jumbotron with white text, add a class named `jumbotron-inverse` to origin `jumbotron`.
```htmlmixed=
<div class="jumbotron jumbotron-inverse">
    <h1>Jumbotron-inverse</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
```

### footer
Add a class named `footer`.
```htmlmixed=
<footer class="footer">
    <h1>Footer</h1>
</footer>
```

#### footer-inverse
Dark theme of footer, add `footer-inverse` to footer.
```htmlmixed=
<footer class="footer footer-inverse">
    <h1>Footer</h1>
</footer>
```

### footer-footer
The footer inside the footer, which is used to display copyright&copy; information.
```htmlmixed=
<footer class="footer">
    <div class="footer-footer">
        <p>
            Kyosei.ai all right reserved
        </p>
    </div>
</footer>
```

### tools
Tools is used to present a collection of widget inside some div.
First, you will need to put `.tools` inside your html file.
```htmlmixed=
<div class="tools">

</div>
```

Add tool inside the tools
```htmlmixed=
<div class="tools">
    <a class="tool">
        <span class="tool-icon"><i class="fa fa-heart" aria-hidden="true"></i></span>
        <span class="tool-name">Like</span>
    </a>
    <a class="tool">
        <span class="tool-icon"><i class="fa fa-share" aria-hidden="true"></i></span>
        <span class="tool-name">Share</span>
    </a>
</div>
```

### tools-right
You can add tools-right class to the tools, which set `text-align: center`.
```htmlmixed=
<div class="tools tools-right">

</div>
```


## Reference
[Bootstrap 3.3](https://getbootstrap.com/docs/3.3/)
[NoUiSlider](https://refreshless.com/nouislider/)
[DateRangePicker](http://www.daterangepicker.com/)
[BootstrapSelect](https://silviomoreto.github.io/bootstrap-select/)

---
_Source: https://npm.io/package/kyosei-bootstrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._