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