libosslisting

    1.1.0 • Public • Published

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

    Install

    npm i libosslisting

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    BSD-3-Clause

    Unpacked Size

    11.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar