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. 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.

@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%) |