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