libosslisting/README.md

Library for Open-Source Software permission/condition/limitation listing

# Libosslisting
Library for Open-Source Software permission/condition/limitation listing

Works specifically with Bulma's columns. Tile support will be coming in a future edition (Some things do oddly break with Tiles)

## Using This Library
Installation: `npm i libosslisting` 

Generic Classes: 
| Class Name | What it does | Example of use |
| ---------- | ------------ | -------------- |
| lossl      | Initiates the library | `<div class="columns lossl">` |
| .permissions | Sets the permissions color scheme | `<div class="column permissions">`
| .conditions | Sets the conditions color scheme | `<div class="column conditions">` |
| .limitations | Sets the limitations color scheme | `<div class="column limitations">` |
| .has-text-colored | Colors ALL of the text with selected color scheme | `<div class="columns lossl has-text-colored">` |
| .has-list-colored | Colors the list text with selected color scheme | `<div class="columns lossl has-list-colored">` | 
| .is-head | Differentiates the heading with body | `<div class="is-head">` |
| .is-body | Differentiates the body with the heading | `<div class="is-body">` |
| .is-side-list | Puts the whole thing on the side `EXPERIMENTAL DO NOT USE` | `<div class="columns lossl is-side-list">` |

> This is NOT completed, later editions will have more optional sizes.

Border Classes:
| Class Name | What it does | Example of use |
| ---------- | ------------ | -------------- |
| .b-1       | Level 1 border radius | `<div class="is-body b-1">` |
| .b-t-1       | Level 1 top border radius | `<div class="is-body b-t-1">` |
| .b-b-1       | Level 1 bottom border radius | `<div class="is-body b-b-1">` |
| .b-tr-1       | Level 1 top-right border radius | `<div class="is-body b-tr-1">` |
| .b-br-1       | Level 1 bottom-right border radius | `<div class="is-body b-br-1">` |
| .b-tl-1       | Level 1 top-left border radius | `<div class="is-body b-t-1">` |
| .b-bl-1       | Level 1 bottom-left border radius | `<div class="is-body b-b-1">` |
| .b-circle | Has the border radius at 100% | `<div class="is-body b-circle">` |
| .with-b | Has black border | `<div class="is-body with-b">` |
| .with-b-blr | Has black border on bottom, left, and right | `<div class="is-body with-b">` |
| .with-b-tlr | Has black border on top, left, and right sides | `<div class="is-body with-b">` |
| .with-b-tr | Has black border on top and right sides | `<div class="is-body with-b">` |
| .with-b-br | Has black border on bottom and right sides| `<div class="is-body with-b">` |
| .with-b-tl | Has black border on top and left sides| `<div class="is-body with-b">` |
| .with-b-bl | Has black border on bottom and left sides | `<div class="is-body with-b">` |
| .with-b-b | Has black border on bottom side | `<div class="is-body with-b">` |
| .with-b-t | Has black border on top side| `<div class="is-body with-b">` |

## Customization
By default, Libosslisting uses the success, info, and danger values found in the [Bulma Documentation](https://bulma.io/documentation/overview/colors/). When customizing the system, importing the library using `@import` wont work. This is a bug, and is in fixing. Until that is fixed, you can instead use `@use`. 

```scss
@use "path/to/libosslisting" with ($perm: #005500, $cond: #000055, $limi: #550000)
```

| Variable Name | Default Value |
| --- | --- | 
| `$perm` |  hsl(141, 53%, 53%) |
| `$cond` | hsl(204, 86%, 53%) |
| `$limi` | hsl(348, 100%, 61%) |